Angular 2 se lanzó a finales de 2016 y trajo a Angular a la web moderna con sus aplicaciones móviles y de escritorio. Si crea aplicaciones web, es probable que haya oído hablar de Angular, el popular marco de JavaScript para crear aplicaciones completas basadas en el navegador del lado del cliente. El reciente lanzamiento de Angular 2 (septiembre de 2016) introdujo a Angular en la Web moderna y amplió su alcance a las aplicaciones móviles y de escritorio.
Entonces, ¿de qué se trata toda la emoción de Angular 2? ¿Cómo es diferente de cualquier otro marco de JavaScript por ahí? ¿Vale la pena aprenderlo? ¿Qué hay para amar?
Aquí hay seis razones para amar Angular 2.
1. Productividad mejorada del desarrollador con Angular 2
La Web ha cambiado significativamente durante los últimos cinco años. Con ECMAScript (ES) 2015, tenemos módulos, clases y funciones de flecha. Angular 2 aprovecha estas características para hacer que sus patrones de codificación sean más consistentes y fáciles de aprender.
Agregue a ese Script mecanografiado, un lenguaje que es un superconjunto de JavaScript y proporciona mecanografía e interfaces estáticas. Al aprovechar TypeScript para el desarrollo angular, obtenemos excelentes herramientas como verificación de tipos, refactorizaciones más seguras y documentación de código en línea.
Estas características mejoran nuestra experiencia de desarrollo y edición y nos ayudan a razonar, depurar y comprender mejor nuestro código.
2. Patrones de codificación consistentes
Una de las mejores cosas que puede hacer un marco para la productividad del desarrollador es tener un conjunto consistente de patrones de codificación, y Angular hace exactamente eso. Hablemos de tres de ellos: clases, inyección de dependencia incorporada y el patrón MVVM (model-view-view / model).
Angular 2 usa clases de ES y un conjunto de anotaciones, llamadas decoradores, para construir todas las construcciones angulares clave. ¿Quieres construir un componente angular? Crea una clase y agrega el decorador apropiado. ¿Quiere construir un filtro de tubería personalizado? Crea una clase y agrega el decorador apropiado. ¿Construyendo un módulo angular? Crea una clase y agrega el decorador apropiado. ¿Construyendo un servicio? Bueno, para un servicio nosotros … construimos una clase y agregamos el decorador apropiado. Tienes la idea aquí. Angular 2 proporciona un patrón de codificación muy consistente para construir las piezas de la aplicación.
Otro patrón de codificación que Angular 2 aprovecha es el poder de la inyección de dependencia (DI). Para usar cualquiera de los servicios angulares integrados, como HTTP o enrutador, simplemente inyectamos el servicio en cualquier clase que lo necesite. Angular implementa la inyección de dependencia basada en el constructor, por lo que para inyectar un servicio simplemente pasamos ese servicio como argumento al constructor de la clase. Eso es. Y cuando creamos nuestros propios servicios personalizados, los inyectamos utilizando la misma técnica.
Angular también aprovecha los patrones arquitectónicos comunes. Cuando se crean aplicaciones del lado del cliente, a menudo hay tres piezas en el rompecabezas: la interfaz de usuario, el código que admite y controla esa interfaz de usuario y el modelo que contiene los datos para esa interfaz. Angular 2 separa claramente estas tres piezas utilizando el modelo-view-view / model, o MVVM, patrón.
La vista se define en una plantilla que contiene el HTML para un componente específico. La plantilla puede diseñar una página, cualquier parte de una página o definir un conjunto reutilizable de elementos de la interfaz de usuario.
El modelo se define como propiedades de la clase de componente. Por ejemplo, definimos una propiedad de héroe que modela un superhéroe. Utilizamos una interfaz para definir los detalles de esa propiedad del héroe, identificando los elementos de datos específicos asociados con ese héroe, como el nombre del héroe, el alter ego y los poderes especiales.
La vista / modelo es la clase que gestiona tanto la vista como el modelo. Este es el código que llama a los servicios para recuperar datos, reacciona a las interacciones del usuario en la vista, como ocultar o mostrar elementos y llama a los servicios para guardar las entradas del usuario.
Al aprovechar estos patrones comunes, Angular 2 hace que el desarrollo sea más fácil y más productivo.
3. Unión extensa con Angular 2
Muchas aplicaciones web del lado del cliente trabajan con datos. La aplicación recupera datos de un servidor de fondo y muestra esos datos en una vista usando una plantilla. Y si el usuario puede cambiar esos datos, las entradas del usuario deben leerse desde la vista y guardarse en el servidor de fondo. El código requerido para este proceso puede ser tedioso y propenso a errores.
El enlace de datos de Angular 2 facilita este proceso. Simplemente vincule elementos HTML en la plantilla a las propiedades del modelo en la clase y los datos aparecerán automáticamente en la vista. Y si el usuario puede cambiar los valores, Angular 2 admite el enlace de datos bidireccional. Por lo tanto, cualquier cambio que el usuario realice en los datos de la vista actualiza automáticamente las propiedades del modelo en la clase.
Además del enlace de datos, Angular 2 admite el enlace de propiedades. Esto nos permite controlar el modelo de objetos del documento (DOM) al vincular las propiedades HTML a las propiedades de la clase de componente. Por ejemplo, vinculamos la propiedad oculta HTML de un elemento de imagen a una propiedad de clase de componente como hideImage. Cuando la propiedad de clase de componente se establece en true, el elemento de imagen se oculta automáticamente. Cuando la propiedad de clase de componente se establece en falso, el elemento de imagen aparece automáticamente.
Y, por último, Angular 2 admite el enlace de eventos. Esto significa que podemos reaccionar ante cualquier evento desde la vista, incluidos los eventos HTML, como los clics, los eventos de componentes de terceros o nuestros propios eventos personalizados. Simplemente vinculamos el evento a un método en la clase de componente. Cuando se produce el evento, se ejecuta el método.
Estas amplias funciones de enlace facilitan la visualización de datos, la obtención de entradas de usuarios, el control del DOM y la reacción a los eventos.
4. Enrutamiento con todas las funciones
Una vista no hace una aplicación. La mayoría de las aplicaciones web del lado del cliente proporcionan muchas vistas para admitir toda su funcionalidad. Puede haber una vista para una página de bienvenida, una página de lista de héroes, una página de detalles de héroes y una página de edición de héroes. Luego, conjuntos de vistas para villanos o trabajos. Necesitamos mostrar la vista correcta en el momento correcto. Ese es el propósito del enrutamiento.
Angular 2 proporciona enrutamiento con todas las funciones. Con Angular definimos una ruta a cada página de la aplicación. Luego activamos la ruta apropiada en función de las acciones del usuario. Podemos pasar datos a las rutas, por lo que podemos decirle a la página de detalles del héroe que muestre los detalles del héroe con una identificación de 42.
Podemos proteger las rutas para que un usuario no pueda acceder a una ruta sin un inicio de sesión o solo si es un administrador. Podemos evitar dejar una página de edición hasta que el usuario confirme que desea guardar o cancelar sus cambios. Podemos precargar datos antes de mostrar una página.
Angular 2 admite rutas secundarias para navegar dentro de una ruta específica. Por ejemplo, navegamos a una página de detalles y desde esa página navegamos a rutas secundarias para una página de especificaciones técnicas o más información. Esto también es útil cuando se muestran pestañas de información dentro de una página.
Incluso podemos cargar rutas específicas de manera diferida para que el código de la ruta no se descargue y se cargue a menos que el usuario acceda a las funciones asociadas con esa ruta. Entonces, si tenemos funciones de administrador, por ejemplo, esas funciones no se cargan hasta que el usuario solicite acceder a las funciones de administrador.
Juntas, estas muchas características hacen que el enrutamiento de Angular 2 sea muy flexible y potente.
5. Tamaño minimizado y rendimiento maximizado
El tamaño y el rendimiento están algo relacionados cuando se trabaja con una aplicación basada en la web. Un componente más pequeño mejora el rendimiento de inicio tanto en el tiempo de descarga como en el tiempo de compilación en el navegador. Uno de los objetivos clave para Angular 2 es minimizar el tamaño y maximizar el rendimiento.
Minimizar el tamaño de la descarga se logra de varias maneras. Primero, podemos hacer que el tamaño de cada componente sea lo más pequeño posible. En segundo lugar, los componentes están organizados en módulos angulares de tal manera que las agrupaciones lógicas se pueden descargar juntas. Y tercero, la carga diferida de rutas solo descarga los módulos angulares necesarios para mostrar la ruta seleccionada por el usuario. A medida que el usuario se mueve a otras rutas, se descarga el contenido necesario y las rutas que el usuario nunca usa nunca se descargan innecesariamente.
Luego está el compilador Ahead of Time (AoT). Con AoT, el compilador se ejecuta una vez en el momento de la compilación. Luego, el navegador descarga la versión precompilada de la aplicación y la procesa de inmediato, sin necesidad de compilarla primero en el navegador. Además, no es necesario descargar el compilador Angular, lo que reduce drásticamente el tamaño de descarga de la aplicación.
Angular 2 se ejecuta más rápido, tiene menos trabajo que hacer y tiene poca huella de memoria.
6. Documentación y comunidad
La documentación para Angular 2, en Angular, es extensa y variada. Incluye una guía de inicio rápido para ponerlo al día rápidamente con Angular 2. Incluye una guía de usuario y una referencia de API. Proporciona documentación sobre funciones más avanzadas y un libro de cocina con recetas para tareas comunes como la validación de formularios y la inyección de dependencias.
Pero la mejor parte para aprender Angular 2 es el tutorial. Proporciona una experiencia de código paso a paso que presenta todas las características básicas de Angular 2. O, si prefiere una clase en línea en vivo o capacitación en el aula, únase a myTectra: Angular 2
Lea más en la publicación a continuación, que se publicó originalmente en myTectra Blog
