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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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
Top Content
Featured WorkshopFree
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.
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.
Comments