Angular lanzó su versión 15 el pasado noviembre de 2022 y una versión 15.2 este febrero.
La nueva versión viene con grandes características: Componentes autónomos, Directiva de imágenes, entre otras mejoras para todo su ecosistema y comunidad.
Una nueva versión de Angular
Angular lanza su versión número 15 y esto ya es normal dentro de su ecosistema, ya que cada seis meses hay una versión con mejoras, actualizaciones y nuevas funcionalidades para crear aplicaciones más potentes.
Esto no debería causar ninguna preocupación si tienes proyectos Angular con cualquier otra versión. No importa con qué versión estés trabajando, basta con hacer clic en el botón de actualización y seguir trabajando sin problemas.
¿Cómo puedo actualizar Angular?
Angular ha hecho el trabajo de actualización mucho más fácil y sólo necesitas ejecutar el comando ng update para actualizar.
Tenga en cuenta que debe hacerlo gradualmente. Es decir, si estás trabajando en un proyecto en Angular con la versión 13, primero debes actualizar a la versión 14 y luego a la 15, para ello ejecutas el comando indicando la versión que quieres actualizar.
Si quieres más detalles puedes ir a la página oficial de Angular, donde indicas la versión en la que estás y a cuál quieres actualizarte. Ahí tienes más detalles de cómo hacerlo, sin embargo, el 99% del trabajo ya lo hace el comando ng update.
Novedades de la versión 15 de Angular
Hay que recordar que Angular es toda una plataforma que nos permite utilizar varias herramientas para construir aplicaciones potentes, por lo que, cuando hay una nueva versión los cambios y novedades provienen de muchos de sus paquetes.
Aplicaciones sin módulos
Componentes autónomos es una de las innovaciones más importantes. Se trata de desarrollar aplicaciones sin necesidad de módulos.
Uno de los objetivos de Angular es minimizar la curva de aprendizaje de las nuevas personas que aprenden este framework y los módulos es uno de los conceptos difíciles de entender al principio. Como la versión 14 ya había lanzado una versión preliminar de los Componentes Autónomos, ahora tenemos una API más robusta para soportarlo. Por ejemplo, con un solo archivo podrías ejecutar una aplicación Angular sin usar módulos.
Esto no significa que los módulos dejen de utilizarse. Más bien, ahora tiene la posibilidad de manejar ambas estructuras. Y, además, Angular es retrocompatible, es decir, esta nueva forma es opcional, si quieres seguir trabajando con módulos puedes seguir haciéndolo o incluso tener híbridos de módulos y Componentes Standalone.
Carga perezosa de componentes
Cuando quieres implementar el patrón Lazy Loading lo haces a través de un módulo; sin embargo, ahora gracias a Standalone Components podrás hacerlo directamente en componentes y no tendrás que resolver la promesa de importación dinámica, se hace automáticamente.
Mejora de la carga de imágenes
Otra novedad es que tenemos una nueva directiva en Angular para mejorar la carga de imágenes y así reducir los tiempos de carga en una web. Por ejemplo, tenemos un sitio de prueba que tarda 4 segundos en cargar una imagen; aplicando la nueva directiva tardaría mucho menos.
Para usarlo, todo lo que tienes que hacer es importar el módulo NgOptimizedImage donde quieras usarlo y luego usar el attr ngSrc en tus imágenes.
Un ejemplo del impacto de esta directiva es el sitio de comercio electrónico Land’s End. Dado que utiliza muchas imágenes, tras aplicar esta función experimentó una mejora del 75% en los tiempos de carga del sitio, según el informe de lighthouse.
Formato de errores mejorado
La depuración es una de las tareas primordiales de un desarrollador web y Angular siempre ha ido por delante a la hora de darnos mejores herramientas para analizar bugs. Ahora dispone de una forma más completa de saber cómo y por qué se ha producido un error, con un formato más claro.
Ahora en la versión 15 los errores son pequeños, con información relevante y te dice dónde se produce el error con más precisión.
Angular Material alineado con Material Design 3
Angular Material es uno de esos paquetes que puedes usar o no usar en Angular, recuerda que tú eliges qué partes del framework usar. En este caso, Angular Material sería una librería de componentes con un estilo visual que sigue el sistema de diseño Material Design de Google para aplicaciones y lanzaron la versión número 3 de este sistema de diseño.
¿Qué cambia en esta versión? Precisamente, Google está haciendo una actualización de su sistema de diseño y como parte de ella lanzó herramientas para Android, Flutter y Web donde es más fácil implementar y seguir sus lineamientos.
Ahora, el equipo de Angular Material utilizará directamente estas herramientas de Material Design, lo que facilitará el mantenimiento y la implementación más fiel del sistema de diseño.
Si usas Angular Material y quieres actualizar a la versión 15 si debes hacer pasos extras, ya que este cambio modificará la forma de trabajar con Angular Material pero Angular siempre piensa en ti y puedes hacer esta migración con los comandos.
También es nuevo en esta nueva versión el soporte para el componente mat-slider con rangos.
Nueva utilidad en Angular CDK
El CDK de Angular es un conjunto de herramientas para comportamientos de UI que son agonísticos al estilo visual, lo que significa que podrías ahorrar muchas líneas de código haciendo comportamientos como Drag and Drop, Modals, Overlays pero agregas tu propio estilo visual.
Un ejemplo de esto es usar el CDK de Angular + TailwindCSS para crear una interfaz como trello.
Y esta nueva versión incluye un nuevo comportamiento CDK Listbox.
Al utilizar @angular/cdk/listbox, se obtienen todos los comportamientos esperados de una lista, incluyendo accesibilidad, interacción con el teclado, gestión del foco, etc.
Creación más rápida con ESBuild
En esta versión mejoran el soporte para ESBuild, un empaquetador que está escrito en GO y que sería el sustituto de Webpack. Con esto, la ejecución de comandos como ng build toma menos tiempo e incluso puede livereload con ng build –watch.
En la versión 14 se publicó una versión previa, esta versión ya incluye el proceso de empaquetado con esta herramienta e incluye el procesamiento de archivos sass, svg y fileReplacement.
Menos archivos
Cuando empieces un nuevo proyecto en Angular notarás que hay una diferencia notable con la disminución del número de archivos.
¿Qué pasa con los archivos que desaparecen? Angular maneja esas configuraciones en el backend y algunas de ellas desaparecen y otras tendrás que habilitarlas si realmente las usas.
Por ejemplo, ya no encontrará la carpeta de entornos si realmente necesita gestionar entornos y colocar sus claves allí, entonces habilite manualmente el archivo. No te preocupes si ya has gestionado los archivos con configuraciones personalizadas, Angular los mantendrá.
Elija su herramienta de pruebas para e2e
Angular recientemente deprecated Protractor como la herramienta para escribir pruebas e2e. ¿Qué utilizar? Hay herramientas en la industria que están haciendo un gran trabajo para este tipo de pruebas y ahora Angular te da la opción de elegir con cuál quieres trabajar cuando ejecutas el comando ng e2e.
Ventajas de la integración de Angular 15 y Stripe
Stripe es una plataforma de pago en línea que permite a las empresas procesar transacciones de forma segura y eficaz. La integración de Stripe en una aplicación Angular puede proporcionar una amplia gama de beneficios para los usuarios y propietarios de negocios.
Estos son los beneficios de integrar Stripe Integration en una aplicación desarrollada con Angular 15.
Procesamiento de pagos seguro
Stripe es una plataforma de pago de confianza que utiliza las normas de seguridad más estrictas del sector para proteger la información de pago de los usuarios. Al incorporar Stripe en una aplicación Angular, los usuarios pueden estar seguros de que sus datos de pago estarán protegidos y no se compartirán con terceros. Esto puede aumentar la confianza del usuario en la aplicación y en la marca que la respalda.
Flexibilidad en el procesamiento de pagos
Stripe ofrece una amplia variedad de opciones de procesamiento de pagos, incluidas tarjetas de crédito y débito, Apple Pay y Google Pay, entre otras. Al incorporar Stripe en una aplicación Angular, los propietarios de negocios pueden ofrecer a los usuarios una amplia variedad de opciones de pago, lo que puede aumentar la satisfacción del cliente y la conversión de ventas.
Facilidad de integración
Stripe ofrece una API fácil de usar que permite una integración rápida y sencilla con las aplicaciones Angular. Al incorporar Stripe en una aplicación Angular, los propietarios de negocios pueden ahorrar tiempo y recursos al no tener que desarrollar una solución de pago personalizada desde cero.
Gestión centralizada de pagos
Stripe proporciona una plataforma de gestión de pagos centralizada que permite a los propietarios de empresas realizar un seguimiento de las transacciones, emitir reembolsos y realizar otras tareas de gestión de pagos. Al incorporar Stripe en una aplicación Angular, los propietarios de negocios pueden gestionar todas las transacciones de la aplicación en un solo lugar, lo que puede simplificar el proceso de gestión de pagos.
Experiencia de usuario mejorada
Al incorporar Stripe en una aplicación Angular, los usuarios pueden experimentar un proceso de pago rápido y sin problemas. Esto puede mejorar la experiencia del usuario y aumentar la satisfacción del cliente. Los usuarios pueden pagar por los productos o servicios que desean de forma fácil y rápida, sin tener que preocuparse por problemas técnicos o de seguridad.
Ampliación de la base de clientes
Al ofrecer diversas opciones de pago a los usuarios, los empresarios pueden ampliar su base de clientes. Al incorporar Stripe en una aplicación Angular, los propietarios de negocios pueden atraer a los usuarios que prefieren pagar con una opción de pago específica, lo que puede aumentar las ventas y la rentabilidad de la aplicación.
Reducción del fraude
Stripe cuenta con herramientas y medidas de seguridad para detectar y prevenir el fraude en las transacciones de pago, lo que puede ayudar a proteger tanto a los propietarios de las empresas como a los usuarios de las aplicaciones.
Acceso a los datos de pago
Al utilizar Stripe, los propietarios de empresas pueden acceder a información valiosa sobre las transacciones de pago, como la frecuencia de compra, el valor medio de compra y otros datos relevantes. Estos datos pueden ayudar a los empresarios a tomar decisiones informadas sobre su estrategia de ventas y marketing.
Integración con otras herramientas empresariales
Stripe se integra con una amplia variedad de herramientas empresariales, como plataformas de comercio electrónico, servicios de facturación y contabilidad, etc. Al incorporar Stripe en una aplicación Angular, los empresarios pueden aprovechar estas integraciones para mejorar la eficiencia y la eficacia de su negocio.
Asistencia técnica y recursos de aprendizaje
Stripe ofrece un excelente soporte técnico y una amplia variedad de recursos de aprendizaje para ayudar a los empresarios a utilizar la plataforma de forma eficaz. Esto puede ayudar a los empresarios a solucionar problemas técnicos y aprender nuevas estrategias para mejorar su procesamiento y gestión de pagos.
Pronto traeremos noticias sobre la próxima versión 16 de Angular que se lanzará este mes de mayo.
