Angular 2 fue lanzado a finales de 2016 y llevó a Angular a la web moderna con sus aplicaciones de escritorio y móviles. La autora y experta en Angular, Deborah Kurata, explica cómo este marco de trabajo de JavaScript difiere de los otros y los beneficios de aprender Angular 2. Lea más en el post de abajo, que fue originalmente publicado aquí en CIO.com.
Si construyes aplicaciones web, es probable que hayas oído hablar de Angular, el popular marco de trabajo de JavaScript para construir aplicaciones con todas las características, del lado del cliente, basadas en el navegador. El reciente lanzamiento de Angular 2 (septiembre de 2016) llevó a Angular a la Web moderna y expandió su alcance a aplicaciones móviles y de escritorio.
¿Así que de qué se trata toda esa excitación de Angular 2? ¿En qué se diferencia de cualquier otro marco de JavaScript que exista? ¿Vale la pena aprenderlo? ¿Qué hay para amar?
Aquí hay seis razones para amar a Angular 2.
1. Mejora de la productividad del desarrollador con Angular 2
La Web ha cambiado significativamente durante estos ú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.
Añade a eso el Typescript, un lenguaje que es un superconjunto de JavaScript y proporciona escritura estática e interfaces. Aprovechando TypeScript para el desarrollo angular, obtenemos grandes herramientas como la comprobació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 entender mejor nuestro código.
2. Patrones de codificación consistentes
Una de las mejores cosas que un marco puede hacer para la productividad de los desarrolladores es tener un conjunto consistente de patrones de codificación, y Angular hace precisamente eso. Hablemos de tres de ellos: clases, inyección de dependencia incorporada y el patrón MVVM (model-view-view/model).
Angular 2 utiliza 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 añade el decorador apropiado. ¿Quieres construir un filtro de tubería personalizado? Crea una clase y añade el decorador apropiado. ¿Construir un módulo Angular? Cree una clase y agregue el decorador apropiado. ¿Construir un servicio? Bueno, para un servicio nosotros… construimos una clase y agregamos el decorador apropiado. La idea la tienes 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 aprovecha Angular 2 es el poder de la inyección de dependencia (DI). Para utilizar cualquiera de los servicios angulares incorporados, como HTTP o Router, simplemente inyectamos el servicio en cualquier clase que necesite el servicio. Angular implementa la inyección de dependencia basada en el constructor, así que para inyectar un servicio simplemente pasamos ese servicio como un argumento al constructor de la clase. Eso es todo. Y cuando construimos nuestros propios servicios personalizados, los inyectamos usando la misma técnica.
Angular también aprovecha los patrones arquitectónicos comunes. Cuando se construyen aplicaciones del lado del cliente a menudo hay tres piezas en el rompecabezas: la interfaz de usuario, el código que soporta y controla esa interfaz de usuario y el modelo que contiene los datos para esa interfaz. Angular 2 separa claramente estas tres piezas usando el patrón modelo-vista-modelo, o MVVM.
La vista se define en una plantilla que contiene el HTML de 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 componentes. Por ejemplo, definimos una propiedad de héroe que modela a 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 maneja tanto la vista como el modelo. 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.
Aprovechando estos patrones comunes, Angular 2 hace que el desarrollo sea más fácil y productivo.
3. Amplia unión con Angular 2
Muchas aplicaciones web del lado del cliente trabajan con datos. La aplicación recupera los datos de un servidor back-end y los muestra en una vista utilizando una plantilla. Y si el usuario puede cambiar esos datos, las entradas del usuario deben ser leídas desde la vista y guardadas de nuevo en el servidor back-end. El código requerido para este proceso puede ser tedioso y propenso a errores.
La unión de datos de Angular 2 hace que este proceso sea fácil. Simplemente enlaza los elementos HTML de 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 soporta la unión de datos de dos vías. Así que cualquier cambio que el usuario haga en los datos de la vista actualiza automáticamente las propiedades del modelo en la clase.
Además de la unión de datos, Angular 2 soporta la unión de propiedades. Esto nos permite controlar el modelo de objeto de documento (DOM) vinculando las propiedades HTML a las propiedades de la clase de componente. Por ejemplo, vinculamos la propiedad HTML hidden de un elemento de imagen a una propiedad de clase 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 componente se establece en false, el elemento image aparece automáticamente.
Y por último, Angular 2 apoya la vinculación de eventos. Esto significa que podemos reaccionar a cualquier evento de la vista, incluyendo eventos HTML como el clic, eventos de componentes de terceros o nuestros propios eventos personalizados. Simplemente vinculamos el evento a un método de la clase de componente. Cuando el evento ocurre, el método se ejecuta.
Estas amplias funciones de encuadernación facilitan la visualización de datos, la obtención de entradas de usuario, el control del DOM y la reacción a los eventos.
4. Enrutamiento completo
Una vista no hace una aplicación. La mayoría de las aplicaciones web del lado del cliente proporcionan muchas vistas para apoyar 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 hay 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 una ruta completa. Con Angular definimos una ruta a cada página de la aplicación. Luego activamos la ruta apropiada basada en las acciones del usuario. Podemos pasar datos a las rutas, así que podemos decirle al héroe la página de detalles para mostrar los detalles para el héroe con un id de 42.
Podemos vigilar las rutas para que un usuario no pueda acceder a una ruta sin un inicio de sesión o sólo si es un administrador. Podemos evitar dejar una página de edición hasta que el usuario confirme que quiere guardar o cancelar sus cambios. Podemos pre-cargar datos antes de mostrar una página.
Angular 2 apoya las rutas de los niños para navegar dentro de una ruta específica. Por ejemplo, navegamos a una página de detalles y desde esa página navegamos a las rutas para niños para una página de especificaciones técnicas o una página de más información. Esto también es útil cuando se muestran pestañas de información dentro de una página.
Podemos incluso cargar perezosamente rutas específicas para que el código de la ruta no se descargue al navegador y se cargue a menos que el usuario acceda a las características asociadas a esa ruta. Así que si tenemos características de administración, por ejemplo, esas características no se cargan hasta que el usuario solicita acceder a las características de administración.
Juntas, estas muchas características hacen que la ruta de Angular 2 sea muy flexible y poderosa.
5. Tamaño minimizado y rendimiento maximizado
El tamaño y el rendimiento están de alguna manera 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 de 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. Segundo, los componentes se organizan en módulos angulares de tal manera que las agrupaciones lógicas pueden ser descargadas juntas. Y tercero, la carga perezosa de rutas sólo descarga los módulos angulares necesarios para mostrar la ruta seleccionada por el usuario. A medida que el usuario se desplaza a otras rutas, se descarga el contenido necesario, y las rutas que el usuario nunca utiliza nunca se descargan innecesariamente.
Luego está el compilador de AoT (Ahead of Time). Con AoT, el compilador funciona una vez en el tiempo de construcción. El navegador entonces descarga la versión precompilada de la aplicación y la renderiza inmediatamente, sin necesidad de compilarla primero en el navegador. Además no hay necesidad de descargar el compilador Angular, reduciendo dramáticamente el tamaño de la descarga de la aplicación.
Angular 2 se ejecuta más rápido, tiene menos trabajo que hacer y tiene una baja huella de memoria.
6. Documentación y comunidad
La documentación de Angular 2, en angular.io, es extensa y variada. Incluye una guía de inicio rápido para ponerte al día rápidamente con Angular 2. Incluye una guía de usuario y una referencia API. Proporciona documentación sobre características más avanzadas, y un libro de cocina con recetas para tareas comunes como la validación de formularios y la inyección de dependencia.
Pero la mejor parte para aprender Angular 2 es el tutorial. Proporciona una experiencia paso a paso de códigos que introducen todas las características básicas de Angular 2. O, si prefieres un formato de video, mira mi curso: Angular 2: Cómo empezar.
Y por último, pero definitivamente no menos importante, es la comunidad Angular. Hay grupos de encuentro y conferencias y grupos de gitanos establecidos para ayudarte a ponerte en contacto con otros Angularitas.
¡Únase a nosotros! ¿Qué es lo que no se puede amar?
Aprende más con el camino de la habilidad angular.
O explorar más sobre qué es Angular y cuándo usar Angular.