1. Introducción a Remix y al Desarrollo Web Moderno
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
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
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
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
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
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
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
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.
