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

Rate this content
Bookmark

¿Qué haces cuando eres un framework que ha sobrevivido e innovado en dos Olas de Framework de JavaScript, y ves la nueva ola creciendo en la distancia? Innovas. En esta charla, exploramos el panorama del Framework 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.

Sarah Drasner
Sarah Drasner
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 se introducen por un único 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 moldeado e influenciado múltiples olas de JavaScript, y Angular v14 simplifica el desarrollo con componentes independientes.

Available in English

1. La Compleja Historia de la Innovación en Computadoras

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. Varias invenciones e individuos contribuyeron a la computadora moderna, incluyendo ENIAC, Colossus, el Mark I de Aiken, 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 e impulsado por varios espectros de innovación.

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.

2. La Formación de las Olas de Frameworks

Short description:

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

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.

3. Formación de las Olas de Frameworks

Short description:

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

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.

4. Avances y Mejoras en 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 desde cero del renderizador de Angular, ha traído numerosas mejoras, incluyendo una mejor organización del código base, mejor integración con los IDEs, mejoras de velocidad y controles más estrictos. Angular ahora se está enfocando en características avanzadas y en simplificar el desarrollo, con un enfoque específico en formularios de tipo estricto.

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.

5. Validación de Formularios en Angular con TypeScript

Short description:

Angular ha añadido una característica muy solicitada en la V14 - la validación de formularios con TypeScript. Esta característica permite una tipificación fuerte y proporciona grandes insights y comprobación de tipos en los formularios, mejorando la experiencia de depuración y del desarrollador sin la necesidad de bibliotecas externas o interrupción de TypeScript.

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.

6. Funciones avanzadas y mejoras en Angular

Short description:

Angular ha introducido funciones avanzadas para estilos y recursos como componentes. Ahora puedes añadir estilos Sass en línea sin mucha configuración, e integrar fácilmente las bibliotecas de Tailwind. Se ha mejorado el rendimiento de la incrustación de recursos, permitiendo que las fuentes críticas se incrusten y que las hojas de estilo se carguen de forma asíncrona. Las actualizaciones de Angular y los esquemas ng proporcionan información detallada y transformaciones de código sin problemas. Se han añadido diagnósticos de plantillas mejorados, mejores mensajes de error y nuevos códigos de error en tiempo de ejecución. La interfaz de línea de comandos de Angular ahora ofrece funcionalidad de autocompletado y simplifica la accesibilidad del título de la página.

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.

7. Simplificación de Angular y avances futuros

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 en la industria. El equipo central ha crecido, permitiendo la resolución de problemas pendientes y deuda técnica. Se avecinan mejoras emocionantes, incluyendo una API más fácil, renovación del sistema de reactividad, mejor rendimiento, mejor hidratación y SSR, mejor accesibilidad y una renovación de la documentación. Angular se compromete a impulsar el ecosistema de marcos de trabajo web hacia adelante mientras aprende de otros.

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.

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

Building Better Websites with Remix
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!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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.
Full Stack Documentation
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.
From GraphQL Zero to GraphQL Hero with RedwoodJS
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!
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
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.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
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

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
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
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
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.
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
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
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
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