Remix: Abrazando los estándares web para redefinir el desarrollo web moderno

Rate this content
Bookmark

Descubre el poder de Remix, un revolucionario marco de trabajo full-stack que abraza los estándares web para redefinir el desarrollo web moderno.

Mientras los desarrolladores luchan con herramientas y marcos de trabajo complejos, crear aplicaciones eficientes y mantenibles se vuelve cada vez más desafiante.

¿Y si hay una solución que aprovecha los principios básicos de la web para simplificar el desarrollo? Entra Remix

En esta charla, aprende cómo Remix aprovecha los estándares web, como URLs, Fetch API, HTML y caché HTTP, para elevar las experiencias del desarrollador y del usuario, en última instancia, te empodera para convertirte en un mejor desarrollador!

26 min
23 Oct, 2023

AI Generated Video Summary

Remix es un marco de desarrollo web que combina la escalabilidad de los marcos de trabajo renderizados por el servidor con la flexibilidad de React. Prioriza los estándares web y las mejores prácticas para la seguridad. Remix simplifica el desarrollo con estándares web como URLs, fetch API, HTML y caché HTTP. Simplifica el manejo de datos a través de formularios HTML y HTTP, mejorando la experiencia del usuario. La Httpicación en Remix reduce la carga del servidor y acelera el tiempo de respuesta, mientras que la búsqueda global y Storyblock facilitan la construcción de sitios web complejos.

1. Introducción a Remix y al Desarrollo Web Moderno

Short description:

Hola, soy Alexandra Spallato, una Ingeniera de Relaciones con Desarrolladores en Storyblock. Hoy, discutiré cómo Remix está adoptando los estándares web para redefinir el desarrollo web moderno. El desarrollo web implica transformar los datos en HTML y entregarlos al navegador. En el pasado, el renderizado del lado del servidor era dominante, con JavaScript utilizado de manera esporádica. Sin embargo, los marcos de JavaScript como React, Vue, Svelte, Angular, y los meta marcos como Next, Nuxt, y Gatsby introdujeron el concepto de JavaScript universal. El desarrollo web moderno enfrenta desafíos como la escalabilidad, mantenerse al día con los nuevos marcos, el rendimiento, la compatibilidad con los navegadores, y garantizar una gran experiencia de usuario.

Hola, soy Alexandra Spallato. Soy una Ingeniera de Relaciones con Desarrolladores en Storyblock. Estoy súper contenta de estar aquí. Mi tema de hoy es cómo Remix está adoptando los estándares web para redefinir el desarrollo web moderno. Así que primero, vamos a sumergirnos en la evolución del desarrollo web. El desarrollo web se trata de transformar los datos en HTML y entregarlos al navegador para su renderizado.

Hagamos un viaje al pasado. ¿Recuerdas cuando el desarrollo web era todo sobre el renderizado del lado del servidor? Haces una solicitud al servidor, la página se renderizaba usando el lenguaje de plantillas y luego se enviaba de vuelta al navegador. JavaScript era como la guinda del pastel. Se utilizaba de manera esporádica para tener un toque de interactividad. Pero entonces, como un giro de trama en una película, los marcos de JavaScript como React, Vue, Svelte, Angular, y los meta marcos como Next, Nuxt, y Gatsby entraron en escena. Y con ellos, nació el concepto de JavaScript universal. Esta es como la versión superhéroe de JavaScript. Puede ejecutarse tanto en el cliente como en el servidor.

Muy bien. Así que ahora hablemos del elefante en la habitación. Los desafíos a los que nos enfrentamos en el desarrollo web moderno. Escalabilidad. Tu aplicación siempre necesita más usuarios, más datos, más complejidad sin colapsar. Nuevos marcos aparecen cada semana. Es como una tendencia de moda. Así que mantenerse al día con lo último y lo mejor puede ser agotador y consumir mucho tiempo. Rendimiento. A nadie le gusta un sitio web lento. Compatibilidad con los navegadores. Necesitamos que nuestras aplicaciones funcionen sin problemas en todos los navegadores.

2. Introducción a Remix

Short description:

Remix combina la escalabilidad de un marco renderizado por servidor con la flexibilidad de React. Puede manejar aplicaciones complejas y reducirse a no requerir JavaScript. Construido sobre estándares web, habla el idioma del navegador y mejora la experiencia del usuario. Aprender Remix significa aprender el lenguaje de la web, lo que te convierte en un mejor desarrollador web. También prioriza los estándares web y las mejores prácticas para la seguridad.

todos los navegadores. UI y UX. Esto es todo acerca de nuestros usuarios. Developer experience. Esto es acerca de nosotros los desarrolladores. Queremos que nuestras herramientas sean poderosas, pero también intuitivas y agradables de usar. Security. Necesitamos proteger los data de nuestros usuarios. Vale. No te preocupes. No estoy aquí para hablar solo de problemas. Estamos aquí para hablar de soluciones y aquí es donde entra Remix. Entonces, ¿de qué se trata Remix? Imagina si un marco renderizado por servidor y React tuvieran un bebé. Esto es Remix. Tiene la scalability de un camaleón. Puede manejar aplicaciones complejas, pero también puede reducirse hasta el punto de que ni siquiera necesitas JavaScript en la página. Y la mejor parte, está construido sobre web standards por lo que es como hablar el idioma nativo del navegador. Tiene un modelo de servidor cliente, por lo que solo puedes enviar los data necesarios a tu usuario y mejorar la velocidad y scalability de tu aplicación y esto se logra presentando data en el lado del servidor. Está construido sobre web standards, por lo que es como un adaptador universal que funciona sin problemas en diferentes navegadores. JavaScript está aquí para la user experience. Es como la guinda del pastel. Mejora la user experience, pero la aplicación todavía funciona genial incluso sin él. Evita la sobre abstracción. Aprender un nuevo marco a veces puede parecer como aprender un nuevo idioma para descubrir que solo se habla en una pequeña isla. Así que con Remix, estás aprendiendo el lenguaje de la web, no solo un solo marco. Así que a medida que mejoras en Remix, en realidad te estás convirtiendo en un mejor desarrollador web. Y también, al apegarse a web standards y a las mejores prácticas,

3. Remix: Simplificando el Desarrollo con Estándares Web

Short description:

Remix simplifica el desarrollo con estándares web, incluyendo URLs, fetch API, HTML y caché HTTP. Las URLs son la columna vertebral de la web y Remix las utiliza para el enrutamiento y la carga de datos. HTML es el lenguaje de la web, y Remix lo utiliza al máximo. La caché HTTP mejora el rendimiento de la aplicación web. Remix trata las URLs como una herramienta poderosa, optimizando la navegación y simplificando el desarrollo. La fetch API en Remix es como un cartero personal, entregando datos a tu aplicación. Gestiona solicitudes, respuestas y encabezados.

ayuda a mantener las cosas seguras. Así que ahora vamos a profundizar en cómo Remix simplifica nuestro proceso de desarrollo con los estándares web. En primer lugar, a Remix le encantan las URLs. Las URLs son la columna vertebral de la web. La dirección de cada pequeño pedazo de contenido en internet. Remix abraza esto y utiliza las URLs para gestionar el enrutamiento y la carga de datos. A continuación, tenemos la fetch API. Esta es nuestra herramienta para el manejo de datos. Y ahora hablemos de HTML. Es el lenguaje de la web. Ha estado presente desde el amanecer de internet. Remix utiliza HTML a su máximo potencial. Y por último, pero no menos importante, tenemos la caché HTTP. Al aprovechar los mecanismos de caché incorporados en el navegador, Remix puede mejorar drásticamente el rendimiento de tu aplicación web.

Así que hablemos de las URLs. En Remix, son algo importante. No son solo direcciones, son la columna vertebral de tu arquitectura web. Así que imagina una URL como un camino. Y cada segmento de ese camino corresponde a un diseño anidado en tu UI. En Remix, puedes co-localizar tu UI y el código de manejo de datos en el mismo archivo. Estamos hablando de componentes full-stack. Remix también optimiza tu navegación del lado del cliente. Sabe qué diseños persistirán entre dos URLs. Así que solo busca los datos para los que están cambiando. Y encima de eso, Remix puede precargar todos los recursos para una página cuando el usuario está a punto de hacer clic en un enlace. Así que la próxima vez que mires una URL, recuerda, en Remix no es solo una dirección. Es una herramienta poderosa que da forma a tu arquitectura web, optimiza tu navegación y simplifica tu proceso de desarrollo. Así que ahora vamos a profundizar en la fetch API en Remix. Es como tu cartero personal, entregando datos desde la web a tu aplicación. Gestiona objetos de solicitud y respuesta, tu mensaje de datos saliente y entrante. También tenemos encabezados que son similares a la dirección

4. Manejo de Datos y Control de Caché en Remix

Short description:

El método fetch en Remix te permite hacer solicitudes y recibir respuestas desde cualquier lugar de tu aplicación. Los cargadores obtienen datos para los componentes, proporcionando la columna vertebral del flujo de datos de tu aplicación. Remix también ofrece métodos de ayuda como gson y Redirect para simplificar el trabajo con la API Fetch. Remix simplifica el manejo de datos a través de formularios HTML y HTTP, asegurando una experiencia de usuario más fluida. La Httpicación en Remix mejora el rendimiento reduciendo la carga del servidor y acelerando el tiempo de respuesta. Los encabezados de Control de Caché en Remix permiten actualizaciones de datos eficientes.

en un sobre. Llevan información adicional sobre la solicitud o respuesta, como el destino o el tipo de data que se envía. El método fetch toma tu solicitud, entrega tu respuesta, y puede ser llamado desde cualquier lugar de tu aplicación. Los cargadores en Remix son funciones que obtienen data del servidor para tus componentes. Hay una columna vertebral del flujo de data de tu aplicación. Y Remix añade solicitudes, encabezados de respuesta, y fetch al contexto global de tu cargador. Esto significa que puedes usarlos en cualquier lugar de tu aplicación, al igual que lo harías en el navegador. Y por último, tenemos métodos de ayuda como gson y Redirect que simplifican el trabajo con la API Fetch. Así que con la API Fetch en Remix, manejar data es tan fácil como enviar una carta. Así que ahora vamos a profundizar en los derechos de data y la mutación en Remix. La magia se basa en dos cosas básicas de la web. HTML forms y HTTP. De nuevo, Remix nos lleva de vuelta a lo básico, pero con un giro moderno. Cuando hablamos de crear, eliminar o actualizar data en nuestro sitio web, realmente estamos hablando de envíos de formularios. Y esto no es solo acerca de tu gran formulario complejo como la página de edición de perfil de usuario. Incluso los pequeños botones de me gusta son forms enmascarados. Los componentes de formulario de Remix tienen algunas características especiales para el formulario HTML habitual. Después de un envío de formulario, todos los cargadores en la página se actualizan automáticamente, mostrando a los usuarios la información más reciente sin necesidad de refrescar la página. Reforma tu página, no se recarga después de un envío de formulario, proporcionando una experiencia de usuario más fluida. Y luego podemos usar hooks como use navigation que nos dan acceso al estado pendiente del formulario, para que podamos construir la experiencia de usuario tan suave como la mantequilla. Piensa en indicadores de carga, Optimix TQI, y todas esas cosas buenas. Así que en REMIX, las funciones de acción cuidan los envíos de formularios, y las funciones de cargador se encargan de obtener data. La Httpicación es una característica poderosa que realmente puede mejorar el rendimiento de tu aplicación web. Es como darle memoria a tu aplicación. En lugar de estar constantemente pidiendo data al servidor, tu aplicación puede recordar algo de ella, reduciendo la carga en tu servidor, y acelerando el tiempo de respuesta para tus usuarios. En Remix, la Httpicación se utiliza a su máximo potencial. ¿Pero qué pasa con las actualizaciones? Bueno, la Httpicación en Remix es inteligente. Sabe cuándo actualizar los data. Y aquí es donde entra en juego el Control de Caché. Puedes definir los encabezados de Control de Caché directamente en tus módulos raíz. Por ejemplo, puedes establecer maxH300 para decirle al navegador que mantenga el

5. Httpicación, Búsqueda Global y Storyblock

Short description:

Con la Httpicación, tu aplicación web se vuelve más rápida, tu servidor sufre menos estrés y tus usuarios se mantienen contentos. La función de encabezados exporta un objeto con una propiedad de control de caché, especificando la cantidad máxima de tiempo que la respuesta obtenida puede ser almacenada en caché. Construir una búsqueda global con Remix es simple y no tedioso. Puedes acceder al tutorial y al repositorio del proyecto para reconstruirlo. El proyecto incluye un sitio web con múltiples páginas, una página de blog con publicaciones y una función de búsqueda. La consulta de búsqueda se pasa en la URL y los resultados se filtran por página y publicación. El proyecto está construido con Storyblock, un editor visual para CMS sin cabeza.

datos almacenados en caché data durante 300 segundos. Entonces, con la Httpicación, tu aplicación web se vuelve más rápida, tu servidor sufre menos estrés y tus usuarios se mantienen contentos. Es una situación en la que todos ganan. En este ejemplo, la función de encabezados está exportando un objeto con una propiedad de control de caché. El valor de esta propiedad es una cadena que le dice al navegador cómo almacenar en caché la respuesta. La directiva maxH especifica la cantidad máxima de tiempo en segundos que se permite almacenar en caché la respuesta obtenida. En este caso, está configurado para 300 segundos o cinco minutos. Entonces, este código es esencialmente diciéndole al navegador, oye, puedes almacenar esta referencia y usarla hasta cinco minutos sin verificar de nuevo con el servidor. Y también, puedes encontrar muchas de las directivas en los documentos de MDN ya que, de nuevo, esto es un estándar web. Así que ahora, es hora de codificar y construir un proyecto y beber algo de agua. No sé ustedes, pero para mí, construir una búsqueda global siempre ha sido súper tedioso. Y cuando descubrí Remix y lo construí para mi blog, me sorprendió lo simple que era. Así que creé un tutorial al respecto. Así que puedes llegar aquí con este código QR. Puedes obtener este tutorial y tendrás acceso al repositorio y a todo para reconstruir el proyecto que vamos a construir. Así que exploremos este proyecto. Así que este es el pequeño sitio web que construí para eso. Así que hay dos páginas, una de inicio y una de acerca de. Y una página de blog con algunas publicaciones. Ahora si abro una publicación tengo un titular, una imagen y texto. Y aquí tengo este botón de búsqueda que abre una ventana modal con el formulario de búsqueda. Y aquí escribo mi consulta. Así que escribo remix. Presiono enter. Así que tenemos, vemos brevemente esta palabra de búsqueda y podemos ver que nuestra consulta ahora se pasa en la URL y muestra los resultados, filtrados por página y publicación. Vale. Así que este es un informe. Así que lo tienes en el tutorial, pero puedes verlo allí. Y este es el tutorial. Vale. Vamos a sumergirnos en el código y sí, y esto está construido con Storyblock, mi headless CMS favorito, que tiene un editor visual.

6. Formulario de Búsqueda y Superposición de UI

Short description:

En nuestro formulario de búsqueda, tenemos un componente de formulario que se comporta como un formulario normal, pero con una interacción de fetch en lugar de una nueva solicitud de documento. Podemos simplificar el formulario utilizando el método GET por defecto y estableciendo el atributo de acción en la ruta de resultado de búsqueda. Esto procesará el formulario en la URL y adjuntará el valor de la consulta a la misma. Además, tenemos una superposición en el índice que muestra una palabra de búsqueda para una mejor experiencia de UI durante conexiones de red lentas.

Así que aquí tenemos las páginas. Podemos modificarlo aquí. Y aquí está el blog. Y en mi página, sólo tengo un campo de cuerpo. Así es donde vamos a buscar si nuestra consulta está contenida. Y en nuestras publicaciones de blog, tenemos un titular. Tenemos un titular, una imagen y un campo de texto. Así que necesitamos buscar si nuestra consulta está contenida en nuestro titular o en nuestro campo de texto o en nuestro campo de cuerpo para nuestra página.

Bien, este es el código. Tenemos este archivo de resultado de búsqueda y esta es la ruta donde encontraremos nuestros resultados. Tenemos nuestro formulario de búsqueda, que se coloca en el índice, en un modelo, que está construido con Atlas UI, y luego todo eso se coloca en nuestro encabezado aquí. Y sí, los resultados se muestran en la página de resultados de búsqueda. Así que, vamos a sumergirnos ahora y explorar nuestro formulario de búsqueda. Tenemos nuestro formulario aquí, el componente de formulario y aquí dice que se comporta como un formulario normal, excepto que la interacción con el servidor es con fetch en lugar de nueva solicitud de documento. Y por eso, nuestra página no se recarga cuando enviamos una búsqueda. Pero, ¿quién recuerda cómo se comporta un formulario normal? Parece que yo no lo recordaba porque esto es lo que estaba haciendo. Estaba usando el método post y luego estaba usando una acción en mi archivo raíz aquí. Bien, así que esta acción está aquí y desde allí estaba obteniendo los datos del formulario de la solicitud y redirigiendo a los resultados de búsqueda y pasando la consulta a la URL. Pero, de hecho, lo que estaba haciendo aquí el formulario básico lo hace de forma natural. No necesitamos el método POST porque el formulario POST tiene un método GET por defecto pero necesitamos una acción y esta es la acción que necesitamos para configurar la ruta de resultado de búsqueda y eso es todo lo que necesitamos. Así que sólo con eso nuestro formulario va a procesar en la URL definida en el atributo de acción, y luego adjuntará el valor de nuestro formulario, así que nuestra consulta, a la URL. Así que estaba haciendo algo, estaba complicando demasiado algo que el formulario básico hace de forma natural. Bien, así que continuemos. Luego tengo esta superposición que se abre para tener una mejor UI cuando tenemos una red lenta y muestra una palabra buscando. Así que para eso en mi índice, he definido una superposición abierta y establecido un estado de superposición abierta. Y cuando tengo la superposición abierta, muestro aquí mi palabra buscando. Y aquí estoy usando no en el encabezado, estoy usando el usuario, ¿dónde está? Lo siento, estoy un poco perdido. No, esto está en el formulario de búsqueda, y bien. Vuelvo al formulario de búsqueda. Así que tengo el uso de la navegación

7. Manejo del Estado de Navegación y Extracción de Consultas

Short description:

Si el estado de navegación no se maneja, se abre la superposición, indicando que el formulario está buscando. Cuando el estado de navegación está cargando, el modelo también se cierra. El código se ha actualizado para simplificar el formulario y utilizar los estándares web. El hook useNavigation maneja el estado de navegación, eliminando la necesidad de una gestión de estado adicional. La página de resultados de búsqueda extrae la consulta de la URL utilizando el constructor de URL y utiliza la API de entrega de contenido de Storyblock para filtrar la historia.

hook que inicio allí con useNavigation. Y luego si el estado de navegación no se maneja, abro mi superposición. Significa que mi formulario está buscando. Y si no, cierro la superposición. Y luego cuando el estado de navegación está cargando, también cierro mi modelo. Bueno, veamos cómo funciona en el sitio web. Así que aquí tengo un 3G lento. ¿Vale? Y ahora voy a la consola. Y abro, así que ves el estado de navegación. Escribo remix. Ingreso, vale, y veo que está cargando. Vale, así que tenemos un error aquí, así que creo que he cometido un error con mi acción. De todos modos, lo que quería mostrarles, también es un error porque estaba complicando demasiado las cosas y sentía que algo no estaba bien. Y hace unas semanas, estaba dando esta charla en React Rally en Salt Lake City, y me crucé con Ryan Florence, el creador de Remix, y él me dijo lo que estaba haciendo mal. Así que ahora, voy a mostrarles todo el código correcto, y quería mostrarles eso porque por nuestro instinto de React, estamos complicando demasiado las cosas. Vale, así que vayamos a la rama correcta. Vale, tengo algunos cambios. Vale, así que he hecho un nuevo formulario. Vale, así que aquí tenemos el formulario hecho de la manera correcta. Sabes, si oh, sí, olvidé la S en los resultados de búsqueda. Por eso estaba fallando. Vale, así que acción resultados de búsqueda, y no tenemos método ni nada, solo eso, y aquí solo necesito mi useNavigation, y lo inicio aquí, y luego creo una variable de búsqueda, así que es un conjunto de navegación, y la ubicación de navegación path name es resultado de búsqueda. Significa que mi formulario está buscando. Así que creo un efecto de usuario, y así que sí, si está buscando aquí, muestro mi superposición, y luego en efecto de usuario, si no está buscando, también cierro mi ventana de modelo con la búsqueda. Así que lo que quiero mostrarles es que tenemos que desaprender todas las cosas que queremos poner el estado en todas partes porque de este instinto de react, y no lo necesitamos, porque estamos usando web standards y este useNavigation ya está haciendo todo. Vale, así que ahora estamos en la página de resultados de búsqueda, y vamos a volver a las diapositivas. Necesitamos extraer la consulta de la URL. Así que volvamos a mis diapositivas, vale. Vale, así que para extraer la consulta de la URL, necesitamos extraer la consulta de la URL, y luego para filtrar la historia, para eso utilizaremos la API de entrega de contenido de Storyblock, que es la API REST de Storyblock. Así que para extraer la consulta, utilizamos el constructor de URL para crear un objeto que representa la URL definida por los constructores. Luego este objeto incluye una propiedad de búsqueda, que proporciona utilidad

8. Obtención y Visualización de Historias Filtradas

Short description:

Para obtener nuestras historias, utilizamos la API getStoryblock del SDK de React y las filtramos utilizando el parámetro de consulta de filtro. Buscamos dentro de campos específicos utilizando la operación like y recuperamos todos los campos que contienen nuestra consulta. Al pasar el parámetro de filtro en nuestra solicitud, podemos mostrar las historias filtradas. El uso de estándares web en Remix mejora el rendimiento y la eficiencia de la aplicación, mejorando la experiencia del usuario. Nos adherimos a los estándares web, asegurando que nuestra aplicación sea robusta y a prueba de futuro. Consulta la documentación de Remix y escanea el código QR para tener la oportunidad de ganar una suscripción a Egghead.

métodos para trabajar con la cadena de consulta de la URL. Y ahora necesitamos obtener nuestras historias, las historias en Storyblock son todos los elementos de contenido, por lo que las páginas, la publicación, y para eso utilizamos la API getStoryblock del SDK de React. Así que esto devolverá todas las historias, pero aquí no están filtradas, así que necesitamos filtrarlas, y para eso utilizamos el filtro parámetro de consulta para filtrar la historia por atributos específicos. Así que vamos a buscar dentro del campo del cuerpo para las páginas, el campo del titular y del texto para las páginas, y utilizamos el operación like para comprobar si un atributo personalizado tiene un valor que es similar a nuestra consulta. Y utilizamos un asterisco antes y después, porque queremos recuperar todos los campos que contienen nuestra consulta. Así que entonces por defecto, todo está conectado por el operador end, así que queremos el operador or para eso utilizamos la palabra clave dash dash or. OK, así que este es todo el código de nuestro cargador, así que esto está en la ruta de resultados de búsqueda, y pasamos este parámetro de filtro en nuestra solicitud aquí para recuperar las historias filtradas. Así que esto devolverá todas las historias filtradas. Y ahora sólo necesitamos mostrarlas. Así que para eso, las recuperamos utilizando used other data, que es un remix del hook que obtiene los data de nuestros cargadores. Y luego filtramos nuestras historias por componente para separar las páginas y las publicaciones. Y luego tenemos todos los data para mostrar eso en nuestra página y voila.

Así que, para concluir, hemos visto cómo el uso de web standards en Remix hace que la construcción de una búsqueda global sea muy fácil. Pero no se trata sólo de hacer nuestras vidas como desarrolladores más fáciles, sino también de ofrecer una experiencia de usuario de primera categoría. Así que, con el filtrado del lado del servidor, http y todas estas cosas buenas, estamos haciendo nuestra aplicación más rápida y eficiente. JavaScript está aquí para mejorar la user experience. Y la mejor parte, estamos haciendo todo esto mientras nos adherimos a web standards, asegurando que nuestra aplicación es robusta y a prueba de futuro. Así que es una situación en la que ganan tanto los desarrolladores como los usuarios.

Así que, les invito a que consulten la documentation de Redmix que es realmente buena. Y también, si quieren ganar una suscripción a Egghead, pueden escanear este código QR, ya que Storyblock está organizando un sorteo, así que escaneen el código y llenen el formulario antes del 31 de diciembre. Así que, gracias. Aquí pueden escanear este código QR y obtener todas las diapositivas. Que tengan un buen día y nos vemos. Adiós.

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
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 Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
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
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.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
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.