Comece agora: otimizar um aplicativo do Angular

Quer tornar seu site do Angular o mais rápido e acessível possível? Você veio ao lugar certo!

O que é o Angular?

O Angular é um framework para a criação de interfaces do usuário. Ele fornece elementos básicos para ajudar você a configurar rapidamente um aplicativo sustentável e escalonável. Com o Angular, os desenvolvedores podem criar aplicativos para Web, dispositivos móveis ou computadores.

O que tem nesta coleção?

Esta coleção se concentra em cinco áreas principais para otimizar um aplicativo Angular:

  • Melhorar o desempenho do seu aplicativo para aumentar o engajamento e as conversões dos usuários
  • Aumentar a confiabilidade do seu aplicativo em redes ruins, fazendo o pré-armazenamento em cache dos recursos com o service worker do Angular
  • Como tornar seu aplicativo detectável para mecanismos de pesquisa e bots de mídia social usando a pré-renderização e a renderização do lado do servidor
  • Tornar o aplicativo instalável para fornecer uma experiência do usuário semelhante à de um app iOS/Android.
  • Melhorar a acessibilidade do aplicativo para que ele possa ser usado e compreensível para todos os usuários

Cada postagem da coleção descreve técnicas que você pode aplicar diretamente aos seus próprios aplicativos.

O que não está nesta coleção?

Esta coleção parte do princípio que você já conhece o Angular e o TypeScript. Se você ainda não se sente confiante com eles, confira a documentação do TypeScript e o guia Primeiros passos com o Angular em angular.io (links em inglês).

Iniciar um projeto

Com a interface de linha de comando (CLI) Angular, é possível configurar rapidamente um aplicativo Angular simples do lado do cliente. Esta publicação apresenta uma breve introdução à CLI, enquanto outras da coleção mostram como adicionar recursos mais avançados, como renderização no lado do servidor e suporte à implantação.

Configurar a CLI

Para começar, instale a CLI globalmente e verifique se você tem a versão mais recente executando estes comandos:

npm i -g @angular/cli
ng --version

Verifique se o último comando gera a versão 8.0.3 ou mais recente.

Como alternativa, se você não quiser instalar a CLI globalmente, é possível instalá-la localmente e executá-la com o comando npx:

npm i @angular/cli
npx ng --version

Criar o projeto

Para criar um novo projeto, execute:

ng new my-app

Esse comando vai criar os arquivos e a estrutura de pastas iniciais do seu aplicativo e instalar os módulos de nó necessários.

Depois que o processo de configuração for concluído, inicie seu aplicativo executando:

cd my-app
ng serve

Agora você deve conseguir acessar o aplicativo em http://localhost:4200.

A seguir

No restante desta coleção, você aprenderá a melhorar o desempenho, a acessibilidade e a SEO do seu aplicativo Angular. Veja o que é abordado:

  • Divisão de código no nível da rota no Angular
  • Orçamentos de desempenho com a CLI Angular
  • Estratégias de pré-busca de rotas no Angular
  • Otimização da detecção de mudanças no Angular
  • Virtualizar listas grandes com o CDK do Angular
  • Pré-armazenamento em cache com o Service Worker do Angular
  • Pré-renderizar rotas com a CLI Angular
  • Renderização do lado do servidor com o Angular Universal
  • Adicionar um manifesto de app da Web com a CLI Angular
  • Auditoria de acessibilidade com o Codelyzer