Comece agora: otimizar um aplicativo do Angular

Quer tornar seu site Angular o mais rápido e acessível possível? Você está no lugar certo.

O Angular é um framework para a criação de interfaces do usuário. Ele fornece elementos fundamentais que ajudam você a configurar rapidamente um aplicativo sustentável e escalonável. O Angular permite que os desenvolvedores criem aplicativos para Web, dispositivos móveis ou computadores.

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

  • Como melhorar a performance do seu app para aumentar a conversão e o engajamento do usuário
  • Melhorar a confiabilidade do seu aplicativo em redes ruins armazenando os recursos em cache com o service worker do Angular
  • Tornar seu aplicativo detectável para mecanismos de pesquisa e bots de mídias sociais usando a pré-renderização e a renderização do lado do servidor
  • Tornar seu aplicativo instalável para oferecer uma experiência do usuário semelhante à de um app iOS/Android

Cada postagem da coleção vai descrever técnicas que você pode aplicar diretamente nos seus próprios apps.

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

Nesta coleção, presumimos 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 no angular.io.

Começar um projeto

A interface de linha de comando (CLI) do Angular permite configurar rapidamente um aplicativo Angular simples do lado do cliente. Esta postagem tem uma breve introdução à CLI, enquanto outras postagens da coleção mostram como adicionar recursos mais avançados, como renderização no 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, instale-a localmente e execute-a com o comando npx:

npm i @angular/cli
npx ng
--version

Criar o projeto

Para criar uma nova execução de projeto:

ng new my-app

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

Quando o processo de configuração for concluído, inicie o aplicativo executando:

cd my-app
ng serve

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

A seguir

No restante desta coleção, você vai aprender a melhorar a performance e o SEO do seu aplicativo Angular. Confira o que será abordado:

  • Divisão de código no nível da rota no Angular
  • Performance Budgets com a CLI do Angular
  • Estratégias de pré-busca de rotas no Angular
  • Otimização da detecção de mudanças no Angular
  • Virtualize listas grandes com o CDK do Angular
  • Armazenamento em cache antecipado com o service worker do Angular
  • Pré-renderizar rotas com a CLI do Angular
  • Renderização do lado do servidor com o Angular Universal
  • Adicionar um manifesto de app da Web com a CLI do Angular