Angular 16 e suas novas features!
Olá meus amigos desenvolvedores! Estamos diante, por mais uma vez, de um grande lançamento do nosso querido framework Angular. Temos acompanhado recentemente, mudanças que realmente têm se mostrado significativas, e melhorado a cada nova versão. As mudanças entre versões não costumavam ser muito drásticas, porém têm mostrado que as novas features da versão 16 irão revolucionar a forma com que escrevemos nossas aplicações.
Primeiro passo a ser feito, caso já tenha uma aplicação rodando com versões anteriores, é migrar para a nova versão, e para isso podemos utilizar o guia de atualização oferecido pelos próprios mantenedores do framework.
Com sua aplicação já atualizada ou criada, vamos conhecer as principais novidades fornecidas.
Signals
Para a detecção de mudança de estado dos componentes, nativamente o Angular se utiliza da lib zone.js, onde são verificadas todas as mudanças de estado após a execução de qualquer “event handler” (manipulador de eventos), e através dos “immutables” e “observables”, é possível limitar drasticamente o número de componentes a serem verificados.
Quando essas mudanças acontecem, por padrão, componentes inteiros, juntamente com seus predecessores, sempre são analisados na árvore de componentes, sendo que, dessa maneira, não é possível identificar diretamente os componentes alterados.
Um Signal é apenas uma construção reativa, o qual possui os ‘consumers’ (consumidores) que ficam escutando suas alterações de valor. Da forma em que é aplicado, o Signal, é capaz de atualizar o DOM de forma cirúrgica, ao receber novos valores. Vemos uma grande vantagem de sua utilização em fluxos síncronos e controle de estado, por sua simplicidade de declaração, porém em fluxos assíncronos o RxjS ainda se mostra como uma melhor opção. Estaremos fazendo um tutorial de utilização dessa funcionalidade em breve, aguarde.
Destroyref Provider
Muito útil, para quando o desenvolvedor tem a necessidade de se registrar callbacks de destroy, em um ciclo de vida específico.
Em suma, com o ‘DestroyRef’ é possível ao desenvolvedor ter uma ferramenta que gerencia os recursos ao utilizar o destroy, e a limpeza de cache de forma mais prática, e com um controle melhor em mãos durante o desenvolvimento. Por ser aplicável em diferentes entidades como, components, directives, pipes, embedded views e ‘EnvironmentInjector’, podendo ser registrado em escopos específicos.
Required Inputs
Outro novo recurso que a versão 16 trouxe para o desenvolvedor é a possibilidade de tornar inputs obrigatórios. Com esse novo recurso, podemos garantir que todos os dados necessários estão sendo enviados ao componente ou diretiva antes de ser executado, resultando em um código com mais qualidade, menos erros, e mais eficiência no processo de desenvolvimento.
Podemos definir um alias ao nosso input, conforme ilustrado no código demonstrado anteriormente, dessa forma caso de erro de compilação pela falta do parâmetro a mensagem será retornada de forma mais inteligível, como pode ser observado na próxima imagem.
Dados de Rotas via Input
A melhoria na experiência de roteamento dos componentes tem avançado rapidamente. Uma solicitação de recurso, realizado pelos desenvolvedores no GitHub oficial, está na capacidade de vincular parâmetros de rota às entradas do componente correspondente. Agora podemos utilizar esse recurso que está disponível na versão 16! Abaixo uma demonstração de como será possível utilizar essa funcionalidade.
Teste unitário com Jest e Web Test Runner
Com base em pesquisas de desenvolvedores que utilizam o Angular e na comunidade JavaScript, o Jest é um dos frameworks de teste mais amados. Após inúmeras solicitações para oferecer suporte ao Jest,com complexidade reduzida, pois não são necessários navegadores reais.
Foi então introduzido o suporte experimental ao Jest. Em uma versão futura, também serão movidos os projetos Karma existentes para o Web Test Runner e assim continuar a oferecer suporte a testes de unidade baseados em navegador. Isso será um ‘no-op’ para a maioria dos desenvolvedores.
Para testar um novo projeto com Jest, é necessário realizar a instalação com npm install jest — save-dev e atualizar o arquivo angular.json:
Conclusão
Temos outras novidades que podem ser acompanhadas pelo blog oficial, aqui trouxe somente algumas das mudanças mais significativas nesse momento. Mas temos ainda o suporte CSP (content security policy) à estilos inline, autocomplete na importação nos templates, entre outras.
A versão 16 é o trampolim para as melhorias futuras que chegarão à reatividade do Angular e à renderização do lado do servidor no próximo ano. Estaremos avançando na Web, inovando na experiência do desenvolvedor e no desempenho!
