El Viento y las Olas: La formación de las Ondas de los Frameworks desde el Epicentro

Rate this content
Bookmark

¿Qué haces cuando eres un framework que ha sobrevivido e innovado en dos Ondas de los Frameworks de JavaScript, y ves la nueva ola crestándose en la distancia? Innovas. En esta charla, exploraremos el panorama de los Frameworks de JavaScript y algunas de las principales características competitivas que hemos visto. Exploraremos lo que Angular está introduciendo hoy y hacia dónde nos dirigimos en el futuro.

20 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Nuestra comprensión de la innovación es incorrecta. Las innovaciones no son introducidas por un solo punto de luz. La historia de quién inventó la computadora no es lineal. Muchos pasos adelante llevaron al desarrollo de la computadora. Angular ha dado forma e influenciado múltiples ondas de JavaScript, y Angular v14 simplifica el desarrollo con componentes independientes.

Available in English

1. The Complex History of Computer Innovation

Short description:

Nuestra comprensión de la innovación es incorrecta. Las innovaciones no son introducidas por un solo punto de luz. La historia de quién inventó la computadora no es lineal. Muchos pasos adelante llevaron al desarrollo de la computadora. Varios inventos e individuos contribuyeron a la computadora moderna, incluyendo ENIAC, Colossus, Aiken's Mark I, el Z3 y Z4, la teoría de Turing, la teoría de la información de Claude Shannon, el telar de Jacquard, las calculadoras de Babbage, los conceptos de Edda Lovelace, el chip de computadora, el prototipo de la computadora moderna y Ethernet. La innovación es un sistema, interconectado y impulsado por varios espectros de innovación.

Nuestra comprensión colectiva de la innovación es incorrecta. Al principio, puede parecer que los problemas se resuelven y las innovaciones son introducidas por un solo punto de luz, una persona solitaria que tiene un momento de revelación. Sin embargo, podemos ver que para cualquier innovación importante, esto no es el caso.

Por ejemplo, tomemos la historia de quién inventó la computadora. Al principio, puede parecer lineal, como un solo evento y una sola implementación fue el comienzo. Sin embargo, no fue uno, sino muchos pasos adelante. Tal vez, bajo ciertas definiciones, fue ENIAC, ampliamente considerado como la primera computadora digital electrónica general de propósito electrónico. 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 programado mediante interruptores y enchufes, no un programa almacenado. Siendo 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 asignaba 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 las primeras computadoras programables. Atzinosoff y Berry diseñaron la primera computadora electrónica digital, la primera vez que una computadora podía almacenar información en su memoria principal, pero nada de esto hubiera sido posible sin la teoría en evolución de Turing, escribiendo sus números incalculables, donde 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 de todas las redes de comunicación electrónica, pero también EDVAC, Manchester Baby, Franzi Mark I e IBM aportaron nuevos desarrollos, todos los cuales influyeron en piezas importantes que conforman 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 una tela, hace mucho tiempo. O Babbage, quien creó dos calculadoras mecánicas, una era la Máquina de Diferencias y la otra era la Máquina Analítica Inacabada. O Edda Lovelace, quien inventó los conceptos de las computadoras modernas, incluido el software y las subrutinas. Ella pensó en cómo las computadoras podrían manejar cualquier tema, no solo números, y publicó el primer programa de computadora. Pero luego esto realmente depende de tu definición de una computadora, si te refieres a una 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 intelecto humano aumentado, incluido un mouse y una interfaz gráfica de usuario? Y realmente, ¿qué sería la informática moderna sin el desarrollo de Ethernet, para conectar múltiples computadoras y otros hardware? Como dice Matt Ridley en Cómo funciona la innovación, la innovación de una computadora ya no se puede señalar en un solo producto que uno pueda señalar el momento en que un niño se convierte en adulto. Porque incluso una de estas piezas, podemos ver que están interconectadas y no solo en una escala de tiempo lineal, sino también conectadas por qué espectro de innovación impulsó más. 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.

2. The Formation of Framework Waves

Short description:

La innovación no es un momento único de revelación. Hoy vamos a hablar sobre la formación de las olas de frameworks desde el epicentro. Angular ha dado forma e influenciado múltiples olas de JavaScript. Las primeras versiones de Angular se inspiraron en Rails y JQuery, lo que llevó a la aparición de otros frameworks como Ember, Handlebars, Backbone y Knockout.

Sin embargo, muchos hablan de la innovación como una bombilla que se enciende, como un momento de revelación que solo afecta 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 obtenido la patente final, pero la innovación de la bombilla fue lenta, acumulativa e inevitable. La innovación no es un momento único de revelación.

Entonces, ¿qué se necesita para crear 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í? A menudo hablamos de las olas de frameworks de JavaScript, ese momento único en el tiempo en el que un framework alcanza una gran relevancia. 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, al hablar de la innovación en la industria, vamos a hablar de 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 todo esto? En el pasado, fui desarrolladora de React. Fui oradora principal en React Rally en 2016, entre otras conferencias, y luego descubrí Vue y me enamoré de él, llegando a formar parte del equipo principal de Vue. En septiembre del año pasado, asumí un puesto de directora de ingeniería en Google, que incluye pero no se limita a los lenguajes JavaScript y TypeScript, pruebas web, incluido Karma, y algunos frameworks, uno de los cuales es Angular. Personalmente, no dirijo el equipo de Angular. Puedes pensar en mí como la abuela de Angular. Y aunque hoy me voy a centrar mucho en Angular, debes saber que lo que te estoy contando, lo mismo te lo puedo contar desde la perspectiva de otros 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 dado forma 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 sigue creciendo gracias a 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 nos lleva a preguntarnos, ¿cómo llegamos todos aquí? ¿Y cómo jugó un papel Angular? Para ver hacia dónde se dirige, es útil aprender del pasado y de dónde venimos. Pero te advierto, esta es un área controvertida y es posible que las personas no siempre estén de acuerdo en algunos de estos puntos. ¿Recuerdas cómo dije que la innovación era más como una red o un sistema que un solo momento de revelación? ¿Y recuerdas cómo dije que Angular y otros han resistido la prueba del tiempo? Bueno, ninguno de estos frameworks se creó de la nada. Las primeras versiones de Angular y AngularJS fueron de los frameworks JS más modernos, y se inspiraron en sus predecesores, Rails y JQuery. Ninguno de los cuales realmente clasificaría como un framework JS moderno, como los conocemos hoy en día. A partir de ahí, tenemos Ember, también en esta primera ola, que también se inspiró en Rails. Handlebars, en la que Yehuda Katz trabajó anteriormente. Y las capacidades spa de AngularJS. Luego tenemos Backbone, que también aprendió de Angular, pero también de enfoques MVP. Y Knockout, que aprendió de Handlebars y jQuery, introduciendo conceptos importantes, como las propiedades calculadas.

3. Formation of Framework Waves

Short description:

En la segunda ola, React se inspiró en AngularJS, centrándose solo en la capa de vista. Redux se inspiró en Elm. La segunda versión de Angular aprendió de React. Vue se inspiró en AngularJS, React, Knockout, Elm y Redux. Svelte simplificó enfoques anteriores con almacenes de estado. Next y Next.js son meta frameworks populares. Solid está haciendo cosas que cambian la industria. Angular ha perdurado en múltiples olas.

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

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

Svelte simplificó mucho de lo que se hizo antes, tomando inspiración de muchos conceptos modernos de frameworks, pero inclinándose más hacia el compilador y simplificando algunos de los enfoques anteriores mencionados con almacenes de estado. Te darás cuenta de que no te he dicho mis apuestas para esta tercera etapa porque no soy un meteorólogo. Destacaré que los meta frameworks como Next y Next se han vuelto muy populares y señalaré que Solid está haciendo cosas asombrosas y potencialmente cambiantes en la industria. Y por último, destacaré nuevamente que es impresionante que Angular haya perdurado en múltiples olas.

4. Advancements and Improvements in Angular

Short description:

Angular ha realizado avances y mejoras significativas a lo largo de los años. El equipo se ha inspirado en varios frameworks y tecnologías, como Svelte, Vue, Solid, React y Aurora. La introducción de Ivy, una reescritura completa del renderizador de Angular, ha traído numerosas mejoras, incluyendo una mejor organización del código, una mejor integración con los IDE, mejoras de velocidad y verificaciones más estrictas. Angular ahora se centra en características avanzadas y en simplificar el desarrollo, con un enfoque específico en los formularios estrictamente tipados.

Mencioné que Angular ha influido mucho y puede ser difícil de ver, ya que el tiempo tiende a borrar estas cosas. Angular desarrolló Spas, el uso de TypeScript de primera clase, integración y arnés de pruebas, de hecho, incluso hoy cuando creas un nuevo componente, obtienes toda esta infraestructura de pruebas preconstruida. Tree shaking, compilación anticipada y internacionalización integrada en tiempo de compilación con cero sobrecarga en tiempo de ejecución y actualizaciones impulsadas por la CLI maduras. La última es realmente impresionante, especialmente porque dirijo un equipo de infraestructura a gran escala, es muy importante que estas actualizaciones sean tan fluidas.

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 muchas mejoras en este momento y actualmente se inspira en la simplicidad de autoría de Svelte, el enfoque de Vue para los SFC, las stores de Svelte y la simplificación de la gestión del estado, la reactividad de Solid, el flujo unidireccional de datos de React, las animaciones de Vue y Aurora, como se puede ver, Aurora está en el equipo de Chrome, trabajaron con Next.js en un componente de imagen. También estamos trabajando con ellos posteriormente. Entonces, es posible que hayas notado que las mejoras en el conjunto de características externas de Angular se han detenido en los últimos años, lo que ha llevado a muchos a preguntarse si Angular se ha estancado. Bueno, el equipo ha tenido que pausar algunas de esas características debido a Ivy. Es posible que hayas escuchado o no lo que Angular ha estado trabajando durante muchos años, Ivy fue una reescritura completa y masiva del renderizador de Angular. Ivy fue nuestra exploración de cómo construir un framework que pueda evolucionar con el tiempo, se lanzó el año pasado. Puedes comparar esta actualización con lo que muchos de ustedes, los OGs 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 RIG bajo el capó. Y recientemente, Vue también hizo una actualización de los componentes internos llamada Vue 3, reescrita en TypeScript y una reescritura completa del sistema de reactividad. ¿Qué tienen en común todas estas reescrituras internas? Bueno, tienen grandes beneficios, pero también un ligero sacrificio de que otros trabajos en el framework pueden ralentizarse por un tiempo. Sin embargo, Ivy trajo consigo muchas mejoras. Por ejemplo, hemos visto una mejor organización del código, ya que la deuda técnica ha disminuido y la base de código está más organizada, lo que facilita mucho más las futuras mejoras. El servicio de lenguaje de Angular ha permitido una mejor integración con los IDE, como VS code, y una mejor sintaxis resaltada y consejos más informativos. También hemos visto mejoras significativas de velocidad, así como optimizaciones de paquetes y verificaciones más estrictas para las pruebas, así como errores de compilación mejorados. Aquí tienes un ejemplo de esta última. Digamos que agregas un componente sin registrarlo completamente y ahora hay más información de la CLI sobre qué 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, características avanzadas y simplificación del desarrollo.

Entonces, en ese conjunto de características avanzadas, hoy vamos a hablar sobre formularios estrictamente tipados, estilos avanzados, inclusión de recursos, actualizaciones y manejo de errores y simplificación de la accesibilidad del título de la página. Primero, hablemos de los formularios estrictamente tipados. Una de las características interesantes de Angular es la validación de formularios incorporada. Aquí puedes ver lo fácil que es escribir y construir una validación de formulario reactiva en solo unas pocas líneas de código sin bibliotecas externas ni configuraciones. En versiones anteriores de Angular, incluso cuando escribí esta validación, el tipo se convertía en any. Esto es una lástima dada la capacidad de TypeScript para realizar este tipo de evaluación. Entonces, en versiones anteriores en Angular V13, puedes ver que el estado del formulario es any.

5. Validación de formularios en Angular con TypeScript

Short description:

Angular ha agregado una característica muy solicitada en la versión 14: la validación de formularios con TypeScript. Esta característica permite el uso de tipos fuertes y proporciona una gran visibilidad y verificación de tipos en los formularios, mejorando la depuración y la experiencia del desarrollador sin necesidad de bibliotecas externas o interrupciones en TypeScript.

Puedes ver cuántas personas han solicitado esto. Tenemos casi 1,000 pulgares arriba en este problema en el repositorio. Oh, no. Pero no temas. Acabamos de agregar una característica que es tanto algo que debe mejorarse como algo que está muy avanzado. Angular ya tiene la validación de formularios incorporada y ahora aprovechamos nuestro uso de TypeScript para formularios y validaciones con tipos fuertes también. Es la característica más solicitada de Angular, ahora implementada en la versión 14. Para verla en acción, ahora obtenemos una gran visibilidad y verificación de tipos en nuestros formularios, lo que hace que la depuración y la experiencia del desarrollador sean mucho más potentes, sin tener que agregar bibliotecas externas o interrumpir con TypeScript.

6. Funciones y Mejoras Avanzadas en Angular

Short description:

Angular ha introducido funciones avanzadas para estilos y recursos como componentes. Ahora puedes agregar estilos Sass en línea sin mucha configuración y integrar fácilmente las bibliotecas de Tailwind. Se ha mejorado la inclusión de recursos de rendimiento, permitiendo que las fuentes críticas se incluyan en línea y las hojas de estilo se carguen de forma asíncrona. ng-update y ng-schematics de Angular proporcionan información detallada y transformaciones de código sin problemas. Se han agregado diagnósticos de plantillas mejorados, mensajes de error más claros y nuevos códigos de error en tiempo de ejecución. Angular CLI ahora ofrece funcionalidad de autocompletado y simplifica la accesibilidad del título de la página.

Genial. Hablemos de algunas de las funciones avanzadas que Angular tiene para estilos y recursos como componentes. Una gran nueva función es que ahora puedes agregar estilos Sass en línea sin mucha configuración. Por ejemplo, simplemente agregando esto a un componente. Ofrece efectos sofisticados como este con solo unas pocas líneas de mixins Sass directamente en línea.

Ahora también tenemos una configuración incorporada de Tailwind. Puedes agregar un archivo de configuración de Tailwind que se registrará en la aplicación permitiendo una integración perfecta con las bibliotecas de Tailwind. Lo que nos lleva a otra función que es excelente para la inclusión de recursos de rendimiento. Digamos que queremos agregar una hoja de estilo a nuestra aplicación. Podemos hacerlo, pero notemos que esto bloquea la representació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 se realiza esta solicitud. Pero con esta simple adición a nuestro AngularJSON, ahora podemos ver las fuentes críticas incluidas en una etiqueta de estilo y nuestras hojas de estilo se han actualizado para cargarse de forma asíncrona.

Increíble. Ya mencioné que Angular ha estado a la vanguardia en cuanto a actualizaciones y migraciones, pero se ha trabajado en ng-update y ng-schematics para proporcionar aún más detalles e información útil. Parte de esto se debe a que Angular se ejecuta a gran escala, y para proyectos como Google Cloud, Angular tiene una de las funcionalidades de actualización más sofisticadas de la industria. Dentro de Google, hacemos lo que llamamos LSC, o cambios a gran escala, y usamos ng-update para transformar la base de código de manera transparente proporcionando registros sofisticados e informes de errores en el proceso. Esto significa que Angular puede mejorar continuamente con el tiempo con un menor riesgo para sus usuarios. Aprendimos sobre los problemas de compatibilidad de la manera difícil. Y los bases de código no están llenas de muchas formas diferentes de hacer las cosas y escribir componentes, lo cual suele ser el caso cuando se realizan actualizaciones en bases de código grandes, donde las personas no tienen tiempo para actualizar cada componente individualmente. Y todo sigue siendo compatible con versiones anteriores. ng-update se conecta al mismo AST que usamos para TypeScript. Y ahora hemos agregado diagnósticos de plantillas mejorados, que brindan una detección de errores excelente, especialmente para errores comunes que podrían ser difíciles de depurar para las personas que recién comienzan a trabajar con el framework. Aquí vemos un error de enlace que cariñosamente llamamos `banana en una caja`. Porque el plátano es delicioso y posiblemente la fruta más divertida. Otros mensajes de error mejorados incluyen errores de fusión nula y mensajes de error que se pueden eliminar mediante tree shaking. 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 puedas encontrar. Esto incluye, esto permite que el optimizador de compilación también elimine mensajes de error de los paquetes de producción. Angular CLI ahora ofrece funcionalidad de autocompletado, lo que mantiene a los desarrolladores en el flujo de sus tareas de manera más rápida. Y otra función realmente importante es la simplificación de la accesibilidad del título de la página.

7. Simplificación y Avances Futuros de Angular

Short description:

Angular v14 simplifica el desarrollo con componentes independientes, eliminando la necesidad de escribir y actualizar NgModules. El futuro trae aún más avances, ya que Angular aborda brechas más grandes en la experiencia del desarrollador y continúa aprendiendo e inspirándose en otros de la industria. El equipo central ha crecido, lo que permite resolver problemas pendientes y deuda técnica. Hay emocionantes mejoras en el horizonte, incluyendo una API más fácil, una renovación del sistema de reactividad, mejor rendimiento, mejor hidratación y SSR, accesibilidad mejorada y una renovación de la documentación. Angular se compromete a impulsar el ecosistema de frameworks web hacia adelante mientras aprende de otros.

Esto es importante en enfoques SPA, porque sin intención aquí, el título de cada página seguiría siendo el mismo, que es lo primero que un lector de pantalla lee al cambiar la raíz. Así que a partir de la v13.2, el enrutador de Angular ahora ofrece una nueva propiedad de título simplificada que ayuda a las personas que utilizan tecnología de asistencia a comprender el título y 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 mediante la extensión de la estrategia de título.

De acuerdo, acabamos de hablar de varias mejoras y avances. Esto nos lleva a nuestro próximo tema: la simplificación del desarrollo. Angular v14 es solo la punta del iceberg en lo que estamos abordando para hacer que la experiencia del desarrollador sea mucho más fluida. En él, ofrecemos 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 preguntarse qué significa eso. Aquí tienes un ejemplo de un componente de carga perezosa. Anteriormente, en NgModule, habríamos escrito nuestras importaciones y luego pasaríamos a escribir nuestras rutas y nuestra configuración de enrutamiento. Hoy en día, eliminamos gran parte de esa configuración. Nos enfocamos solo en nuestras rutas, escribiendo nuestro componente de carga perezosa de la siguiente manera. Hoy en día, tenemos una serie de este tipo de mejoras que se están implementando, simplificando la experiencia del desarrollador y eliminando una gran cantidad de trabajo adicional para el código que las personas necesitan escribir, aprender y construir.

Así que eso nos lleva al futuro. Después de la finalización de Ivy este año, ha habido una avalancha de estas pequeñas características que mejoran la calidad de vida. Estas mejoras son solo el comienzo. El próximo año, Angular abordará brechas más grandes en la experiencia del desarrollador. Entonces, lo que presenté hoy es solo la punta del iceberg y lo que se está desarrollando ahora son avances más grandes con este framework que estoy ansioso por ver. El próximo año y los años venideros serán realmente emocionantes. Además de eso, el equipo central ha crecido, lo que nos permite abordar algunos problemas pendientes y pagar deudas técnicas de las cuales este equipo humilde y trabajador 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 que incluye gestión de estado inspirada en Vue y Svelte. Renovación del sistema de reactividad inspirada en Solid y Svelte. Mejora del rendimiento de los componentes de imagen, carga de scripts en colaboración con el equipo de Aurora en Chrome abordando core web vitals. Mejor hidratación y SSR inspirados por muchas personas de la industria. Mejores trazas de pila, mejor accesibilidad, más primitivas headless ARIA reutilizables y la renovación de la documentación con nuevos tutoriales interactivos y ejemplos. Angular impulsa el ecosistema de frameworks web hacia adelante y también aprende e se inspira en quienes lo rodean. Y así es como todos evolucionamos. Nunca en aislamiento, sino aprendiendo unos de otros. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships