Agora, o verão é a época do ano em que várias conferências e outros eventos são realizados em todo o mundo. Os programadores, neste momento, estão sobrecarregados de novas informações, o que geralmente é bastante difícil de assimilar.
O universo de desenvolvimento front-end se assemelha a um trem que se move sem parar. Todos sabemos como é difícil acompanhar esse trem. Assistir a vídeos de conferências leva muito tempo, como resultado, o motivo é claro: muitos de nós, depois do trabalho no escritório, preferimos assistir filmes no Netflix.
O autor do material, cuja tradução publicamos, diz que é por isso que ele decidiu ajudar todos que desejam entender as inovações da Angular. Aqui, falaremos sobre o estado atual do Angular, sobre os novos recursos dessa estrutura, sobre as tendências atuais.
Sobre o aumento angular
De acordo com dados fornecidos no ng-conf 2019 por Brad Green, um membro da equipe de desenvolvimento Angular, o escopo do Angular cresceu cerca de 50% ao longo do ano!
É claro que esses dados podem ser afetados pelo fato de muitos projetos estarem em processo de transição do Angular 1.X para versões mais recentes da estrutura. Mas 50% ainda é um indicador impressionante.
Angular não cresce tão rápido quanto Svelte ou Vue. Essa estrutura não é usada tão amplamente quanto o React. Mas, ao contrário do que você pode ler sobre outras estruturas em recursos como Reddit ou Twitter, o Angular está em boas condições e é usado por milhões de desenvolvedores e equipes.
Angular possui uma infraestrutura grande e dinâmica.
Embora a Angular tenha muitas ferramentas úteis úteis criadas por uma equipe principal de desenvolvimento, seu ecossistema, uma comunidade de entusiastas que contribuem para seu desenvolvimento, é extremamente grande. Ela também é representada por projetos de altíssima qualidade.
Juntamente com a estrutura básica, você pode usar muitas ferramentas interessantes. Ou seja, estamos falando sobre o seguinte:
- Integração profunda com excelentes ferramentas de desenvolvimento dinâmico. Entre eles, TypeScript e RxJS podem ser observados. O desenvolvimento dessas tecnologias tem um efeito positivo direto no Angular.
- Diferentes tipos de bibliotecas para gerenciar o estado do aplicativo.
- Ferramentas para analisar e melhorar a qualidade do código. Como o Codelyzer .
- Bibliotecas de elementos da interface do usuário, componentes, diretivas, pipelines e assim por diante.
- Grande variedade de plugins para vários IDEs.
- Bibliotecas e estruturas para testar aplicativos.
- Documentação detalhada e de alta qualidade que está sendo trabalhada pelos membros da comunidade e pela equipe Angular. Isso inclui diretrizes práticas, guias, materiais de treinamento, livros e cursos em vídeo. Embora este seja o último item desta lista, é tão importante quanto os outros.
Nas seções a seguir, focaremos em algumas ferramentas particularmente interessantes que você pode usar ao desenvolver projetos Angular.
CLI angular
CLI angular e processo de atualização angular extremamente simples
Estas não são palavras vazias.
Aqui você encontra uma boa história sobre como o projeto BlueWeb, que atende anualmente meio bilhão de usuários, foi atualizado do Angular 7 para o Angular 8 em um dia útil. Essa é uma conquista impressionante, já que a transição da segunda para a quarta versão do Angular levou 30 dias para o mesmo projeto.
Isso prova o grande valor da CLI angular. O uso dessa ferramenta pode aumentar a produtividade a um nível que eu pessoalmente não havia encontrado antes.
Atualmente, está se tornando muito difícil imaginar trabalhar sem a CLI Angular.
▍ Ferramenta esquemática
A ferramenta Angular Schematics é algo que os desenvolvedores Angular provavelmente usam diariamente. Por exemplo, tenho certeza de que você costuma usar este comando:
ng generate component my-component
Ele é baseado na ferramenta Esquema incorporada na CLI Angular.
Talvez seja novidade para você que os desenvolvedores tenham a oportunidade de
criar suas próprias regras esquemáticas. Seu uso facilita o trabalho com fragmentos de código usados com freqüência.
▍API Builders
Os API Builders permitem
expandir ou expandir equipes existentes . Por exemplo, você pode criar uma equipe que executa testes usando Jest e Cypress, em vez de Jasmine e Transferidor. Você pode, por exemplo, usar um linter alternativo.
Novos recursos interessantes da estrutura
No momento da redação deste material, a versão 8 do Angular já havia sido lançada, contendo várias melhorias e novos recursos.
Não há nada aqui que mude seriamente a maneira como essa estrutura é usada. Uma declaração semelhante a respeito de uma nova versão de uma ferramenta é geralmente vista como uma boa notícia. Mas no Angular 8 existem muitas melhorias que não são visíveis, por assim dizer, a olho nu. Graças a eles, os projetos angulares se tornam menores e mais rápidos. Essas melhorias tornam o processo de desenvolvimento de aplicativos Angular ainda mais agradável do que antes. Além disso, a nova versão da estrutura possui um novo sistema de renderização quase pronto para uso total.
Loading Carga diferencial
O “carregamento diferencial”, a julgar pelo nome dessa tecnologia, pode parecer algo muito complicado, mas na verdade não é. Em poucas palavras, graças a esse recurso, o compilador gera dois pacotes. Um é para navegadores modernos. Não há código polyfill nele. O segundo é para versões mais antigas de navegadores.
Navegadores mais recentes baixam pacotes modernos. E navegadores mais antigos que precisam de conjuntos de download de polyfill projetados especificamente para eles.
Esta é uma inovação muito útil. Como a maioria dos usuários provavelmente trabalha nas versões mais recentes dos navegadores, isso leva ao fato de que os pacotes com polyfills, maiores que os pacotes modernos, são usados apenas por um pequeno número de usuários.
▍ Trabalhadores da Web
Você provavelmente já ouviu falar sobre trabalhadores da Web, portanto não trataremos da explicação da essência dessa tecnologia. Mas você pode não saber como é fácil integrar trabalhadores da Web em aplicativos na nova versão do Angular.
Aqui você pode ler mais sobre isso.
▍ Caixa de ferramentas CDK
CDK é um kit de ferramentas lançado por uma equipe que desenvolve componentes Angular. Nele, você pode encontrar abstrações usadas pelo
Material Angular , independentes de estilos.
Por exemplo, graças ao CDK, o desenvolvedor possui diretivas que permitem implementar os seguintes recursos:
- Trabalhe com objetos no estilo "Arrastar e soltar".
- Use áreas de texto que são redimensionadas automaticamente.
- Pop-ups.
- Rolagem virtual.
O CDK é uma ferramenta extremamente útil devido ao fato de que a maioria dos aplicativos pode usar abstrações generalizadas de alta qualidade, cada uma das quais implementando apenas funcionalidades limitadas. Isso é muito melhor do que o uso generalizado e nem sempre justificado de componentes completos. Material angular é um conjunto maravilhoso de componentes, mas o poder do CDK é que ele permite que o desenvolvedor crie seus próprios componentes a partir dos blocos de construção básicos.
Rendering Mecanismo de renderização Ivy
Ivy é um novo desenvolvimento muito interessante, que é um mecanismo de renderização. O trabalho no Ivy ainda não foi concluído. Por padrão, esse mecanismo está desativado. Mas, começando com o Angular 7, ele já pode ser ativado e usado. Espera-se que Ivy seja o principal mecanismo de renderização no Angular 9.
Aqui está o que você pode esperar de um mecanismo Ivy completo:
- Reduzindo o tamanho dos pacotes.
- Modelos de depuração.
- Montagem mais rápida do projeto, testes mais rápidos.
- Correção de erros existentes.
Se falamos de depuração, aqui está uma captura de tela na qual você pode ver o ponto de interrupção acionado no console do Chrome.
Depuração de códigoComo você pode ver, a diretiva
ngForOf fornece informações sobre o valor passado.
Plataformas angulares e móveis
▍Iônico
Ionic é uma estrutura para o desenvolvimento de aplicativos móveis. Embora seus componentes básicos sejam criados usando o Stencil, eles fornecem abstrações para o desenvolvedor que permitem que o Ionic seja usado com estruturas Angular e outras.
AtiveNativeScript
NativeScript é uma estrutura de desenvolvimento de aplicativo móvel nativa semelhante ao React Native. Possui profunda integração com o Angular - junto com o suporte ao Vue e a capacidade de usá-lo para desenvolvimento em JavaScript puro. Infelizmente, minha experiência com ele não foi particularmente bem-sucedida. Não posso colocá-lo em pé de igualdade com o React Native. No entanto, se você é sério sobre o desenvolvimento de aplicativos móveis, experimente o NativeScript.
Teste
Jasmine e transferidor
Jasmine e Transferidor não precisam de introdução. Essas são ferramentas padrão para testar aplicativos angulares. Eles são bem testados pelo tempo, atualizados regularmente e funcionam muito bem com o Angular.
EstJest e Cypress
O teste de aplicativos Angular com Jest e Cypress foi possível graças a novas ferramentas baseadas nos API Builders que fazem parte da CLI Angular.
Jest é uma estrutura de teste de unidade baseada em Jasmine. É desenvolvido no Facebook. Essa é uma estrutura padrão para testar projetos React, é amplamente distribuída devido à sua velocidade. Muitas pessoas preferem usá-lo em vez de Jasmine. Se você também gosta do Jest - agora pode usá-lo para testar aplicativos Angular.
Cypress é uma estrutura de teste de ponta a ponta altamente respeitada. Não é por acaso que a comunidade de desenvolvimento o trata muito bem. É independente do Selenium ou WebDriver. Cypress permite que você trabalhe com registros de equipe, sabe como gerenciar o tráfego de rede. Como é bastante estável, você pode esperar que os resultados obtidos com sua ajuda sejam bastante compreensíveis e previsíveis.
▍ Caixa de ferramentas da Biblioteca de testes angulares
Biblioteca de testes angular é um conjunto de ferramentas para testar componentes da interface do usuário com foco na reprodução de ações do usuário.
Isso significa que esta biblioteca empurra o programador para garantir que ele não funcione com componentes programaticamente. O objetivo é testar o comportamento dos componentes. A biblioteca executa as ações que os usuários geralmente executam.
Por exemplo, ao trabalhar com ferramentas desta biblioteca, essas construções não são usadas:
myComponent.onClick();
Em vez disso, o comportamento natural do usuário é simulado:
const { getByText, click } = await render(CounterComponent, { componentProperties: { counter: 5 } }); click(getByText('+'));
Gestão estatal
▍NgRx
NgRx é uma biblioteca para gerenciar o estado dos aplicativos, criada sob a influência de idéias incorporadas no Redux. NgRx é provavelmente a biblioteca de gerenciamento de estado mais usada no desenvolvimento Angular. O nome da biblioteca sugere que ele use seriamente os fluxos de RxJs.
▍NGXS
O NGXS é uma biblioteca alternativa para gerenciar o estado em aplicativos Angular, semelhante ao Redux. Se você comparar o NGXS e o RxJS, os recursos do NGXS são que ele usa muitas classes e decoradores. Isso é feito para reduzir a quantidade de código padrão. Provavelmente, esse recurso do NGXS pode ser decisivo ao escolher uma biblioteca para gerenciar o estado, se alguém que estiver procurando por essa biblioteca estiver acostumado a usar classes.
▍Akita
Akita é uma biblioteca de gerenciamento de estado desenvolvida pela Datorama. Essa biblioteca também é baseada no RxJS. Se você compará-lo com as duas bibliotecas anteriores, seu recurso é que ele pode ser usado em projetos nos quais o Angular não é usado. Isso significa que escolher a biblioteca Akita a longo prazo pode levar a melhores oportunidades para reutilizar o código do projeto.
▍ Talvez apenas tome RxJs?
Posso dar uma resposta positiva à pergunta colocada no título desta seção. Tudo depende se você gosta de bibliotecas remanescentes do Redux e se o projeto precisa de uma biblioteca para gerenciar o estado. Se desejar, você pode criar serviços que armazenam o estado usando as ferramentas
RxJS padrão.
Bibliotecas de componentes da interface do usuário
▍StoryBook
O StoryBook não é realmente uma biblioteca de componentes da interface do usuário. Essa é uma ferramenta que permite criar componentes isolados e possibilita o estudo de componentes e suas variantes.
Esta é uma ótima ferramenta. Anteriormente, estava disponível apenas para desenvolvedores do React. Eu os invejava então. Mas agora os desenvolvedores Angular podem usá-lo, então não posso deixar de mencioná-lo.
▍Material angular
Aqui, falaremos algumas palavras sobre a notória biblioteca de
materiais angulares , que oferece às mãos de um desenvolvedor moderno um bom conjunto de componentes projetados para a versão mais recente do Angular.
Back-end para aplicações angulares
▍Firebase
Firebase é uma plataforma de desenvolvimento de aplicativos de propriedade do Google. A conseqüência disso é que existe uma biblioteca oficial para Firebase e Angular -
AngularFire . Esta biblioteca usa observáveis RxJS para transmitir dados. É profunda e eficientemente integrado ao Angular.
▍GraphQL
Talvez você pense que o prazer de trabalhar com o GraphQL esteja disponível apenas para programadores do React. Se sim, então você está enganado. Também existe uma versão da biblioteca
Apollo para Angular. O que você pode criar com esta biblioteca é uma ótima alternativa ao Firebase. Apollo é para quem prefere trabalhar com o GraphQL.
▍NestJS
O NestJS é uma estrutura da web para o Node.js projetada para o desenvolvimento de aplicativos de servidor. A partir de exemplos, podemos concluir que os conceitos básicos de Angular tiveram uma grande influência sobre ele. Estes são módulos, controladores, transportadores e assim por diante. Se você gosta de Angular, provavelmente também gostará do NestJS.
Se você usar o
Nx Workspaces , a criação de uma estrutura para um aplicativo de pilha completa baseada no Angular e no NestJS é uma questão de executar um comando no console.
Sumário
Como resultado, podemos dizer que o vasto ecossistema desenvolvido em torno da Angular oferece a todos que desejam ferramentas confiáveis e de alta qualidade para resolver uma ampla gama de problemas.
Obviamente, não posso contar aqui sobre dezenas de minhas bibliotecas e ferramentas favoritas. Se eu tivesse feito isso, esse material teria sido interminável. Espero que este artigo tenha fornecido uma visão geral do fenômeno do desenvolvimento web moderno chamado Angular. Espero que aqui você tenha encontrado algo que, no futuro, possa usar em seus projetos.
Caros leitores! O que você mais gosta (ou não) no Angular 8?
