Angular: Conhecendo Ivy
Conforme prometido em um dos meus artigos anteriores sobre: Angular 8.0, hoje eu irei escrever algo mais detalhado sobre o Ivy, o novo motor de render do Angular.
Para aqueles que já estão acompanhando a evolução do Angular nesses últimos updates (versões 6, 7, 8) , com certeza já ouviram falar algo sobre o Ivy.
Agora pensando no pessoal que ainda não viu nada sobre esse assunto, vamos voltar nas versões anteriores do Angular para entender como ele renderizava o nosso código antes do Ivy.
Quando trabalhamos em projetos Angular, nós basicamente criamos componentes que ficam dentro de Módulos. Um componente é composto por: um arquivo .ts que trabalha como uma controller, um arquivo .css com estilo do nosso componente, um arquivo .html com a estrutura do componente e um arquivo .spec.ts para os nossos testes.
Tendo esse cenário anterior em mente, nós escrevemos códigos em TypeScript, que devem interagir com os nossos templates HTML, que no momento do Build irão gerar os nosso bundles.
No Angular, todos componentes declarados nos módulos são bundles e serão carregados na chamada da nossa aplicação. Caso você adicione todos os seus componentes em um único módulo, como por exemplo no app.module.ts, eles serão carregados em um único bundle no primeiro carregamento da sua aplicação.
Por esse motivo que nós separamos os nossos componentes em módulos e carregamos eles em Lazy Loading. Dessa forma nós conseguimos garantir que os nossos bundles serão menores e que irão carregar sobre demanda.
Caso tenha interesse em saber mais sobre Lazy Loading em um projeto Angular, eu recomendo a leitura do seguinte artigo: Angular Lazy Loading.
Bom, até aqui nenhuma novidade né?
Agora focando no momento do build da nossa aplicação, como nossos arquivos são renderizados no navegador?
Basicamente o nosso código é compilado para arquivos JavaScript com instruções de como renderizar os nossos componentes no DOM (Document Object Model) quando ele (o componente) for requisitado, através de bundles.
Para fazer esse processo no Angular nós temos: o JIT (Just In Time), AOT( Ahead of time) e para aqueles que já precisaram indexar as suas páginas ou tiveram que adicionar um botão de compartilhar algum conteúdo nas redes sociais, o SSR (Server-side rendering).
Caso tenha interesse em saber mais sobre esses temas, eu recomendo a leitura dos links abaixo:
Mas o que realmente é o Ivy? onde ele entra nesse processo? E quais são os benefícios de se trabalhar com ele?
Conhecendo o Ivy
Como passado acima, o Ivy é o novo compilador do Angular. Ele foi reescrito como foco em:
- Melhora no tempo de build
- Bundles menores (utilizando o tree-shaking)
- Mais velocidade e facilidade no momento de desenvolvimento e debug
Utilizando o Ivy nós conseguimos melhorar a performance dos nossos apps. Abaixo você tem uma imagem comparando dois apps criados em Angular na versão 8, um com o ivy habilitado e o outro sem.
Notem que mesmo em um projeto novo nós já conseguimos ter uma ganho de performance significativo.
Legal, agora que conhecemos o Ivy, como habilitar ele ? Existem duas formas atualmente:
- No momento da criação de um novo projeto:
ng new nome-do-projeto --enable-ivy - Ou adicionando a flag enableIvy: true no arquivo tsconfig.app.json, conforme imagem abaixo:
Uma outra flag que a documentação orienta deixamos habilitada para trabalhar com o Ivy é a do AOT.
Para habilitar ele, vá até o arquivo angular.json e adicione a flag conforme a imagem abaixo:
Testando a performance do código depois de habilitar o aot:
Note que o tempo diminuiu de 1.52s para 1.17s.
Bom, a ideia desse artigo era apresentar o Ivy com um pouco mais de detalhes. Espero que tenham gostado e até um próximo artigo galera ;)
