La Nueva Frontera: Comercio Electrónico en el Edge

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

En esta charla exploraré la evolución de la infraestructura de comercio electrónico desde los servidores tradicionales co-ubicados hasta la nueva frontera de la computación sin servidor y en el edge, y cómo se integran las herramientas modernas de desarrollo como Remix y Vendure.

This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

El comercio electrónico headless se refiere a una arquitectura de aplicación donde la interfaz de usuario está completamente separada del backend. En lugar de servir HTML desde el servidor, se sirve JSON a través de una API, como REST o GraphQL, y el cliente es responsable de renderizar esos datos en HTML, usualmente usando un framework basado en JavaScript.

Una arquitectura headless permite servir a múltiples clientes a través de la misma API, facilita la actualización de la interfaz de usuario sin afectar el backend y mejora la flexibilidad para usar cualquier tecnología en el desarrollo del frontend, lo cual puede mejorar significativamente la experiencia del usuario y la eficiencia del desarrollo.

La computación en el edge implica realizar procesos computacionales en el borde de una red, cerca de la ubicación de los usuarios. Esto reduce la latencia al procesar y entregar contenido, permitiendo respuestas más rápidas y una mejor experiencia de usuario en aplicaciones web y móviles.

El comercio electrónico puede beneficiarse de la computación en el edge al reducir la latencia y mejorar la velocidad de carga de las páginas. Esto se logra mediante el almacenamiento en caché de contenido y la ejecución de procesos en servidores más cercanos a los usuarios, lo que resulta en una mejora significativa en el rendimiento y la satisfacción del cliente.

Venger es un framework de comercio electrónico basado en Node.js y TypeScript que permite a los desarrolladores crear aplicaciones de comercio electrónico personalizadas. Es headless, lo que significa que expone su funcionalidad a través de APIs de GraphQL, permitiendo una mayor flexibilidad y personalización en el diseño de la interfaz de usuario.

Remix es un framework que puede ejecutarse en cualquier entorno de ejecución de JavaScript y es particularmente útil para renderizado en el lado del servidor (SSR). Al utilizar Remix en el edge, es posible renderizar páginas web directamente en la ubicación física más cercana a los usuarios, lo que disminuye la latencia y mejora la velocidad de carga de la página.

La arquitectura headless permite una separación entre el contenido y la forma en que se presenta, lo que ofrece a los comerciantes una flexibilidad sin precedentes para utilizar cualquier sistema de gestión de contenido (CMS) como WordPress de manera headless para gestionar el contenido y servirlo a través de APIs a cualquier cliente o dispositivo.

Michael Bromley
Michael Bromley
19 min
18 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy discute la nueva frontera del comercio electrónico en el edge, centrándose en el comercio sin cabeza y los beneficios que ofrece. El edge, un servidor intermedio, puede mejorar la carga del sitio web al renderizar HTML en el servidor y reducir la latencia. Venger, un framework de comercio electrónico sin cabeza de código abierto, se presenta como una solución para almacenar en caché las respuestas de la API en el edge y mejorar el rendimiento. La tienda en línea de Venger demuestra un rendimiento excelente, resaltando los beneficios del comercio sin cabeza y la computación en el edge en el comercio electrónico.

1. Introducción a E-commerce en el Edge

Short description:

Hoy quiero hablar sobre la nueva frontera, el comercio electrónico en el edge. Hay dos tendencias principales: headless y el edge. El comercio headless es una palabra de moda que se refiere a servir JSON a través de una API JSON en lugar de servir HTML. Implica eliminar la cabecera de una arquitectura monolítica. Permíteme explicarlo más detalladamente.

¡Hola! Mi nombre es Michael y hoy quiero hablarles sobre la nueva frontera, el comercio electrónico en el edge. He estado construyendo aplicaciones de comercio electrónico durante más de 15 años, desde el antiguo PHP 5.4 hasta ahora Node.js TypeScript y herramientas más modernas, y eso es de lo que quiero hablar hoy. Quiero contarles sobre el futuro del comercio electrónico que consta de dos tendencias principales que quiero cubrir hoy, una es headless y la segunda es el edge. Veamos qué quiero decir con esto.

Primero, headless. Aquí hay un gráfico de tendencias de Google para el comercio headless. Como pueden ver, cada vez más personas lo están buscando, hay mucho interés allí. Pero, ¿qué significa? Busquémoslo en Google y averigüémoslo. Cuando lo buscamos, veremos que la primera página está llena de anuncios. Si seguimos bajando y tratamos de averiguar qué significa en realidad, encontraremos, uno tras otro, publicaciones de blog de marketing de contenido. ¿Qué podemos deducir de esto? ¿Qué podemos deducir de esto? Es una palabra de moda, eso es lo que podemos deducir. Y si tratamos de leer esto y averiguar qué significa, nos perderemos en el argot y las palabras clave. Saltemos eso y les mostraré un diagrama para simplificarlo.

Queremos construir una aplicación de comercio electrónico basada en la web, una tienda en línea. ¿Qué necesitamos? Necesitamos un servidor. Vale, necesitamos una base de datos para almacenar nuestros productos, clientes y datos de pedidos. Necesitamos algo de lógica empresarial. Esto es lo que tomará esos datos, los colocará en algunas plantillas, aplicará cierta lógica empresarial y producirá el sitio web y toda su funcionalidad. Probablemente tengamos algunos servicios en la nube, alguna capa de caché, tal vez algunas API de terceros a las que llamar pero al final de todo eso, vamos a servir a nuestros clientes un poco de HTML. Ese producto data de la base de datos se ha colocado en una plantilla y el servidor está devolviendo HTML. Esto es lo que se conoce como una arquitectura monolítica, una arquitectura tradicional para una aplicación web. Ha existido durante mucho tiempo y seguirá existiendo durante mucho tiempo. Esto es bueno, pero no estamos hablando de eso ahora. Estamos hablando de headless. Headless es diferente. ¿Cómo pasamos de monolítico a headless? Bueno, es simple. Solo tenemos que quitar la cabecera así. Ahora, ¿qué está sucediendo? Ya no estamos sirviendo HTML desde el servidor. En su lugar, estamos sirviendo JSON a través de una API JSON. Eso podría ser una API REST o una API GraphQL.

2. Headless Commerce and its Impact

Short description:

El cliente toma los datos y los convierte en HTML utilizando un framework basado en JavaScript. Este enfoque, conocido como comercio headless, ha ganado popularidad en la gestión de contenido y en el espacio del comercio electrónico. Ejemplos incluyen el uso de WordPress como un CMS headless, así como ofertas headless puras como Commerce Tools y Venger. Incluso sistemas monolíticos tradicionales como Shopify están adoptando el comercio headless, lo que indica que es una tendencia que dará forma al futuro del comercio electrónico.

El cliente es responsable de tomar esos data y convertirlos en HTML. Normalmente, eso sería un framework basado en JavaScript. Tomaríamos el JSON y lo colocaríamos en una plantilla. Esto no es algo nuevo. Lo hemos estado haciendo durante mucho tiempo. Solíamos llamarlo cosas como AJAX. Ahora se le llama Headless. Pero eso es todo lo que necesitas saber. Estoy seguro de que ya lo has hecho. Si has estado construyendo aplicaciones de una sola página, probablemente ya lo hayas estado utilizando. Nada nuevo. Pero eso es a lo que nos referimos cuando hablamos de headless. El comercio headless es esto aplicado a una aplicación de e-commerce. Veamos algunos ejemplos. Entonces, Headless realmente se hizo popular en el espacio de la gestión de contenido, en primer lugar. Probablemente hayas oído hablar de algunos de estos servicios y proyectos. WordPress es uno interesante. Este es como el antiguo sistema CMS monolítico original, el abuelo. Pero está aquí porque puedes usarlo como un CMS headless. Tiene una API REST y una API GraphQL. Entonces puedes usarlo así. En el espacio del comercio, hay muchos productos de software como servicio y productos de código abierto que puedes usar para construir de esta manera. Nuevamente, tienes ofertas headless puras como Commerce Tools y Venger. Y luego tienes empresas como Shopify, que es un sistema monolítico tradicional, pero que recientemente ha apostado muy fuerte por Headless. Y esto es fantástico. Probablemente hayas oído hablar del proyecto Hydrogen y probablemente también hayas oído que adquirieron Remix también. Esto muestra que un jugador importante como Shopify está apostando fuerte por el espacio del e-commerce. Y esto es una muy buena señal. Y esto es una señal de que esta es una tendencia que realmente está aquí para quedarse y que impulsará el futuro del e-commerce.

3. Benefits of Headless Commerce

Short description:

El comercio headless ofrece numerosos beneficios. Permite servir a múltiples clientes a través de la misma API, permite el uso de cualquier tecnología para el desarrollo del front-end y brinda libertad para elegir herramientas y plataformas. Con una arquitectura headless, los desarrolladores ya no están limitados por opciones de herramientas obsoletas y pueden aprovechar el innovador ecosistema de JavaScript.

Entonces, hemos aprendido qué es Headless, pero ¿por qué a la gente le interesa? ¿Por qué es tan importante? ¿Por qué es el futuro? Veamos algunos de los beneficios. En primer lugar, vemos que es bastante fácil ahora que hemos separado el cliente del servidor. Ahora podemos servir a múltiples clientes a través de la misma API, una aplicación móvil, tal vez un sistema de punto de venta en la tienda e incluso un refrigerador conectado a Internet donde puedes pedir tus comestibles a través de la misma API.

Y ahora que hemos desacoplado la interfaz de usuario, significa que ya no estamos limitados por los sistemas de plantillas impuestos por un sistema monolítico, ya sea las plantillas de Magento que ves aquí o el sistema de plantillas estilo WordPress que se utiliza en WooCommerce o las plantillas líquidas utilizadas por Shopify. Una interfaz de usuario desacoplada significa que podemos utilizar absolutamente cualquier tecnología que queramos para construir nuestros front-ends. Y este es un punto clave porque en el e-commerce, no es raro que el servidor de la plataforma en sí tenga una vida útil muy larga. Es una gran inversión y durará cinco años, diez años, incluso más. Al desacoplar la interfaz de usuario, significa que ya no estamos limitados por la tecnología en la que se construye la plataforma de backend. Podemos construir el front-end con lo que queramos. Por ejemplo, Remix. Y eso nos lleva a las tooling. Tomemos como ejemplo Magento. Esta es una plataforma de comercio de código abierto muy grande. La última versión importante salió hace algunos años, tal vez hace unos siete años. Y en ese momento, tuvieron que elegir en qué construirían esa capa de interfaz de usuario. Entonces, las herramientas que estaban disponibles en ese momento se veían así. Y eligieron algunas de estas. Como Knockout, RequireJS. Y esa fue una buena elección en ese momento. Ahora, si fueras a comenzar un nuevo proyecto y alguien dijera elige la herramienta que quieras, es posible que no elijas estas. Yo personalmente no elegiría esas. Elegiría algo más como las que están en este lado. Y el punto clave aquí es que con una arquitectura headless, eres libre de hacerlo. No estás limitado por las opciones de tooling que se tuvieron que tomar hace una década. Puedes usar lo que tenga sentido ahora. Y eso es algo enorme en términos no solo de productividad del desarrollador, felicidad del desarrollador, sino también en los resultados que puedes obtener en términos de las experiencias que puedes crear para tus clientes. Y esto también resalta una fortaleza, una fortaleza masiva de el ecosistema de JavaScript node, esta increíble innovación, este ritmo de innovación. Algunas personas lo llaman fatiga de JavaScript. Pero en el lado positivo, tenemos una increíble variedad de herramientas que podemos usar, y hay una innovación continua. Y la innovación no solo está en los frameworks y

4. Explaining the Edge

Short description:

El edge es un servidor ubicado en el borde de una red. En nuestro caso, es un servidor intermedio al que los usuarios acceden para utilizar nuestra aplicación de comercio electrónico. Esta configuración reduce la latencia de la red y mejora la experiencia del usuario. Por ejemplo, un posible cliente en Sídney enviaría un paquete a nuestro servidor en Europa central, lo que resultaría en una latencia significativa. Al utilizar el edge, podemos renderizar HTML en el servidor y enviarlo de vuelta al cliente, reduciendo el tiempo de espera y mejorando el rendimiento.

herramientas de construcción, pero también en las plataformas reales en las que podemos ejecutar nuestro código. Eso me lleva al siguiente punto que quiero abordar. El edge. Entonces, ¿qué es el edge? Bueno, para explicar este extraño nuevo concepto, tengo un invitado especial, el Edge. Lo siento, tenía que hacer una broma de papá en algún lugar. Este es el Edge, el guitarrista de YouTube. Él va a ayudar a explicar qué es el edge. Entonces, ¿qué es? Bueno, él dice que un servidor edge es un servidor ubicado en el borde de una red.

¿Qué queremos decir con el borde de una red? Bueno, en el centro de esta red, tenemos una región de nube, EU central uno. Ahí es donde alojamos nuestra aplicación de comercio electrónico. Tenemos usuarios de todo el mundo que quieren usarla. Y observa que no están accediendo directamente a la nube. Están pasando por un servidor intermedio que está cerca de ellos. Estos servidores son a los que nos referimos como el edge o servidores edge. Hagamos esto más concreto. Aquí está nuestra aplicación de nodo ejecutándose en Europa central. Aquí se ejecuta nuestra aplicación de remix, por supuesto, y estamos utilizando un backend de comercio headless. Y tenemos un posible cliente aquí en Sídney. Él ingresa la URL de nuestro sitio web en su navegador. Su navegador enviará un paquete hasta nuestro servidor en Europa central, y eso está a 16,000 kilómetros de distancia. Solo la latencia de la red para que ese paquete llegue será de más de 260 milisegundos. Una vez que llega al servidor, vamos a renderizar HTML. Este es un punto clave. Estamos hablando de comercio electrónico. Vamos a hacer renderizado en el servidor, ¿de acuerdo? El SEO es el rey, así que definitivamente vamos a hacer renderizado en el servidor, por lo que hay trabajo que hacer allí. Una vez que se ha renderizado el HTML, tenemos que enviarlo de vuelta, todo el camino de vuelta a Sídney. Nuevamente, latencia de 16,000 kilómetros, por lo que justo antes de que llegue el primer byte, nuestro cliente estará esperando un segundo, dos segundos. ¿Quién sabe? ¿Cómo se verá esto desde su punto de vista? Bien, él ingresa la URL. El paquete viaja 16,000 kilómetros. El HTML se está renderizando.

5. Mejorando la carga del sitio web con el renderizado en el edge

Short description:

La experiencia de carga del sitio web se puede mejorar utilizando CDNs, que almacenan activos estáticos en servidores edge. Sin embargo, obtener el archivo HTML del servidor de origen todavía introduce latencia. Para resolver esto, podemos renderizar la página en el edge utilizando Remix Edge SSR. Remix es compatible con varios entornos de ejecución de JavaScript y puede ejecutarse en plataformas como CloudFlare Workers. Al renderizar el HTML en el edge, podemos reducir significativamente la latencia. Sin embargo, todavía hay un problema.

De acuerdo, el primer byte ha regresado. Tenemos algo de HTML. Eso es bueno. Ahora, el HTML está obteniendo algunos JavaScript, tal vez algunos activos. Está haciendo algunas solicitudes adicionales para obtener datos que no pudo servir en el renderizado, como datos específicos de la sesión. Ah, okay. El carrito de compras acaba de cargarse. Algunas solicitudes más en segundo plano. Mucha latencia en cada solicitud. Finalmente, aparece la imagen. El sitio web se ha cargado. No es una gran experiencia. ¿Cómo podemos mejorar esto?

Algo que hemos estado haciendo durante mucho tiempo es utilizar CDNs, Redes de Entrega de Contenido. Esto es en realidad una forma de computación en el edge. Almacena activos estáticos, como imágenes, archivos JavaScript, archivos CSS, en un servidor edge, por ejemplo, justo allí en Sídney. Cuando esos activos se requieren en el futuro, se obtienen localmente. En lugar de una latencia de 500 milisegundos, hay una latencia de 10 milisegundos. Eso resuelve parte del problema. Pero todavía tenemos que ir hasta el servidor de origen para obtener el archivo HTML y saber qué recursos debemos cargar posteriormente.

¿Cómo podemos resolver esto? Bueno, ¿qué tal si pudiéramos hacer el renderizado no solo en nuestro servidor de origen en Europa central, qué tal si pudiéramos renderizar justo allí en el edge como si hubiéramos dispersado nuestro servidor de nodo por todo el mundo? Eso sería genial. Eso es lo que podemos hacer ahora. Además de nuestro CDN estático, también podemos renderizar nuestra página justo allí en el edge con algo como el renderizado del lado del servidor de Remix Edge SSR. Una cosa realmente genial de Remix es que puede ejecutarse en cualquier entorno de ejecución de JavaScript. Todos conocemos Node.js, pero hay otros entornos de ejecución de JavaScript. Está Deno, está CloudFlare Workers, probablemente hay otros y probablemente habrá más en el futuro. Remix es muy inteligente. Abstrajo esa parte en adaptadores para que pueda ejecutarse en cualquier plataforma de JavaScript. En este caso, podríamos estar ejecutándolo en un CloudFlare Worker, por ejemplo, CloudFlare Pages, y Remix puede hacer el renderizado justo allí. Entonces, el HTML se genera allí en Sídney, a 10 milisegundos de distancia.

6. Edge Computing y Demo de Venger

Short description:

Para reducir la latencia en la obtención de datos de productos para nuestro sitio web, podemos almacenar en caché las respuestas de la API en el edge. Este enfoque revolucionario mejora el rendimiento, la disponibilidad global y reduce la carga en los servidores de origen. Permítanme presentarles a Venger, un marco de comercio electrónico sin cabeza de código abierto construido en Node.js y TypeScript. Ofrece APIs de GraphQL, admite varios idiomas y monedas, y cuenta con una comunidad en crecimiento. Puedes comenzar con Venger en solo un comando y estar en funcionamiento en cinco minutos.

Sin embargo, todavía hay un problema. Para obtener los data del producto para poner en nuestra página, todavía tenemos que hacer una llamada a nuestro servidor headless en Europa central. Todavía vamos a incurrir en latencia. Pero la computación en el edge también puede ayudar con eso, porque podemos almacenar en caché nuestras respuestas de la API en el edge. Entonces, ese producto ya ha sido solicitado en el pasado. La respuesta se ha almacenado en caché justo allí en Sídney. Así que, ahora vamos a verlo. Cuando él quiere visitar nuestro sitio web, hace una solicitud. El servidor Edge puede comenzar a renderizar la página con Remix. Cuando necesita data, lo obtiene del Edge en una caché de API. Lo devuelve al cliente, y todos los recursos necesarios para que esa página web se renderice por completo están ahí mismo en un CDN también. Entonces, todo lo que necesita está ahí mismo en Sídney. En lugar de una latencia de 500 o 1,000 milisegundos, hay 10 o 50 milisegundos. Mucho mejor.

Entonces, por eso lo llamo la nueva frontera. Es realmente una revolución en la forma en que podemos servir aplicaciones y aumentar el rendimiento, aumentar la disponibilidad global y disminuir la carga que realmente tenemos que servir en nuestros servidores de origen. Entonces, esta nueva frontera, como dije, consiste en una arquitectura sin cabeza y computación en el edge. Ahora, ¿cómo se ve esto en la práctica? Tengo una demostración para ustedes. Permítanme presentarles a Venger. Venger es un proyecto de código abierto en el que he estado trabajando durante los últimos cuatro años. Es un marco de comercio electrónico. Permite a los desarrolladores construir aplicaciones de comercio electrónico personalizadas. Está construido en Node.js utilizando TypeScript, y es sin cabeza. Expone su funcionalidad a través de APIs de GraphQL. No solo eso, es altamente extensible. Puedes construir prácticamente cualquier cosa en él. Admite varios idiomas, varias monedas y tiene una comunidad activa y en crecimiento. Es utilizado por muchas empresas, desde Fortune 500 hasta startups Unicornio, startups respaldadas por Y Combinator, cadenas nacionales de supermercados y todo lo demás. Si quieres probarlo, puedes comenzar con un solo comando, npx at Venger slash create myshop. Admite SQLite, por lo que no necesitas tener una base de datos ejecutándose localmente, literalmente puedes estar en funcionamiento en cinco minutos. Pruébalo después de esta charla o después de este día de conferencia.

7. Venger Online Shop Performance

Short description:

Hoy quiero mostrarte una tienda en línea respaldada por Venger y construida con Remix. Funciona en CloudFlare pages, una plataforma de computación en el edge, y la API está en caché por Stellate, un servicio de caché de API que utiliza la red edge de Fastly. Hagamos un recorrido rápido por el sitio web en remix-storefront.venger.io. Se ejecuta rápidamente, con características como filtrado, agregar al carrito, modificar el carrito y buscar. Pero, ¿qué tan rápido es? Usemos Page Speed Insights para medir su rendimiento. Los resultados muestran muchos círculos verdes y altas puntuaciones, tanto en dispositivos móviles como en escritorio.

Esto es lo que quiero mostrarte hoy. Es una tienda en línea respaldada por Venger. Está construida, por supuesto, con Remix. Funciona en CloudFlare pages, que es una plataforma de computación en el edge. Y la API está en caché por Stellate, que es un servicio de caché de API que utiliza la red edge de Fastly para almacenar en caché las respuestas de la API. Así que tenemos todo en la mezcla de lo que he hablado. Así que esto debería ser bueno. Echemos un vistazo. Aquí está el sitio web. Está disponible en remix-storefront.venger.io. Te llevaré en un recorrido muy rápido. Aquí está la página de inicio. Podemos profundizar, ver estas categorías, cámara, foto, echar un vistazo a esto. Y como puedes ver, se ejecuta bastante rápido. Podemos filtrar, agregar al carrito, podemos ver el carrito. Modificarlo. Todo esto está sucediendo contra una API real. Podemos buscar.

Entonces, eso es lo que es usarlo. Estoy seguro de que estarás de acuerdo en que es bastante rápido. Pero, ¿qué tan rápido exactamente? ¿Podemos tener una medida objetiva de ello? Echemos un vistazo a Page Speed Insights. Y vamos a tomar esta página de detalle del producto y colocarla allí. Y ahora, se ejecutará un análisis. Y lo que esperamos ver, por supuesto, son muchos círculos verdes con números grandes acercándose a 100, con suerte. Veamos qué nos da. En primer lugar, veremos los resultados en dispositivos móviles. Bien. Muchos círculos verdes. Y casi 100 en todos ellos. Si pasamos a la versión de escritorio, bien, esto se ve realmente bien.

8. Benefits of Headless and Edge Computing

Short description:

Hemos logrado un excelente rendimiento en casi todos los aspectos, con la excepción de la accesibilidad que requiere algunas mejoras. El sitio web es increíblemente rápido, como lo demuestran los tiempos de respuesta desde diferentes ubicaciones alrededor del mundo. Los resultados claramente demuestran los beneficios de la computación sin cabeza y en el edge. Esto concluye la demostración y ahora volveremos a las diapositivas para resumir el futuro del comercio electrónico.

Tenemos prácticamente 100 en todo. Accessibility necesita un pequeño ajuste. Y estos números aquí son ridículamente buenos. Así que es rápido. Es objetivamente muy rápido.

Veamos si podemos obtener una medida de los beneficios que la computación en el edge está aportando en esta situación. Nuestro servidor de origen en este caso está en Europa. Estoy en Austria. Así que no estamos viendo realmente las capacidades completas del edge. Pero veamos si podemos ver este sitio web desde diferentes ubicaciones alrededor del mundo. Aquí hay una página que encontré que nos permite hacer esto. Así que hará una solicitud a este sitio web desde Singapur, Brasil, Virginia, California, Irlanda, Australia. Y veamos cuáles son los resultados. Así que todos llegan. Mira estos. Seis milisegundos. 14 milisegundos desde Brasil, Virginia, un milisegundo, Australia, 14 milisegundos, California, dos milisegundos.

No puedo pensar en una mejor ilustración de todo este concepto de headless y edge que esto. Los resultados hablan por sí mismos. Voy a callarme ahora. Ese es el final de la demostración. Volvamos a las diapositivas. Para resumir, hemos hablado sobre el futuro del comercio electrónico siendo headless, computación en el edge construida sobre Venger utilizando Remix. Gracias por su atención.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
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.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.

Workshops on related topic

Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
Workshop
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
Workshop
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.