La Nueva Frontera: Comercio Electrónico en el Edge

Rate this content
Bookmark

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.

19 min
18 Nov, 2022

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.

Available in English

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.