Fresh: un nuevo marco de trabajo web de pila completa para Deno

Rate this content
Bookmark
SlidesGithubProject website

Fresh es un marco de trabajo web basado en Deno y en estándares web construido para funcionar en el borde

24 min
17 Apr, 2023

Video Summary and Transcription

La charla de hoy presenta Fresh, un marco de trabajo web de pila completa para Deno, y cubre sus características, como archivos estáticos, rutas y obtención de datos. También se discuten los middleware, las páginas de error y las opciones de estilo. La charla explica la arquitectura de las Islas utilizada por Fresh para permitir la interactividad del cliente. La demostración muestra el uso de rutas híbridas y componentes de islas, y se proporcionan recursos para Fresh, Deno, Preact, TypeScript y estándares web.

Available in English

1. Introducción

Short description:

Hoy vamos a hablar de FRESH, un marco de trabajo web de pila completa para Deno. Trabajo en Netlify. Soy de Montreal, Quebec, Canadá. Si quieres encontrarme en línea, estoy en NikkieTOnline prácticamente en todas partes. Si quieres saber más sobre mí, visita IAmDeveloper.com. También hago streaming en Twitch y tengo un canal de YouTube.

¡Hola a todos! Hoy vamos a hablar de FRESH, un marco de trabajo web de pila completa para Deno. Antes de comenzar, un poco sobre mí. Como mencioné, trabajo en Netlify. Soy de Montreal, Quebec, Canadá. Si estás buscándome en línea, me encuentro en NikkieTOnline prácticamente en todas partes. Si quieres saber un poco más sobre mí, puedes visitar mi sitio web en IAmDeveloper.com. También hago streaming en Twitch, así que si eso es algo que te interesa, puedes visitar IAmDeveloper.live. También tengo un canal de YouTube que puedes visitar en YouTube.IAmDeveloper.com. También soy fanático de las arañas.

2. Introducción a Fresh y Deno

Short description:

Hoy vamos a cubrir qué es Fresh, discutir los estándares web y profundizar en las características de Fresh. Deno es un tiempo de ejecución para JavaScript, TypeScript y WebAssembly (Wasm) que utiliza V8. Tiene un linter incorporado, formateador de código, ejecutor de pruebas e interoperabilidad con Node.js y npm. Deno sigue los estándares web y es parte de WinterCG, un grupo comunitario para la interoperabilidad de API. Para instalar Fresh, usa el comando 'deno run -A -R https://fresh.deno.dev nombre-del-proyecto' y elige opciones como Tailwind e integración con VS Code. Inicia Fresh con 'deno task start' en la carpeta raíz del proyecto.

¡Muy bien, ¿qué vamos a cubrir hoy? Vamos a repasar qué es Fresh. Vamos a discutir los estándares web, y luego profundizaremos en las características de Fresh. Después de eso, habrá una breve demostración y luego podremos pasar a preguntas y comentarios.

¡Muy bien, empecemos! Entonces, ¿qué es Fresh? Bueno, espera. Primero, necesitamos hablar sobre Deno. Entonces, ¿qué es Deno? Deno es un tiempo de ejecución para JavaScript, TypeScript y WebAssembly, o Wasm, que utiliza V8. Para la web, se ejecuta en el Edge. También puedes usar Deno para crear interfaces de línea de comandos, es decir, CLI. Tiene un linter incorporado, un formateador de código incorporado, un ejecutor de pruebas incorporado, interoperabilidad con node.js a través de especificadores de nodos y interoperabilidad con npm a través de especificadores de npm y CDNs.

¡Muy bien, hablemos de los estándares web! Deno utiliza los estándares web. Por ejemplo, mapas de importación, fetch, solicitud y respuesta. Como dice el pequeño dibujo allí, solo búscalo en MDN. Excelente documentación, pero eso es prácticamente lo que necesitarás consultar la mayor parte del tiempo si estás trabajando con Fresh. Como parte de los estándares web, Deno es parte de WinterCG. Grupo Comunitario de Tiempos de Ejecución Interoperables en la Web. Es un espacio para colaborar en la interoperabilidad de API para tiempos de ejecución de JavaScript. Siéntete libre de leer más sobre WinterCG en wintercg.org.

¡Muy bien, ¿dónde nos quedamos? Suponiendo que tienes Deno instalado, la instalación de Fresh es bastante rápida. Simplemente ejecuta el comando que ves en la presentación de diapositivas aquí. Es 'deno run -A -R' y luego https://fresh.deno.dev y el nombre de tu proyecto. Eso fue mucho que decir. Muy bien. La instalación es bastante rápida y tienes algunas opciones. Puedes elegir Tailwind para los estilos, optar por la integración con VS Code a través de la extensión de Deno para VS Code, y eso es prácticamente todo. Hablaremos más sobre la historia de estilos un poco más adelante en la charla. Para iniciar Fresh, ve a la carpeta raíz del proyecto en una terminal y ejecuta 'deno task start'. No entraremos en detalles en esta charla, pero Deno tiene un ejecutor de tareas incorporado que puedes configurar a través de un archivo deno.json.

3. Introducción a Fresh

Short description:

Fresh es un marco de trabajo web de pila completa que se ejecuta en Deno. Proporciona soporte para TypeScript de forma nativa y utiliza la arquitectura de Islas para la interactividad del cliente. Preact se utiliza en el lado del servidor y del cliente, ofreciendo soporte para JSX. Explicaremos la arquitectura de Islas con más detalle más adelante.

Muy bien. Entonces, profundicemos en qué es Fresh. Entonces, ¿qué es Fresh? Es un marco de trabajo web de pila completa que se ejecuta en Deno. Es un marco de trabajo renderizado en el lado del servidor. Tiene renderizado justo a tiempo en el borde. Proporciona soporte para TypeScript de forma nativa, y no hay nada que configurar para comenzar a usarlo. No hay un paso de compilación. No hay JavaScript incluido por defecto. Utiliza la arquitectura de Islas para la interactividad del cliente. Utiliza Preact en el lado del servidor y del cliente. Y hay soporte para JSX gracias a Preact y TypeScript. Si no estás familiarizado con el increíble proyecto Preact, es una alternativa rápida y más pequeña a React con la misma API moderna. Por ahora, solo mencionaremos esto, pero profundizaremos en qué es la arquitectura de Islas un poco más adelante en la charla.

4. Características de Fresh

Short description:

Las características de Fresh incluyen archivos estáticos, rutas y enrutamiento, y obtención de datos. Los activos estáticos en la carpeta Static se pueden almacenar en caché utilizando el ayudante de activos incorporado. Fresh admite tres tipos de rutas: de controlador, de componente y híbridas. Se admiten patrones de enrutamiento basados en archivos, pero Fresh solo admite el renderizado en el lado del servidor. Para la obtención de datos, las rutas de controlador requieren exportar una función que devuelve una respuesta, mientras que las rutas híbridas utilizan el objeto de controlador para definir funciones para acciones. Las props en Fresh se acceden a través de la propiedad props.data.

De acuerdo, repasemos algunas de las características de Fresh. Tenemos archivos estáticos de los que hablaremos, rutas y enrutamiento, obtención de datos, middleware, páginas de error, estilos y luego llegaremos a las Islas.

Así que primero tenemos archivos estáticos. Todos los activos estáticos se encuentran en la carpeta Static. Los activos estáticos, aparte de las etiquetas de imagen y fuente, no tienen encabezados de caché establecidos en ellos. Puede establecer los encabezados de caché manualmente o puede utilizar el ayudante de activos incorporado para almacenar en caché automáticamente un activo durante un año. Aquí tienes un ejemplo del ayudante de activos en acción. Tengo esto en mi hoja de estilo. Estoy usando el ayudante de activos y lo que sucede es que genera una URL única que está compuesta por la ruta del archivo de activo, seguida de una cadena de consulta con una clave, guion bajo FRSH, guion bajo C con un valor que es el ID de compilación de la implementación. Y como mencioné, también se establecen los encabezados de control de caché en la respuesta. Así que lo tenemos allí durante un año. Muy bien, profundicemos en las rutas y el enrutamiento. Hay tres tipos de rutas. Está la ruta de controlador, que generalmente se utiliza para las API, la ruta de componente, que se utiliza para las páginas, y luego la ruta híbrida. Y para las rutas híbridas, se utilizan para las páginas que requieren rutas de controlador, por ejemplo, una página de inicio de sesión o una página de búsqueda. Al igual que en otros marcos de trabajo, las rutas también pueden ser dinámicas. Puedes ver en la tabla aquí que tomé de la documentación de Fresh que se admiten muchos tipos de patrones de enrutamiento basados en archivos. Sin embargo, Fresh solo admite el renderizado en el lado del servidor. Por lo tanto, no hay un concepto como get static paths en Next.js o Astro, ya que las páginas nunca se generan estáticamente. Muy bien, veamos la historia de obtención de datos. Para la obtención de datos, tenemos rutas de controlador, que acabo de mencionar, y también podemos usar rutas híbridas para manejar la obtención de datos. Para una ruta de controlador, todo lo que se requiere es exportar una función que reciba dos argumentos, una solicitud y un contexto, y devuelva una respuesta. Entonces, en este caso aquí, tenemos un controlador que utiliza la API de chistes que se incluye con el sitio de demostración de Fresh, y podemos ver aquí que simplemente genera una lista de chistes aleatorios a partir de una matriz, y luego lo devuelve como una respuesta. Para las rutas híbridas, definimos funciones para acciones en una variable exportada llamada controlador. Nombramos las funciones asíncronas en el objeto de controlador según los verbos HTTP. Por ejemplo, get. Como la ruta de controlador en el ejemplo anterior devuelve una respuesta, normalmente en una ruta híbrida, querrás devolver el resultado del método de renderizado del contexto. Piensa en el renderizado del contexto como pasar props renderizadas en el lado del servidor a la página que se está renderizando. Cuando digo props, me refiero a las props de preact o las props de React si eres nuevo en preact. Al observar el ejemplo en la diapositiva, una cosa a tener en cuenta sobre las props y Fresh es que no es props.movies, las props de context.render siempre están en la propiedad props.data.

5. Middleware and Headers

Short description:

El array de props de películas es en realidad props.data, no props.data.movies. Fresh admite middleware y se admiten múltiples middlewares. Se proporciona un ejemplo donde se utilizan dos middlewares para una ruta de película dinámica. El middleware menos específico se ejecuta primero, agregando encabezados a la respuesta. El resultado muestra el encabezado de control de caché y los encabezados proporcionados por los middlewares.

Entonces, por ejemplo, el array de props de películas es en realidad props.data, no props.data.movies. Eso es muchos puntos en esa charla.

Bien, pasemos al middleware. Nuevamente, como otros marcos de trabajo, Fresh admite middleware. Todos nuestros archivos se llaman middleware.ts con un guion bajo y deben residir en la carpeta de rutas. Se admiten múltiples middlewares. Aunque Deno te anima a usar TypeScript, podrías escribir el middleware en un archivo JavaScript.

Echemos un vistazo a un ejemplo. Digamos que navego a /movie/Top Gun. Dado que estamos accediendo a una ruta de película dinámica, eso significa que estamos usando dos middlewares. Uno en la raíz de la carpeta de rutas y otro en la subcarpeta de películas. En el caso de múltiples middlewares, se ejecuta primero el menos específico. En nuestro ejemplo, eso significa que se ejecuta primero el middleware de la raíz. Agrega un encabezado X-conference con el valor nodeCongress2023. Luego se ejecuta el segundo middleware en la subcarpeta de películas. Agrega un encabezado X-movie-page junto con un encabezado de caché que almacena en caché la página durante 60 segundos. Si navegamos a /movies, podemos ver los dos middlewares dándose un apretón de manos. Podemos ver el resultado en la respuesta, que obtenemos el encabezado de control de caché y obtenemos los otros dos encabezados que proporcionan los middlewares.

6. Error Pages and Unknown Page Props

Short description:

Vamos a hablar sobre páginas de error y cómo puedes definir páginas de error personalizadas en Fresh. El ejemplo dado es una página personalizada de error 404 o página no encontrada. Estas páginas son rutas de componentes con props especiales pasados. Los props de página desconocida te brindan acceso a información como la URL de una página que no se encontró. Para rutas dinámicas, puedes usar context.render not found para renderizar la página 404 si la página no existe. Si estás en una página asociada con una ruta dinámica y la página que se está cargando no existe, context.render not found pasará los props de página desconocida a la página 404.

Entonces, el X-conference y el X-movie-page. Bien, pasemos a hablar sobre páginas de error. Al igual que otros marcos de trabajo, puedes definir páginas de error personalizadas. Por ejemplo, la diapositiva actual muestra una página personalizada de error 404 o página no encontrada. Estas son rutas de componentes pero tienen props especiales pasados. En el caso de la página 404, tienes acceso a los props de página desconocida cuando se está renderizando la página. Los props de página desconocida te brindan acceso a cosas como la URL de una página que no se encontró. Para una ruta dinámica, llamamos a context.render not found para renderizar la página 404 si la página no existe. Y volviendo a la obtención de datos, cuando estábamos hablando de la obtención de datos, mencioné que normalmente necesitamos devolver el resultado de context.render para rutas híbridas. Eso sigue siendo válido, pero como mencioné, si estás en una página asociada con una ruta dinámica y la página que se está cargando no existe, en su lugar devolvemos context.render not found, y context.render not found luego pasará los props de página desconocida de los que estábamos hablando hace un momento a la página 404.

7. Styling Options and Future Development

Short description:

Fresh te brinda la opción de habilitar TWIN, una implementación renderizada en el lado del servidor de Tailwind. El CSS moderno es una opción convincente, con selectores anidados, variables CSS y otras características. Agregar un paso de compilación para herramientas de CSS va en contra de la promesa de no tener pasos de compilación en Fresh. Es posible que veamos más implementaciones renderizadas en el lado del servidor de Sass, Post CSS, etc. El CSS de alcance, como en Vue y Svelte, sería una gran adición.

Muy bien. Pasemos a hablar sobre estilos. Cuando hablé por primera vez sobre Fresh, mencioné que no había un paso de compilación. ¿Cómo afecta esto a la estilización de nuestras aplicaciones? Fresh te brinda la opción de habilitar TWIN, una implementación renderizada en el lado del servidor de Tailwind. Esto es genial si usas Tailwind, pero si los proyectos en los que estás trabajando no usan Tailwind, ¿cuáles son tus opciones? En primer lugar, diría que el CSS moderno es bastante impresionante en estos días, por lo que podrías simplemente usar una buena hoja de estilos. El hecho de que los selectores anidados estén llegando a los navegadores y que solo tengamos variables CSS y otras características como las que tiene CSS, hace que esta sea una opción convincente. También podrías agregar un paso de compilación que incluya los artefactos de compilación de tus herramientas de CSS. Esto se puede lograr con una acción de GitHub u otra forma de automatización. Aunque funcionaría, no se siente correcto incluir los artefactos de compilación en el código base, y también va en contra de una de las promesas de Fresh, que es no tener pasos de compilación. Creo que lo que veremos aquí es innovación por parte de los usuarios, donde es posible que veamos más implementaciones renderizadas en el lado del servidor de cosas como Sass, Post CSS, etc., al igual que el proyecto TWIN. Otra cosa que me encantaría ver en Fresh es el CSS de alcance. Lo tenemos en otros marcos de trabajo como Vue y Svelte. Creo que eso sería una gran adición.

8. Introducción a la Arquitectura de Islas

Short description:

Las Islas permiten bolsas de interactividad en tu sitio o aplicación. Fresh utiliza la arquitectura de islas, acuñada por Jason Miller, el creador de Preact. Solo se carga el JavaScript de las islas cuando se carga una página con islas. Fresh tiene dos carpetas de componentes: componentes e islas. Los componentes en la carpeta de componentes se renderizan solo en el lado del servidor, mientras que los componentes en la carpeta de islas se renderizan en el lado del servidor y reviven la interactividad del lado del cliente.

Muy bien, hablemos de las islas. ¿Qué es una isla de todos modos? Lo mencioné brevemente al describir la arquitectura de Fresh, pero ahora profundizaremos un poco más en la arquitectura. En resumen, permite bolsas de interactividad en tu sitio o aplicación. Dejaré este fragmento de una publicación de blog de Jason Miller por un minuto, pero Jason Miller, uno de los colaboradores junto con Katie Seiler-Miller, acuñó el término arquitectura de islas.

En realidad, es apropiado que Jason sea uno de los colaboradores que acuñó este término, ya que también es el creador de Preact, que utiliza Fresh. En la arquitectura de islas, el objetivo es enviar principalmente HTML estático y luego marcar ciertas regiones del modelo de objetos del documento, es decir, el DOM, como disponibles para hidratar, o usar el término de Fresh, revivir. Cuando se carga una página con islas, solo se carga el JavaScript de esas islas. Mencioné que Fresh no sirve ningún JavaScript al cliente de forma predeterminada. Entonces, ¿cómo habilitamos la interactividad del lado del cliente de la que estamos hablando en la arquitectura de islas?

Fresh tiene dos carpetas de componentes. Hay una carpeta de componentes y una carpeta de islas. Los componentes en la carpeta de componentes siempre se renderizarán solo en el lado del servidor, incluso si les agregas interactividad del lado del cliente. Y los componentes en la carpeta de islas se renderizarán en el lado del servidor y, una vez que se cargue la página, se revivirá la interactividad del lado del cliente. Entonces, veamos un componente interactivo clásico, un contador. Tiene un par de botones, si haces clic en más uno, incrementa el contador, y si haces clic en menos uno, decrementa el contador. Y en este caso aquí, tenemos un par.

9. Reviviendo Islas y Demo

Short description:

Los componentes que son islas se renderizan en el lado del servidor por Fresh. El marcado renderizado para las islas es visible en la fuente de la página de vista. Fresh agrega un script con el ID __FRSH_state, que contiene una matriz de props para cada isla. La función revive en Fresh toma la lista de componentes y el estado inicial para mapear correctamente el estado inicial. Los componentes de islas en Fresh se renderizan con comentarios HTML, denotados por FRSH seguido del nombre del componente y el índice de matriz del estado del componente de la isla. Esto es un detalle de implementación gestionado por Fresh. El sitio de demostración muestra componentes de contador y una lista de películas con middlewares en ejecución.

Entonces, ¿cómo revivimos una isla? Básicamente, lo que sucede es que los componentes que son islas se renderizan en el lado del servidor por Fresh y si revisas el código fuente de la página que se cargó, en realidad verás el marcado renderizado para esa isla o islas en particular. Junto con el marcado renderizado para esas islas, Fresh también agrega un script de tipo aplicación JSON con el ID __FRSH_state. En ese script hay una matriz. En esa matriz, el primer elemento es otra matriz que contiene todas las props para cada isla que está en la página. El segundo elemento en la matriz está actualmente vacío, pero eso es para los plugins. Eso es algo de lo que no vamos a hablar hoy, pero si estás interesado en los plugins, puedes echar un vistazo a la documentación de Fresh.

Como puedes ver aquí, tengo JSX para mi contador y comienza en el lado del servidor donde paso una prop con el valor tres para la prop de inicio y cuando se renderiza en la página, veremos que las props iniciales para ese componente en particular se cargan en la matriz que mencioné. ¿Entonces, cómo se revive? Tenemos ese estado de Fresh que mencioné y una de las cosas que hace Fresh es, junto con el JavaScript relacionado con esa isla en particular, tiene una función revive y esa función revive toma la lista de componentes, por ejemplo, aquí el contador, y también pasa el primer elemento del estado que son todas las props para todas las islas, como mencioné. En el ejemplo anterior solo había una isla, pero si hubiera más de una isla, ¿cómo mapea Fresh correctamente el estado inicial? Si tenemos un par aquí, veremos que simplemente se van agregando a la matriz, pero ¿cómo sabe Fresh que el contador con la prop de inicio de 3 y el contador con la prop de inicio de 5 se mapean correctamente en la matriz allí.

Hablamos de cómo denotar regiones interactivas en el DOM cuando hablamos de la arquitectura de islas. Los componentes de islas en Fresh se renderizan en el lado del servidor, como mencioné, pero también se renderizan con comentarios HTML que los rodean. El comentario tiene el prefijo FRSH seguido del nombre del componente, dos puntos y luego el índice de matriz donde vive el estado del componente de la isla en el estado inicial de todas las islas que se cargaron inicialmente. No importa cuántos componentes de isla diferentes haya o cuántas instancias de cada uno, el índice de matriz se incrementará en cada comentario HTML en función del orden de las islas en el DOM. Una cosa a tener en cuenta es que esto es solo un detalle de implementación, nunca necesitarás gestionarlo tú mismo, simplemente me parece útil entender la tecnología subyacente.

De acuerdo, vamos a pasar a una breve demostración. Así que voy a moverme aquí. Lo que tenemos aquí es... He creado un pequeño sitio de demostración aquí. Tiene algunas páginas, como la página de inicio donde tenemos algunas islas, tres componentes de contador aquí. Cada uno administra su propio estado. Y también tengo una lista de películas. Eso va a la ruta de películas. Y podemos cargar una película, por ejemplo, como Top Gun. Y si abro el panel de red aquí, vamos a actualizar eso de nuevo, y esto tiene dos middlewares en ejecución. Y como dije, estaba el primer middleware en la carpeta raíz de las rutas y podemos ver que tiene el encabezado x-conference que proporciona ese middleware. Y luego el middleware de la subcarpeta agrega el encabezado x-movie-page, así como el control de caché de 60 segundos. De acuerdo, podemos cerrar eso. Y aquí tienes un ejemplo de una página híbrida. Solo voy a agregar una película. Digamos, El Señor de los Anillos. Y le daré una calificación de cinco y lo enviaré.

10. Demo Wrap-up and Resources

Short description:

En esta demostración, utilizamos una ruta híbrida con controladores para publicar nuevas películas en la página. La demostración utilizó una base de datos en memoria en lugar de una base de datos real. El código fuente de la página muestra cómo Fresh se inicia, carga el JavaScript y los estilos del contador, y almacena en caché los activos durante un año. El código renderizado incluye los componentes, el estado de Fresh y el método revive. El sitio de demostración está implementado en imdeveloper.com/fresh-demo y el código fuente está disponible en GitHub. Se pueden encontrar recursos adicionales sobre Fresh, Deno, Preact, TypeScript, estándares web y la compatibilidad de Dino con Node en imdeveloper.com/fresh.

Para estar en la misma página, la ruta híbrida tiene controladores en el objeto de controlador. En este caso particular, estoy pasando un post, lo que nos permite publicar en la página y agregar la nueva película aquí. Para fines de esta demostración, no utilicé una base de datos real. Solo estoy utilizando una variable, por lo que es una base de datos en memoria. Hablar sobre datos está totalmente fuera del alcance de la charla, pero debes saber que hay mucha gente trabajando en el problema de los datos en el borde.

Bien, vamos a concluir la demostración aquí. Esto es lo que se ve en el código fuente de la página de vista de esa primera página con las tres frutas cítricas de diferentes colores. He eliminado muchas cosas para poder desplazarme por él. Lo primero es que Fresh se está iniciando aquí, eso es lo que es ese script. Puedes ver que la carpeta aquí se basa en el ID de compilación. Luego podemos ver que solo carga mi JavaScript del contador, que es para la isla. Luego tenemos mi estilo, como mencioné, y está utilizando el ayudante de activos y le está dando un ID único, y está en caché durante un año, como mencioné.

Solo quería mostrar brevemente aquí, este es literalmente el código que se renderizó, excepto que eliminé algunos SVG por brevedad, pero podemos ver aquí, por ejemplo, que tengo el primer componente aquí, está indicado con los comentarios HTML, y luego hay un segundo y un tercero. Luego tenemos el estado de Fresh aquí, y podemos ver allí los tres. Y luego tenemos ese método revive aquí abajo, y podemos ver que se está ejecutando aquí, y tenemos nuestro componente de contador, y luego el estado que estamos pasando, que son las props para todo eso. Y eso es prácticamente la demostración.

Bien, volvamos a la presentación de diapositivas. Sí, si estás interesado en la demostración, está implementada en imdeveloper.com/fresh-demo. También puedes ver el código fuente en github.com/nickyt-online/fresh-talk-demo. Y terminaremos con algunos recursos que creo que todos encontrarán útiles. Hay muchas cosas sobre Fresh, Deno, Preact, TypeScript, estándares web y también algunas cosas nuevas con Dino, como la compatibilidad con Node, y también un enlace a la CG de invierno. Para aquellos interesados, la presentación de diapositivas está disponible en imdeveloper.com/fresh. Eso es prácticamente todo. No pudimos cubrir todo en unos 20 minutos, pero espero que esto les haya dado a todos una introducción suficiente para emocionarse con Fresh. Gracias, gente.

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 Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
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