Angular: Conhecendo Ivy

Afinal o que é o 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:
Habilitando o Ivy em um projeto Angular

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:

Trabalhando com AoT e Ivy em um projeto Angular na versão 8

Testando a performance do código depois de habilitar o aot:

Angular Ivy + 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 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Anonimo

Anônimo

Quando dois ladrões invadem sua casa no subúrbio uma noite, Hutch se recusa a defender a si mesmo ou a sua família, na esperança de evitar violência grave. S…

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses