¡Construye Tu Framework Web Desde Cero!

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Al igual que Hono, puedes crear fácilmente un framework web de backend utilizando APIs de Estándares Web como Request y Response. Estos se ejecutan en Cloudflare Workers, Deno, Bun, etc. En esta charla, presentaré cómo hacerlo, como implementar el enrutamiento usando URLPatterns, una sintaxis similar a Hono/Express, mecanismos de middleware y renderizado del lado del servidor con React. ¡Esto es reinventar la rueda, pero hacer tu propio framework es divertido!

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Yusuke Wada
Yusuke Wada
18 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Emocionado de hablar en JS Nation sobre la construcción de frameworks web desde cero, cubriendo los conceptos básicos del framework y proporcionando un ejemplo sin un framework. Los elementos esenciales del framework incluyen el manejo de vistas del navegador, enrutamiento, parámetros, tipos de respuesta, errores y seguridad. Discutiendo los componentes que un framework necesita, como enrutamiento, parámetros, tipos de respuesta, manejo de errores, autenticación y seguridad. Explorando el manejo de solicitudes en un framework con personalización de encabezados, estado y usando métodos estáticos como response.json. Perspectivas detalladas sobre enrutamiento, personalización de respuestas e implementación eficiente para múltiples respuestas basadas en rutas y métodos. Implementación de la sintaxis de enrutamiento, recuperación de datos de solicitudes, manejo de contexto, integración de middleware y funciones auxiliares para la manipulación de respuestas en un framework.

1. Building Web Framework Intro

Short description:

Emocionado de hablar en JS Nation. Construye tu propio marco web desde cero. Agenda: Creación de marcos web, conceptos básicos de marcos, ejemplo sin marco.

Hola. Estoy muy emocionado de hablar hoy en JS Nation. El título de mi charla es, Construye tu propio marco web desde cero. Mi nombre es Yusuke. Me encanta construir marcos web. Trabajo en Cloudflare como defensor de desarrolladores. Soy el creador de Hono.

Esta es la agenda de hoy. Crear marcos web es divertido. Vamos a crear un marco web. Antes de hablar sobre qué es un marco web, aquí hay algunas cosas que deberías saber. Este marco está construido con JavaScript y TypeScript. Funciona en Cloudflow.

Veamos un ejemplo sin un marco. Esta es la aplicación web más pequeña que puedes escribir. Simplemente devuelves una respuesta desde la función fetch. Puedes aprender el mismo código en diferentes entornos de ejecución. Por ejemplo, Cloudflare tiene Deno o BAN. Simplemente ejecuta uno de estos comandos.

2. Framework Essentials

Short description:

Vista del navegador usando Angular. Complejidad de la aplicación: necesidad de enrutamiento, parámetros, tipos de respuesta. El framework maneja acciones basadas en URL, extrae valores, gestiona respuestas, errores, seguridad.

Esto es lo que ves en tu navegador cuando estás usando Angular. Simplemente ve a localhost 8787 y muestra hello. Funciona igual en Deno o BAN, también.

Pero en la aplicación, las cosas se vuelven complejas muy rápidamente. Por ejemplo, necesitas enrutamiento. Como obtener barra o publicar barra publicar. Tienes que manejar todo eso tú mismo.

Y esto es lo que sucede. Si escribes todo a mano, tu código se vuelve largo y difícil de leer. Demasiadas condiciones. Entonces, escribir todo manualmente se vuelve demasiado perverso.

3. Framework Components

Short description:

Lo que necesita un framework: Enrutamiento, parámetros, tipos de respuesta, manejo de blocs de notas, errores, derechos futuros, autenticación, cross-origin, seguridad. Usar un framework como Hono para un código más corto, legible y mantenible. Construir tu propio framework puede ser divertido. Crear una estructura básica para un framework con un método fetch para devolver respuestas.

En su lugar, pensemos, ¿qué necesitamos en un framework? Enrutamiento, parámetros, diferentes tipos de respuesta, etcétera. Permíteme explicarlos uno por uno. Primero, el framework necesita decidir qué hacer basado en la ruta de la URL y el método. Por ejemplo, get slash, post slash post. El framework necesita extraer los valores de la URL. Como parámetros en la ruta. El framework podría devolver texto, JSON, HTML, o incluso hacer una reescritura dependiendo de la situación. El framework también necesita manejar blocs de notas y errores. Y en aplicaciones del mundo real, los derechos futuros, la autenticación, cross-origin, y la seguridad son esenciales. Este es el mismo ejemplo de antes. Pero escrito en Hono. Es mucho más corto y legible y fácil de mantener. Este es el beneficio de usar un framework. Así que, este es el framework. Es corto, fácil y muy legible. Con él, puedes construir una aplicación realmente rápido e incluso escala bien cuando tu aplicación crece. Puedes usar Hono, pero construyamos uno tú mismo. De esa manera, puedes ver cómo funciona por dentro y puedes ver que construir tu propio framework es realmente divertido.

A continuación, hablemos sobre devolver respuestas. Aquí está nuestro primer paso. Hagamos una función llamada create app. Es solo un objeto con el método fetch. Y este método devuelve una respuesta. Esta es la estructura más simple para un framework. Llamamos a create app. Y devuelve un objeto. Este objeto tiene este método fetch. Así que, cuando llega la solicitud, irá a fetch y obtenemos la respuesta.

4. Request Handling in Framework

Short description:

Personalización de headers, status. Uso de métodos estáticos como response.json, response.redirect. Construcción básica de framework: solicitud a respuesta a través de una función manejadora. Definición de manejadores para solicitudes. Manejo de casos sin manejadores definidos o errores.

Y puedes personalizarlo. Establecer headers, establecer status. Y también puedes usar métodos estáticos como response.json o response.redirect.

Cuando construimos un framework, lo más básico es tomar una request y devolver response. Para hacer esto, necesitamos una función. La llamamos handler. El usuario puede definir un handler usando este setter. El handler es la palabra internamente y el código fetch.

Si no hay handler, el framework no devuelve uno. Así es como funciona en el código. Este es el handler definido. Y este es el setter del handler. Almacena la función handler dentro.

5. Routing and Response Customization

Short description:

Manejo de solicitudes con handlers definidos o predeterminados. Establecimiento de status, tipo de contenido y personalización de respuestas. Introducción al enrutamiento y múltiples respuestas de ruta basadas en rutas y métodos. Utilización de patrones de URL con comodines y parámetros de ruta para un enrutamiento flexible.

Y este es el setter del handler. Almacena la función handler dentro. Cuando llega una solicitud, llama al handler. Si no se establece un handler, no devuelve uno. Podemos definir un handler usando app.handler. Este handler simplemente devuelve una nueva respuesta. Como no establecimos status y headers, define que el status es 200 y el tipo de contenido es text slash frame. Y si quieres devolver HTM, solo establece el tipo de contenido como text slash HTML.

Y puedes personalizar el status. Puedes usar métodos estáticos como response.json. Esto devuelve una respuesta JSON con los headers correctos. Si quieres redirigir, solo usa response.

redirect. Esto devuelve una respuesta de redirección. Así es como devolvemos la respuesta.

6. Efficient Routing Implementation

Short description:

Personalización de status y headers, simplificación con métodos auxiliares. Enrutamiento para múltiples respuestas basadas en rutas y métodos. Utilización de patrones de URL con comodines y parámetros de ruta para un enrutamiento flexible. Definición de rutas y handlers, actualización de funciones de app para un manejo eficiente del enrutamiento.

Podemos personalizar cosas como status y headers. Y también tenemos algunos métodos auxiliares para facilitarlo. Pasemos al enrutamiento. Hasta ahora, el framework ha estado manejando solo una ruta.

Pero en una aplicación del mundo real, necesita devolver diferentes respuestas dependiendo del path y el método. Por ejemplo, get slash debería devolver la página principal. Get slash welcome debería devolver la página de bienvenida. Post slash post debería crear un nuevo post. Para hacer eso, usamos el patrón de URL.

Esta es la API. Funciona en Cloudflare, Cardino, y Node.js. Puedes usar comodines y parámetros de ruta.

7. Framework Routing Implementation

Short description:

Sintaxis basada en path a regex. Creación de patrón con new URL. Definición de tipo de ruta, actualización de la función create app. Uso de métodos on y fetch para la implementación de enrutamiento. Prueba de la aplicación creando solicitudes y verificando respuestas.

Su sintaxis se basa en path to regex que se utiliza en Express. Podemos crear un patrón usando new URL con path name. Esto establece path name como slash post slash colon ID. Cuando probamos con slash, devuelve primero. Pero slash post slash uno a tres coincidencias. Entonces, devuelve true.

Ahora estamos listos para agregar enrutamiento con patrón de URL. Vamos a hacer un framework con enrutamiento. Definimos el tipo de ruta que incluye el método HTTP y el patrón de URL y la función del handler. Ahora, actualizamos la función create app. Devuelve el objeto app que tiene dos métodos, on y fetch. Definimos el método on. Toma el método, path, handler, y los almacena como una ruta usando el patrón de URL.

El método fetch recorre todas las rutas. Verifica si el método y la URL coinciden con la ruta. Si coinciden, llama al handler. Si no coinciden, devuelve no encontrado. Así es como usas la función de enrutamiento que acabamos de construir. Defines método, path, y handler usando el método on. Construimos el manejo de respuestas y el enrutamiento. Ahora, asegurémonos de que funcionen como se espera. Escribamos algunas pruebas. Para probar nuestra aplicación, podemos crear una solicitud y pasarla a app.

8. Data Retrieval from Requests

Short description:

Escribiendo pruebas para la aplicación usando app.fetch. Probando el estado y el cuerpo de la respuesta. Implementación de enrutamiento en el framework. Recuperación de datos de solicitudes basadas en parámetros de URL y cadenas de consulta.

Escribamos algunas pruebas. Para probar nuestra aplicación, podemos crear una solicitud y pasarla a app.fetch. La aplicación devuelve un objeto de respuesta. Entonces, podemos verificar su contenido, como el estado o el cuerpo. Aquí hay una prueba básica. Nosotros registramos las rutas, luego creamos una solicitud y la pasamos a app.fetch. Obtenemos la respuesta. Podemos verificar el estado y el cuerpo.

Lo interesante es que no necesitas ejecutar el servidor en localhost. Es solo una llamada de función regular. Por ejemplo, puedes probarlo. Por cierto, Hono tiene más de 20,000 líneas de código de prueba, y la mayoría de ellas siguen el mismo patrón. Ahora tenemos enrutamiento en nuestro framework.

Definimos rutas usando on, las emparejamos con el patrón de URL, las manejamos en fetch, y podemos probarlo. A continuación, obtengamos datos de la solicitud. Cuando manejamos una solicitud, a menudo necesitamos obtener información de la URL, como pass o cadenas de consulta. Veamos cómo hacerlo. Podemos usar el objeto de solicitud para obtener la URL. Simplemente pasando la propiedad URL al constructor de URL para pasarla. Podemos obtener acceso, podemos acceder a la propiedad del nombre de pass. Podemos usar URL pattern.exec para obtener el resultado de la coincidencia.

9. Context Handling and Middleware Integration

Short description:

Obteniendo parámetros de pass y consulta de las solicitudes. Implementación de contexto para encapsular la solicitud y la información de coincidencia. Mejorando el framework con middleware para la manipulación de solicitudes y respuestas.

Luego obtenemos el parámetro pass ID, 123, de los grupos match.passname. Usamos URL search params para obtener parámetros de consulta, como página 4, 5, 6. Queremos pasar cosas como la solicitud y la información de coincidencia al manejador. En lugar de pasarlos por separado, los envolvemos en un solo objeto. Este objeto se llama contexto, y es fácil de extender más tarde. Así es como definimos el tipo de contexto. Incluye la solicitud y el resultado de la coincidencia. Luego usamos eso como la entrada para la función del manejador.

En fetch, encontramos la ruta que coincide con la URL y el método. Creamos el contexto y lo pasamos al manejador. Así es como usamos el contexto en el manejador DR. Dentro del contexto, tenemos el resultado de la coincidencia de este es el resultado del patrón de URL, usando eso, podemos obtener el parámetro pass y el parámetro de consulta. Resumiré esta sección. Podemos obtener datos de las solicitudes ejecutando URL.exec. De este resultado de coincidencia, podemos obtener tanto los parámetros pass como los de consulta. Luego los pasamos al manejador dentro del contexto.

Ahora hagamos nuestro framework más poderoso agregando middleware. El middleware actúa antes y después del manejador. Puede cambiar la solicitud o la respuesta, y puedes reutilizarlo en diferentes rutas. Aquí hay algunos ejemplos de middleware. Estos son de Hono, y muestran cuán poderoso y reutilizable puede ser el middleware. Desde autenticación hasta validación y almacenamiento en caché, el middleware puede hacer mucho. A veces el middleware necesita almacenar algunos valores o cambiar la respuesta antes de devolverla. Así que, extendamos el contexto para que eso sea posible. Agregamos dos campos más al contexto. Esto nos permite modificar la respuesta antes de devolverla. Y este bars es un lugar para almacenar valores a través del middleware. Pasamos ambas listas al contexto. Definimos listas antes del bucle para que el manejador pueda actualizar. Y devolvemos la respuesta después del bucle.

10. Helper Functions and Contextual Access

Short description:

Usando middleware para modificar respuestas. Introducción de funciones helper para lógica como renderizar HTML. Mejorando el framework con objetos helper para acceso contextual y manipulación de respuestas.

Aquí es cómo usamos listas y bar en la práctica. El primer middleware inicia valores en bars. El manejador principal crea la respuesta usando el valor almacenado. Este, el último middleware, modifica la respuesta antes de devolverla. Middleware es una función que actúa antes y después del manejador. Puede usarse para modificar solicitudes, la respuesta, o agregar valores útiles. Y diseñamos el objeto de contexto para contener los datos clave que el manejador necesita, como solicitudes, el objeto de respuesta, y valores personalizados.

Agreguemos la función de helper a nuestro framework. Un helper es una función reutilizable que proporciona lógica útil, como renderizar HTML. Recibe contexto para que pueda acceder a cosas como solicitudes o respuesta. Estos son ejemplos de Hono. Puedes ver que tiene muchos helpers integrados, como cookies, Jot, HTML, y más. Definamos helpers en nuestro framework. Extendemos el tipo de contexto con el objeto helper. La aplicación tendrá mapas de helpers. Cada helper es una función que recibe contexto y los parámetros del helper.

Luego en fetch, pasamos el helper al contexto. Ahora, instantáneamente en el Handler, puedes acceder a él como C.helper. Aquí está cómo definir un helper llamado HTML. Y así es cómo usarlo en el Handler. Puedes llamar a C.helper o HTML para devolver una nueva respuesta con contenido HTML. Si configuras la propiedad types, TypeScript te dará autocompletado para tus helpers. Es una pequeña función, pero mejora mucho la DX. Resumamos la función de helper. Un helper es una función reutilizable que recibe contexto. Los defines en nuestra aplicación create y accedes a ellos usando C.helper. Dentro de tu Handler, si defines los tipos correctamente, obtienes autocompletado y tipos de forma segura. Veamos algunos ejemplos prácticos usando nuestro framework. Aquí, obtenemos el parámetro de ruta ID y el parámetro de consulta page. Luego devolvemos una respuesta JSON usando response.json.

11. Helper Logic Expansion and Framework Completion

Short description:

Convirtiendo la lógica de parámetros en helpers reutilizables para un código más limpio. Habilitando el server-side rendering con React usando helpers. Completando los fundamentos del framework web, fomentando mejoras adicionales e integración de proyectos.

Aquí, convertimos la lógica de parámetros en helpers. Dentro de los resultados, simplemente llamamos a C.helper params o C.helper search params. Esto hace que el Handler sea más limpio y la lógica del helper reutilizable. Este ejemplo combina múltiples características. Definimos HTML helper y establecemos valores en middleware y luego usamos ambos en el Handler. Después de eso, otro middleware modifica los response helpers. Esto muestra cómo los helpers, contextos y middleware trabajan juntos.

Esto es muy interesante. Este helper permite hacer server-side rendering con React. Utiliza render para leer un stream y devolver una respuesta HTML. Ahora, puedes usar JSX directamente en tu Handler. Ahora hemos completado todos los pasos. Así que, has construido lo básico, pero hay más que podrías hacer. Puedes mejorar middleware y helpers o incluso integrarte con proyectos reales como Hono.

Vamos a concluir. Has construido tu propio framework web. La aplicación con tu framework puede devolver respuestas, definir rutas, obtener datos de la solicitud e incluso usar middleware y helpers. Acabas de reinventar la rueda, pero construir tu framework web es realmente divertido. Eso es todo. Muchas 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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
Workshop
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas