Introdução

No cenário atual do desenvolvimento web, a busca por maior escalabilidade e flexibilidade levou à popularização da arquitetura de Micro Frontends. Por meio dela, equipes podem desenvolver e implantar partes de uma aplicação de forma independente, promovendo um desenvolvimento mais ágil e modular. Neste tutorial, exploraremos as práticas, frameworks e ferramentas que tornam possível a implementação de Micro Frontends em aplicações Java com Spring Boot. Vamos entender como essa abordagem facilita a manutenção e a evolução de grandes sistemas, além de proporcionar uma experiência de desenvolvimento eficaz e restrição dos impactos entre equipes.

Etapas

  1. Preparação do Ambiente de Desenvolvimento

    Antes de iniciar, você precisa garantir que tem o JDK (Java Development Kit) e o Maven instalados. Acesse o terminal e execute os seguintes comandos para verificar as versões instaladas.

    commands
    # Verificar versão do Java
    java -version
    # Verificar versão do Maven
    mvn -version

  2. Criação de um Projeto Spring Boot Modular

    Utilize o Spring Initializr para criar um novo projeto. Selecione as dependências necessárias para o nosso projeto, incluindo ‘Spring Web’ e ‘Spring Boot DevTools’ para um desenvolvimento mais dinâmico.

    pom.xml
    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.example.microfrontends</groupId>
  <artifactId>microfrontends-app</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>microfrontends-app</name>
  <description>Aplicação com Micro Frontends</description>
  <properties>
    <java.version>11</java.version>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
      <optional>true</optional>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

  3. Criando o Módulo de Frontend com React

    Crie um diretório separado para seu módulo de frontend que será desenvolvido em React. Inicie um novo projeto React e integre-o com o Spring Boot. Utilize o comando `npx create-react-app frontend` para inicializar o projeto.

    commands
    # Criar o diretório do frontend
    mkdir frontend
    # Entrar no diretório e criar o projeto React
    cd frontend
    npx create-react-app .

  4. Configuração do Proxy para Comunicação com o Backend

    Para que o frontend possa se comunicar com o backend, configure o proxy no arquivo `package.json` do React. Adicione o seguinte trecho para redirecionar as requisições de API.

    package.json
    {
  ...
  "proxy": "http://localhost:8080"
}

  5. Implementação do Endpoint REST no Spring Boot

    Dentro do seu projeto Spring Boot, crie um controlador que gerencie o endpoint que será consumido pelo frontend. O controlador deve retornar uma lista de produtos como exemplo.

    ProdutoController.java
    package com.example.microfrontends.controller;

import org.springframework.web.bind.annotation.*;
import java.util.Arrays;
import java.util.List;

@RestController
@RequestMapping("/api/produtos")
public class ProdutoController {
    @GetMapping
    public List<String> getProducts() {
        return Arrays.asList("Produto 1", "Produto 2", "Produto 3");
    }
}

  6. Desenvolvimento do Frontend para Consumo da API

    Modifique o arquivo `App.js` do React para consumir a API que foi criada no Spring Boot, exibindo os produtos retornados na tela.

    App.js
    import React, { useEffect, useState } from 'react';

function App() {
  const [produtos, setProdutos] = useState([]);

  useEffect(() => {
    fetch('/api/produtos')
      .then(response => response.json())
      .then(data => setProdutos(data));
  }, []);

  return (
    <div>
      <h1>Produtos</h1>
      <ul>
        {produtos.map(produto => <li key={produto}>{produto}</li>)}
      </ul>
    </div>
  );
}

export default App;

  7. Compilação e Execução dos Projetos

    Compile e execute a aplicação Spring Boot e o frontend React simultaneamente em terminais separados. Use os comandos abaixo para cada terminal.

    commands
    # Para o backend
    mvn spring-boot:run
    # Para o frontend
    cd frontend && npm start

  8. Testando a Integração dos Módulos

    Após iniciar os dois servidores, acesse o frontend através do endereço `http://localhost:3000` e interaja com a aplicação observando os produtos retornados pela API do Spring Boot.

    commands
    # Acesse o navegador
    http://localhost:3000

  9. Implementação de Testes Unitários no Backend

    Utilize JUnit e Mockito para implementar testes unitários no módulo backend, assegurando que o controlador retorne os valores corretos.

    ProdutoControllerTest.java
    package com.example.microfrontends.controller;

import static org.mockito.Mockito.*;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
import org.springframework.test.web.servlet.MockMvc;

@WebMvcTest(ProdutoController.class)
public class ProdutoControllerTest {
    @Autowired
    private MockMvc mockMvc;

    @Test
    public void testGetProducts() throws Exception {
        mockMvc.perform(get("/api/produtos"))
                .andExpect(status().isOk())
                .andExpect(content().contentType("application/json"));
    }
}

  10. Executando os Testes Unitários

    Por fim, execute os testes unitários para garantir que a aplicação backend esteja funcionando corretamente. Utilize o Maven para isso.

    commands
    # Executar os testes
    mvn test

Conclusão

Neste tutorial, você aprendeu a implementar uma arquitetura de Micro Frontends utilizando Java com Spring Boot e React. Exploramos a modularidade, criando um backend RESTful e um frontend que consome a API construída. Além disso, discutimos a importância da separação de módulos e dos testes unitários, que garantem a qualidade do sistema final. Adotar o uso de Micro Frontends pode ser um passo importante para o desenvolvimento de aplicações escaláveis e independentes.

Hashtags

#MicroFrontends #SpringBoot #React #Java #DesenvolvimentoWeb #ArquiteturaDeSoftware