Momento Angular

Hola a todos. Mi nombre es Miko Getriev. Soy el líder de productos para Angular en Google. Desafortunadamente, no pude unirme a ustedes en persona la semana pasada en Ámsterdam porque tuve COVID. Pero en esta charla, todavía voy a compartir con ustedes todo lo que ha estado sucediendo en Angular durante el último año y medio. De hecho, el framework ha experimentado muchos avances. La comunidad de Angular ha llamado a esto el impulso de Angular. También me doy cuenta de que la mayoría de las personas en Just Nation no son desarrolladores de Angular. Hay muchos frameworks por ahí. Y me doy cuenta de que cada framework y cada comunidad tiene su propia narrativa. Por eso les pido que intenten ser lo más imparciales posible y déjenme contarles todo lo que ha estado sucediendo en Angular. Si tienen alguna pregunta, por favor déjenlas en los comentarios a continuación o contáctenme en Twitter en mgedgiv. En los últimos aproximadamente cinco años, Angular ha crecido casi siete veces. Esas son todas las estadísticas del registro público de nodos. Dado que la mayoría de los desarrolladores de Angular confían en registros privados, el número proyectado es mucho mayor. Y el estado de JavaScript mostró que Angular es el segundo framework más popular en la encuesta, justo después de React, y la encuesta de Stack Overflow confirmó estos datos.

Muy bien. Pero incluso si Angular es ampliamente adoptado, ¿significa eso que está siendo desarrollado activamente? Bueno, al observar el repositorio de Angular en GitHub, el proyecto ha recibido más de 16,000 solicitudes de extracción en los últimos cinco años. Si no usas Angular a diario, es posible que aún no estés completamente convencido. Y la respuesta a tus sentimientos probablemente esté oculta detrás de este logotipo. Que se parece sospechosamente al logotipo de Angular. ¿Pero lo es? Esta es una de las razones por las que existe tal malentendido sobre la adopción y popularidad del framework Angular. Pero hablaremos más sobre esto en un momento.

Entonces, antes de eso, basándonos en todas estas encuestas y tendencias públicas, parece que Angular está funcionando bastante bien. Pero todos sabemos que el ecosistema de JavaScript se mueve muy rápido. Desde que creamos Angular, el número de frameworks se ha duplicado o triplicado. Este crecimiento del espacio es genial. Porque todos aportan nuevas ideas. Lo que lleva a la innovación. Pero también, bueno, hay una perspectiva distorsionada. El factor de `coolness` de cada tecnología en la comunidad de JavaScript disminuye a la mitad por cada mes que ha existido. Entonces, supongo que hay una pregunta. ¿Es Angular `cool`? Honestamente, no tengo idea. Definitivamente no me considero la autoridad para determinar si algo es `cool` o no. Todavía considero que Rick Astley es `cool`. Y también, entre 2014 y 2021, antes de cambiar de roles en Google, tuve una racha casi perfecta en GitHub durante estos 7 años. Como pueden ver, estaba de fiesta muy duro en la universidad, emocionándome pensando en algoritmos y estructuras de data, y aprovechaba cada oportunidad para escribir código. ¿Sabes cuando vas a un lugar nuevo, mucha gente se toma selfies, ¿verdad? Bueno, porque quería capturar diferentes experiencias y asegurarme de tomar fotos desde diferentes lugares que visité, creé un `post-commit hook` para Git, que tomaba una selfie mía junto con un mensaje de confirmación muy sentimental cada vez que subía código y lo hasheaba. Bueno, claramente no puedo decir si Angular es `cool` o no. Hacerlo `cool` también está fuera de mi control y también fuera del control de nuestro equipo. Pero hay algunas cosas que podemos hacer. Podemos asegurarnos de que Angular sea eficiente, potente y estable. El framework pasó por una importante refactorización, que completamos en 2021. Esto nos permitió hacer muchas mejoras y generar un gran impulso. Muchos de ustedes pueden

Me gustaría hablar sobre el modelo de Reactividad. Pero antes de eso, permítanme darles una breve descripción general de cómo Angular refleja los cambios de datos en la vista en este momento. Durante los últimos siete años aproximadamente, Angular ha estado utilizando un compilador, que toma plantillas como esta y las traduce a instrucciones eficientes de JavaScript que pueden renderizar tus componentes bastante rápido. Aquí tienes tu árbol de componentes. En un cierto punto, puedes realizar una actualización en el estado de tus componentes. Cuando la cola de microtareas del navegador está vacía, el tiempo de ejecución de Angular recorrerá todo este árbol de componentes y verificará cada enlace dentro de tus plantillas. Si alguno de estos enlaces ha cambiado, Angular actualizará la vista asociada. Es genial que el framework solo actualice lo que ha cambiado, ¿verdad? Pero al mismo tiempo, recorre todo este árbol de componentes de forma predeterminada. Puedes estar pensando, espera, esto podría ser extremadamente lento. Bueno, no es tan malo. La razón por la que Angular es rápido es porque está diseñado teniendo en cuenta la monomorfia. En otras palabras, está optimizado para tu máquina virtual de JavaScript. Este es un excelente artículo de Misko, quien es el CTO de builder.io, donde desarrolló un framework llamado QUIC. Antes de unirse a builder.io, fue uno de los líderes técnicos de Angular en Google. Puedes encontrar esto en las pruebas de rendimiento de JavaScript que comparan diferentes frameworks. Respeto la implementación de estas pruebas y también es realmente difícil construir ejemplos y pruebas realistas, y es aún más difícil juzgar el rendimiento de un framework basándose en la manipulación de tablas. Pero bueno, como framework que nunca ha sido optimizado para este conjunto de pruebas, Angular sigue funcionando bastante bien aquí. Está cerca del medio, y supera a algunas alternativas muy populares. He eliminado sus nombres porque realmente no quiero crear ningún drama aquí. Si profundizas aquí, verás que Angular funciona realmente bien en casi todas las pruebas, excepto una, intercambiando roles. Actualmente, estamos trabajando en mejoras de nuestro flujo de control, que incluye declaraciones condicionales y también bucles directamente en las plantillas. Vamos a tener en cuenta el intercambio de roles y esperamos actualizaciones en los próximos meses. Cuando mejoremos esto, las pruebas de rendimiento se moverán desde donde estaban hasta aproximadamente el tercer lugar en la sección de frameworks , lo cual considero un resultado bastante satisfactorio. Muy bien. Ahora, volvamos a los cambios en el modelo de reactividad que experimentó Angular. Supongamos que tenemos el

Muy bien. ¿Pero eso es el final de todas las posibles optimizaciones para Angular? Bueno, en realidad eso es solo el comienzo. Estamos compartiendo un RFC que permitirá la carga lenta declarativa en las plantillas. La carga lenta en Angular, obviamente, ha estado disponible durante un tiempo. Pero esta carga lenta declarativa te permitirá especificar qué partes de tus plantillas deseas cargar de forma lenta, y el framework extraerá los segmentos de plantilla junto con todas sus dependencias transitivas en un paquete separado. También permitimos la precarga siguiendo condiciones específicas. En el ejemplo anterior, vamos a descargar y hidratar parcialmente solo los componentes fuera del bloque de carga lenta, y en este caso, la aplicación y la navegación. Astro nombró a un concepto similar island. Sin embargo, Astro lo utiliza para diferentes tecnologías, potencialmente siendo las islas individuales, y aquí las islas son solo subárboles de componentes individuales. Como aún no hemos finalizado el design, veamos una sintaxis inventada que refinaremos en las próximas semanas. En esta plantilla, tenemos tres bloques. Una parte de la plantilla que se cargará de forma lenta cuando entre en el viewport, un indicador de carga especificado de forma declarativa y un bloque de error que se mostrará si la carga lenta falla. Este concepto puede recordarte al lazy y suspense de React. Diré que tiene algunos elementos similares, y nos hemos inspirado en suspense, por supuesto. Diré que hay diferentes compensaciones en este enfoque, y como con todo en ingeniería de software, no hay una solución perfecta. El bloque de carga lenta de Angular, por ejemplo, es muy declarativo y algo restrictivo. No te permite dispararte en el pie aquí, y el bloque de carga lenta no invoca ninguna lógica de JavaScript por defecto. Al menos no estás escribiendo ninguna lógica de JavaScript para ello. Solo estás escribiendo código declarativo en las plantillas. Muy bien. Si estás familiarizado con otros frameworks, además de Angular, el concepto de reactividad y la plantilla adicional

Y, como puedes imaginar, tuvimos que introducir un pipeline de construcción, ¿verdad? Por eso también habilitamos esto con una CLI. Queríamos encapsular el proceso de construcción. Una de mis características favoritas de la CLI de Angular es el comando ngUpdate. Literalmente transformará tu código en cualquier lugar donde encuentre una API obsoleta. Según nuestra encuesta a los desarrolladores, el 70% de las aplicaciones de Angular están utilizando las dos últimas versiones principales de Angular, lo que nos hace creer que ngUpdate funciona muy bien. Y también podemos mantener Angular siempre actualizado de esta manera. Podemos evolucionar tus aplicaciones junto con la evolución de Angular y la plataforma web también. Por ejemplo, KLM informó que actualizaron su sitio web con más de medio billón de usuarios a la versión 15 en solo un par de horas. Teniendo esta abstracción de la CLI, estamos encapsulando completamente tu proceso de construcción, no tienes que pensar en cómo funciona todo bajo el capó o mantener tu configuración manual de webpack. La versión 16 nos permitió cambiar por completo el proceso de construcción de webpack a un constructor basado en esbuild. Al cambiar a esbuild, redujimos los tiempos de construcción en 2.5 veces para algunas de las aplicaciones en las que lo probamos. Otra buena idea de ingeniería fue introducir el soporte integrado de internacionalización en tiempo de construcción. En Google, consideramos que la internacionalización es una prioridad muy alta porque queremos permitir a los desarrolladores construir para todos. Construyes tus aplicaciones una vez y después ejecutas un extractor de cadenas que produce archivos de traducción para cada idioma que desees admitir. En tiempo de construcción, compilamos tu aplicación y usamos el reemplazador de traducción para producir una versión de tu aplicación para cada idioma. Esa es una forma realmente eficiente porque no tenemos que hacer nada en tiempo de ejecución. Todas las cadenas traducidas se pueden eliminar del árbol, por lo que obtienes todas las cadenas de traducción que estás utilizando y no cargas múltiples archivos porque todo está incrustado en tu aplicación. No tenemos que realizar detección de cambios o reconciliación o cualquier otra cosa pesada para tu aplicación porque, bueno, simplemente... las cadenas son estáticas ahí, aunque puedas traducir tu aplicación a la cantidad de idiomas que desees. Hicimos algunas otras actualizaciones en nuestros módulos principales del framework. Básicamente, queríamos asegurarnos de que tengas todos los módulos principales que necesitas para construir una aplicación empresarial y que estén muy bien integrados con el framework. Por ejemplo, si quieres construir formularios, puedes usar la escritura más estricta de Angular para los formularios que introdujimos en las últimas versiones. El enrutador ahora también es más sencillo. Nos permite pasar datos directamente a las entradas de los componentes desde los datos de la ruta, solo parámetros del enrutador o resolutores. Y además, ahora tiene algunos elementos funcionales, lo que lo hace más pequeño, más eliminable y más fácil de usar. También hay un soporte integrado de accesibilidad en Angular, en el llamado Angular CDK, o kit de desarrollo de componentes. También estamos construyendo la implementación de referencia pública de Google Material, diseñada para la web. Si quieres usar la última versión de Google Material, bueno, puedes obtener inspiración de la implementación de Angular y usar esta implementación en sí misma. Sé que hoy cubrí mucho y no puedo decirte si Angular está de moda o no. Pero, bueno, ciertamente pude mostrarte argumentos técnicos de que es rápido, potente y estable. Muchas gracias por tu atención y, nuevamente, si tienes alguna pregunta, no dudes en contactarme directamente en Twitter. Gracias. ¡Feliz codificación!