Primeros pasos: Optimiza una aplicación de Angular

¿Quieres que tu sitio de Angular sea lo más rápido y accesible posible? Este es el lugar indicado.

Angular es un framework para compilar interfaces de usuario. Proporciona elementos básicos para ayudarte a configurar rápidamente una aplicación escalable y mantenible. Angular permite que los desarrolladores creen aplicaciones que pueden alojarse en la Web, en dispositivos móviles o en computadoras.

¿Qué incluye esta colección?

Esta colección se enfoca en cinco áreas principales para optimizar una aplicación de Angular:

  • Mejora el rendimiento de tu aplicación para aumentar la conversión y la participación de los usuarios
  • Mejora la confiabilidad de tu aplicación en redes de baja calidad almacenando previamente los activos con el service worker de Angular
  • Haz que tu aplicación sea detectable para los motores de búsqueda y los bots de redes sociales mediante la renderización previa y la renderización del servidor
  • Haz que tu aplicación sea instalable para brindar una experiencia del usuario similar a la de una app para iOS o Android

En cada publicación de la colección, se describirán técnicas que puedes aplicar directamente a tus propias aplicaciones.

¿Qué no hay en esta colección?

En esta colección, se supone que ya conoces Angular y TypeScript. Si aún no te sientes seguro con ellos, consulta la documentación de TypeScript y la guía Cómo comenzar a usar Angular en angular.io.

Inicia un proyecto

La interfaz de línea de comandos (CLI) de Angular te permite configurar rápidamente una aplicación de Angular del cliente simple. En esta publicación, se incluye una breve introducción a la CLI, mientras que en otras publicaciones de la colección se muestra cómo agregar funciones más avanzadas, como la renderización del servidor y la compatibilidad con la implementación.

Configura la CLI

Para comenzar, instala la CLI de forma global y ejecuta estos comandos para verificar que tienes la versión más reciente:

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

Asegúrate de que el último comando muestre la versión 8.0.3 o una posterior.

Como alternativa, si no quieres instalar la CLI de forma global, puedes instalarla de forma local y ejecutarla con el comando npx:

npm i @angular/cli
npx ng
--version

Crea el proyecto

Para crear un proyecto nuevo, ejecuta lo siguiente:

ng new my-app

Este comando creará los archivos iniciales y la estructura de carpetas de tu aplicación, y también instalará los módulos de nodos que necesita.

Una vez que se complete correctamente el proceso de configuración, ejecuta el siguiente comando para iniciar tu aplicación:

cd my-app
ng serve

Ahora deberías poder acceder a tu aplicación en http://localhost:4200.

Próximos pasos

En el resto de esta colección, aprenderás a mejorar el rendimiento y el SEO de tu aplicación de Angular. Esto es lo que se aborda:

  • División de código a nivel de la ruta en Angular
  • Presupuestos de rendimiento con la CLI de Angular
  • Estrategias de carga previa de rutas en Angular
  • Optimización de la detección de cambios en Angular
  • Virtualiza listas grandes con el CDK de Angular
  • Almacenamiento previo en caché con el Service Worker de Angular
  • Renderiza rutas previamente con Angular CLI
  • Renderización del servidor con Angular Universal
  • Agrega un manifiesto de app web con Angular CLI