angular/aio/content/guide/architecture-next-steps.md
Michael Prentice 4ff7aeadbb
ci: fix broken documentation links (#289)
Relates to #273. Relates to #276.
2020-10-22 09:35:46 -05:00

7.3 KiB

Próximos Pasos: Herramientas y Técnicas

Una vez que comprendas los conceptos básicos de Angular, puedes aprender más sobre las funcionalidades y herramientas que pueden ayudarte a desarrollar y entregar aplicaciones Angular.

  • Realiza el tutorial Tour de Héroes para familiarizarte con los conceptos básicos necesarios para crear una aplicación bien diseñada.

  • Consulta el Glosario para comprender los términos específicos de Angular y su correspondiente utilización.

  • Utiliza la documentación te permite conocer en detalle las funcionalidades claves, según tu etapa de desarrollo y tus áreas de interés.

Arquitectura de la aplicación

  • La guía de Componentes y Plantillas explica como conectar los datos de la aplicación de sus componentes con las plantillas de las pantallas, para crear una aplicación completamente interactiva.

  • La guía de NgModules proporciona información detallada sobre la estructura de módulos utilizada en una aplicación Angular.

  • La guía de Enrutamiento y navigación describe como crear aplicaciones que permitan al usuario navegar entre las diferentes vistas dentro de su aplicación de una sola página (SPA).

  • La guía de Injección de dependencias brinda información detallada sobre cómo construir una aplicación de modo que cada clase de componente pueda adquirir los servicios y objetos que necesita para realizar su función.

Programación responsive

La guía de Componentes y Plantillas brinda orientación y detalles de la sintaxis de plantilla que se utilizan para mostrar la información de sus componentes, cuando y donde lo desees dentro de una vista y para obtener entradas (inputs) de los usuarios a las que puedas responder.

Las páginas y secciones adicionales describen algunas técnicas básicas de programación para aplicaciones Angular.

  • Lifecycle Hooks: Aprovecha los momentos claves de la vida de un componente, desde su creación hasta su destrucción, implementando las interfaces de los lifecycle hooks.

  • Observables y procesamiento de eventos: Cómo utilizar observables con componentes y servicios para publicar y suscribirse a mensajes de cualquier tipo, tales como los eventos de interacción del usuario y los resultados de operaciones asincrónicas.

  • Elementos Angular: Cómo empaquetar componentes como elementos personalizados utilizando Web Components, un estándar web para definir nuevos elementos HTML de una manera agnóstica a cualquier framework.

  • Formularios: Soporta escenarios complejos de entrada de datos con validación de entradas (inputs) basadas en HTML.

  • Animaciones: Utiliza la librería de animación de Angular para animar el comportamiento de los componentes sin necesidad de conocer en profundidad las técnicas de animación o CSS.

Interacción Cliente-Servidor

Angular ofrece un framework para aplicaciones de una sola página (SPA), donde la mayoría de la lógica y los datos se encuentran en el cliente. La mayoría de las aplicaciones todavía necesitan acceder a un servidor usando el HttpClient para acceder y guardar datos. Para algunas plataformas y aplicaciones, se puede también querer utilizar el modelo PWA (Aplicaciones Web Progresivas) para mejorar la experiencia de usuario.

  • HTTP: Comunícate con un servidor para obtener datos, guardarlos e invocar acciones del lado del servidor con un cliente HTTP.

  • Renderizado del lado del servidor: Angular Universal genera páginas de aplicación estáticas en el servidor a través de la renderización del lado del servidor (SSR). Esto te permite ejecutar tu aplicación Angular en el servidor para mejorar el rendimiento y mostrar la primera página rápidamente en dispositivos móviles y de baja potencia, y también facilitar los rastreadores web.

  • Service workers y PWA: Utiliza un service worker para reducir la dependencia de la red y mejorar significativamente la experiencia del usuario.

  • Web workers: Aprende a ejecutar cálculos con uso intensivo de la CPU en un hilo en segundo plano.

Soporte del Ciclo de Desarrollo

La sección Workflow de Desarrollo detalla las herramientas y los procesos utilizados para compilar, probar y desplegar aplicaciones Angular.

  • CLI Referencia de Comando: La CLI de Angular es una interfaz de línea de comandos utilizada para crear proyectos, generar código de aplicaciones y librerías y realizar un conjunto de tareas de desarrollo tales como pruebas, empaquetamiento y despliegue de aplicaciones.

  • Compilación: Angular proporciona compilación just-in-time (JIT) para el entorno de desarrollo y compilación ahead-of-time (AOT) para el entorno de producción.

  • Plataforma de pruebas: Ejecuta pruebas unitarias sobre las distintas partes de tu aplicación a medida que interactúan con el framework de Angular.

  • Despliegue: Aprende técnicas para desplegar tu aplicación Angular en un servidor remoto.

  • Lineamientos de Seguridad: Aprende sobre las protecciones integradas por Angular contra las vulnerabilidades y los ataques comunes a las aplicaciones web, como por ejemplo, ataques de cross-site scripting.

  • Internacionalización: Haz que tu aplicación soporte múltiples lenguajes con las herramientas de internacionalización de Angular (i18n).

  • Accesibilidad: Haz que tu aplicación sea accesible a todos los usuarios.

Estructura de Archivos, Configuración y Dependencias

  • Espacio de trabajo y estructura de archivos: Comprende la estructura del espacio de trabajo y las carpetas de proyectos en Angular.

  • Construcción y servicio: Aprende a definir diferentes configuraciones de servidores proxy y construcción para tu proyecto, como por ejemplo desarrollo, staging y producción.

  • Paquetes npm: El Framework de Angular, la CLI de Angular y los componentes usados por las aplicaciones Angular se empaquetan como paquetes npm y se distribuyen a través del registro de npm. La CLI de Angular crea por defecto un archivo package.json, que especifica un conjunto inicial de paquetes que funcionan bien en conjunto y dan soporte a muchos escenarios de aplicaciones comunes.

  • Configuración de Typescript: TypeScript es el lenguaje principal utilizado para el desarrollo de aplicaciones Angular.

  • Soporte de Navegadores: Haz que tus aplicaciones sean compatibles en una amplia gama de navegadores.

Extendiendo Angular

  • Librerías Angular: Aprende a usar y crear librerías reutilizables.

  • Esquemas: Aprende como personalizar y extender las capacidades de generación de la CLI.

  • Constructores de la CLI: Aprende a personalizar y extender la capacidad de la CLI de aplicar herramientas para realizar tareas complejas, como la construcción y pruebas de aplicaciones.