Momento Angular

Rate this content
Bookmark

En esta charla aprenderás todo sobre el renacimiento que Angular ha estado experimentando. Primero, analizaremos cómo el framework adoptó la reactividad detallada con señales para mejorar su rendimiento en tiempo de ejecución por órdenes de magnitud.


Luego nos sumergiremos en la aplicación de un enfoque similar de carga de código detallada para hacer que todo se cargue más rápido. Al final, aprenderás sobre las herramientas que puedes aprovechar para implementar todo esto en tus aplicaciones.

22 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Angular ha experimentado un crecimiento significativo y es el segundo framework más popular después de React. La última versión de Angular, llamada Angular Ivy, pasó por una importante refactorización en 2021. El modelo de reactividad de Angular se ha mejorado con la introducción de señales, que permiten una mejor integración con RxJS y admiten patrones de reactividad avanzados. Angular ha realizado optimizaciones para mejorar el rendimiento, incluyendo mejoras en la velocidad de carga y carga diferida. El equipo de Angular reconoce las innovaciones en otros frameworks y destaca el impacto de la introducción de TypeScript en el éxito del proyecto.

Available in English

1. Introducción a Angular

Short description:

Hola a todos. Mi nombre es Miko Getriev. Soy el líder de productos para Angular en Google. En esta charla, voy a compartir todo lo que ha estado sucediendo en Angular durante el último año y medio. La comunidad de Angular ha llamado a esto el impulso de Angular. Angular ha crecido casi siete veces en los últimos cinco años y es el segundo framework más popular después de React.

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

2. Adopción y Popularidad de Angular

Short description:

Pero incluso si Angular es ampliamente adoptado, ¿significa eso que está siendo desarrollado activamente? Al observar el repositorio de Angular en GitHub, el proyecto ha recibido más de 16,000 solicitudes de extracción en los últimos cinco años. El factor de `coolness` de cada tecnología en la comunidad de JavaScript disminuye a la mitad por cada mes que ha existido. ¿Es Angular `cool`? Honestamente, no tengo idea. Todavía considero que Rick Astley es `cool`. El framework pasó por una importante refactorización, que completamos en 2021. Se llamó Angular Ivy.

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

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

3. Modelo de Reactividad de Angular

Short description:

La última versión de Angular es la más grande hasta ahora, con muchas mejoras y avances. Angular refleja los cambios de datos en la vista recorriendo todo el árbol de componentes y actualizando la vista asociada. A pesar de esto, Angular está optimizado para el rendimiento y se desempeña bien en comparación con otros frameworks. Angular está trabajando actualmente en mejoras en el flujo de control y se esperan actualizaciones en los próximos meses. Ahora, discutamos los cambios en el modelo de reactividad que experimentó Angular.

Habrás oído hablar de esta refactorización. Se llamó Angular Ivy. De hecho, la última versión de Angular que compartimos el mes pasado es la más grande que hemos compartido. Y hay mucho más por venir. Compartimos muchos avances, incluido un nuevo modelo de Reactividad, que es 100% compatible con versiones anteriores y también interoperable con el modelo de Reactividad actual. Compartimos mejoras en nuestro lado del servicio y docenas de mejoras en la calidad de vida.

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

4. Señales de Angular y Rendimiento

Short description:

Idealmente, nos gustaría identificar la cantidad mínima de componentes afectados por los cambios de datos. Después de explorar diferentes enfoques, encontramos que las señales eran el modelo de reactividad más óptimo para Angular. Las señales funcionan dejando caer datos como una señal y notificando al framework cuando cambia el valor de la señal. Son conceptualmente simples, familiares e interoperables. Las señales también permiten una mejor integración con RxJS y admiten patrones de reactividad avanzados. En cuanto al rendimiento, el proyecto MoviesApp demuestra la velocidad de carga de las aplicaciones de Angular, logrando altas puntuaciones en escritorio. Sin embargo, las redes móviles, especialmente las lentas, presentan desafíos.

exacto mismo árbol de componentes que vimos. Idealmente, nos gustaría ser notificados cuando los data cambien y identificar la cantidad mínima de componentes que deben detectar cambios, solo los componentes que podrían haber sido afectados por la actualización de data. Exploramos el espacio de reactividad en profundidad y comparamos los diferentes enfoques en el contexto de Angular. Analizamos hooks, transformaciones en tiempo de compilación que permiten la reactividad en tiempo de ejecución, y también señales. Tuvimos muchas discusiones en el equipo para decidir cuál es el modelo de reactividad más óptimo para Angular y pensamos que son las señales. Quiero repetir nuevamente, no estoy diciendo que las señales sean el mejor patrón de reactividad, punto. Estoy diciendo que fue el mejor para Angular cuando se trata de hacer compensaciones entre el rendimiento y la experiencia del desarrollador. La forma en que funcionan las señales. Dejas caer tus data como una señal. Cuando lees el valor de una señal en las plantillas, le indicas a Angular en qué parte de las plantillas se está utilizando el data para que pueda habilitar una reactividad muy precisa. Cuando quieres establecer el valor de la señal, invocas el método set, que notifica al framework que la señal ha cambiado y le permite activar una actualización en las partes afectadas de la vista. No voy a profundizar demasiado en las señales de Angular aquí, pero hay un ejemplo muy rápido de Sarah Drossner, la directora de ingeniería de la web principal en Google. Puedes encontrar la aplicación en Angular-signals.netdivide.app. Además, para una introducción mucho más completa, puedes consultar Angular.io. Muy bien. Algunas cosas que me encantan de las señales son que son conceptualmente muy simples. Y es claro cuándo el framework podría estar interesado en actualizar parte de la vista cuando la señal ha cambiado. Además, son un concepto familiar. Incluso si no eres un desarrollador de Angular, es posible que ya hayas utilizado señales en frameworks como solid, react, y otros. Los desarrolladores que comprenden las señales tienen habilidades más transferibles. Y al mismo tiempo, también son interoperables. El mecanismo de detección de cambios de Angular seguirá funcionando tal como lo ha estado haciendo hasta ahora. Si te gustan las señales, podrás desarrollar incrementalmente nuevos componentes utilizando el nuevo modelo de reactividad y migrar tus componentes existentes. Las señales también permiten una mejor integración con RxJS sin acoplar más el framework con las API de RxJS. Esto reduce la curva de aprendizaje y también permite a los desarrolladores avanzados aprovechar patrones de reactividad más avanzados. Ahora, hablando de rendimiento, me gustaría discutir otro aspecto, la velocidad de carga de las aplicaciones. El proyecto MoviesApp de taste.js implementa una serie de aplicaciones en diferentes frameworks para ver un catálogo de una base de datos de películas. Colaboramos con el GDE de Angular y el CEO de Pushbase, Michael Klatke, en la implementación de Angular, donde MoviesApp utiliza la directiva de imagen altamente optimizada que el equipo de Angular desarrolla junto con Chrome y el equipo de Chrome Aurora. Y Michael también aprovechó su proyecto RxAngular, que permite el desarrollo de aplicaciones sin zona incluso antes de que estuvieran disponibles las señales. Cuando implementas esta aplicación en Firebase Hosting, obtienes fácilmente algo así como cien de cien en escritorio en Lighthouse. Sin embargo, se vuelve complicado cuando estás en una red móvil.

5. Optimización de Angular y Carga Lenta Declarativa

Short description:

Mejoramos el Largest Contentful Paint y el Cumulative Layout Shift en la versión 16 con un nuevo mecanismo de hidratación. Colaboramos con Cloudflare para el renderizado en el borde, optimizando el renderizado del lado del servidor en función de las restricciones de red. Estamos introduciendo la carga lenta declarativa en las plantillas, lo que permite cargar de forma lenta partes específicas con paquetes separados. Este concepto está inspirado en el lazy y suspense de React y tiene sus propias compensaciones.

especialmente si esta red es lenta. Realizamos algunas pruebas a través de webpagetest.org, y vimos que hay algunas oportunidades de mejora. En particular, el Largest Contentful Paint y el Cumulative Layout Shift. En la versión 16, implementamos un nuevo mecanismo de hidratación, que redujo el LCP, o Largest Contentful Paint, en aproximadamente 700 milisegundos y redujo el Cumulative Layout Shift a cero. También trabajamos con Cloudflare para habilitar la implementación de aplicaciones modernas de Angular en su infraestructura. Esto permite el renderizado en el borde, con sus workers y una ubicación inteligente. Cloudflare encontrará la mejor ubicación para su proceso de renderizado del lado del servidor, en función de diferentes restricciones de red, o diferentes llamadas que su servidor realiza a diferentes servicios o bases de datos. Por ejemplo, si su aplicación se comunica con una database, podría ser más óptimo realizar el renderizado más cerca del almacenamiento, para acelerar las consultas. No sé si eso es moderno o no, pero definitivamente es rápido.

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

6. Angular Branding and TypeScript

Short description:

Constantemente nos inspiramos en buenas ideas de toda la industria. Amamos Solid, Svelte, Preact y muchos otros. Respetamos profundamente las innovaciones que están ocurriendo en todos estos frameworks. Ahora me gustaría hablar un poco sobre las mejoras que hicimos en nuestro pipeline de construcción. Como sabrán, Angular tiene una CLI oficial. El logo original es de un framework llamado Angular.js. El equipo de Angular descontinuó Angular.js y creó un nuevo framework llamado Angular. Antes, dirían que no es posible. No hay forma de que puedan crear una marca tan confusa y engañarnos a todos. Bueno, se volvió un poco más confuso. Originalmente, Angular.js se llamaba Angular 1 y Angular se llamaba Angular 2. Es por eso que el framework original fue renombrado a Angular.js y ahora tenemos Angular. Aunque no hicimos el mejor trabajo con la marca, tomamos decisiones técnicas muy sólidas. Probablemente la decisión más impactante fue introducir TypeScript, lo que permitió que el proyecto despegara y actualmente se convierta en un estándar que la mayoría de los ingenieros de software utilizan para construir sus aplicaciones web.

la sintaxis puede resultarte familiar, y debería serlo. Constantemente nos inspiramos en buenas ideas de toda la industria. Amamos Solid, Svelte, Preact y muchos otros. Respetamos profundamente las innovaciones que están ocurriendo en todos estos frameworks, y definitivamente queremos reconocer eso. Ahora me gustaría hablar un poco sobre las mejoras que hicimos en nuestro pipeline de construcción. Como sabrán, Angular tiene una CLI oficial. Puedes pensar en ella de manera similar a SvelteKit para Svelte o Next.js para React, sin los puntos finales de renderizado del lado del servidor por ahora. Pero antes de profundizar un poco más en las mejoras, prometí compartir más información sobre el logo de Angular que compartí anteriormente. Y hablar sobre el impacto que tuvo en el producto de Angular. Muy bien. Apuesto a que todos los que ven este logo aquí pensarán que esto es Angular. Me gustaría estar allí en persona en Ámsterdam para pedirles que levanten la mano. De hecho, esto no es Angular. Este es el logo de Angular. El logo original es de un framework llamado Angular.js. Este fue otro framework del que Angular se inspiró. Fue desarrollado por el mismo equipo, de hecho, en Google. El equipo de Angular descontinuó Angular.js y creó un nuevo framework llamado Angular. Con un logo casi idéntico. Antes, dirías que no es posible que puedas crear una marca tan confusa y engañarnos a todos. Bueno, se volvió un poco más confuso. Originalmente, Angular.js se llamaba Angular 1 y Angular se llamaba Angular 2. Aunque Angular es una reescritura de Angular.js, sigue en cierta medida el versionado semántico pero no completamente. Fue una marca confusa. Ahora que seguimos oficialmente el versionado semántico y lanzamos nuevas versiones principales dos veces al año, puedes imaginar que la gente podría interpretar fácilmente cada nueva versión principal del framework como una reescritura, lo cual es definitivamente inexacto, pero entiendo el sentimiento. Es por eso que el framework, el original, fue renombrado a Angular.js y ahora tenemos Angular. Ya no se mantiene, así que espero que la confusión disminuya con el tiempo, pero definitivamente no hicimos el mejor trabajo con la marca. Aunque no hicimos el mejor trabajo con la marca, tomamos decisiones técnicas muy sólidas. Probablemente la decisión más impactante fue introducir TypeScript, lo que permitió que el proyecto despegara y actualmente se convierte prácticamente en un estándar que la mayoría de los ingenieros de software utilizan para construir sus aplicaciones web.

7. Angular Build Pipeline and CLI

Short description:

El comando ngUpdate de la CLI de Angular transforma el código con API obsoletas. El 70% de las aplicaciones de Angular utilizan las últimas versiones, manteniendo Angular siempre actualizado y evolucionando las aplicaciones con el framework y la plataforma web.

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

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