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 (3 months ago) RSS 2.0 feedNot enough user ratingsTotal: 44 All time: 10,834 This week: 29Up
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.

Innovation Award
PHP Programming Innovation award nominee
October 2024
Number 8
Single-page Web applications show all the user interfaces of an application on the same page.

This way, the user does not have to wait for a new page to load when the users access a different part of the application, thus providing a better user experience.

Single-page applications can be implemented using micro-frontends in JavaScript to manage each part of the user interface.

This package shows how to implement a single-page application using multiple micro-frontends.

Manuel Lemos
Picture of Rodrigo Faustino
  Performance   Level  
Innovation award
Innovation award
Nominee: 23x

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

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 Download Rankings  
 100%
Total:44
This week:0
All time:10,834
This week:29Up