- \n
- O que \u00e9 IVY?<\/a><\/li>\n
- Como funciona a hera?<\/a><\/li>\n
- Principais destaques da Angular Ivy<\/a><\/li>\n
- Por que usar hera?<\/a><\/li>\n
- Atualizando para o Angular 9 com Ivy<\/a><\/li>\n
- Funcionalidades do IVY no Angular 18<\/a><\/li>\n
- O futuro do Angular com Ivy<\/a><\/li>\n<\/ul>\n
O que \u00e9 IVY?<\/h2>\n
IVY \u00e9 um mecanismo de desenvolvimento robusto e adapt\u00e1vel, criado para facilitar o desenvolvimento e a implanta\u00e7\u00e3o de aplica\u00e7\u00f5es modernas. Reconhecido por seus recursos de ponta e alto desempenho, o IVY oferece aos desenvolvedores uma gama completa de ferramentas e funcionalidades que aumentam a efici\u00eancia e a produtividade. Trata-se de um framework vers\u00e1til e escal\u00e1vel que se ajusta \u00e0s necessidades de cada projeto, seja ele o desenvolvimento de sistemas de software sofisticados, aplicativos m\u00f3veis ou aplica\u00e7\u00f5es online.<\/p>\n
As t\u00e9cnicas avan\u00e7adas de otimiza\u00e7\u00e3o do IVY garantem excelente velocidade e baixa lat\u00eancia, enquanto sua arquitetura modular facilita a integra\u00e7\u00e3o perfeita com diversas tecnologias e plataformas. Al\u00e9m disso, \u00e9 reconhecido por sua interface amig\u00e1vel e documenta\u00e7\u00e3o abrangente, que permitem que tanto desenvolvedores iniciantes quanto experientes o utilizem. O IVY, que prioriza a seguran\u00e7a e a confiabilidade, oferece aos desenvolvedores a confian\u00e7a necess\u00e1ria para criar solu\u00e7\u00f5es inovadoras que moldar\u00e3o o futuro das experi\u00eancias digitais. <\/p>\n
![\"rendering-pipeline-angular.png\"](\"\/Posts\/files\/rendering-pipeline-angular_637819012887962561.png\")
<\/p>\nComo funciona a hera?<\/h2>\n
A vers\u00e3o mais recente do Angular para o pipeline de compila\u00e7\u00e3o e renderiza\u00e7\u00e3o \u00e9 chamada de Ivy. A vers\u00e3o 9 do Angular introduz essa nova metodologia de compila\u00e7\u00e3o e execu\u00e7\u00e3o, implementada por padr\u00e3o em vez da antiga View Engine.<\/p>\n
O mecanismo de renderiza\u00e7\u00e3o atual, Ivy, \u00e9 amplamente utilizado e foi aprimorado e otimizado recentemente. De modo geral, ele permite a moderniza\u00e7\u00e3o do Angular Package Format (APF), o uso reduzido do compilador de compatibilidade ngcc e a simplifica\u00e7\u00e3o da API de componentes. Contrate desenvolvedores de aplicativos m\u00f3veis<\/a> para utilizar a vers\u00e3o mais recente e incorporar componentes do Ivy.<\/p>\n
Ivy \u00e9 uma reescrita completa do mecanismo de renderiza\u00e7\u00e3o do Angular, sendo a quarta e a terceira desde o Angular 2. Mas, ao contr\u00e1rio das reescritas dois e tr\u00eas, o Ivy promete melhorias significativas para sua aplica\u00e7\u00e3o. Com o Ivy, voc\u00ea pode compilar componentes de forma mais independente uns dos outros.<\/p>\n
Isso melhorar\u00e1 os tempos de desenvolvimento, uma vez que a recompila\u00e7\u00e3o de um aplicativo envolver\u00e1 apenas a compila\u00e7\u00e3o dos componentes alterados.<\/p>\n
Principais destaques da Angular Ivy<\/h2>\n
O Angular Ivy modifica o funcionamento interno das coisas sem alterar as aplica\u00e7\u00f5es.<\/p>\n
O renderizador mais avan\u00e7ado inclui os seguintes recursos:<\/p>\n
- \n
- Tamanho do pacote menor<\/li>\n
- Compila\u00e7\u00f5es mais r\u00e1pidas<\/li>\n
- Melhor depura\u00e7\u00e3o<\/li>\n
- DOM incremental<\/li>\n
- Verifica\u00e7\u00e3o aprimorada do tipo de modelo<\/li>\n
- Caracter\u00edsticas opcionais de hera<\/li>\n<\/ul>\n
Por que usar hera?<\/h2>\n
Muitos de n\u00f3s esquecemos que o HTML nunca chega ao navegador. O HTML \u00e9 compilado pelo Angular em instru\u00e7\u00f5es JavaScript para desenvolver o DOM correto quando o componente aparece na p\u00e1gina. Ele ent\u00e3o atualiza o componente quando o estado muda. Portanto, a maior parte do Angular \u00e9 o seu compilador, que pega todo o seu HTML e gera o c\u00f3digo JS necess\u00e1rio.<\/p>\n
Este compilador e o ambiente de execu\u00e7\u00e3o foram completamente reescritos ao longo do \u00faltimo ano, e tudo isso gra\u00e7as ao Ivy. O Angular \u00e9 um excelente framework que alcan\u00e7a os mesmos resultados que o HTML com o Ivy, gra\u00e7as a uma reescrita completa do compilador:<\/p>\n
- \n
- Obtenha tempos de compila\u00e7\u00e3o mais r\u00e1pidos.<\/li>\n
- Alcance tamanhos de constru\u00e7\u00e3o melhores.<\/li>\n
- Desbloqueie novos recursos potenciais, como metaprograma\u00e7\u00e3o ou componentes de ordem superior, um sistema de detec\u00e7\u00e3o de altera\u00e7\u00f5es recente n\u00e3o baseado em zone.js e muito mais.<\/li>\n<\/ul>\n
Agora, o “Porqu\u00ea” da IVY tem duas respostas principais:<\/p>\n
- \n
- Para localidade<\/li>\n<\/ul>\n
Localidade, neste contexto, significa um princ\u00edpio que o Ivy segue. A ideia por tr\u00e1s desse princ\u00edpio \u00e9 compilar um arquivo por vez.<\/p>\n
E foi aqui, enfatizando “apenas um”, porque “apenas um” significa apenas um arquivo de componente e seu modelo, sem outras depend\u00eancias, o que tornar\u00e1 o processo de compila\u00e7\u00e3o muito mais r\u00e1pido e simples. Antes, era imposs\u00edvel equilibrar o c\u00f3digo para ser enviado ao compilador AoT, mas agora isso criar\u00e1 um equil\u00edbrio entre AoT e JiT.<\/p>\n
- \n
- Para sacudir \u00e1rvores<\/li>\n<\/ul>\n
A t\u00e9cnica Tree Shaking do Ivy \u00e9 usada para criar otimiza\u00e7\u00f5es que garantem que o c\u00f3digo ineficiente n\u00e3o seja inclu\u00eddo no pacote final durante o processo de compila\u00e7\u00e3o do aplicativo. Portanto, os desenvolvedores n\u00e3o precisam enviar todo o c\u00f3digo do framework. Isso pode ser feito com as funcionalidades utilizadas no desenvolvimento do aplicativo. O principal benef\u00edcio do Tree Shaking para otimiza\u00e7\u00e3o \u00e9 a redu\u00e7\u00e3o do tempo de inicializa\u00e7\u00e3o.<\/p>\n
Atualizando para o Angular 9 com Ivy<\/h2>\n
Atualizando para Ivy para a vers\u00e3o Angular 9<\/p>\n
Para come\u00e7ar, instale o Angular CLI v9. No seu terminal, execute o comando abaixo.<\/p>\n
npm install -g @angular\/cli@9.0.1<\/a><\/p>\n
Dependendo do sistema, os desenvolvedores podem precisar executar este comando com privil\u00e9gios de administrador (sudo).<\/p>\n
Antes de atualizar o aplicativo para o Angular 9, voc\u00ea precisa atualiz\u00e1-lo para a vers\u00e3o avan\u00e7ada do Angular 8. Para fazer isso, abra o terminal no diret\u00f3rio raiz do aplicativo Jogo da Velha e execute o comando de atualiza\u00e7\u00e3o da seguinte forma.<\/p>\n
atualiza\u00e7\u00e3o @angular\/core@8 @angular\/cli@8<\/p>\n
Antes de reiniciar, voc\u00ea precisar\u00e1 instalar todas as depend\u00eancias de pacotes alteradas e confirmar as modifica\u00e7\u00f5es no git.<\/p>\n
Execute os dois comandos a seguir.<\/p>\n
npm install git commit -a -m “Avan\u00e7ar para a vers\u00e3o mais recente do Angular 8”<\/p>\n
Agora voc\u00ea pode atualizar para o Angular 9 executando o comando `ng update` novamente com argumentos diferentes.<\/p>\n
ng atualizar @angular\/core @angular\/cli –next<\/p>\n
Isso pode levar alguns minutos para ser conclu\u00eddo. Em seguida, voc\u00ea precisar\u00e1 instalar novamente todas as depend\u00eancias de pacotes modificadas e salvar e confirmar todas as altera\u00e7\u00f5es no Git.<\/p>\n
npm install git commit -a -m “Atualizar para Angular 9”<\/p>\n
Agora, atualize as bibliotecas do Angular Material para a vers\u00e3o mais recente.<\/p>\n
ng atualizar @angular\/material –pr\u00f3ximo<\/p>\n
Voc\u00ea pode receber um erro relacionado ao Angular Flex-Layout:<\/p>\n
O pacote “@angular\/flex-layout” possui uma depend\u00eancia incompat\u00edvel com “@angular\/cdk” (requer “^8.0.0-rc.0”, mas instalaria “9.0.0”). Depend\u00eancias inconsistentes foram detectadas.<\/p>\n
Adicione `–a force` ao c\u00f3digo acima para contornar esse problema.<\/p>\n
ng atualizar @angular\/material –next –force<\/p>\n
Atualize o Angular Flex-Layout para a vers\u00e3o mais recente:<\/p>\n
npm i @angular\/flex-layout@9.0.0-beta.29<\/a><\/p>\n
Funcionalidades do IVY no Angular 18<\/h2>\n
- \n
- Componentes carregados sob demanda<\/strong><\/li>\n<\/ul>\n
Os comandos `entryComponents` foram descontinuados, pois n\u00e3o s\u00e3o mais necess\u00e1rios. Qualquer recurso do Ivy pode ser carregado sob demanda e renderizado dinamicamente. Isso significa que, sem roteamento ou m\u00f3dulos do Angular, os desenvolvedores agora podem carregar e renderizar um componente facilmente.<\/p>\n
No entanto, na pr\u00e1tica, as empresas de desenvolvimento de aplicativos m\u00f3veis precisam usar m\u00f3dulos de renderiza\u00e7\u00e3o de componentes para vincular o modelo de um componente \u00e0s suas depend\u00eancias declar\u00e1veis. Nesse caso, as bibliotecas usadas apenas por um componente carregado sob demanda s\u00e3o encapsuladas em blocos carregados sob demanda.<\/p>\n
- \n
- Globaliza\u00e7\u00e3o<\/strong><\/li>\n<\/ul>\n
Para a globaliza\u00e7\u00e3o, as configura\u00e7\u00f5es regionais consistem em formata\u00e7\u00e3o de dados, formata\u00e7\u00e3o de n\u00fameros e configura\u00e7\u00f5es regionais semelhantes que podem ser carregadas dinamicamente em tempo de execu\u00e7\u00e3o. Elas s\u00e3o carregadas diretamente em tempo de execu\u00e7\u00e3o e n\u00e3o s\u00e3o registradas em tempo de compila\u00e7\u00e3o.<\/p>\n
- \n
- Melhoria na remo\u00e7\u00e3o de bot\u00f5es e no tratamento de erros<\/strong><\/li>\n<\/ul>\n
Com o Angular 18, o Ivy fornece mensagens de erro ainda mais detalhadas e \u00fateis, facilitando o diagn\u00f3stico e a corre\u00e7\u00e3o de problemas pelos desenvolvedores. Os rastreamentos de pilha e os relat\u00f3rios de erros aprimorados melhoram a experi\u00eancia geral de depura\u00e7\u00e3o.<\/p>\n
- \n
- Compila\u00e7\u00e3o de AOT em todos os lugares<\/strong><\/li>\n<\/ul>\n
![\"aot-compilation.png\"](\"\/Posts\/files\/aot-compilation_637819012893308501.png\")
<\/strong><\/p>\nPara o servidor de desenvolvimento e at\u00e9 mesmo para testes, o AOT agora \u00e9 permitido por padr\u00e3o. Inicialmente, a compila\u00e7\u00e3o AOT era consideravelmente mais lenta em compara\u00e7\u00e3o com a compila\u00e7\u00e3o JIT, ent\u00e3o o JIT era utilizado especificamente para o desenvolvimento e teste do aplicativo.<\/p>\n
Utilizando o processo de compila\u00e7\u00e3o e reconstru\u00e7\u00e3o do Angular Ivy, a compila\u00e7\u00e3o AOT proporciona atualmente uma \u00f3tima experi\u00eancia ao desenvolvedor.<\/p>\n
Quando a compila\u00e7\u00e3o JIT era utilizada em fases e apenas a compila\u00e7\u00e3o AOT na vers\u00e3o final, erros eram detectados em builds de produ\u00e7\u00e3o ou em tempo de execu\u00e7\u00e3o. Com uma empresa de desenvolvimento de aplicativos m\u00f3veis<\/a> Angular, voc\u00ea pode adicionar a compila\u00e7\u00e3o AOT, juntamente com outros recursos do Ivy, para incorporar ao seu aplicativo.<\/p>\n
- \n
- Compatibilidade com vers\u00f5es anteriores<\/strong><\/li>\n<\/ul>\n
O Ivy no Angular 18 foi projetado para ser totalmente compat\u00edvel com vers\u00f5es anteriores do Angular. Isso permite que os desenvolvedores atualizem seus aplicativos sem grandes refatora\u00e7\u00f5es, garantindo uma transi\u00e7\u00e3o tranquila para a vers\u00e3o mais recente.<\/p>\n
- \n
- Substitui\u00e7\u00e3o de m\u00f3dulos a quente (HMR) mais r\u00e1pida e precisa.<\/strong><\/li>\n<\/ul>\n
Com o Ivy, o Angular 18 aprimora o recurso de Substitui\u00e7\u00e3o de M\u00f3dulo a Quente (Hot Module Replacement), permitindo que os desenvolvedores vejam as altera\u00e7\u00f5es em tempo real sem precisar atualizar toda a aplica\u00e7\u00e3o. Isso acelera o processo de desenvolvimento e proporciona uma experi\u00eancia mais fluida.<\/p>\n
- Substitui\u00e7\u00e3o de m\u00f3dulos a quente (HMR) mais r\u00e1pida e precisa.<\/strong><\/li>\n<\/ul>\n
- Compatibilidade com vers\u00f5es anteriores<\/strong><\/li>\n<\/ul>\n
- Compila\u00e7\u00e3o de AOT em todos os lugares<\/strong><\/li>\n<\/ul>\n
- Melhoria na remo\u00e7\u00e3o de bot\u00f5es e no tratamento de erros<\/strong><\/li>\n<\/ul>\n
- Globaliza\u00e7\u00e3o<\/strong><\/li>\n<\/ul>\n
- Componentes carregados sob demanda<\/strong><\/li>\n<\/ul>\n
- Para sacudir \u00e1rvores<\/li>\n<\/ul>\n
- Para localidade<\/li>\n<\/ul>\n
- Como funciona a hera?<\/a><\/li>\n
![\"contact-us-angular-app-developers.png\"](\"\/Posts\/files\/contact-us-angular-app-developers_637819012894942218.png\")
<\/a><\/p>\n