Remix Flat Routes – Una Evolución en el Enrutamiento

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Esta charla presenta la nueva convención Flat Routes que probablemente será la predeterminada en una futura versión de Remix. Simplifica la convención existente y también te brinda nuevas capacidades.

This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

Remix FlatRoutes es un paquete que permite una convención de enrutamiento simplificada en Remix, donde todas las rutas están visualmente accesibles en una sola carpeta sin carpetas anidadas. Su objetivo principal es hacer más fácil la visualización y gestión de rutas, permitir la co-ubicación de archivos de soporte, disminuir la fricción en refactorización y rediseño, y facilitar la migración desde otros frameworks.

Remix y Next.js utilizan convenciones distintas para los enrutamientos. Remix no diferencia entre rutas y diseños, y utiliza carpetas y exportaciones nombradas para meta, enlaces y límites de error. Next.js, por otro lado, requiere una carpeta para cada segmento de ruta y utiliza archivos separados para diseños y páginas, además de requerir carpetas adicionales para cualquier segmento que añada un diseño.

En Remix FlatRoutes, un diseño sin ruta se implementa utilizando un solo guion bajo (_) como prefijo en el nombre del archivo, en lugar de un diseño anidado que requeriría una carpeta. Esto simplifica la estructura del proyecto al no necesitar carpetas adicionales para cada diseño o ruta.

Remix FlatRoutes cambia las convenciones de nomenclatura de archivos al usar puntos en lugar de barras para separar los segmentos de la URL en el nombre del archivo. Además, utiliza un guion bajo al final del nombre del archivo para especificar que un segmento no es un diseño cuando no tiene una salida.

Remix FlatRoutes facilita la refactorización y el rediseño de interfaces de usuario al eliminar la necesidad de múltiples carpetas anidadas, lo que simplifica la estructura del proyecto y reduce la complejidad al ajustar los nombres de archivos en lugar de gestionar carpetas y rutas anidadas.

Para migrar a Remix usando Remix FlatRoutes, se utiliza una herramienta de migración incluida en el paquete que transfiere las rutas existentes a la nueva estructura de archivos planos o carpetas planas. Esto permite una transición suave manteniendo la configuración de ruta original.

Michael Carter
Michael Carter
16 min
18 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Remix Flat Routes es una nueva convención que tiene como objetivo facilitar la visualización y organización de las rutas en tu aplicación. Permite la co-ubicación de archivos de soporte con rutas, disminuye la fricción de refactorización y rediseño, y ayuda a las aplicaciones a migrar a Remix. La convención de Carpetas Planas admite la co-ubicación y permite importar activos como importaciones relativas. Para migrar aplicaciones existentes a Flat Routes, use la herramienta de migración del paquete Remix Flat Routes.

1. Introducción a Remix Flat Routes

Short description:

Hola, soy Michael Porter. Voy a hablar en RemixConf Europe sobre Remix Flat Routes y la Evolución en el Enrutamiento. Comenzaré con una breve introducción a la convención de enrutamiento actual. Remix utiliza carpetas para determinar el diseño principal, mientras que Next.js requiere una carpeta para cada segmento de la ruta. Next.js también utiliza archivos separados para las exportaciones nombradas, lo que lleva a un gran número de archivos. Sin embargo, Next.js permite la co-ubicación de archivos de soporte en la carpeta de la ruta.

Hola, soy Michael Porter. Puedes conocerme en línea como Killamon, que es una abreviatura de Killamonjaro. He sido un gran fan de los volcanos durante mucho tiempo. Estoy emocionado de hablarles hoy en RemixConf Europe. Mi presentación será sobre Remix Flat Routes y la Evolución en el Enrutamiento.

Primero, comenzaré dando una breve introducción sobre la convención de enrutamiento actual tal como la conocemos hoy. Aquí está una estructura de enrutamiento típica. Consiste en un diseño sin ruta para páginas públicas, como la página acerca de, una sección de usuario con su propio diseño que tiene una vista de lista, una vista detallada del usuario, así como una página de edición. Remix utiliza carpetas para determinar el diseño principal. Se espera que el diseño principal incluya una salida para renderizar sus hijos. En este ejemplo, no hay una carpeta de ID de usuario porque queremos que la página de edición utilice el mismo diseño de usuario que las otras rutas. Dado que la página de edición no está anidada, utilizamos el punto para el diseño plano en lugar del diseño anidado. Cuando creas un diseño anidado, Remix te exige que crees una carpeta para sus hijos, más un archivo para el diseño en sí. Desafortunadamente, uno de los inconvenientes de esta convención es que la carpeta en un archivo de diseño termina separada en tu editor, ya que las carpetas suelen mostrarse primero. Esto puede ser molesto, especialmente en aplicaciones grandes con muchas rutas.

Como sabes, Next.js recientemente introdujo su propia versión de diseños anidados. Comparemos su convención con Remix. Aquí está la misma estructura de enrutamiento que el ejemplo anterior. Next.js utiliza paréntesis para diseños sin ruta, similar al prefijo de doble subrayado de Remix. Lo primero que notarás es que Next.js requiere una carpeta para cada segmento de la ruta. La ruta hoja es un archivo llamado página. Si un segmento de ruta añade un diseño, creas un archivo de diseño. Con Next., los diseños y las páginas son cosas separadas, mientras que Remix no diferencia. De nuevo, mirando nuestra ruta de edición de usuario, Next.js busca el diseño más cercano, que es usuario / diseño. Otra gran diferencia con Remix es que Remix utiliza exportaciones nombradas para cosas como meta, enlaces, encabezados, límites de error, etcétera. Y Next.js utiliza archivos separados para cada uno. Esto puede resultar en un gran número de archivos, dependiendo de las necesidades de tu aplicación. Llevó a una persona en Twitter a publicar esta captura de pantalla. Concedido, este es un ejemplo extremo. Uno de los beneficios de una carpeta para cada ruta, sin embargo, es que Next.js te permite co-ubicar archivos de soporte en la carpeta de la ruta.

2. Introducción a Remix FlatRoutes

Short description:

Remix FlatRoutes es una nueva convención que tiene como objetivo facilitar la visualización y organización de las rutas en tu aplicación. Permite la co-ubicación de archivos de soporte con rutas, disminuye la fricción de refactorización y rediseño, y ayuda a las aplicaciones a migrar a Remix. FlatRoutes fue introducido por primera vez por Brian Florence y desde entonces se ha implementado como un paquete separado. Para agregarlo a tu aplicación, simplemente npm install dash d RemixFlatRoutes.

Cosas como CSS, componentes, imágenes, etcétera. Esto es una de las principales cosas que los desarrolladores de Remix han estado pidiendo. Discutiremos cómo Remix FlatRoutes apoya esto en breve.

Ahora que hemos aclarado eso, hablemos de la nueva convención Remix FlatRoutes. Actualmente es un paquete MPM separado, pero se incluirá en una futura versión de Remix como funcionalidad central.

Entonces, ¿cuáles son los objetivos de Remix FlatRoutes? Hacer más fácil ver la ruta que tu aplicación está diseñada. Simplemente abre la carpeta de Rutas, y todas están ahí. Dado que el sistema de archivos generalmente ordena las carpetas primero, cuando tienes docenas de rutas, es difícil ver qué carpetas tienen diseños y cuáles no hoy en día. Ahora todas las rutas relacionadas están ordenadas juntas. Permitir la co-ubicación de archivos de soporte con rutas. Verás cómo puedes mantener tus estilos, componentes y otros archivos de soporte con tus rutas. Disminuir la fricción de refactorización y rediseño. Aunque los editores de code son bastante buenos corrigiendo las importaciones cuando mueves archivos, y Remix tiene el alias de importación tilde, es generalmente más fácil refactorizar una base de code que no tiene un montón de carpetas anidadas. Remix ya no requerirá esto. Además, al rediseñar la user interface, es más sencillo ajustar los nombres de los archivos en lugar de crear y eliminar carpetas y mover rutas para cambiar la forma en que se anidan. Y finalmente, ayudar a las aplicaciones a migrar a Remix. Las aplicaciones existentes generalmente no tienen una estructura de carpetas de rutas anidadas como las convenciones de hoy. Migrar a Remix es arduo porque tienes que lidiar con todas las importaciones. Además, como vimos con los nuevos diseños anidados de Next, FlatRoutes facilita la migración de otros frameworks a Remix.

Entonces, Remix FlatRoutes fue introducido por primera vez como un gist por Brian Florence el 7 de abril de este año. Publicó el enlace en el tablero de Remix, y yo casualmente lo vi. Y me intrigó porque yo también estaba buscando simplificar mi estructura de enrutamiento. Menos de dos semanas después, hice el primer commit implementando la especificación FlatRoutes. La parte más complicada fue tratar de averiguar cómo determinar el diseño padre cuando no había carpetas. Simplemente un nombre de archivo separado por un punto. Discutiremos cómo se implementó eso en un rato. Un punto interesante es que no fue hasta un mes después que Next.js publicó el primer RFC de diseños, describiendo su nueva convención de diseños anidados, que ahora está disponible como una característica experimental en Next.js 13. Como mencioné antes, Remix FlatRoutes está actualmente implementado como un paquete separado. Para agregarlo a tu aplicación, simplemente npm install dash d RemixFlatRoutes. Dado que las rutas se determinan en tiempo de construcción, esto es una dependencia de desarrollo y no se necesita en tiempo de ejecución.

3. Personalizando las Rutas de Remix

Short description:

Una de las cosas sobre Remix es que, aunque tiene opiniones fuertes, tiene algunas escotillas de escape que te permiten añadir tus propias personalizaciones. En este caso, es la configuración de rutas donde puedes añadir tus propias rutas además de la convención por defecto. RemixFlatRoutes cambia algunas de las convenciones de nombres de archivos a las que estamos acostumbrados. Por ejemplo, para los diseños sin ruta, utiliza un solo guion bajo en lugar de un prefijo de doble guion bajo. En lugar de usar carpetas para las rutas, el nombre del archivo incluye toda la ruta, así que utiliza el punto en lugar de la barra para separar los segmentos de la URL. Remix FlatRoute admite dos configuraciones, archivos planos y carpetas planas. Los archivos planos se utilizarán normalmente para aplicaciones más sencillas ya que todo está en el nombre del archivo y no hay carpetas. Aunque Flat File simplifica considerablemente la convención de enrutamiento, lo hace con algunas desventajas. No hay carpetas.

Una de las cosas sobre Remix es que, aunque tiene opiniones fuertes, tiene algunas escotillas de escape que te permiten añadir tus propias personalizaciones. En este caso, es la configuración de rutas donde puedes añadir tus propias rutas además de la convención por defecto.

Dado que Remix asume que los archivos en la carpeta de rutas utilizan la convención por defecto, necesitarás decirle a Remix que ignore todos los archivos en la carpeta de rutas. Finalmente, llama a la función FlatRoutes para escanear la carpeta utilizando la nueva convención FlatRoutes. En el futuro, podrás especificar qué convención quieres utilizar directamente a través del archivo de configuración de Remix.

RemixFlatRoutes cambia algunas de las convenciones de nombres de archivos a las que estamos acostumbrados. Por ejemplo, para los diseños sin ruta, utiliza un solo guion bajo en lugar de un prefijo de doble guion bajo. El prefijo de parámetros sigue siendo el mismo, el signo del dólar, pero te mostraré cómo podemos cambiar eso más adelante. En lugar de usar carpetas para las rutas, el nombre del archivo incluye toda la ruta, así que utiliza el punto en lugar de la barra para separar los segmentos de la URL. Y finalmente, para manejar escenarios como nuestra ruta de edición de usuario, el sufijo de guion bajo especifica que el segmento no es un diseño porque no tiene una salida. Lo demostraré más adelante.

Remix FlatRoute admite dos configuraciones, archivos planos y carpetas planas. Los archivos planos se utilizarán normalmente para aplicaciones más sencillas ya que todo está en el nombre del archivo y no hay carpetas. Aquí está el mismo ejemplo que utilizamos antes, pero utilizando la convención de archivos planos. Observa que no hay carpetas. Toda la estructura de la URL es visible de un vistazo sin tener que profundizar en carpetas separadas. Todavía tenemos que identificar la ruta de índice, en este caso, usuarios barra índice. Observa cómo nombramos el archivo usuarios punto índice. El guion bajo inicial aquí es simplemente para ordenar la ruta de índice antes que las otras rutas hijas.

Como mencioné, estamos utilizando puntos en lugar de carpetas para separar las rutas. Pero sin carpetas, ¿cómo sabe Remix cuál es el diseño padre? Para determinar el diseño padre, Remix Flat Routes encuentra el prefijo que coincide más largo, y eso determina el diseño padre. Aquí vemos que el prefijo público de público punto acerca coincide con el diseño TSX público. Lo mismo con usuarios. ¿Recuerdas en el ejemplo anterior, donde no queríamos que la ruta de edición se anidara bajo el ID de usuario? Allí, utilizamos puntos en el nombre del archivo para lidiar con ello. Pero, ¿cómo lidias con eso cuando todo utiliza puntos? Remix Flat Route te permite usar un guion bajo final en una ruta padre para especificar que esto no es un diseño. Como puedes ver en la ruta de edición, el ID de usuario no debe ser tratado como un diseño padre, de ahí el guion bajo. Esto asegura que los usuarios que el prefijo de ID de usuario no coincida con esa ruta. Y Remix buscará entonces en el siguiente segmento un diseño que coincida, que es el diseño de usuarios.

Aunque Flat File simplifica considerablemente la convención de enrutamiento, lo hace con algunas desventajas.

4. Convención de Carpetas Planas y Co-localización

Short description:

No podemos co-localizar archivos de soporte con nuestras rutas. Las carpetas planas se ven igual que los archivos planos. La principal diferencia es que en lugar de que el enrutamiento sea un simple nombre de archivo, la carpeta misma es el nombre de la ruta. Remix no diferencia entre rutas y diseños. Remix admite múltiples alias para el archivo de ruta. Uno de los principales beneficios de la convención de Carpetas Planas es apoyar la co-localización. Tu archivo de ruta ahora te permitirá importar estos activos como una importación relativa. He estado experimentando con la división de mi archivo de ruta en un archivo de ruta y un archivo de servidor de ruta.

No hay carpetas. No podemos co-localizar archivos de soporte con nuestras rutas. Incluso si agregáramos reglas para ignorar estos otros archivos, requeriría que los importaras con la ruta completa, no simplificando exactamente las cosas. Las carpetas planas se ven igual que los archivos planos. La principal diferencia es que en lugar de que el enrutamiento sea un simple nombre de archivo, la carpeta misma es el nombre de la ruta. El archivo de ruta, index.tsx, se encuentra dentro de la carpeta. Esto es similar al archivo de página de Next.js.

Remix no diferencia entre rutas y diseños. De nuevo, los diseños son simplemente rutas con salidas. Entonces, index.tsx o layout.tsx significan lo mismo. Son simplemente alias y se utilizan principalmente para ser más descriptivos al mirar tus rutas. Remix admite múltiples alias para el archivo de ruta. Puedes usar index, route, layout, o page, así como agregar el prefijo de guion bajo. Esto ayuda a ordenar los archivos de ruta y diseño en la parte superior de la lista de archivos al co-localizar archivos.

Como mencionamos antes, uno de los principales beneficios de la convención de Carpetas Planas es apoyar la co-localización. Aquí estamos co-localizando archivos de soporte como CSS, componentes, archivos de servidor, imágenes, etc. Tu archivo de ruta ahora te permitirá importar estos activos como una importación relativa. He estado experimentando con la división de mi archivo de ruta en un archivo de ruta y un archivo de servidor de ruta. La principal razón es que uso Zod para la validación, y el paquete es algo pesado. Al definir y usar solo el esquema Zod en el archivo del servidor, garantizo que Zod no termine en el paquete del cliente.

5. Migrando Aplicaciones Existentes a Rutas Planas

Short description:

Para migrar tu aplicación existente a Rutas Planas, utiliza la herramienta de migración del paquete Remix Flat Routes. Especifica las carpetas de origen y destino, asegurándote de que sean diferentes. Elige entre archivos planos o carpetas planas. Verifica la migración comparando las rutas antes y después usando el comando mpx-remix-rutas. Las rutas deberían tener la misma jerarquía y rutas, con solo los nombres de los archivos y la ordenación potencialmente cambiando.

Entonces, ahora que hemos visto los beneficios de las Rutas Planas, ¿cómo migramos nuestra aplicación existente? El paquete Remix Flat Routes incluye una herramienta de migración. Simplemente ejecuta el comando mpx migrate-flat-routes y especifica las carpetas de origen y destino. Las carpetas deben ser diferentes para evitar que la herramienta sobrescriba tus rutas originales. Puedes especificar si quieres archivos planos o carpetas planas. Aquí hay una captura de pantalla de las rutas de la aplicación de muestra Fakebooks antes y después de la migración. Puedes ver que te permite ver rápidamente cómo están estructuradas tus rutas sin tener que expandir las carpetas. Una forma de verificar que la migración se realizó sin problemas es ejecutar el comando mpx-remix-rutas en las rutas originales y en las rutas migradas. Dado que remix-flat-routes crea la misma configuración de ruta que se generó con la convención predeterminada, las rutas deberían ser idénticas tanto en jerarquía como en rutas. Las únicas diferencias son los nombres de los archivos, y tal vez algún ordenamiento. Durante los últimos seis meses, a medida que la gente ha probado remix-flat-routes, han ofrecido suggestions para mejoras y otras mejoras más allá de la especificación original escrita por Ryan. Ya he comenzado el proceso de PR para incorporar remix-flat-routes en el núcleo del framework. Si estas mejoras terminan en el núcleo aún está por determinarse. Y al menos, continuaré apoyando estos como complementos que podrás incluir en tu configuración. Uno de los puntos de dolor de la convención de enrutamiento de remix, tanto la actual como las rutas planas, es que el uso del signo $ puede ser problemático al trabajar con archivos en la shell. Dado que la mayoría de las shells tratan el signo $ como un prefijo de variable, esto te obliga a escapar del nombre del archivo al usar comandos. Considerando que esto es RemixConf Europe, sugiero usar el Euro, o si tienes un teclado típico de EE. UU., quizás el carat. Algunos desarrolladores quieren poder montar la aplicación Remix en una ruta distinta a la raíz, tal vez estaban agregando Remix a un sitio web existente. Aquí puedes configurar Remix para usar una ruta diferente, como myRemix app. Esto actualizará la ruta raíz y no tendrás que agregar una carpeta separada en la carpeta de rutas. Jacob Ebey, un miembro del equipo de Remix, recientemente creó una aplicación de muestra que tenía rutas procesadas por diferentes tecnologías de backend, lo cual es bastante impresionante. Tenía rutas para Node, trabajadores de CloudFlare, así como trabajadores de servicios, además de un conjunto común de diseños. Utilizó rutas planas de Remix, pero para soportar sus necesidades, tuvo que combinar manualmente las rutas en un solo espacio de nombres para asegurar que las rutas padre estuvieran correctamente definidas. En Remix Config, ahora puedes no solo especificar una sola ruta a tu carpeta de rutas, sino pasarle un array de rutas. Las rutas planas construirán la estructura de la ruta a través de múltiples carpetas de rutas, y las fusionarán en un solo espacio de nombres automáticamente. No necesitas hacer eso manualmente. Y como puedes ver en la salida de MPX Remix routes, las rutas se generaron correctamente. Entonces, en conclusión, he sido un seguidor de Remix desde el día 1, cuando era un producto de pago. Valió la pena, y definitivamente ha mejorado la forma en que construyo web apps hoy en día. No puedo creer que hace casi un año que Michael Jackson anunció por primera vez Remix Versión 1, al mundo, haciéndolo disponible como código abierto. En ese corto tiempo, ha habido dos conferencias de Remix. Una en mayo a la que tuve la suerte de asistir, donde pude conocer en persona por primera vez a personas como Michael, Ryan, y Ken, y muchos otros que solo conocía en Twitter o Discord. Así como esta conferencia aquí hoy, donde estoy agradecido de poder dar una presentación y hablar sobre algo que he construido y me apasiona. Y ahora con la reciente noticia de que Shopify ha adquirido Remix, todos podemos descansar tranquilos sabiendo que este increíble framework continuará prosperando. No puedo ni empezar a imaginar la increíble aventura que han tenido Michael y Ryan en estos últimos 12 meses y estoy emocionado de ver lo que traerán los próximos 12 meses. Gracias por tomarte el tiempo para ver mi presentació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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
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.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Cómo React Router se convirtió en un Framework
React Advanced 2024React Advanced 2024
31 min
Cómo React Router se convirtió en un Framework
Top Content
My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.
Cómo hacer un juego web tú solo
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
Cómo hacer un juego web tú solo
This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.

Workshops on related topic

Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
React Advanced 2023React Advanced 2023
104 min
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
WorkshopFree
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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)
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Construyendo una aplicación en tiempo real con Remix y Supabase
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construyendo una aplicación en tiempo real con Remix y Supabase
Workshop
Jon Meyers
Jon Meyers
Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!