Como Estruturar o seu Front-End com Angular
Tags: typescript, angular, frontend, designpatterns
Published: 2022-01-19 01:15:44

---
title: Como Estruturar o seu Front-End com Angular
published: true
date: 2019-11-24 05:07:12 UTC
tags: typescript,angular,frontend,designpatterns
canonical_url: https://ricardo-mello.medium.com/como-estruturar-o-seu-front-end-com-angular-7fd0e7ef31a2
---

#### Estruturar o workspace é uma das partes mais complicadas quando iniciamos um projeto. Eis aqui um guia pra te ajudar nessa tarefa.

![](https://cdn-images-1.medium.com/max/1024/1*suwqEyzOmEbFVwWjY6X2QA.jpeg)<figcaption>Image by <a href="https://pixabay.com/photos/?utm_source=link-attribution&amp;amp;utm_medium=referral&amp;amp;utm_campaign=image&amp;amp;utm_content=768815">Free-Photos</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;amp;utm_medium=referral&amp;amp;utm_campaign=image&amp;amp;utm_content=768815">Pixabay</a></figcaption>

Enquanto alguns o chamam de Framework, o Angular pode ser considerado uma grande plataforma, que te fornece todas as ferramentas necessárias para o desenvolvimento de aplicações Front-End. Além disso, tem um [CLI](https://cli.angular.io/) super poderoso em que podemos adicionar infinitas funcionalidades via [Schematics](https://angular.io/guide/schematics).

O Angular já possui um [Style Guide](https://angular.io/guide/styleguide) com padrões bem definidos. Porém, ainda há bastante coisa pra acrescentar, e é dessas coisas que vamos falar aqui:

### Nx = ❤

Eu falo bastante do [Nx](https://nx.dev/) porque ele reduz e muito o tempo que você demora estruturando o projeto do zero. Ele foi criado por dois caras que eram da Google (Victor Savkin e Jeff Cross) e trabalham ativamente no projeto do Angular. Desde então eles prestam consultoria ensinando metodologias de desenvolvimento para aplicações de grande porte. Resumindo: Eles sacam muito de Angular.

#### Monorepo

Utilizar um único repositório tem tantas vantagens que cabe num segundo artigo. Aqui eu vou destacar a integração instantânea entre diferentes aplicações e a facilidade de geração de releases.

O Angular já vem com um monorepo padrão, mas ele é um tanto limitado e acaba misturando bibliotecas com aplicações. O Nx resolve isso dividindo o workspace em 3 áreas: apps ou aplicações, libs ou bibliotecas e tools que são ferramentas para facilitar o fluxo de desenvolvimento.

### Programação reativa

O Angular usa [RxJS](https://rxjs-dev.firebaseapp.com/) para implementar o padrão _Observer_. Nele, temos um stream de vários eventos que podem ser manipulados como se estivéssemos manipulando um array.

Se você usa Promises, como basicamente tudo no Angular usa RxJS, a recomendação é que você o aprenda e utilize ao invés de usar .toPromise() na sua aplicação inteira. Ele é bem mais poderoso e tem inúmeros operadores, então vale muito a pena investir.

#### Por onde começar:

- [RxJS: Programação reativa em JavaScript](https://bognarjunior.wordpress.com/2018/09/30/rxjs-programacao-reativa-em-javascript/)
- [Por que programação reativa?](https://medium.com/olxbr-tech/por-que-programa%C3%A7%C3%A3o-reativa-8fba7e754a0f)
- [Learn RxJS](https://www.learnrxjs.io/)
- [RxJS Marbles: Interactive diagrams of Rx Observables](https://rxmarbles.com/)

### Faça micro frontends

Divida a sua aplicação em micro aplicações, para que você possa evoluí-las sem que uma interfira na outra, e distribuí-las sem precisar fazer o deploy de todo o seu front-end caso você altere apenas uma pequena parte da sua aplicação. Tente identificar as diferentes aplicações que você irá desenvolver e as divida no Workspace.

### Crie bibliotecas

Identifique aquilo que é compartilhado entre aplicações e organize em bibliotecas. No meu time de produto da TOTVS, nosso Workspace tem uma biblioteca de componentes de UI, uma biblioteca que contém tudo o que é comum para todas as aplicações (internacionalização, autenticação e uma série de interceptors), uma biblioteca pra cada micro serviço contendo os models e os services com as requisições REST, entre outras.

Quando criamos uma biblioteca com o Nx, ele faz as configurações de TypeScript necessárias para que ela esteja disponível para todo o workspace.

![](https://cdn-images-1.medium.com/max/1024/0*4tiIEwjyYyhM5sSI)<figcaption>Workspace Nx (<a href="https://github.com/nrwl/nx/wiki/Nx-and-Angular-CLI">https://github.com/nrwl/nx/wiki/Nx-and-Angular-CLI</a>)</figcaption>

### Use gerenciamento de estado

Fazer a comunicação entre diferentes componentes nem sempre é uma tarefa fácil, e você vai acabar se perdendo entre vários services e @Inputs/@Outputs quando precisar atualizar o estado da sua aplicação. A galera do React fez isso muito bem com o Redux, e o [NgRx](https://ngrx.io/) trouxe esse conceito pro Angular com o nosso amado [RxJS](https://rxjs-dev.firebaseapp.com/).

![](https://cdn-images-1.medium.com/max/1024/1*iOC2HaKvG4mb7LwbdxvrFg.png)<figcaption>NgRx Lifecycle (<a href="https://ngrx.io/guide/store">https://ngrx.io/guide/store</a>)</figcaption>

Segue alguns links que podem te ajudar nessa jornada:

- [Máquinas de estado, quando usar e para que?](https://medium.com/@luiguild/m%C3%A1quinas-de-estado-quando-usar-por-que-e-para-que-39dee6dd8e7c)
- [Construindo aplicações front-end reativas com NgRx](https://movile.blog/construindo-aplicacoes-front-end-reativas-com-ngrx/)
- [Gerenciamento de estado no Angular com NgRx e programação reativa](https://www.youtube.com/watch?v=9taz2c-l2Yk)
- [State Management With NgRx](https://nx.dev/angular/guides/misc-ngrx)

### Schematics

Muitas das coisas que fazemos são repetitivas e podem ser automatizadas. Por meio do Schematics, conseguimos estender o CLI do Angular com comandos personalizados que gerem ou alterem código de acordo com nossos padrões internos. Você pode aprender mais sobre eles [nesse artigo](https://medium.com/@ricardo.mello/schematics-criando-um-gerador-de-c%C3%B3digos-com-angular-introdu%C3%A7%C3%A3o-23fcad8e4ddb).

### Builds com Affected

Uma das ferramentas que eu mais gosto no Nx é o affected, que consegue mapear quais aplicações ou bibliotecas foram afetadas pelas alterações comparando a sua branch com a master (ou dev), ou dois commits diferentes (como a HEAD vs o commit anterior). Com ele, podemos gerar builds mais rápidos e precisos recompilando somente o que precisa ser recompilado. O affected também pode ser usado em testes, lints, etc.

### Conclusão

Usar o Nx para estruturar uma aplicação pode te poupar bastante dor de cabeça e trabalho configurando o Workspace. Separar suas aplicações em pedaços menores vai te ajudar lá na frente quando você precisar dividir a manutenção delas. Gerenciar o estado e usar programação reativa são duas coisas que ajudam bastante a reduzir a complexidade dos componentes e o Schematics é uma ferramenta super flexível pra ajudar o seu time a escrever menos código repetitivo. O affected fala por si só.

Se houver qualquer coisa que eu possa fazer pra tornar esse artigo melhor, comente ou envie uma mensagem privada. Feedbacks são sempre super bem vindos.