Oi galera, tudo certo? Vamos falar um pouquinho sobre o Angular 8?
Manter um aplicativo web compatível e funcionando bem em todos os navegadores sempre foi uma das metas dos desenvolvedores web.
Com a chegada da nova versão estável do Angular 8, que traz um recurso voltado para a compatibilidade entre navegadores, os desenvolvedores passam a ter um aliado interessante para a melhoria de seus aplicativos web.
Esse novo recurso, chamado de Differential Loading, permite que o navegador onde seu aplicativo é carregado escolha o que funciona melhor: JavaScript moderno ou legado.
A nova versão do Angular executa automaticamente uma compilação atual (es2015) e uma compilação herdada (es5) de sua aplicação. Dessa forma, os navegadores mais recentes não são punidos por navegadores legados ao carregar um pacote enorme.
De acordo com Stephen Fluin, você pode economizar de 7 a 20% do tamanho do pacote. Tudo depende da quantidade de recursos JavaScript modernos que eles aproveitam.
>>Leitura Recomendada:
React vs Vue vs Angular: qual escolher?
Como funciona o Angular 8?
Os navegadores modernos têm a capacidade de interpretar um type module na tag script e ignorar o atributo noModule. E, no momento da execução, esse navegador carrega apenas os polyfills modernos (es2015). Em contrapartida, os navegadores antigos não reconhecem o type module e carregam apenas os polyfills (ES5).
<script src="polyfills-es2015.98e72e027a6f4a6d94cb.js" type="module"></script>
<script src= "polyfills-es5.76db6d98f648b3ec0e59.js" nomodule></script>
O padrão atual do build são os navegadores modernos que suportam ES6. O arquivo browserslist, que antes era apenas para especificações CSS, agora também é usado para especificações JS, tornando possível especificar os navegadores antigos, como por exemplo o IE9.
Para saber a lista de navegadores que estão dentro da configuração padrão basta executar o comando npx browserslist ou consultar o browserl.list.
Para deixar o Differential Loading disponível basta executar o comando ng build com o parâmetro –prod, que o angular cli realizará o empacotamento e tudo estará disponível automaticamente.
Outras Novidades do Angular 8
- Lazy Load: Agora as rotas que estão configuradas como Lazy Load irão utilizar a importação dinâmica e sua sintaxe terá que mudar para algo como:
path: 'starter',
loadChildren: ( ) => import ('./starter/starter.module').then(m => m.StarterModule)
Se na atualização você estiver usando o comando ng upgrade, a mudança será feita automaticamente. Caso contrário, você precisará realizar essa mudança manualmente.
- TypeScript: O novo Angular usa o TypeScript 3.4 . Por isso, é preciso ficar atento a possíveis erros de sintaxe que possam ocorrer, dependendo da versão de TypeScript que o seu app utiliza.
- CLI: O CLI conta com atualizações de novas APIS de builder e recursos que incluem aprimoramentos na migração do AngularJS e telemetria CLI.
>> Leitura Recomendada:
8 erros de CSS que você não pode cometer
Como Atualizar o Angular
Antes de iniciar o update para a nova versão do Angular, é importante que você crie uma nova branch em seu repositório de código para essa atualização.
Assim, caso aconteça algo grave durante a atualização, você mantém a integridade do seu app. É importante também verificar nas documentações das suas libs externas o suporte para esta nova versão.
Vou ensinar um passo-a-passo para ajudar vocês com a atualização:
Passo 1:
Antes de tudo é necessário realizar a atualização do Angular CLI, utilizando o comando abaixo. Lembrando que caso esteja em um sistema UNIX é necessário colocar o SUDO na frente do comando.
npm install -g @angular/cli
Passo 2:
Desde a versão 6 do Angular, com a introdução do comando ng update, as atualizações ficaram bem mais fluidas. Basta executar este comando com o parâmetro –-all que o seu app será atualizado automaticamente:
ng update --all
Visando facilitar a atualizações de versões do Angular, o Google disponibilizou um guia que contém um passo a passo detalhado. Nele é possível escolher o nível de complexidade de seu app, escolher a versão e para que deseja atualizar. Acesse o guia e confira.
>>Leitura Recomendada:
Introdução ao Flutter, o framework da Google
Em conclusão
Sempre acho importante ressaltar que é fundamental a leitura da documentação oficial da libs e ferramentas utilizadas no seu projeto, assim o processo de atualização de sua aplicação fica muito mais controlável.
Espero que tenham gostado do assunto. Qualquer sugestão ou crítica me procurem nas redes sociais, terei um grande prazer em discutir sobre esse assunto com vocês, um grandes abraço e até a próxima.
>>Leitura Recomendada:
Leia nosso artigo sobre as melhores extensões para o Microsoft Visual Studio
Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive Vagas AngularJS.
