PHP Classes

How to Implement a Single Page Application with Multiple Micro-Frontends to Manage Each Part of the Page Learning from the Package App MFE: Single-page application with micro-frontends

Recommend this page to a friend!
  Info   Documentation   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2024-10-23 (7 hours ago) RSS 2.0 feedNot yet rated by the usersTotal: Not yet counted Not yet ranked
Version License PHP version Categories
app-mfe 1.0MIT/X Consortium ...5PHP 5, Design Patterns, Applications
Description 

Author

This package shows a single-page application with micro-frontends.

It provides several micro-frontends implemented with JavaScript code to compose a single-page application with several parts.

Each micro-frontend sends AJAX calls to a separate backend implemented with PHP code.

Em Português:

Este repositório apresenta um modelo didático de como realizar a integração de Single Page Applications (SPAs) independentes em uma única aplicação host, utilizando o conceito de microfrontends.

Cada SPA possui seu próprio backend, permitindo escalabilidade e autonomia no desenvolvimento.

Picture of Rodrigo Faustino
  Performance   Level  
Name: Rodrigo Faustino <contact>
Classes: 28 packages by
Country: Brazil Brazil
Innovation award
Innovation award
Nominee: 18x

Winner: 2x

Documentation

Microfrontend Projeto

O que é Microfrontend?

Microfrontend é uma abordagem arquitetural que aplica os conceitos de microserviços ao desenvolvimento frontend. Em vez de criar um frontend monolítico, o projeto é dividido em pequenas partes independentes (microfrontends), cada uma responsável por um conjunto específico de funcionalidades e que podem ser desenvolvidas, implantadas e atualizadas de forma autônoma.

Essa abordagem permite que diferentes equipes trabalhem em componentes distintos sem se preocupar com conflitos de código ou deploys que afetem outras partes do sistema.

Importância e Vantagens:

  • Desenvolvimento Independente: Equipes podem trabalhar em diferentes partes do projeto sem interferir umas nas outras.
  • Deploy Independente: Atualizações e correções podem ser feitas sem afetar todo o sistema.
  • Escalabilidade: Melhor gerenciamento de recursos e escalabilidade ao dividir funcionalidades.
  • Manutenção Simplificada: Mais fácil de manter e atualizar partes específicas do sistema sem interromper o funcionamento geral.

Estrutura do Projeto Atual

O projeto atual é composto por um backend único e dois microfrontends:

  1. Backend:

    - Desenvolvido para gerenciar as operações de dados comuns, como CRUD para usuários e produtos. - Deve ser iniciado na porta `8080`. - Antes de iniciar o backend, é necessário instalar as dependências via Composer para que o PHP entenda os namespaces. Isso significa que o Composer é uma dependência obrigatória para o backend.

  2. Microfrontend 1 - front-pessoas:

    - Um frontend dedicado ao CRUD de usuários. - Se comunica diretamente com o backend para operações específicas de usuários.

  3. Microfrontend 2 - front-produtos:

    - Um frontend dedicado ao CRUD de produtos. - Se comunica diretamente com o backend para operações específicas de produtos.

  4. Frontend Geral:

    - Localizado na raiz do projeto, serve como o ponto de entrada principal para os microfrontends. - Inclui a configuração e roteamento para interagir com os microfrontends de maneira integrada.

Como Iniciar o Projeto

Backend

  1. Certifique-se de ter o Composer instalado em sua máquina.
  2. Na raiz e instale as dependências:
composer install
  1. Inicie o servidor backend na porta `8080` :
    cd backend 
    php -S localhost:8080 
    
    ### Frontend Geral e Microfrontends
  2. Certifique-se de estar na raiz do projeto para iniciar o frontend geral.
  3. Recomendado subir o servidor na porta `5500` (em outro terminal):
    php -S localhost:5500
    
  4. As pastas `front-pessoas`, e `front-produtos`, serão importadas automaticamente pelo arquivo de routas principal (assets/js/router.js) o qual importará as aplicações independentes pessoas e produtos que podem ter sido criadas por equipes diferentes.

Servidor da Raiz e Backend

  • Servidor da Raiz: Suba um servidor na raiz do projeto na porta `5500` para servir o frontend geral.
  • Servidor Backend: Suba outro servidor dentro da pasta `backend` na porta `8080`. Se necessário, pode configurar para funcionar na porta `80` para um acesso mais padrão.

  Files folder image Files (37)  
File Role Description
Files folder image.vscode (1 file)
Files folder imageassets (3 directories)
Files folder imagebackend (1 file, 5 directories)
Files folder imagefront-pessoas (1 file, 1 directory)
Files folder imagefront-produtos (1 file, 2 directories)
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login HTML file index.html Doc. Documentation
Accessible without login Plain text file readme.md Doc. Documentation

  Files folder image Files (37)  /  .vscode  
File Role Description
  Accessible without login Plain text file settings.json Data Auxiliary data

  Files folder image Files (37)  /  assets  
File Role Description
Files folder imagecss (3 files)
Files folder imagejs (4 files, 1 directory)
Files folder imagejson (1 file)

  Files folder image Files (37)  /  assets  /  css  
File Role Description
  Accessible without login Plain text file materialize.css Data Auxiliary data
  Accessible without login Plain text file materialize.min.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files (37)  /  assets  /  js  
File Role Description
Files folder imagecomponents (1 directory)
  Accessible without login Plain text file app.js Data Auxiliary data
  Accessible without login Plain text file materialize.js Data Auxiliary data
  Accessible without login Plain text file materialize.min.js Data Auxiliary data
  Accessible without login Plain text file router.js Data Auxiliary data

  Files folder image Files (37)  /  assets  /  js  /  components  
File Role Description
Files folder imagelib (1 file)

  Files folder image Files (37)  /  assets  /  js  /  components  /  lib  
File Role Description
  Accessible without login Plain text file FetchData.js Data Auxiliary data

  Files folder image Files (37)  /  assets  /  json  
File Role Description
  Accessible without login Plain text file menu.json Data Auxiliary data

  Files folder image Files (37)  /  backend  
File Role Description
Files folder imageControllers (2 files)
Files folder imageDatabase (3 files)
Files folder imageHttp (1 file)
Files folder imageModel (2 files)
Files folder imageRotas (2 files)
  Accessible without login Plain text file index.php Aux. Configuration script

  Files folder image Files (37)  /  backend  /  Controllers  
File Role Description
  Plain text file ProdutoController.php Class Class source
  Plain text file UsuarioController.php Class Class source

  Files folder image Files (37)  /  backend  /  Database  
File Role Description
  Accessible without login Plain text file agenda.sqbpro Data Auxiliary data
  Accessible without login Plain text file config.php Aux. Configuration script
  Plain text file Database.php Class Class source

  Files folder image Files (37)  /  backend  /  Http  
File Role Description
  Plain text file HttpHeader.php Class Class source

  Files folder image Files (37)  /  backend  /  Model  
File Role Description
  Plain text file Produtos.php Class Class source
  Plain text file Usuario.php Class Class source

  Files folder image Files (37)  /  backend  /  Rotas  
File Role Description
  Plain text file rotas.php Class Class source
  Plain text file Router.php Class Class source

  Files folder image Files (37)  /  front-pessoas  
File Role Description
Files folder imagejs (1 file, 1 directory)
  Accessible without login HTML file index.html Doc. Documentation

  Files folder image Files (37)  /  front-pessoas  /  js  
File Role Description
Files folder imagecomponents (4 files)
  Accessible without login Plain text file app.js Data Auxiliary data

  Files folder image Files (37)  /  front-pessoas  /  js  /  components  
File Role Description
  Accessible without login Plain text file FetchService.js Data Auxiliary data
  Accessible without login Plain text file UpdateUserForm.js Data Auxiliary data
  Accessible without login Plain text file UserForm.js Data Auxiliary data
  Accessible without login Plain text file UsersList.js Data Auxiliary data

  Files folder image Files (37)  /  front-produtos  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file, 1 directory)
  Accessible without login HTML file index.html Doc. Documentation

  Files folder image Files (37)  /  front-produtos  /  css  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files (37)  /  front-produtos  /  js  
File Role Description
Files folder imagecomponents (4 files)
  Accessible without login Plain text file app.js Data Auxiliary data

  Files folder image Files (37)  /  front-produtos  /  js  /  components  
File Role Description
  Accessible without login Plain text file FetchService.js Data Auxiliary data
  Accessible without login Plain text file ProdutoForm.js Data Auxiliary data
  Accessible without login Plain text file ProdutosList.js Data Auxiliary data
  Accessible without login Plain text file UpdateProdutoForm.js Data Auxiliary data

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads  
 100%
Total:0
This week:0