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!

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Remix es un marco de trabajo que combina técnicas de renderizado del lado del servidor con React, optimizando la escalabilidad y el rendimiento. Está construido sobre estándares web, lo que permite que funcione de manera eficiente en diferentes navegadores y mejora la velocidad de las aplicaciones al manejar datos en el lado del servidor.

Los desafíos principales incluyen la escalabilidad, el rendimiento, la compatibilidad con navegadores, la experiencia de usuario (UI y UX), la experiencia del desarrollador y la seguridad de la aplicación.

Remix mejora la experiencia del usuario al optimizar la carga de datos y manejar las interacciones de forma más eficiente. Para los desarrolladores, simplifica el proceso de desarrollo al utilizar estándares web y proporcionar herramientas que facilitan la gestión del código y la estructura del proyecto.

JavaScript universal se refiere a la capacidad de JavaScript para ejecutarse tanto en el cliente como en el servidor. Esta capacidad ha revolucionado el desarrollo web al permitir aplicaciones más dinámicas y reactivas, y fue impulsada por marcos de JavaScript como React, Vue y Angular.

En Remix, las URLs son fundamentales porque actúan como la columna vertebral de la arquitectura web. Se utilizan para gestionar el enrutamiento y la carga de datos, optimizando la navegación y simplificando el proceso de desarrollo.

La caché HTTP permite almacenar ciertos datos en el navegador para que puedan ser reutilizados sin hacer nuevas solicitudes al servidor. Remix utiliza esta técnica para reducir la carga en el servidor y acelerar las respuestas a los usuarios, mejorando significativamente el rendimiento de las aplicaciones web.

Remix maneja los formularios HTML de manera que después de un envío, actualiza automáticamente los cargadores en la página para reflejar los datos más recientes sin necesidad de recargar la página. Esto proporciona una experiencia de usuario más fluida y eficiente.

Significa que Remix utiliza y respeta las tecnologías y protocolos fundamentales del internet, como HTML, CSS y JavaScript, asegurando así compatibilidad y eficiencia en diferentes entornos y navegadores web.

Alexandra Spalato
Alexandra Spalato
26 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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,

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.
No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 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.
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.
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.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
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
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured 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.