Se você deseja melhorar a qualidade de suas aplicações, é necessário melhorar a qualidade do seu código. Isto talvez signifique abordar um novo conceito, ou simplesmente signifique utilizar conceitos existentes de uma forma melhor e mais eficiente. Aprender a utilizar componentes no Angular da forma mais eficiente, por exemplo , pode te ajudar a criar aplicações que são mais fáceis de manter, que rodam melhor e que são mais fáceis de evoluir posteriormente.
Os componentes fazem parte do Angular desde a versão 0.5 do AngularJS e provêem um meio conveniente de organizar e reutilizar o código. Angular (a versão abreviada de Angular 2) não é uma simples evolução do Angular 1.x, sendo uma reescrita completa com suporte para mobile e outras funcionalidades em mente. Os controllers utilizados na versão 1.x foram completamente substituídos pelos componentes. No entanto, caso você utilize e prefira continuar utilizando a versão 1.x, ou está aprendendo Angular do início, ou está fazendo a transição, é importante começar a utilizar componentes para garantir que seu código seja elegante e à prova de evoluções da melhor forma possível. E qualquer que seja a categoria a qual você se adeque, aqui você encontrará o suficiente para agilizar esse processo.
O que são componentes?
Um componente do Angular é uma diretiva de configuração mais simplificada, similar ao uso de um web component. Enquanto novas estruturas e funcionalidades encorajam o uso de boas práticas de codificação, isto por si só não é suficiente para a produção de um bom código. O que, realmente, define essa questão é quem, efetivamente, irá escrever o código e, e, discutivelmente, a qualidade do café.
Da mesma forma que escolher utilizar qualquer tipo de módulo ou classe, é de sua responsabilidade se certificar que está criando código que segue uma lógica, é legível, reutilizável e que não faça uso desnecessário de recursos. Neste post, nós vamos aprender quatro dicas importante que irão lhe ajudar a fazer um melhor uso dos componentes no Angular.
1. Utilize bons nomes
Se a rosa tivesse outro nome…
Você pode ser a melhor pessoa para escrever códigos no mundo. Mas se você não se esforçar para criar seus padrões de nomenclatura, você ficará aquém do seu potencial. É claro que isto se aplica para qualquer tipo de código, seja para evitarmos números mágicos arbitrários (use constantes!) ou para evitar a tentação de abreviar variáveis (o que significa "HRT" mesmo?).
Nomear componentes no angular não é diferente. Em um mundo perfeito, seus componentes terão nomes que são bem legíveis e fluem como um texto quando colocados no seu código. O mais importante é você poder acompanhar o que o código faz realmente, quando você o lê novamente alguns meses depois. Também não seria ótimo se você pudesse entender o significado do nome por meio da lógica, mesmo que você não tenha memorizado o significado?
Uma convenção de nomenclatura comum é utilizar a funcionalidade seguida pelo tipo (e.g. funcionalidade.tipo.js). Quando for registrar o nome do componentes, utilize o estilo camel case para ser algo bem legível: FuncionalidadeTipo. É simples, fácil e faz sentido do ponto de vista lógico. Você pode escolher outra convenção, mas o que importa é ser consistente e ter algum tipo de método no meio da loucura.
É claro que você também deveria utilizar a mesmo lógica ao escrever o script que utiliza o próprio componente. Todas as variáveis deveriam ser fáceis de entender, fáceis de diferenciar do restante do código e bem explicadas por comentários, quando necessário. Mesmo que você esteja criando um projeto pessoal e você não tenha intenção de compartilhá-lo com o mundo, você deve dar aos seus componentes uma API pública bem definida com boas entradas e saídas.
Da mesma forma, dê aos seus componentes um ciclo de vida bem definido e implemente hooks neste ciclo de vida para que os mesmos tenham uma boa estrutura.
O negócio é o seguinte: tudo isso demanda um pouco mais de tempo e quando se está construindo componentes necessários mas nem sempre divertidos, você provavelmente estará concentrado para terminá-los o quanto antes. Talvez você seja uma pessoa do tipo que enxerga o panorama geral e não gosta de pensar nos mínimos detalhes. Apesar disso, gastar algum tempo para escrever componentes com boa nomenclatura (e comentários) irá te poupar muito tempo no backend. Se você está trabalhando como parte de um time, pequeno ou grande, isto é ainda mais importante.
2. Use eventos da forma correta
Manter uma boa convenção de nomenclatura e uma API bem definida, também é importante para garantir que seus componentes enviem eventos com bons nomes para realizar a comunicação com outros componentes. Pense sobre o que você quer expor, e o uso de eventos pode ser uma melhor escolha de projeto do que utilizar o two-way data binding (que discutiremos melhor mais abaixo). Use o $emit ou o $broadcast e se lembre que algumas vezes você estará se comunicando com componentes que não necessariamente você conhece. Use $rootScope para emitir eventos para toda a árvore de componentes. Lembre-se também que se outro componente utilizar exatamente o mesmo nome de evento, isto pode causar bugs imprevisíveis.
Tudo se resume a um planejamento antecipado e nomear as coisas da forma correta. Se você é do tipo de pessoa que gosta de fazer planilhas e listas de tarefas meticulosas, então você provavelmente entende estas ideias de forma natural.
E por falar em eventos, certifique de se familiarizar com os eventos que serão disparados durante certos pontos do ciclo de vida do seu componente. Isto inclui $onInit(), que é a primeira inicialização do seu componente, e outros eventos como #onChanges e #onDestroy. Memorize estes eventos e use-os para estruturar o fluxo dos seus componentes.
3. Não crie complicações desnecessárias, lembre-se da regra do um
Com grandes poderes vêm grandes responsabilidades. Apesar da tentação de escrever scripts gigantescos com múltiplos componentes do Angular, é muito melhor seguir a "regra do um". Em outras palavras, apenas um componente por arquivo e tente manter este arquivo com menos de 400 linhas de código. Isto faz o seu código substancialmente mais fácil de ler, navegar e manter. Isto previne conflitos ao utilizar um SCM como o Git e também problemas com declaração de variáveis repetidas e coisas semelhantes.
Apesar de todo o resto, esforce-se para manter a modularidade. Desta forma, você terá a possibilidade de rapidamente recuperar e reutilizar seus componentes quando você precisar deles em projetos futuros. No mesmo sentido, tente criar módulos que representem subgrupos de funcionalidades e crie um módulo raiz da aplicação para juntar tudo e criar o fluxo necessário.
De novo, é por isso que vale a pena escrever componentes bem nomeados com API pública útil. Pense na sua aplicação como um árvore de componentes. Cada um implementa entradas bem definidas e saídas com o mínimo uso de two-way data binding.
Isto também fará com que seu código seja mais fácil de visualizar e de entender. Melhor que tentar seguir um amontoado de código espaguete, você pode construir reutilizando funcionalidades ou fazer melhorias simplesmente inspecionando como cada componente está trabalhando individualmente.
Uma precaução: estruturar seu código tão bem pode aumentar a tentação de enchê-lo de funcionalidades. Quando é muito fácil adicionar uma nova funcionalidade para seu aplicativo web, por que não fazê-la? Apenas lembre-se: simplicidade é benéfica até mesmo para um programa recém iniciado. Normalmente é melhor focar em fazer uma coisa e fazê-la bem com código simples e reutilizável.
4. Saiba quando utilizar componentes
Finalmente, tenha certeza de que você sabe quando utilizar componentes. Componentes são mais simples de utilizar do que diretivas e portanto eles encorajam a escrita de código simples e leve. Para quem está utilizando AngularJS, o uso de componentes também faz com que mudanças no Angular sejam muito mais fáceis e otimizam seu código para uma arquitetura baseada em componentes. Caso você não tenha adotado componentes do Angular em seu fluxo de trabalho ainda, é tempo para utilizar esta prática.
De forma análoga, entenda as limitações dos componentes. Eles não são apropriados para diretivas que precisam realizar ações em funções de compilação e prelink - elas não estão disponíveis. Além disso, eles não podem acessar opções avançadas de definição das diretivas (prioridade, terminal, etc.). Você deve continuar utilizando diretivas quando você desejar usar código Angular por meio de CSS ou atributos ao invés de um elemento.
Os componentes podem e devem ser organizados e reutilizados. Você pode agrupá-los em bibliotecas, como o Material2 entre outros, ou publicá-los como um pacote separado (o que as vezes não é tão simples). Você também pode usar um repositório de componentes open source para criar o seu próprio arsenal de componentes reutilizáveis evitando a complexidade extra da configuração de pacotes. Isto te permite organizar os componentes enquanto possibilita encontrar, modificar e utilizá-los individualmente. A metodologia correta de trabalho ajuda a alcançar uma melhor modularidade, gerenciamento e reuso de componentes do Angular entre aplicações.
Além do hábito e da resistência a mudanças, esta é outra razão que alguns desenvolvedores podem ver-se ainda dependendo do .directive(). Alguns programadores irão preferir escolher os métodos que podem ser utilizados por todo seu código para manter as coisas simples. Mas usar componentes poupa um monte de código boilerplate e as raras diretivas que não são componentes os ajudam a se sobressair. Então, para resumir, certifique-se de utilizar componentes e, mais importante, que você os usa bem.
Conclusão
O bom uso dos componentes do angular significa aplicar a melhor prática de codificação. Dê nomes de forma inteligente, pense no seu time e nas futuras iterações mantendo as coisas simples. Caso você mantenha esse mindset e faça a transição para componentes, seu código será elegante e eficaz.