El Viento y las Olas: La formación de Olas de Framework desde el Epicentro

Nuestra comprensión colectiva de la innovación es incorrecta. Puede parecer al principio que los problemas se resuelven y las innovaciones se introducen por un solo punto de luz, una persona solitaria teniendo un momento eureka. Sin embargo, podemos ver que para cualquier gran innovación, este simplemente no es el caso.

Por ejemplo, tomemos la historia de quién inventó la computadora. Puede parecer al principio lineal, como si un solo evento y una sola implementación fueran el comienzo. Sin embargo, no fue uno, sino muchos pasos adelante. Quizás bajo ciertas definiciones fue ENIAC, ampliamente considerado como la primera computadora digital electrónica de propósito general. Había otras computadoras que tenían todas estas características, pero ENIAC las tenía todas en un solo paquete. Dicho esto, no era binario. Colossus también fue considerado como la primera computadora digital programable, aunque fue programada por interruptores y enchufes, no por un programa almacenado. Siendo el binario bastante importante, tal vez quieras rastrearlo hasta el Mark I de Aiken, que tenía principios binarios, pero no era electrónico. Cada ubicación de almacenamiento, conjunto de interruptores y registros se asignaron un número de índice único. Estos números se representaban en binario en la cinta de control. Sin embargo, el Z3 y Z4 fueron la primera computadora programable. Atzinosoff y Berry diseñaron la primera computadora electrónica digital, la primera vez que una computadora pudo almacenar información en su memoria principal, pero ninguna de esas hubiera sido posible sin la teoría en evolución de Turing, escribiendo sus números no computables, donde él define lo que ahora conocemos como una máquina de Turing. Pero también Claude Shannon sentó las bases de la teoría de la información. Sus teorías sentaron las bases para todas las redes de comunicación electrónica, pero también EDVAC, Manchester Baby, el Franzi Mark I, e IBM trajeron nuevos desarrollos a considerar, todos los cuales influyeron en piezas importantes de lo que compone una computadora.

Pero nada de esto hubiera sido posible sin el Telar de Jacquard, que era un conjunto de tarjetas para producir un patrón en un tejido en un paño, hace mucho tiempo. O Babbage, quien creó dos calculadoras mecánicas, una era la Máquina Diferencial, y la otra era la Máquina Analítica Inacabada. O Edda Lovelace, quien inventó los conceptos de las computadoras modernas, incluyendo software y subrutinas. Ella pensó en cómo las computadoras podrían manejar cualquier tema, no solo números, y que data podría representarse en forma digital y publicó el primer programa de computadora. Pero entonces esto realmente depende de tu definición de una computadora, si te refieres a la computadora moderna o no, porque ¿qué serían las computadoras sin el chip de computadora? Jack Kilby y Robert Noyce presentaron el circuito integrado conocido como el primer chip de computadora. ¿O qué tal cuando se mostró el prototipo de la computadora moderna en un centro de investigación para el aumento del intelecto humano, incluyendo un ratón y una GUI? Y realmente, ¿qué sería la informática moderna sin el desarrollo de Ethernet, para conectar varias computadoras y otros hardware? Como dice Matt Ridley en Cómo Funciona la Innovación, la innovación de una computadora ya no puede ser localizada en un solo producto más de lo que uno puede localizar el momento en que un niño se convierte en adulto. Incluso para una de estas piezas, podemos ver que están interconectadas y no solo en una línea de tiempo scale, sino también conectadas por qué espectro de innovación impulsó más hacia adelante. Y así, vemos que la innovación es un sistema, una serie de frecuencias interconectadas. La innovación son conexiones. La innovación es una red.

Sin embargo, muchos hablan de la innovation como si fuera el encendido de una bombilla, un momento aha que solo golpea a los creadores más brillantes. Pero incluso la bombilla fue inventada simultáneamente por 21 personas diferentes en diferentes partes del mundo. Edison pudo haber conseguido esa última patente, pero la innovation de la bombilla fue lenta, acumulativa e inevitable. La innovation no es un singular momento de eureka.

Entonces, ¿qué se necesita para hacer algo completamente nuevo y útil a partir de cosas que ya existen? ¿Cómo creamos un cambio sísmico a partir de cosas que ya estaban aquí antes? A menudo hablamos de las olas de los frameworks de JavaScript, ese único momento en el tiempo en el que un framework alcanza una relevancia masiva. Pero no hablamos de lo que compone una ola. Las olas no se crean por sí solas. Son creadas por una fuerza de la naturaleza, el viento. Y así, hoy, mientras hablamos de la innovation en la industria, vamos a hablar sobre el viento y las olas.

Soy Sarah Drasner, y hoy vamos a hablar sobre la formación de las olas de frameworks desde el epicentro. Entonces, ¿quién soy yo para hablar de esto de todos modos? En el pasado, yo era una desarrolladora de React. Di la conferencia principal en el Rally de React en 2016 entre algunas otras conferencias, y luego finalmente encontré a Vue y me enamoré de él, llegando a ser miembro del equipo principal de Vue. En septiembre del año pasado, tomé un trabajo de directora de ingeniería en Google, incluyendo pero no limitado a los lenguajes de JavaScript y TypeScript, pruebas web, incluyendo Karma, y algunos frameworks, uno de los cuales es Angular. Yo personalmente no dirijo el equipo de Angular. Puedes pensar en mí más como la abuela de Angular. Y aunque hoy me voy a centrar mucho en Angular, sé que lo que te estoy contando, sé que puedo contarte la misma historia desde la perspectiva de enfoque de varios frameworks, ya que el punto es que todos aprendemos unos de otros. Sin embargo, lo que creo que es único e intrigante de Angular es lo bien que ha sobrevivido. Ha moldeado e influenciado múltiples olas de JavaScript de formas que creo que pocos se dan cuenta completamente. Y a su vez, aprende y crece y continúa creciendo de los que están a su alrededor. Así que básicamente, cuando veo que otros frameworks prosperan, también me siento muy feliz por ellos.

Lo que me lleva a, ¿cómo llegamos todos aquí? ¿Y cómo jugó Angular un papel? Para ver a dónde va, es útil aprender del pasado y de dónde venimos. Pero te advierto, esta es un área polémica, y las personas pueden no estar siempre de acuerdo en algunos de estos puntos. ¿Recuerdas cómo dije que la innovation era más como una red o un sistema que un único momento aha? ¿Y recuerdas cómo dije que Angular y otros han resistido la prueba del tiempo? Bueno, ninguno de estos frameworks se hizo de la nada. Las primeras versiones de Angular y AngularJS fueron uno de los frameworks de JS más modernos, y se inspiraron en sus predecesores, Rails y JQuery. Ninguno de los cuales realmente categorizaría como un framework de JS moderno, como lo conocemos hoy. A partir de ahí, tenemos Ember, también en esta primera ola, inspirándose también en Rails. Handlebars, en el que Yehuda Katz trabajó anteriormente. Y las capacidades de spa de AngularJS. Luego tenemos Backbone, aprendiendo también de Angular, pero también de los enfoques MVP. Y Knockout, que aprendió de Handlebars y jQuery, introduciendo conceptos importantes, como las propiedades calculadas.

En la segunda ola, tenemos a React tomando de AngularJS, pero eliminando la M y la C de MVC y centrándose solo en la capa de vista. También se inspiró en Backbone. Y Redux, adoptado en gran medida en ocasiones para la gestión de estado, se inspiró en Elm.

La segunda versión de Angular obviamente tomó inspiración de la primera, pero también aprendió de React. Y Vue tomó inspiración de muchas fuentes, AngularJS para algunas plantillas y autoría y vinculación, React para un enfoque solo de capa de Vue, Knockout para propiedades calculadas, y Elm y Redux para la gestión de estado de Vuex.

Svelte simplificó mucho de lo que vino antes de él, tomando de muchos conceptos modernos de framework, pero inclinándose más hacia el compilador y simplificando algunos de los enfoques anteriores mencionados con tiendas de estado. Notarás que no te he dicho mis apuestas para esta tercera etapa porque no soy un meteorólogo. Notaré que los meta frameworks como Next y Next.js se han vuelto bastante populares y notaré que Solid está haciendo algunas cosas increíbles y potencialmente cambiantes para la industria. Y por último, notaré de nuevo que es impresionante que Angular haya durado múltiples olas.

Mencioné que Angular influyó mucho y puede ser difícil de ver ya que los hilos del tiempo tienden a lavar estas cosas. Angular desarrolló Spas, uso de primera clase de TypeScript, integración de pruebas y arnés, de hecho, incluso hoy en día cuando creas un nuevo componente, obtienes toda esta infraestructura de pruebas preconstruida para ti. Agitación del árbol, compilación anticipada y primera compilación en tiempo real de internacionalización con cero tiempo de ejecución sobrecarga y actualizaciones maduras impulsadas por CLI. Esa última es realmente impresionante, especialmente cuando dirijo un equipo de infraestructura a escala, esas actualizaciones siendo tan fluidas son realmente importantes.

Dicho esto, Angular no se queda quieto ni se queda solo. Una de las cosas que he notado en el tiempo que he pasado con el equipo de Angular es lo humilde, curioso y ansioso por mejorar que es el equipo. Angular está trabajando en un montón de mejoras en este momento y actualmente se inspira en la simplicidad de autoría de Svelte, el enfoque de Vue a los SFCs, las tiendas de Svelte y la simplificada gestión de estado, la reactividad de Solid, el flujo de datos unidireccional de React, las animaciones de Vue, y Aurora, como se ha visto, ya sabes, Aurora está en el equipo de Chrome, trabajaron con Next.js en un componente de imagen. También estamos trabajando con ellos. Entonces, puedes haber notado que las mejoras en el conjunto de características externas de Angular se han detenido en los últimos años, lo que muchos se preguntan, ¿se ha estancado Angular? Bueno, el equipo ha tenido que hacer una pausa en algunas de esas características debido a Ivy. Puedes o no haber oído hablar de lo que Angular ha estado trabajando durante muchos años, Ivy fue una reescritura masiva desde cero del renderizador de Angular. Ivy fue nuestra exploración de cómo construir un framework que pueda evolucionar con el tiempo, lanzado el año pasado. Puedes comparar esta actualización con lo que muchos de ustedes, los OG de React, recordarán, una actualización llamada React Fiber hace muchos años. El equipo trabajó en cambios en el algoritmo de reconciliación de RIG bajo el capó. Y recientemente Vue hizo una actualización de los internos también llamada Vue 3, reescrita en TypeScript y una reescritura completa del sistema de reactividad. ¿Qué tienen en común todas estas reescrituras bajo el capó? Bueno, tienen grandes ganancias pero un ligero inconveniente de que algún otro trabajo en el framework puede ralentizarse por un tiempo. Sin embargo, Ivy trajo consigo un montón de grandes mejoras. Por ejemplo, hemos visto una mejora en la organización del código base, ya que la deuda técnica ha disminuido y la base del código está más organizada, lo que facilita mucho más las mejoras futuras. El servicio de lenguaje de Angular ha permitido una mejor integración con los IDEs, como VS code, y una mejor resaltado de sintaxis y más informativas sugerencias de herramientas. Hemos visto mejoras significativas en la velocidad, así como optimizaciones de paquetes y controles más estrictos para las pruebas, así como mejores errores de compilación. Aquí tienes un ejemplo de este último. Digamos que añades un componente sin registrarlo completamente y ahora hay más información de CLI sobre lo que falta y dónde para que puedas pasar menos tiempo depurando y más tiempo siendo productivo. Ahora que estas actualizaciones están hechas y Angular está evolucionando, eso nos lleva a hoy. Nos estamos centrando en dos temas principales, las características avanzadas y la simplificación del desarrollo.

Entonces, en ese conjunto de características avanzadas, hoy vamos a hablar de formularios de tipo estricto, estilos avanzados, incrustación de recursos, actualizaciones y manejo de errores y optimización de la accesibilidad del título de la página. Primero, hablemos de los formularios de tipo estricto. Una de las características agradables de Angular es la validación de formularios incorporada. Puedes ver aquí cómo fácilmente escribo y construyo una validación de formularios reactiva en sólo unas pocas líneas de código sin ninguna biblioteca externa o configuración. En versiones anteriores de Angular, incluso mientras escribía esta validación, el tipo se convertía en cualquier cosa. Es una lástima dada la fuerza de typescript para hacer este tipo de evaluación. Así que en versiones anteriores en Angular V13, puedes ver que ese estado del formulario es cualquier cosa.

Puedes ver cuántas personas lo han pedido. Tenemos casi 1,000 pulgares arriba en este problema en el repositorio. Oh, no. Pero no tengas miedo. Acabamos de añadir una característica que es tanto algo que debería ser mejorado como algo que está muy adelantado. Angular ya tiene form validation incorporado y ahora aprovechamos nuestro uso de typescript para forms y validaciones fuertemente tipadas también. Es la característica más solicitada de Angular, ahora lanzada en la V14. Para verla en uso, ahora obtenemos grandes insights y comprobación de tipos en nuestros forms, haciendo la debugging y la developer experience mucho más potentes, sin tener que añadir ninguna biblioteca externa o interrumpir con typescript.

Genial. Hablemos de algunas de las advanced funciones que Angular tiene para estilos y recursos como componentes. Así, una gran nueva característica es que ahora puedes añadir estilos Sass en línea sin mucha configuración. Por ejemplo, simplemente soltando esto en un componente. Ofrece efectos sofisticados como este con sólo unas pocas líneas de mixins Sass directamente en línea.

O ahora tenemos una configuración de Tailwind incorporada. Puedes añadir un archivo de configuración de Tailwind que se registrará en la aplicación permitiendo una integración sin problemas con las bibliotecas de Tailwind. Lo que nos lleva a otra característica que es genial para el rendimiento de la incrustación de recursos. Digamos que queremos añadir una hoja de estilo a nuestra aplicación. Podemos hacerlo, pero observa que esto bloquea la renderización, haciendo que los usuarios esperen a que todo se cargue. De manera similar para las fuentes, estamos descargando la familia de fuentes cada vez que servimos esta solicitud. Pero con esta simple adición a nuestro AngularJSON, ahora podemos ver fuentes críticas incrustadas en una etiqueta de estilo y nuestras hojas de estilo se han actualizado para cargar de forma asíncrona.

Genial. Ya mencioné que Angular ha estado adelantado a su tiempo en términos de actualizaciones y migración, pero ng-update y ng-schematics han sido trabajados para proporcionar aún más detalle e información útil. Algo de esto se debe al hecho de que Angular funciona a scale, y para proyectos como Google Cloud, Angular tiene algunas de las funcionalidades de actualización más sofisticadas de la industria. Dentro de Google, hacemos lo que llamamos LSCs, o cambios a gran scale, y usamos ng-update para transformar el código sin problemas proporcionando registros sofisticados e informes de errores en el camino. Eso significa que Angular puede mejorar continuamente con el tiempo con menor riesgo para sus usuarios. Aprendimos sobre la rotura de la manera difícil. Y los códigos no están llenos de muchas formas diferentes de hacer cosas y escribir componentes, que es a menudo el caso cuando las actualizaciones ocurren en grandes bases de code, donde la gente no tiene tiempo para actualizar cada componente. Y todo sigue siendo compatible con versiones anteriores. ng-update se conecta al mismo AST que usamos para TypeScript. Y ahora hemos añadido diagnósticos de plantillas mejorados, que dan una gran detección de errores, especialmente para errores comunes que podrían ser difíciles de debug para las personas que trabajan por primera vez con el framework. Aquí vemos un error de binding que cariñosamente llamamos banana en una caja. Porque la banana es deliciosa y posiblemente la fruta más divertida. Otros mejores mensajes de error incluyen errores de coalescencia nula y mensajes de error que pueden ser eliminados por el árbol. Ahora tenemos nuevos códigos de error en tiempo de ejecución. Estos códigos de error facilitan la búsqueda de referencias sobre cómo resolver los errores que podrías encontrar. Esto incluye, esto permite que el optimizador de construcción también elimine los mensajes de error de los paquetes de producción. Angular CLI ahora ofrece también funcionalidad de autocompletado, lo que mantiene a los desarrolladores en el flujo de sus tareas más fácilmente. Y otra característica realmente importante es la simplificación de la accesibilidad del título de la página.

Esto es importante en los enfoques de SPA porque, sin intención aquí, el título de cada página permanecería igual, que es lo primero que un lector de pantalla lee al cambiar de raíz. Entonces, a partir de v13.2, el enrutador de Angular ahora ofrece una nueva propiedad de título simplificada que ayuda a las personas que utilizan tecnología asistiva a entender el título y el propósito del contenido de la página. También puedes crear una lógica más compleja para títulos de página dinámicos y condicionales también extendiendo la estrategia de título.

Bueno, acabamos de hablar de un montón de diferentes mejoras y avances. Esto nos lleva a nuestro próximo tema, simplificación del desarrollo. Angular v14 es solo la punta del iceberg en lo que estamos asumiendo para hacer que la developer experience sea mucho más fluida. En él, estamos ofreciendo componentes independientes donde los desarrolladores ya no tienen que preocuparse por escribir y actualizar NgModules. Para aquellos de ustedes que no están familiarizados con Angular, pueden preguntar ¿qué significa eso? Aquí tienes un ejemplo de un componente de carga perezosa. Anteriormente, en NgModule, habríamos escrito nuestras importaciones y luego pasamos a escribir nuestras rutas y nuestra configuración de enrutamiento. Hoy, eliminamos una tonelada de esa configuración. Nos centramos solo en nuestras rutas, escribiendo nuestro componente de carga perezosa de esta manera. Hoy, tenemos una serie de este tipo de mejoras en marcha, simplificando la developer experience y eliminando una tonelada de sobrecarga para el code que la gente necesita escribir, aprender y construir.

Entonces eso nos lleva al futuro. Después de la finalización de Ivy este año ha habido una avalancha de estas características de calidad de vida más pequeñas. Estas mejoras son solo el comienzo. El próximo año, Angular está abordando brechas más grandes en la developer experience. Entonces, lo que presenté hoy es realmente solo la punta del iceberg y lo que está en desarrollo ahora son algunos avances más grandes con este framework que no puedo esperar. El próximo año y los años por venir van a ser realmente emocionantes. Aparte de eso, el equipo central ha crecido lo que nos permite martillar en algunos problemas pendientes y pagar la deuda técnica de la que este humilde y trabajador equipo está realmente orgulloso. Próximamente verás muchas mejoras realmente geniales muchas de las cuales, como mencioné antes están inspiradas en el gran trabajo de otros en la industria. Una API más fácil y simplificada incluyendo state management inspirado por Vue y Svelte. Renovación del sistema de reactivity inspirado por Solid y Svelte. Mejora del rendimiento de los componentes de imagen, carga de scripts trabajando con el equipo de Aurora en Chrome abordando core web vitals. Mejor hidratación y SSR inspirado por tantas personas en la industria. Mejores trazas de pila, mejor accessibility más primitivas ARIA headless reutilizables y la renovación de la documentation con nuevos ejemplos interactivos de incorporación. Angular empuja el framework del ecosistema web hacia adelante y también aprende de y se inspira en los que lo rodean. Y así es como todos evolucionamos. Nunca es en aislamiento, es aprendiendo unos de otros. Gracias.