Angular: estado en 2019

Ahora el verano es la época del año cuando se celebran varias conferencias y otros eventos en todo el mundo. Los programadores en este momento literalmente abruman con nueva información, que generalmente es bastante difícil de asimilar.

El universo de desarrollo front-end se asemeja a un tren que se mueve sin parar. Todos sabemos lo difícil que es mantenerse al día con este tren. Ver videos de la conferencia lleva mucho tiempo, como resultado, la razón es clara de que muchos de nosotros, después del trabajo de oficina, preferimos ver películas en Netflix.



El autor del material, cuya traducción publicamos, dice que es por eso que decidió ayudar a todos los que quieran comprender las innovaciones de Angular. Aquí hablaremos sobre el estado actual de Angular, sobre las nuevas características de este marco, sobre las tendencias actuales.

Acerca de la ampliación angular

Según los datos proporcionados en ng-conf 2019 por Brad Green, un miembro del equipo de desarrollo de Angular, ¡el alcance de Angular ha crecido aproximadamente un 50% durante el año!

Está claro que estos datos podrían verse afectados por el hecho de que muchos proyectos están en proceso de transición de Angular 1.X a versiones más recientes del marco. Pero el 50% sigue siendo un indicador impresionante.

Angular no crece tan rápido como Svelte o Vue. Este marco no se usa tanto como React. Pero, a diferencia de lo que puede leer sobre otros marcos en recursos como Reddit o Twitter, Angular goza de buena salud y es utilizado por millones de desarrolladores y equipos.

Angular tiene una infraestructura grande y dinámica.

Aunque Angular tiene muchas herramientas integradas útiles creadas por un equipo central de desarrollo, su ecosistema, una comunidad de entusiastas que contribuyen a su desarrollo, es extremadamente grande. Ella, además, está representada por proyectos de muy alta calidad.

Junto con el marco básico, puede usar muchas herramientas interesantes. A saber, estamos hablando de lo siguiente:

• Integración profunda con excelentes herramientas de desarrollo dinámico. Entre ellos, se pueden observar TypeScript y RxJS. El desarrollo de estas tecnologías tiene un efecto positivo directo en Angular.
• Diferentes tipos de bibliotecas para gestionar el estado de la aplicación.
• Herramientas para analizar y mejorar la calidad del código. Tal como Codelyzer .
• Bibliotecas de elementos de la interfaz de usuario, componentes, directivas, canalizaciones, etc.
• Amplia selección de complementos para varios IDE.
• Bibliotecas y marcos para probar aplicaciones.
• Documentación detallada de alta calidad en la que trabajan tanto los miembros de la comunidad como el equipo de Angular. Esto incluye pautas prácticas, guías, materiales de capacitación, libros y cursos de video. Aunque este es el último elemento de esta lista, es tan importante como los demás.

En las siguientes secciones, nos centraremos en algunas herramientas particularmente interesantes que puede utilizar al desarrollar proyectos angulares.

CLI angular

▍ CLI angular y proceso de actualización angular extremadamente simple

Estas no son palabras vacías. Aquí puede encontrar una buena historia sobre cómo se actualizó el proyecto BlueWeb, que atiende anualmente a 500 millones de usuarios, de Angular 7 a Angular 8 en un día hábil. Este es un logro impresionante, dado que la transición de la segunda a la cuarta versión de Angular tomó 30 días desde el mismo proyecto.

Esto demuestra el gran valor de la CLI angular. El uso de esta herramienta puede elevar la productividad a un nivel que personalmente no he conocido antes.

Hoy en día, se está volviendo muy difícil imaginar trabajar sin la CLI angular.

▍ Herramienta de esquemas

La herramienta Angular Schematics es algo que los desarrolladores angulares probablemente usarán a diario. Por ejemplo, estoy seguro de que a menudo usa este comando:

ng generate component my-component 

Se basa en la herramienta Esquemas integrada en la CLI angular.

Quizás sea nuevo para usted que los desarrolladores tengan la oportunidad de crear sus propias reglas de Schematics. Su uso facilita el trabajo con fragmentos de código de uso frecuente.

▍API Builders

API Builders le permite expandir o expandir equipos existentes . Por ejemplo, puede crear un equipo que ejecute pruebas usando Jest y Cypress, en lugar de usar Jasmine y Protractor. Puede, por ejemplo, usar un linter alternativo.

Nuevas características interesantes del marco

Al momento de escribir este material, la versión 8 de Angular ya se ha lanzado, que contiene varias mejoras y nuevas características.

No hay nada aquí que pueda cambiar seriamente la forma en que se usa este marco. Una declaración similar con respecto a una nueva versión de una herramienta generalmente se percibe como una buena noticia. Pero en Angular 8 hay muchas mejoras que no son visibles, por así decirlo, a simple vista. Gracias a ellos, los proyectos angulares se vuelven más pequeños y más rápidos. Estas mejoras hacen que el proceso de desarrollo de aplicaciones angulares sea aún más agradable que antes. Además, la nueva versión del marco tiene un nuevo sistema de renderizado que está casi listo para su uso completo.

▍ Carga diferencial

La “carga diferencial”, a juzgar por el nombre de esta tecnología, puede parecer algo muy complicado, pero en realidad no lo es. En pocas palabras, gracias a esta característica, el compilador genera dos paquetes. Uno es para los navegadores modernos. No hay código de polyfill en él. El segundo es para versiones anteriores de navegadores.

Los navegadores más recientes descargan paquetes modernos. Y navegadores más antiguos que necesitan conjuntos de descarga de polyfill diseñados específicamente para ellos.

Esta es una innovación muy útil. Dado que es muy probable que la mayoría de los usuarios trabajen en las últimas versiones de los navegadores, esto lleva al hecho de que solo un pequeño número de usuarios usa paquetes con polyfills, más grandes que los paquetes modernos.

▍Trabajadores web

Probablemente ya haya escuchado sobre los trabajadores web, por lo que no trataremos la explicación de la esencia de esta tecnología. Pero es posible que no sepa lo fácil que es integrar a los trabajadores web en las aplicaciones en la nueva versión Angular. Aquí puedes leer más sobre esto.

▍ Caja de herramientas CDK

CDK es un juego de herramientas lanzado por un equipo que desarrolla componentes angulares. En él puedes encontrar abstracciones utilizadas por Angular Material , que son independientes de los estilos.

Por ejemplo, gracias al CDK, el desarrollador tiene directivas que le permiten implementar las siguientes características:

• Trabaja con objetos al estilo de "Arrastrar y soltar".
• Use áreas de texto que cambien de tamaño automáticamente.
• Ventanas emergentes.
• Desplazamiento virtual.

CDK es una herramienta extremadamente útil debido al hecho de que la mayoría de las aplicaciones pueden usar abstracciones generalizadas de alta calidad, cada una de las cuales implementa una funcionalidad limitada. Esto es mucho mejor que el uso generalizado y no siempre justificado de componentes completos. Angular Material es un maravilloso conjunto de componentes, pero el poder de CDK es que permite al desarrollador crear sus propios componentes a partir de los componentes básicos.

▍ Motor de renderizado Ivy

Ivy es un nuevo desarrollo muy interesante, que es un motor de renderizado. El trabajo en Ivy aún no se ha completado, por defecto este motor está deshabilitado. Pero, comenzando con Angular 7, ya se puede encender y usar. Se espera que Ivy sea el principal motor de renderizado en Angular 9.

Esto es lo que puede esperar de un motor Ivy con todas las funciones:

• Reducción del tamaño de los paquetes.
• Depuración de plantillas.
• Montaje de proyectos más rápido, pruebas más rápidas.
• Corrección de errores existentes.

Si hablamos de depuración, aquí hay una captura de pantalla donde puedes ver el punto de interrupción que se activa en la consola de Chrome.


Depuración de código

Como puede ver, la directiva ngForOf nos brinda información sobre el valor pasado.

Plataformas angulares y móviles.

▍Iónico

Ionic es un marco para desarrollar aplicaciones móviles. Aunque sus componentes básicos se crean usando Stencil, le dan al desarrollador abstracciones que permiten que Ionic se use con Angular y otros marcos.

▍NativeScript

NativeScript es un marco de desarrollo de aplicaciones móviles nativo similar a React Native. Presenta una integración profunda con Angular, junto con el soporte Vue y la capacidad de usarlo para el desarrollo en JavaScript puro. Desafortunadamente, mi experiencia con él no fue particularmente exitosa. No puedo ponerlo a la par con React Native. Sin embargo, si se toma en serio el desarrollo de aplicaciones móviles, pruebe NativeScript.

Prueba

▍Jasmine y transportador

Jazmín y Transportador no necesitan presentación. Estas son herramientas estándar para probar aplicaciones angulares. Están bien probados por el tiempo, se actualizan regularmente y funcionan muy bien con Angular.

▍Broma y ciprés

Probar aplicaciones angulares con Jest y Cypress fue posible gracias a las nuevas herramientas basadas en los API Builders que forman parte de la CLI angular.

Jest es un marco de prueba de unidad basado en Jasmine. Está desarrollado en Facebook. Este es un marco estándar para probar proyectos de React, se distribuye ampliamente debido a su velocidad. Muchas personas prefieren usarlo sobre Jasmine. Si también te gusta Jest, ahora puedes usarlo para probar aplicaciones angulares.

Cypress es un marco de prueba de aplicaciones de extremo a extremo muy respetado. No es casualidad que la comunidad de desarrollo lo trate muy bien. Es independiente de Selenium o WebDriver. Cypress le permite trabajar con registros de equipo, sabe cómo administrar el tráfico de red. Es bastante estable, por lo que puede esperar que los resultados obtenidos con su ayuda sean bastante comprensibles y predecibles.

▍ Caja de herramientas de la Biblioteca de pruebas angulares

Angular Testing Library es un conjunto de herramientas para probar componentes de interfaz de usuario con un enfoque en la reproducción de acciones del usuario.

Esto significa que esta biblioteca empuja al programador para asegurarse de que no trabaje con componentes mediante programación. Su objetivo es probar el comportamiento de los componentes. La biblioteca realiza las acciones que los usuarios suelen realizar.

Por ejemplo, cuando se trabaja con herramientas de esta biblioteca, tales construcciones no se usan:

 myComponent.onClick(); 

En cambio, se simula el comportamiento natural del usuario:

 const { getByText, click } = await render(CounterComponent, {    componentProperties: { counter: 5 } }); click(getByText('+')); 

Gestión del estado

▍NgRx

NgRx es una biblioteca para administrar el estado de las aplicaciones, creada bajo la influencia de ideas integradas en Redux. NgRx es probablemente la biblioteca de administración de estado más utilizada en el desarrollo angular. El nombre de la biblioteca sugiere que usa seriamente las transmisiones de RxJs.

▍NGXS

NGXS es una biblioteca alternativa para administrar el estado en aplicaciones angulares, similar a Redux. Si compara NGXS y RxJS, resulta que las características de NGXS son que utiliza muchas clases y decoradores. Esto se hace para reducir la cantidad de código repetitivo. Probablemente, esta característica de NGXS puede ser decisiva al elegir una biblioteca para administrar el estado si alguien que está buscando dicha biblioteca está acostumbrado a usar clases.

▍Akita

Akita es una biblioteca de gestión estatal desarrollada por Datorama. Esta biblioteca también se basa en RxJS. Si lo compara con las dos bibliotecas anteriores, resulta que su característica es que se puede usar en proyectos en los que no se usa Angular. Esto significa que elegir la biblioteca Akita a largo plazo puede conducir a mejores oportunidades para reutilizar el código del proyecto.

▍ ¿Quizás solo tome RxJs?

Puedo dar una respuesta positiva a la pregunta planteada en el título de esta sección. Todo depende de si le gustan las bibliotecas que recuerdan a Redux, y si el proyecto necesita una biblioteca para administrar el estado. Si lo desea, puede crear servicios que almacenen el estado utilizando las herramientas estándar de RxJS .

Bibliotecas de componentes de interfaz de usuario

▍StoryBook

StoryBook no es realmente una biblioteca de componentes de la interfaz de usuario. Esta es una herramienta que le permite crear componentes aislados y le permite estudiar componentes y sus variantes.

Esta es una gran herramienta. Anteriormente, solo estaba disponible para los desarrolladores de React. Los envidié entonces. Pero ahora los desarrolladores de Angular pueden usarlo, así que no puedo evitar mencionarlo.

▍Material angular

Aquí diremos algunas palabras sobre la notoria biblioteca de Angular Material , que ofrece a los desarrolladores modernos un buen conjunto de componentes diseñados para la última versión de Angular.

Backends para aplicaciones angulares

▍Firebase

Firebase es una plataforma de desarrollo de aplicaciones propiedad de Google. La consecuencia de esto es que hay una biblioteca oficial para Firebase y Angular: AngularFire . Esta biblioteca utiliza observables RxJS para transmitir datos. Está profundamente y eficientemente integrado con Angular.

▍GraphQL

Quizás piense que el placer de trabajar con GraphQL está disponible solo para los programadores React. Si es así, entonces estás equivocado. También hay una versión de la biblioteca Apollo para Angular. Lo que puedes crear con esta biblioteca es una gran alternativa a Firebase. Apollo es para aquellos que prefieren trabajar con GraphQL.

▍NestJS

NestJS es un marco web para Node.js diseñado para desarrollar aplicaciones de servidor. A partir de ejemplos, podemos concluir que los conceptos básicos de Angular tuvieron una gran influencia en él. Estos son módulos, controladores, transportadores, etc. Si te gusta Angular, entonces probablemente también te gustará NestJS.

Si usa Nx Workspaces , crear un marco para una aplicación de pila completa basada en Angular y NestJS es cuestión de ejecutar un comando en la consola.

Resumen

Como resultado, podemos decir que el vasto ecosistema que se ha desarrollado alrededor de Angular ofrece a todos los que desean herramientas confiables y de alta calidad para resolver una amplia gama de problemas.

Por supuesto, no puedo contar aquí sobre docenas de mis bibliotecas y herramientas favoritas. Si hubiera hecho esto, este material habría sido interminable. Pero espero que este artículo le haya proporcionado una visión general del fenómeno del desarrollo web moderno llamado Angular. Espero que aquí hayas encontrado algo que, en el futuro, puedas usar en tus proyectos.

Estimados lectores! ¿Qué es lo que más te gusta (o no te gusta) en Angular 8?