0

Angular 12 e suas novas features

#Angular #JavaScript #TypeScript
André Rodrigues
André Rodrigues

O grande momento chegou, amigos. O Angular vem trazendo diversas otimizações em seu core, e confesso a vocês que estou muito ansioso para fazer um "Hello World", na versão 12.


Antes de mergulharmos nessas atualizações, vamos dar uma olhada na jornada Angular. Uma chave vital para o futuro da Angular é a Ivy e o que ela abre para a plataforma. Os desenvolvedores têm trabalhado em lançamentos recentes com o objetivo de convergir o ecossistema Angular para Ivy. Podemos chamar essa abordagem de “Ivy Everywhere”.

Aqui estão as mudanças que estão fazendo para permitir essa transição.


Seja bem vindo Ivy!


A chave na próxima evolução do Angular finalmente chegou, finalmente será descontinuada o View Engine. Isso significa que:


  • Agora que o View Engine está obsoleto, ele será removido em uma versão principal futura .
  • Bibliotecas atuais que usam View Engine ainda funcionarão com aplicativos Ivy (nenhum trabalho é exigido pelos desenvolvedores), mas os autores da biblioteca devem começar a planejar a transição para Ivy.


Fazendo a transição de IDs de mensagem i18n herdados


Atualmente, existem vários formatos de id de mensagem herdados sendo usados no sistema i18n. Esses ids de mensagem legados são frágeis, pois podem surgir problemas com base em espaços em branco e nos modelos de formatação e expressões ICU. Para resolver esse problema, desenvolvedores responsáveis estão migrando para longe deles. O novo formato de id de mensagem canônica é muito mais flexível e intuitivo. Este formato reduzirá a invalidação de tradução desnecessária e o custo de retradução associado em aplicativos onde as traduções não correspondem devido a alterações de espaço em branco, por exemplo.


Desde a v11, novos projetos são configurados automaticamente para usar os novos ids de mensagem e agora temos ferramentas para migrar projetos existentes com traduções existentes.


O Futuro do Protractor


A equipe Angular tem trabalhado com a comunidade para determinar o futuro do Transferidor. No momento, estamos revisando o feedback compartilhado na RFC . Ainda está sendo dialogado o melhor futuro para o Protractor. No momento foi optado por não incluí-lo em novos projetos e, em vez disso, fornecer opções com soluções populares de terceiros no Angular CLI. Atualmente, está trabalhando com Cypress, WebdriverIO e TestCafe para ajudar os usuários a adotarem soluções alternativas. Mais informações virão à medida que isso se desenvolver.


Nullish Coalescing


O operador nullish coalescing ( ??) tem ajudado os desenvolvedores a escrever um código mais limpo em classes TypeScript por um tempo. Tenho o prazer de anunciar que você pode trazer o poder da coalescência nula para os modelos Angular na v12!


Agora, em modelos, os desenvolvedores podem usar a nova sintaxe para simplificar condicionais complexas. Por exemplo:

{{idade! == null && idade! == indefinido? idade: calcularAge ()}}


Torna-se:

{{ era ?? calcularAge ()}}


Experimente hoje e diga-nos o que pensa!


Learning Angular


Os Desenvolvedores estão sempre trabalhando para melhorar a experiência de aprendizado Angular para comunidade dev. Como parte desse esforço, foram feitas algumas mudanças significativas na documentação. 


Melhorias de estilo


A partir da v12, os componentes angulares agora oferecerão suporte ao Sass embutido no stylescampo do @Componentdecorador. Anteriormente, o Sass estava disponível apenas em recursos externos devido ao compilador Angular. Para habilitar esse recurso em seus aplicativos existentes, adicione "inlineStyleLanguage": "scss” ao angular.json. Caso contrário, estará disponível para novos projetos utilizando SCSS.


Na versão v11.2, foi adicionado suporte para Tailwind CSS. Para começar a usá-lo em projetos: instale o tailwindcss package do npm e inicialize o Tailwind para criar o tailwind.config.js em seu projeto. Agora, as equipes estão prontas para começar a usar o Tailwind no Angular.


O Angular CDK e o Angular Material adotaram internamente o novo sistema de módulo da Sass . Se o seu aplicativo usa Angular CDK ou Angular Material, você precisará verificar se mudou node-sass para o sass pacote npm . O node-sass package não tem manutenção e não acompanha mais as adições de novos recursos à linguagem Sass.

Além disso, o Angular CDK e o Angular Material expõem uma nova superfície Sass API projetada para consumo com a nova @usesintaxe. Esta nova superfície API fornece os mesmos recursos, mas com nomes mais significativos e pontos de entrada mais ergonômicos. Todos os guias em material.angular.io foram totalmente reescritos para mostrar essa nova superfície de API, bem como fornecer explicações mais detalhadas sobre conceitos de temas e APIs.

Ao atualizar para a v12, seu aplicativo muda automaticamente para a nova API Sass, atualizando seu aplicativo com ng update. Este comando irá refatorar quaisquer @importinstruções Sass para o código Angular CDK e Angular Material para a nova @useAPI.


Mais ótimos recursos

Vamos dar uma olhada em algumas das outras ótimas atualizações feitas nesta versão:


  • A execução ng build agora é padronizada para produção, o que economiza algumas etapas extras para as equipes e ajuda a evitar complicações de desenvolvimento acidentais na produção!
  • O modo estrito é habilitado por padrão no CLI. O modo estrito ajuda a detectar erros no início do ciclo de desenvolvimento. 
  • O serviço de linguagem baseado em Ivy está mudando de opcional para ativado por padrão. O Serviço de Linguagem ajuda a aumentar sua produtividade ao criar aplicativos, fornecendo excelentes recursos, como conclusão de código, erros, dicas e navegação dentro de modelos angulares. 
  • Na atualização v11, foi incrementado suporte experimental para Webpack 5. Hoje, tenho o prazer de compartilhar com vocês que será lançada uma versão pronta para produção do suporte para Webpack 5 em Angular.
  • Também está sendo atualizado a versão compatível do TypeScript para 4.2..


Suspensão de suporte para IE11

Angular é uma plataforma perene, o que significa que ela se mantém atualizada com o ecossistema da web em evolução. A remoção do suporte para navegadores legados, permite concentrar os esforços no fornecimento de soluções modernas e melhor suporte para desenvolvedores e usuários.


Serão incluídas uma nova mensagem de aviso de suspensão de uso no Angular v12 - e remoção do suporte para IE11 no Angular v13.

Você pode ver nossa justificativa de decisão acessando o RFC .


Conclusão

A equipe Angular tem trabalhado arduamente servindo a comunidade em muitas áreas. A features mencionadas acima serão a chave para uma experiência incrível na V13, teremos muitas novidades que ainda virão para melhorar o desenvolvimento de nossas soluções. Espero que tenham gostado desse post, um forte abraço e até próximo.

0
3

Comentários (0)

None

Brasil