Aquí y allá, la gente habla de "Personalización". Los creadores de contenido, los especialistas en marketing, los diseñadores y los propietarios de productos evalúan las posibilidades y alternativas para manejar escenarios personalizados mientras ofrecen experiencias poderosas a los usuarios. Y nosotros, los desarrolladores, tenemos algunas formas de ayudar con eso. Hablemos sobre la personalización, los beneficios, los desafíos y cómo podemos gestionar y ofrecer experiencias personalizadas en nuestros proyectos de Remix.
This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.
FAQ
Facundo Giuliani es un ingeniero de relaciones con desarrolladores en Storyblock, organizador de React Buenos Aires y Embajador de Auth0, Prisma y Experto en Desarrollo de Medios de Cloudinary.
La personalización en el desarrollo web se refiere a la capacidad de ofrecer contenido y experiencias exclusivas a los usuarios basadas en datos existentes sobre su comportamiento y preferencias.
Ejemplos de personalización web incluyen tiendas en línea que muestran ofertas dirigidas y plataformas como Netflix que muestran contenido popular basado en tu ubicación.
Existen varios tipos de personalización, incluyendo personalización explícita basada en datos proporcionados por los usuarios, personalización implícita basada en comportamiento y compras anteriores, personalización interrumpida con ofertas inesperadas y personalización fluida que integra completamente las recomendaciones en la experiencia del usuario.
El primer paso para implementar una estrategia de personalización es recopilar data de los visitantes, lo cual puede incluir detalles explícitos a través de formularios o información implícita a través del comportamiento en el sitio.
La personalización puede mejorar las ventas en línea al ofrecer a los usuarios experiencias más relevantes y personalizadas, lo que aumenta la probabilidad de que interactúen con productos y servicios que realmente les interesan.
Storyblock es un sistema de gestión de contenido sin cabeza que ofrece un editor visual en tiempo real y un enfoque basado en componentes para ayudar a crear y gestionar contenido de manera eficaz y personalizada.
La charla de hoy trata sobre Remix y Personalización, destacando los beneficios de las experiencias personalizadas en sitios web y aplicaciones web. Se explican diferentes tipos de personalización, junto con los pasos para implementar una estrategia de personalización. Se demuestra el uso de Remix y Storyblock para implementar experiencias personalizadas en un sitio web. Se muestra la estructura de una página con contenido personalizado para diferentes tipos de usuarios, junto con el uso de cookies para identificar los intereses de los usuarios. Se explica la implementación de una estrategia de personalización utilizando componentes de React y la API de Storyblock.
Hoy vamos a hablar sobre Remix y Personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. La personalización web ofrece contenido de manera granular y ofrece experiencias exclusivas en sitios web y aplicaciones web. Ejemplos incluyen tiendas en línea que ofrecen ofertas dirigidas en función del comportamiento del usuario y plataformas de noticias que ofrecen contenido específico según la ubicación del usuario. La personalización mejora las experiencias de los usuarios, genera leads mejor calificados y mejora la afinidad de la marca.
Hola a todos. Mi nombre es Facundo y hoy vamos a hablar sobre Remix y Personalización. Antes que nada, quiero presentarme. Como dije, mi nombre es Facundo, Facundo Giuliani. Soy un ingeniero de relaciones con desarrolladores en Storyblock. También soy uno de los organizadores de React Buenos Aires, la comunidad de React más grande de Argentina. También organizamos encuentros mensuales en persona en Buenos Aires, la ciudad donde vivo. También soy Embajador de Auth0, Embajador de Prisma y Experto en Desarrollo de Medios de Cloudinary.
Pueden encontrarme en Twitter. Mi usuario es Facundo Surdo. ¿Les ha pasado alguna vez que a veces van, bueno, no a veces, sino que van habitualmente al mismo café y los camareros los llaman por su nombre, o ya saben lo que van a pedir, o probablemente van a cervecerías locales y las personas que trabajan en la cervecería les recomiendan nuevas cervezas que están en barril basadas en otras cervezas que han pedido en visitas anteriores? Si eso les ha pasado, entonces en esos escenarios están experimentando lo que llamamos personalización, que es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Probablemente el término data suene un poco técnico. Pero la verdad es que basándonos en cosas que vemos, cosas que podemos aprender sobre las personas, cosas que podemos descubrir sobre ellas, podemos ofrecer estas experiencias exclusivas a ellas y satisfacer sus necesidades. Digamos que hablaremos sobre algunos de los beneficios de la personalización más adelante. Pero como estamos hablando de desarrollo web, vamos a hablar sobre la personalización web, que es esta capacidad de ofrecer contenido de manera granular y ofrecer estas experiencias exclusivas en sitios web y aplicaciones web. Nuevamente, basado en datos existentes, datos que podemos recopilar de los usuarios y las personas que visitan nuestros sitios web.
Algunos ejemplos de personalización web serían tiendas en línea que ofrecen ofertas dirigidas a las personas que están navegando por su sitio web en función de su comportamiento. Para darte un ejemplo, puedes ir a Amazon y verás una sección en la página de inicio de Amazon con sugerencias de artículos que pueden ser interesantes para ti basadas en compras anteriores. O por ejemplo, puedes ir a plataformas de noticias y medios y obtener contenido específico que puede ser interesante para ti basado, por ejemplo, en dónde vives. Un ejemplo de eso sería Netflix, donde obtienes los cinco programas de televisión y películas más populares en tu país. Yo vivo en Argentina y estos son los programas que están de moda en este momento. Como puedes ver, el primero está relacionado con el fútbol. Eso se debe a que el Mundial de fútbol está a punto de comenzar. Pero recibirás estas sugerencias y este contenido específico para ti basado en diferentes detalles que el sitio web, los desarrolladores o los diseñadores de productos pudieron obtener de ti, de tu comportamiento y de tu entorno. Así que hablamos de personalización, por qué queremos personalizar nuestros productos, por qué queremos ofrecer experiencias personalizadas a los usuarios. En primer lugar, queremos que las personas que visitan nuestros sitios web tengan excelentes experiencias de usuario. Si les ofrecemos experiencias personalizadas, las haremos más felices, tendrán un mejor tiempo al usar nuestros productos y visitar nuestros sitios web, por ejemplo. Y eso también nos ayudará desde la perspectiva de las ventas, porque si queremos vender productos, si queremos ofrecer servicios, obtendremos leads mejor calificados, porque las personas que harán clic en nuestras llamadas a la acción o visitarán nuestros catálogos, serán personas que realmente están interesadas en los productos y servicios que ofrecemos, o en los que realmente queremos ofrecerles. Además, como dije, podemos optimizar nuestras páginas de destino y llamadas a la acción en nuestro sitio web, porque las personas que hacen clic en ellas, tenemos una forma de identificarlas y ofrecerles lo que están buscando, o lo que creemos que les resultará interesante. Y finalmente, nos ayudará a nosotros, como marca, a tener una mayor afinidad, porque como marca, estaremos ofreciendo las mejores experiencias a los usuarios y nuestros usuarios nos recomendarán nuestros servicios y productos, y disfrutarán siendo parte de las experiencias que
2. Tipos de Personalización y Pasos para Implementar
Short description:
Tenemos diferentes tipos de experiencias de personalización basadas en cómo mostramos contenido personalizado y recuperamos datos. La personalización explícita utiliza datos proporcionados por los usuarios, como completar un formulario. La personalización implícita utiliza el comportamiento del usuario y compras anteriores. La personalización interrumpida ofrece interacciones u ofertas inesperadas, como notificaciones push. La personalización fluida se integra en la experiencia general del usuario, como recomendaciones de música personalizadas en Spotify. Para implementar una estrategia de personalización, debemos recopilar datos, crear perfiles de clientes, establecer objetivos y planificar e implementar la estrategia.
Ofrecemos. Tenemos diferentes tipos de experiencias de personalización basadas en la forma en que mostramos el contenido personalizado o cómo personalizamos la experiencia de los usuarios, y por otro lado, en la forma en que recuperamos la información o los data que nos ayudarán a ofrecer estas experiencias personalizadas. Por ejemplo, podemos hablar de personalización explícita cuando estas experiencias que ofrecemos se basan en data proporcionados, bueno, explícitamente por los usuarios y visitantes de nuestro sitio web. Para darte un ejemplo, cuando pedimos al usuario que complete un formulario o les preguntamos sobre sus intereses, obtenemos detalles explícitos de sus intereses. Por otro lado, hablamos de personalización implícita cuando obtenemos estos data o estos detalles basados en el comportamiento de los usuarios, compras anteriores, desde dónde están navegando en nuestro sitio, dónde viven, etc. Hablamos de personalización interrumpida cuando estas experiencias que queremos ofrecer a los usuarios, son como algún tipo de interacción u ofertas que no esperan. Para mencionar un ejemplo, un ejemplo de esta personalización interrumpida sería un modal en un sitio web o una notificación push en el teléfono que ofrece, por ejemplo, productos especiales o ofertas basadas en dónde vives o los restaurantes a los que prefieres ir o a los que sueles ir. Y la personalización fluida es la experiencia cuando es parte de toda la aplicación o de toda la visita de tus usuarios cuando realmente están visitando nuestro sitio web o están usando nuestra aplicación. Para mencionar un ejemplo de personalización fluida, sería, por ejemplo, cuando estás usando Spotify y tienes la sección con música recomendada basada en tus intereses o en lo que estuviste escuchando la semana pasada o el mes pasado, por ejemplo. Eso es algo que esperas del producto y esperas que sea personalizado basado en tus intereses. Entonces, digamos que queremos implementar una estrategia de personalización o una experiencia personalizada para nuestros usuarios, tenemos algunos pasos a seguir. El primer paso sería recopilar data de los visitantes. Tenemos diferentes formas de recopilar data. Podemos preguntar explícitamente a los visitantes sobre detalles que nos ayudarán a ofrecerles mejores experiencias. Podemos mapear los recorridos de los clientes, podemos rastrear información con cookies o con correos electrónicos de marketing con parámetros de URL en los enlaces que incluimos en nuestros correos electrónicos. También podemos usar registros de la empresa, es decir, registros que tenemos en nuestra empresa de los diferentes clientes que tenemos o con los que nos hemos contactado en el pasado. El segundo paso será crear perfiles de clientes. Vamos a definir las personas del cliente. Estas personas serán individuos a los que vamos a nombrar, con una edad, descripción e intereses y, por otro lado, eso nos ayudará a identificar cómo personalizar su experiencia. Es decir, cuál será la mejor manera de ofrecerles una experiencia personalizada y personalizada al usar nuestro producto. El tercer paso sería establecer nuestros objetivos. Es decir, lo que queremos obtener de estas experiencias personalizadas. Por ejemplo, podemos querer aumentar nuestras conversiones o reducir nuestra tasa de rebote, o probablemente queremos mejorar nosotros mismos, o queremos aumentar la retención de las personas que hablan sobre nuestro producto o nuestro propio sitio web. Finalmente, necesitamos planificar e implementar esta estrategia que estamos tomando. Necesitamos identificar las áreas involucradas de nuestro producto, y las que vamos a modificar o que estarán involucradas en este proceso, en esta campaña que vamos a crear. Vamos a redactar una campaña para lanzar esta experiencia personalizada. Vamos a priorizar las diferentes campañas que pueden surgir. Por ejemplo, podemos pensar en diferentes ideas sobre cómo personalizar la experiencia de los usuarios. Estas ideas tendrán un impacto diferente. Algunas tendrán un mayor impacto, pero probablemente llevarán más tiempo para implementarse. Entonces, eso es algo que podemos usar para priorizarlas y pensar en cuál sería la mejor estrategia o la mejor campaña
3. Implementando Experiencias Personalizadas
Short description:
Después de implementar una campaña, la probamos y la iteramos para mejorarla. Demostraré cómo implementar experiencias personalizadas en un sitio web utilizando Remix y Storyblock. Al rastrear las preferencias del usuario, podemos cambiar la página de inicio y los banners para ofrecer contenido personalizado. Storyblock es un CMS sin cabeza que proporciona un editor visual en tiempo real y creación de contenido basado en componentes. Utilizaremos Remix y componentes de React para integrar Storyblock en nuestra aplicación.
que podemos implementar en este momento. Y después de implementar una de estas campañas, la probaremos. Mediremos el éxito de la campaña, y luego la iteraremos para ver cómo podemos mejorarla.
Les mostraré una demostración rápida de cómo implementar una experiencia personalizada en un sitio web. Bueno, por supuesto, utilizando Remix porque estamos en la conferencia de Remix. Entonces, lo que quería mostrarles ahora es este sitio web simple donde tengo mi página de inicio. En esta página de inicio, ofrezco contenido genérico y tengo un banner con descuentos de los productos que ofrezco. Como pueden ver en la parte superior de mi página, tengo una barra de herramientas con diferentes enlaces al catálogo, que será el catálogo general de mi sitio web. Y luego tengo la categoría de ropa deportiva y la categoría de ropa elegante. Si visito una de estas categorías, verán que puedo ver los productos de esa categoría en particular. Ropa deportiva, si voy al catálogo general, verán todos los diferentes productos que ofrezco en mi sitio web. Y si voy a ropa elegante, verán solo los productos de la categoría de ropa elegante. Pero lo que estoy haciendo en este sitio web es considerar que la primera categoría que el usuario está visitando, que en mi caso fue ropa deportiva, es mi categoría preferida, es decir, los productos que más me gustan del sitio web. Entonces, lo que vamos a hacer para ofrecer esta experiencia personalizada es cambiar la página de inicio y cambiar el banner que está en la página de inicio. Y ahora, al visitar esta categoría y mostrar interés en la ropa deportiva, el banner que estoy obteniendo, como pueden ver, es diferente y no es el genérico que mostramos antes, es un banner sobre descuentos y ofertas relacionadas específicamente con la ropa deportiva, que es el tipo de producto que prefieren, ¿verdad? Porque ese es el criterio que definimos para los usuarios. Entonces, para este proyecto de demostración simple, he utilizado Storyblock. Storyblock es un sistema de gestión de contenido sin cabeza que te ayudará a crear y gestionar el contenido de tu sitio web. Lo interesante de Storyblock es que tiene dos beneficios principales, digamos, uno es que ofrece un editor visual en tiempo real, por lo que los usuarios y los editores de contenido pueden, bueno, ingresar a este editor visual y tener una vista previa en tiempo real de cómo se verá el contenido antes de que lo publiquen. Y por otro lado, los usuarios pueden interactuar con el contenido que están creando y los componentes que forman parte de este contenido que están creando. Porque Storyblock también ofrece un enfoque de componentes. Podrás crear componentes reutilizables que se llaman bloques. Y estos bloques, los tendrás en diferentes páginas y en diferentes partes de tus páginas y podrás reutilizarlos como entidades de contenido diferentes. Lo interesante de Storyblock, al ser un sistema de gestión de contenido sin cabeza, es que podemos usarlo con cualquier framework, cualquier lenguaje de programación, cualquier lenguaje de programación en particular que prefieras. En nuestro caso, utilizaremos Remix para nuestro ejemplo y todas las diferentes características que Remix nos ofrece . Lo interesante también es que vamos a utilizar componentes de React para vincular a estos componentes de Storyblock. Entonces, tendremos la representación visual de nuestros componentes de Storyblock utilizando componentes de React en el frontend de nuestra aplicación. Entonces, vamos ahora a la demostración. Nuevamente, quiero mostrarles primero el editor visual de Storyblock que mencioné antes. Como pueden ver, tengo la página, es decir, mi página dentro de este editor visual en tiempo real. Tengo la posibilidad de hacer clic en los diferentes componentes o bloques de mi página y tengo la posibilidad de editar estos valores y ver en tiempo real el contenido que estoy creando y editando. Puedo, por ejemplo, como pueden ver, agregar algo de texto aquí y aparece en tiempo real porque este es el
4. Estructura de la Página y Personalización
Short description:
Les mostraré la estructura de mi página, que incluye contenido personalizado para diferentes tipos de usuarios basado en sus intereses. Tenemos variantes para ropa genérica, ropa deportiva y ropa elegante. La página de catálogo muestra productos de categorías específicas y el bloque de tienda contiene todos los productos. Utilizamos cookies para identificar los intereses de los usuarios y mostrar contenido personalizado.
el editor visual en tiempo real de Storyblock. Lo que quería mostrarles es la estructura de mi página. Tengo este bloque o componente de texto enriquecido que muestra un texto genérico, pero por otro lado, tengo este contenido personalizado que es un bloque que contiene otros componentes y tenemos diferentes variantes basadas en el tipo de usuario que queremos identificar y este tipo de usuario se basará en el interés que están mostrando. Tendremos una variante de contenido genérico que tiene el banner con la llamada a la acción para el caso genérico, el usuario que no mostró ningún interés en ninguna categoría en particular. Aquí tenemos el titular, el texto y la imagen que estamos mostrando y el enlace a esa página. Pero también tenemos algunas variantes para la ropa deportiva y la ropa elegante. Entonces, si voy a la ropa deportiva, verán que tengo el tipo de usuario de esta variante y luego tengo la llamada a la acción que es un titular, un texto, una imagen y el enlace a la página de catálogo real para la ropa deportiva con los descuentos que queremos mostrar.
Esta página es la página de inicio donde estamos, bueno, mostrando la lógica, la experiencia de personalización que queremos mostrar realmente a los usuarios. Si voy a la página de catálogo, déjenme salir del editor visual y quería mostrarles nuevamente que en mi ejemplo de personalización, puedo ir al contenido y puedo mostrarles las páginas de catálogo que tenemos aquí. Lo que estamos haciendo en el catálogo, les mostraré la ropa deportiva como ejemplo. Estamos mostrando todos los productos de una categoría en particular. Entonces, esta categoría, quiero decir, la página que estamos mostrando para el catálogo, solo tenemos el cuerpo de esta página y el cuerpo tiene un bloque de tipo catálogo. Este catálogo, lo único que estamos almacenando es la categoría de este catálogo. Luego, en el frontend de nuestra aplicación, estamos implementando la lógica que queremos usar para mostrar solo los productos de esa categoría. Lo mismo sucede con la ropa elegante. En el caso del catálogo general, vamos a mostrar todos los productos de nuestro sitio web. Hablando de los productos, les mostraré que tenemos una carpeta en MySpace en un bloque de tienda con todos los productos que ofrezco. Estos productos, no tienen una representación visual particular, pero si les muestro, por ejemplo, esta chaqueta de nieve, verán que estoy almacenando toda la información relacionada con el producto. Estoy almacenando la imagen, el precio y la categoría, y esta categoría es la que vamos a usar para filtrarlos según el catálogo que el usuario está visitando. Entonces, esta es la estructura de contenido de mi proyecto que tengo en el bloque de tienda, y esto es lo que voy a usar y consumir desde la API del bloque de tienda en mi Remix frontend. Entonces, si voy ahora a mi proyecto de Remix, como pueden ver en el lado izquierdo, tengo la estructura típica de un proyecto de Remix. Tengo dos rutas. Básicamente, una es una ruta genérica en el nivel superior de la carpeta de rutas, y luego tengo una ruta de catálogo para la página de catálogo real. Quiero mostrarles primero la página de catálogo porque aquí es donde ocurre la magia de identificar a los usuarios. Lo que estamos haciendo es obtener una cookie con esta biblioteca de cookies de React que se ha instalado para este propósito. Vamos a ver si el usuario ya tiene un tipo de usuario. Este tipo de usuario identificará el interés del usuario. Si el usuario no visitó ninguna página de catálogo antes, vamos a establecer una nueva cookie basada en la categoría que el usuario está visitando. Si estamos visitando la página de ropa deportiva y el usuario no tiene ninguna cookie de tipo de usuario en su navegador, vamos a establecer eso como el tipo de usuario y vamos a considerar a este usuario como interesado en productos de ropa deportiva. Aquí estamos mostrando realmente el contenido de mi página. Vamos a mostrar el título de la categoría y la lista de productos.
5. Implementación de la Estrategia de Personalización
Short description:
Más adelante les mostraré. No quiero entrar en detalles de los diferentes componentes de React que creé. Lo que quería mostrarles es cómo implementar la estrategia de personalización real. En la función de carga de mi raíz del grupo de catálogo, voy a obtener de la URL la categoría, porque podemos identificar el tipo de catálogo que podemos ver en nuestra URL. Vamos a establecer algunas consultas de filtro para llamar al bloque de tienda, pueden ver que vamos a filtrar productos y los productos que vamos a filtrar y traer a este catálogo se basan en la categoría. Si estamos visitando una categoría en particular, quiero decir, no el catálogo genérico, vamos a filtrar los productos y traer solo los productos de esa categoría. Y ahora que creamos todos estos objetos de consulta de filtro, los vamos a agregar como parámetro a los parámetros que vamos a enviar a la API de Storyblock para recuperar todos los productos del espacio de Storyblock al que estamos conectados y en el que estamos trabajando y que estamos usando para nuestros productos. Como pueden ver, estamos inicializando la conexión con la API de Storyblock y estamos obteniendo todas las historias, que son los elementos de Storyblock, basados en los productos que queremos recuperar y la categoría que queremos mostrar. Y en base a eso, bueno, obtendremos todos los productos de nuestra categoría y el título de la categoría que estamos usando para renderizar la página. La página de inicio genérica, lo siento, la página de inicio.
Basado en lo que viene de la API de registro de servicios. Más adelante les mostraré. No quiero entrar en detalles de los diferentes componentes de React que creé. Lo que quería mostrarles es cómo implementar la estrategia de personalización real. En la función de carga de mi raíz del grupo de catálogo, voy a obtener de la URL la categoría, porque podemos identificar el tipo de catálogo que podemos ver en nuestra URL. Vamos a establecer algunas consultas de filtro para llamar al bloque de tienda, pueden ver que vamos a filtrar productos y los productos que vamos a filtrar y traer a este catálogo se basan en la categoría. Si estamos visitando una categoría en particular, quiero decir, no el catálogo genérico, vamos a filtrar los productos y traer solo los productos de esa categoría. Y ahora que creamos todos estos objetos de consulta de filtro, los vamos a agregar como parámetro a los parámetros que vamos a enviar a la API de Storyblock para recuperar todos los productos del espacio de Storyblock al que estamos conectados y en el que estamos trabajando y que estamos usando para nuestros productos. Como pueden ver, estamos inicializando la conexión con la API de Storyblock y estamos obteniendo todas las historias, que son los elementos de Storyblock, basados en los productos que queremos recuperar y la categoría que queremos mostrar. Y en base a eso, bueno, obtendremos todos los productos de nuestra categoría y el título de la categoría que estamos usando para renderizar la página. La página de inicio genérica, lo siento, la página de inicio. Para la página de inicio, estamos usando esta otra ruta. Como pueden ver, estamos cargando los datos. Estamos mostrando la historia, que es la página que queremos mostrar y la información que viene relacionada con ese elemento de Storyblock. Estamos usando este componente de Storyblock, que es un componente genérico de React que nos ayudará a renderizar todo el contenido de nuestra página basado en los bloques y componentes que estamos agregando en Storyblock. Vamos a renderizar la página y vamos a ofrecer a los editores de contenido la posibilidad de editar los diferentes componentes que forman parte de la página. Luego, en nuestras funciones de carga, vamos a llamar a la API de Storyblock para obtener la página que estamos visitando. Probablemente en este ejemplo, como es muy simple, solo mostraremos la página de inicio con esta ruta y siguiendo esta lógica, pero en el caso de que tengamos más páginas en el nivel superior de nuestro sitio web, esta misma ruta renderizará cualquier página sin importar el contenido que estemos mostrando en esa página, sin importar los bloques o los componentes que tengamos en ellos, porque estamos usando este componente dinámico de Store Block para renderizar la propia página y estamos utilizando la misma lógica de renderizado para todas las páginas de nuestro sitio web que estamos gestionando en Store Block. Por último, quería mostrarles este componente de React llamado contenido personalizado que está vinculado al bloque de contenido personalizado que tenemos aquí en Store Block y que tiene las diferentes variantes. Cuando estamos renderizando este contenido personalizado, quiero decir, cuando estamos renderizando un componente de tipo contenido personalizado, vamos a identificar el tipo de usuario a partir de la cookie utilizando la misma biblioteca UseCookie de React que instalé y luego con ese usuario vamos a mostrar solo el banner que queremos mostrar para ese tipo de usuario. Entonces, si no tenemos la cookie o la cookie es un catálogo genérico, vamos a mostrar el banner genérico. Si tenemos la categoría identificada y creamos la cookie previamente, vamos a mostrar uno de los otros banners que tenemos aquí basado en la categoría del usuario que identificamos. Este ejemplo simple es lo que quería mostrarles sobre cómo ofrecer una experiencia personalizada a nuestros usuarios. Seguí los pasos, quiero decir, recopilé los datos de los visitantes, que consistía en ver qué páginas están visitando, qué catálogo están visitando. Creamos el perfil del cliente, en este caso sería Facundo, que está interesado en ropa deportiva y camisetas de fútbol, digamos. Establecimos nuestros objetivos, lo que queremos hacer es ofrecer promociones y descuentos a Facundo para que compre más camisetas de fútbol y otras prendas deportivas y luego preparamos la estrategia, que consistía en mostrar el banner en la página de inicio para que cada vez que Facundo visite nuestro sitio web, vea estas ofertas y descuentos en ropa deportiva y vaya directamente al catálogo de ropa deportiva. Así que muchas gracias, espero que hayan aprendido algo nuevo y no duden en contactarme en Twitter para hablar sobre personalización y otros temas, y nuevamente muchas gracias.
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.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.
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
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello? Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog. Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente. Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
Comments