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 escalonável e sustentá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.
Qual é a próxima etapa?
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