De la Arquitectura a la Adopción: Ingeniería y Escalado de un LMS Moderno con React

Bookmark
Rate this content

En JavaScript Mastery, hemos construido una plataforma de aprendizaje escalable para servir a millones de desarrolladores en todo el mundo, y el proceso vino con sus propios desafíos y lecciones únicas. Las plataformas de aprendizaje tradicionales sufren de estructuras rígidas, baja retención y cuellos de botella en la escalabilidad, por lo que nos propusimos crear un sistema flexible y de alto rendimiento que pudiera crecer con nuestra audiencia.

En esta charla, desglosaré cómo diseñamos un sistema de contenido dinámico basado en MDX con React, permitiendo la integración perfecta de videos, codificación interactiva y cuestionarios impulsados por IA.

Profundizaré en:

  • React Server Components y renderizado en streaming para un aumento del 40% en el rendimiento
  • Estrategias de SEO impulsadas por Next.js que triplicaron el tráfico orgánico
  • Técnicas de compromiso basadas en datos que mejoraron significativamente la retención
  • Lecciones de escalado al servir a una audiencia global de desarrolladores

Este es un estudio de caso del mundo real sobre las decisiones de ingeniería, desafíos y optimizaciones que llevaron nuestra plataforma de una idea a un ecosistema de aprendizaje ampliamente adoptado. Ya sea que estés escalando un LMS o cualquier aplicación impulsada por contenido, estos conocimientos te ayudarán a construir, optimizar y hacer crecer tus propias plataformas de manera efectiva."

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

Adrian Hajdin
Adrian Hajdin
28 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador destaca los desafíos en las plataformas de aprendizaje en línea y la necesidad de una plataforma centrada en los desarrolladores. Se comparten ideas sobre la construcción de una plataforma especializada con estudios de caso del mundo real. Se discute MDX para crear contenido flexible y organizar piezas de contenido en módulos reutilizables. La arquitectura de la plataforma involucra un monorepo con TurboRepo gestionando un conjunto de tecnologías. Se enfatizan estrategias para mejorar el compromiso del usuario, la retención de usuarios a través de rachas, y puntos clave como arquitectura escalable, renderizado estratégico y desarrollo enfocado en el usuario. Se mencionan técnicas de optimización de rendimiento como React Server Components y optimización de activos con WebP. También se cubren estrategias para el seguimiento de métricas conscientes de la privacidad, métricas de aprendizaje del usuario y evitar el renderizado del lado del servidor para un mejor rendimiento.
Video transcription and chapters available for users with access.

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

Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
25 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
Construyendo una Aplicación Web: El Camino Fácil y el Camino de Alto Rendimiento. ¿Por qué no son lo mismo?
JSNation 2023JSNation 2023
31 min
Construyendo una Aplicación Web: El Camino Fácil y el Camino de Alto Rendimiento. ¿Por qué no son lo mismo?
Misko Havry introduces himself and discusses the impact of JavaScript on performance. The concepts of reconciliation, hydration, and resumability are explored, along with the importance of clean code and compiler optimization. The Talk includes demos of application components and showcases the power of code extraction. The QUIC framework is highlighted for its ability to optimize code loading and prioritize interactions. The service worker is used to selectively download components for improved performance. SEO and debugging in QUIC are also discussed, along with comparisons to other frameworks.
Una Saga de Problemas de Renderizado Web
Vue.js London 2023Vue.js London 2023
28 min
Una Saga de Problemas de Renderizado Web
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.
Potenciando Tu Experiencia de Desarrollo Con Turborepo
React Day Berlin 2022React Day Berlin 2022
26 min
Potenciando Tu Experiencia de Desarrollo Con Turborepo
Top Content
This Talk explores the benefits of using TuberApple, a tool for supercharging the development experience. It highlights the advantages of monorepos, such as code reuse, shared standards, improved team collaboration, and atomic changes. TuberApple, specifically Tuburepo, offers efficient task execution through caching and optimized scheduling. It simplifies monorepo development by allowing parallel execution of tasks and seamless coordination of changes. Tubo, another tool within TuberApple, enables smart task execution, declaring task dependencies, and efficient caching in monorepos.
Manejo de datos a gran escala para desarrolladores de React
React Summit 2022React Summit 2022
23 min
Manejo de datos a gran escala para desarrolladores de React
This Talk discusses handling data at scale for React developers, including scaling databases and the need for search. It explores different ways to fetch data in React, such as using useEffect, fetch, and setState. The Talk also introduces Suspense for data fetching and how it improves user experience. It covers controlling React Suspense, handling search, and using render-as-you-fetch. The Talk concludes with a discussion on the RFC status and fetching in event handlers.
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
React Summit 2023React Summit 2023
20 min
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.

Workshops on related topic

React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación.
Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes
Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.