The frontend is built with React.
O frontend é construído com React.Aula
Vocabulário de arquitetura básica
Nível: B1
Objetivo
Descrever a arquitetura de um sistema em alto nível em inglês, usando os termos frontend, backend, database, cache, queue, service, component, module e dependency para explicar como as peças se conectam e se relacionam.
Explicação
Ao descrever a arquitetura de um sistema em inglês, a melhor estratégia é ir de fora para dentro: comece pelo que o usuário vê, siga para o servidor e termine na camada de dados. Em cada camada, use verbos simples e padrões fixos para indicar o que chama o quê.
1. As três camadas principais
- frontend: a parte que o usuário vê no navegador ou no aplicativo. Chamamos de frontend também o time que cuida dessa parte.
- backend: a parte que roda no servidor e contém a lógica de negócio.
- database (ou data layer): onde os dados ficam guardados de forma persistente.
Padrão típico:
`The frontend calls the backend. The backend stores the data in the database.`
2. Como uma chamada acontece
- O cliente envia uma request (requisição) para o servidor.
- O servidor processa a chamada e devolve uma response (resposta).
- Em HTTP, o frontend faz um `POST` ou `GET` request e o backend devolve um JSON response.
3. Peças que melhoram desempenho e resiliência
- cache: memória rápida na frente do banco. Leituras frequentes vão primeiro ao cache; se o dado não está lá, o sistema busca no banco.
- queue (fila): uma fila de mensagens ou tarefas. Um serviço coloca uma mensagem na queue e um background worker pega essa mensagem mais tarde.
Exemplo:
`We put a cache in front of the database, so frequent reads do not hit it on every request. For long tasks, the service places a message in a queue and a background worker picks it up later.`
4. Serviços, componentes, módulos
- service: um componente de software independente que faz uma função bem definida (ex.: `order service`, `payment service`).
- module: unidade interna de código dentro de um serviço. Um serviço é feito de vários módulos.
- component: termo mais usado para peças de UI (`a button component`, `a card component`), mas também aparece em design de sistemas para qualquer bloco reutilizável.
Padrão para listar peças:
`The backend consists of three services: an order service, a payment service, and an inventory service.`
5. Dependências
- O verbo é depend on (sem preposição *of*): `The frontend depends on the backend.`
- O substantivo é dependency (plural dependencies): `Each service has a few internal dependencies.`
- Use communicate with para descrever troca de dados entre serviços: `Each service communicates with the others through an internal API.`
6. Outras expressões úteis
- `The system consists of three main layers...` (consist of + lista)
- `It handles the business logic.` (cuida da lógica de negócio)
- `It scales horizontally.` (escala adicionando mais máquinas)
- `If the service fails, the queue holds the request for later.` (a queue retém o trabalho)
A ideia central: descreva primeiro o que existe (camadas, serviços, módulos) e depois como elas se conectam (calls, sends a request, depends on, communicates with).
Exemplos
| Inglês | Tradução | Observação |
|---|---|---|
| The frontend calls the backend through an HTTP API. | O frontend chama o backend por uma API HTTP. | Padrão básico: frontend → backend. |
| The backend stores the data in the database. | O backend armazena os dados no banco de dados. | Stores + dados + in the database. |
| The system consists of three main layers: frontend, backend, and database. | O sistema consiste em três camadas principais: frontend, backend e banco de dados. | Consist of é seguido por uma lista, sem prepositions extras. |
| The frontend sends a request and waits for a response. | O frontend envia uma requisição e espera por uma resposta. | Request e response vêm em par: o cliente envia, o servidor responde. |
| We use a cache in front of the database to speed up frequent reads. | Usamos um cache na frente do banco de dados para acelerar leituras frequentes. | In front of indica a posição do cache em relação ao banco. |
| Each service depends on a few internal modules. | Cada serviço depende de alguns módulos internos. | Depend on (verbo) + dependency (substantivo). |
| The order service communicates with the payment service through an internal API. | O serviço de pedidos se comunica com o serviço de pagamento por uma API interna. | Communicate with descreve troca de dados entre serviços. |
| If the payment service fails, the queue keeps the order for later. | Se o serviço de pagamento falhar, a fila guarda o pedido para depois. | A queue desacopla serviços e evita perda de trabalho. |
Erros comuns
- Trocar a preposição: `depend of` deve ser `depend on` (`The service depends on the database`).
- Esquecer a preposição em consist: `consist in` deve ser `consist of` (`The backend consists of several services`).
- Escrever `front-end` e `back-end` com hífen em texto técnico sem necessidade; a forma `frontend`/`backend` (uma palavra) é mais comum em engenharia.
- Dizer `the service do` em vez de `the service does` no presente simples — service na 3ª pessoa do singular exige `does`.
- Confundir cache (substantivo) com `to cache` (verbo, comum em dev mas raro em conversas de arquitetura): em explicações de alto nível, prefira `We store the result in the cache.`
- Misturar request/response: o cliente envia uma request e recebe uma response; o servidor recebe a request e envia a response de volta.
- Listar peças sem verbo: `Frontend, backend, database` não é frase. Use `The system has a frontend, a backend, and a database.` ou `consists of...`.
Prática guiada
Reescreva a descrição detalhada em uma versão de alto nível:
- Detalhado: `The React app sends an HTTP POST request to the Node server. The Node server validates the body and writes the user record to a Postgres table. The Postgres table returns the new id.`
Alto nível: `The frontend calls the backend. The backend stores the data in the database.`
- Detalhado: `The Redis instance sits between the Express API and Postgres. Every GET request checks Redis first.`
Alto nível: `A cache sits in front of the database, so frequent reads do not hit it.`
- Detalhado: `When the user places an order, the API publishes a 'process_payment' message to RabbitMQ. A worker consumes the message and calls Stripe.`
Alto nível: `For long tasks, the order service places a message in a queue and a worker processes it later.`
Note que a versão de alto nível troca verbos específicos (sends an HTTP POST, publishes, consumes) por verbos simples (calls, stores, places) e remove nomes próprios de tecnologia.
Resumo
Para descrever arquitetura em alto nível, vá de fora para dentro: frontend → backend → database. Use verbos simples: `calls, sends, stores, returns, handles, depends on, communicates with`. Use `consists of` para listar peças, `depend on` para dependências e `communicate with` para conexões. Cache fica na frente do banco para acelerar leituras; queue desacopla serviços e segura trabalho em caso de falha. Service é um componente independente; module é uma unidade interna dentro dele. Foque em o que existe e como se conecta, não nos detalhes de tecnologia.
Vocabulário
Palavras principais
The backend runs on Node.js.
O backend roda em Node.js.We store user data in the database.
Armazenamos os dados de usuário no banco de dados.A cache sits in front of the database.
Um cache fica na frente do banco de dados.Long tasks go into a queue.
Tarefas longas vão para uma fila.The payment service handles credit cards.
O serviço de pagamento cuida dos cartões de crédito.Each page is built from small components.
Cada página é construída a partir de pequenos componentes.The service has a module for sending emails.
O serviço tem um módulo para enviar e-mails.Each service has a few external dependencies.
Cada serviço tem algumas dependências externas.We split the system into three layers.
Dividimos o sistema em três camadas.The frontend sends a request to the backend.
O frontend envia uma requisição ao backend.The backend returns a JSON response.
O backend devolve uma resposta em JSON.The backend handles the business logic.
O backend processa a lógica de negócio.The frontend depends on the backend.
O frontend depende do backend.Services communicate with each other through an API.
Os serviços se comunicam entre si por uma API.The system can scale horizontally.
O sistema pode escalar horizontalmente.We store the order in the database.
Armazenamos o pedido no banco de dados.The backend consists of three services.
O backend consiste em três serviços.História
História: Vocabulário de arquitetura básica
Nível: B1
História em inglês
The high-level picture
On his first day, Tom sat down with Maya to learn about the checkout system. "Our system consists of three main layers," Maya said. "There is a frontend, a backend, and a database." She opened her laptop and drew a simple diagram on a whiteboard. "The frontend is the part the user sees in the browser. The backend runs on the server and handles the business logic." "When a user clicks 'Place order', the frontend sends a request to the backend." "The backend then stores the order in the database and returns a response to the frontend." "In other words, the frontend depends on the backend, and the backend depends on the database."
The supporting services
Tom asked, "Is the backend a single service?" "No, it is not," Maya replied. "It consists of several small services." "There is an order service, a payment service, and an inventory service." "Each service handles one responsibility, and each service communicates with the others through an internal API." "We also use a cache in front of the database, so frequent reads do not hit the database every time." "For long tasks, like sending a confirmation email, the service places a message in a queue." "A background worker picks up the message from the queue and processes it later."
Modules, dependencies, and failure
Maya continued, "Inside each service, the code is organized into modules." "For example, the payment service has a module that talks to the credit card provider." "That module depends on an external library, but the rest of the service is self-contained." Tom nodded. "What happens if the payment service fails?" "The order is still saved in the database. The queue holds the failed payment, and a background job retries it." "So the user still sees a confirmation, and we do not lose the order." "That is the main benefit of breaking the system into small services: each piece can fail independently, and the rest keeps working."
Tradução linha por linha
| Inglês | Tradução |
|---|---|
| On his first day, Tom sat down with Maya to learn about the checkout system. | No primeiro dia, Tom se sentou com Maya para aprender sobre o sistema de checkout. |
| "Our system consists of three main layers," Maya said. "There is a frontend, a backend, and a database." | “Nosso sistema consiste em três camadas principais”, disse Maya. “Temos um frontend, um backend e um banco de dados.” |
| She opened her laptop and drew a simple diagram on a whiteboard. | Ela abriu o notebook e desenhou um diagrama simples em um quadro branco. |
| "The frontend is the part the user sees in the browser. The backend runs on the server and handles the business logic." | “O frontend é a parte que o usuário vê no navegador. O backend roda no servidor e processa a lógica de negócio.” |
| "When a user clicks 'Place order', the frontend sends a request to the backend." | “Quando o usuário clica em 'Finalizar pedido', o frontend envia uma requisição ao backend.” |
| "The backend then stores the order in the database and returns a response to the frontend." | “O backend então armazena o pedido no banco de dados e devolve uma resposta ao frontend.” |
| "In other words, the frontend depends on the backend, and the backend depends on the database." | “Em outras palavras, o frontend depende do backend, e o backend depende do banco de dados.” |
| Tom asked, "Is the backend a single service?" | Tom perguntou: “O backend é um único serviço?” |
| "No, it is not," Maya replied. "It consists of several small services." | “Não”, respondeu Maya. “Ele consiste em vários serviços pequenos.” |
| "There is an order service, a payment service, and an inventory service." | “Temos um serviço de pedidos, um serviço de pagamento e um serviço de estoque.” |
| "Each service handles one responsibility, and each service communicates with the others through an internal API." | “Cada serviço cuida de uma responsabilidade, e cada serviço se comunica com os outros por uma API interna.” |
| "We also use a cache in front of the database, so frequent reads do not hit the database every time." | “Também usamos um cache na frente do banco de dados, para que leituras frequentes não batam no banco toda hora.” |
| "For long tasks, like sending a confirmation email, the service places a message in a queue." | “Para tarefas longas, como enviar um e-mail de confirmação, o serviço coloca uma mensagem em uma fila.” |
| "A background worker picks up the message from the queue and processes it later." | “Um worker em segundo plano pega a mensagem da fila e a processa mais tarde.” |
| Maya continued, "Inside each service, the code is organized into modules." | Maya continuou: “Dentro de cada serviço, o código é organizado em módulos.” |
| "For example, the payment service has a module that talks to the credit card provider." | “Por exemplo, o serviço de pagamento tem um módulo que se comunica com o provedor de cartão de crédito.” |
| "That module depends on an external library, but the rest of the service is self-contained." | “Esse módulo depende de uma biblioteca externa, mas o restante do serviço é autossuficiente.” |
| Tom nodded. "What happens if the payment service fails?" | Tom assentiu. “O que acontece se o serviço de pagamento falhar?” |
| "The order is still saved in the database. The queue holds the failed payment, and a background job retries it." | “O pedido ainda fica salvo no banco. A fila retém o pagamento que falhou, e um job em segundo plano tenta de novo.” |
| "So the user still sees a confirmation, and we do not lose the order." | “Assim, o usuário ainda vê uma confirmação, e a gente não perde o pedido.” |
| "That is the main benefit of breaking the system into small services: each piece can fail independently, and the rest keeps working." | “Esse é o principal benefício de dividir o sistema em serviços pequenos: cada peça pode falhar de forma independente, e o resto continua funcionando.” |
Notas de vocabulário
- The system consists of three main layers = padrão `consist of` para listar peças; sempre com `of`.
- the frontend sends a request to the backend = o cliente envia a request; o verbo é `send a request to`.
- the backend returns a response to the frontend = par de `request`: o servidor devolve uma `response`.
- the frontend depends on the backend = verbo `depend on`; substantivo é `dependency`.
- communicates with the others through an internal API = conexão entre serviços: `communicate with ... through`.
- a cache in front of the database = `in front of` indica a posição do cache em relação ao banco.
- places a message in a queue = o serviço coloca trabalho em uma queue; preposição `in`.
- a background worker picks up the message = `pick up` é o verbo típico para indicar consumo da fila.
- each piece can fail independently = argumento clássico de microsserviços: falhas isoladas.
Perguntas de compreensão
- How many main layers does the system consist of?
- What does the frontend send to the backend when the user clicks 'Place order'?
- Where does the backend store the order?
- Which three services make up the backend?
- Why does the team use a cache in front of the database?
- How does the system process a long task like sending a confirmation email?
- What does the payment service module depend on?
- What happens if the payment service fails?
Prática com a história
- Reescreva em alto nível: The React app sends an HTTP POST to the Express API, and the Express API writes a row to the orders table.
- Reescreva: If Redis is down, every GET request goes straight to Postgres.
- Complete: The order service and the payment service ____ with each other through an internal API.
- Faça uma frase com `depend on` mostrando que o módulo de e-mail depende do provedor de e-mail.
Prática
Exercícios e teste
A próxima melhoria é transformar esses arquivos em perguntas com resposta no navegador. Por enquanto, esta página já organiza o estudo e permite seguir a aula inteira sem abrir os arquivos manualmente.