Realizar transmisiones en vivo desde tu navegador sin WebRTC

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

Cuando los desarrolladores piensan en transmitir en vivo desde el navegador, la suposición inmediata es utilizar WebRTC. Si bien WebRTC es una tecnología increíble, las implementaciones del lado del servidor son... deficientes en este momento. Hablaremos sobre una forma (totalmente chapucera) de obtener video desde el navegador a través de la tecnología que estás utilizando hoy.

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

FAQ

Mux es una empresa cofundada por Matthew McClure que proporciona una API para la infraestructura de video en línea, ofreciendo soluciones como transmisión en vivo. Permite a los usuarios crear transmisiones en vivo y recibir una clave de transmisión para enviar feeds RTMP.

El chat en vivo involucra a dos o más personas hablando directamente entre sí, potencialmente compartiendo video de manera peer-to-peer, y requiere baja latencia. La transmisión en vivo, en cambio, es desde una fuente de cámara hacia un público amplio, no necesita interacción en tiempo real y puede tolerar latencias más altas.

Transmitir en vivo desde un navegador es complicado porque los navegadores no permiten un acceso lo suficientemente bajo al nivel de red para usar protocolos como RTMP sin involucrar un servidor.

Una posible implementación involucra utilizar WebRTC para capturar medios del usuario y luego enviar estos datos a través de WebSockets a un servidor que utiliza FFmpeg para convertir y transmitir el video via RTMP.

WebRTC es un conjunto de API que permite la comunicación de navegador a navegador en tiempo real, ideal para chats en vivo. RTMP, por otro lado, es un protocolo de servidor utilizado para entregar contenido de video en línea, más adecuado para transmisiones en vivo debido a su capacidad para manejar grandes audiencias.

Mux está orientado a desarrolladores que desean integrar capacidades de transmisión en vivo en sus propias plataformas, a diferencia de servicios más orientados al consumidor como Twitch o YouTube, que son ideales para streamers que prefieren no involucrarse con el código.

Matt McClure
Matt McClure
13 min
02 Aug, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Mux proporciona una API para transmisiones en vivo y tiene como objetivo mantener a los usuarios en sus propias aplicaciones. La transmisión en vivo y el chat en vivo son diferentes, con el chat en vivo utilizando WebRTC y la transmisión en vivo utilizando RTMP y HLS. WebRTC se puede implementar utilizando Chrome sin cabeza o el proceso getUserMedia. Mux se dirige a los desarrolladores que construyen plataformas y sugiere el uso de HTML semántico. Ionic admite aplicaciones nativas y vistas nativas personalizadas.

1. Introducción a la transmisión en vivo y la experiencia del usuario

Short description:

Soy Matthew McClure, cofundador de Mux. Proporcionamos una API para transmisión en vivo. A menudo, los usuarios preguntan cómo permitir que sus usuarios transmitan en vivo desde un navegador. Las recomendaciones actuales implican el uso de software nativo, pero las personas quieren mantener a los usuarios en sus propias aplicaciones.

Entonces, empecemos. Mi nombre es Matthew McClure, soy cofundador de una empresa llamada Mux. Proporcionamos una API para la infraestructura de video en línea y una de las cosas que ofrecemos es esta solución de transmisión en vivo. Entonces, puedes crear transmisiones en vivo, te devolvemos una clave de transmisión y luego puedes enviar feeds RTMP a ella. Es genial para transmisiones en vivo, pero una pregunta muy común que recibimos es cómo puedo permitir que mis usuarios transmitan en vivo directamente desde un navegador. Por lo general, las recomendaciones actuales son usar software nativo como Open Broadcast Studio o Wirecast o algo similar. Pero las personas quieren poder mantener a las personas en sus propias aplicaciones y no enviar a otra solución para que descarguen y aprendan una nueva tecnología. Es comprensible por qué lo quieren, pero desafortunadamente no es tan fácil.

2. Diferencia entre Transmisión en Vivo y Chat en Vivo

Short description:

La transmisión en vivo y el chat en vivo a menudo se confunden, pero son diferentes. El chat en vivo es para la comunicación directa entre dos usuarios, mientras que la transmisión en vivo es para que una persona transmita a muchos. El chat en vivo utiliza WebRTC, mientras que la transmisión en vivo utiliza RTMP y HLS. WebRTC no puede comunicarse directamente con RTMP, por lo que se necesita un servidor para la conversión.

Entonces, hablemos de un truco en el que he estado trabajando y que probablemente sea una idea realmente terrible. Primero, hablemos de lo que queremos decir con transmisión en vivo. Algunos antecedentes rápidos aquí. La transmisión en vivo no es un chat en vivo. Es una idea muy común, pero estas dos cosas son bastante diferentes.

En el chat en vivo, solo tienes a dos personas, dos usuarios que hablan directamente entre sí. Pueden compartir video potencialmente incluso de igual a igual. Por lo tanto, no es necesario que pase por un servidor centralizado. Puede ir directamente de uno a otro. Esta latencia debe ser de 300 milisegundos o menos. Si la latencia llega a 500 milisegundos, se vuelve muy difícil tener esa conversación de uno a uno. Tal vez incluso puedas tener algunos pares aquí. Entonces, eso puede ser 3, 5, 10, realmente depende de cuánto ancho de banda pueda tener cada usuario, porque estás limitado por la persona que tiene menos ancho de banda para poder compartir video de ida y vuelta entre todas las personas en el chat.

La transmisión en vivo, por otro lado, es desde una fuente de cámara hacia cientos, miles, decenas de miles, cientos de miles de personas a la vez. Ahora, ya no estamos hablando de una comunicación uno a uno ya que es una persona transmitiendo a un grupo. Necesitas poder escalarlo, necesitas tener costos asequibles, pero luego esos espectadores no necesariamente necesitan recibir una respuesta en tiempo real. Por lo tanto, una latencia de 10 segundos, 15 segundos, está bien. Para cuando una persona responda en el chat, debería ser bastante receptivo. Por las mismas razones, la misma tecnología no funciona bien para ambos casos. Entonces, el chat en vivo funciona con tecnologías de navegador como WebRTC, que es un conjunto de API que se pueden utilizar para que los navegadores se comuniquen entre sí, de igual a igual, obtener los medios del navegador, todas esas cosas. La transmisión en vivo, por otro lado, funciona con tecnologías como RTMP. RTMP es un protocolo de servidor, un protocolo de comunicación para la entrega video. Solía usarse mucho para la entrega, pero ahora es estándar para obtener una transmisión en un servidor. Luego, ese servidor transcodificará eso a algo para entregar a los usuarios finales que sea un poco más económico y escalable, como HLS. HLS es un formato que básicamente toma video, lo divide en pequeños fragmentos, enumera esos fragmentos en un manifiesto y luego los reproductores pueden descargar el manifiesto y seguir descargándolo para obtener actualizaciones. Pero puede alojarse en CDNs normales, se entrega como archivos normales, es solo HTTP, por lo que es muy fácil de escalar y entender, y es económico, relativamente hablando. Bueno, probablemente estés pensando, si necesito llegar a RTMP primero, simplemente usemos WebRTC a RTMP en el navegador. Los navegadores en su mayoría dicen que no. Desafortunadamente, no puedes llegar a un nivel lo suficientemente bajo en el nivel de red para poder comunicarte a través de RTMP. ¿Entonces, qué hay de la tecnología a la que no podemos acceder? ¿Qué hay de las cosas que tenemos en nuestro conjunto de herramientas? Entonces, spoiler alert, un servidor estará involucrado de cualquier manera.

3. WebRTC a RTMP Streaming

Short description:

Puedes implementar WebRTC en el lado del servidor utilizando Chrome sin cabeza, lo que te permite incorporar tecnologías y superposiciones del navegador en la transmisión en vivo. Sin embargo, ejecutar Chrome a gran escala para cada usuario puede ser complejo. Alternativamente, puedes utilizar el proceso de obtener medios del usuario para capturar el micrófono y la cámara del navegador, y enviar la transmisión a través de WebSockets. En el lado del servidor, puedes utilizar FFmpeg para procesar los datos de WebSocket y entregarlos a través de RTMP. Este método funciona bien y hay una demostración disponible en Glitch.

Simplemente no podrás llegar de un navegador a RTMP sin involucrar de alguna manera a un servidor. Por lo tanto, las implementaciones de WebRTC en el lado del servidor, se pueden hacer, es un poco complicado, la especificación de WebRTC es grande e intimidante. Esto ha mejorado mucho recientemente, hay proyectos como Pyon que realmente facilitan esto mucho más, pero aún es bastante intimidante.

Entonces, estás pensando en una implementación de WebRTC en el lado del servidor, pero ahora esa implementación es simplemente Chrome sin cabeza, y esto se puede hacer. En realidad, se hace muy bien, una vez que básicamente puedes tener un chat, la instancia de Chrome sin cabeza simplemente puede unirse a ese chat y grabarlo. Y lo bueno aquí es que estás utilizando tecnologías de navegador, puedes hacer superposiciones, puedes hacer lo que harías en el navegador, y luego está en la transmisión. Es realmente genial. El problema es que ahora tienes que ejecutar Chrome a gran escala para cada persona que quiera hacer una transmisión en vivo, lo que puede ser complicado.

Ok, ¿y si solo usamos una parte de esa especificación de WebRTC, obtener medios del usuario, que es el proceso de obtener el micrófono y la cámara del navegador, y luego simplemente enviaremos eso a través de WebSockets. Los WebSockets son comprensibles. Las limitaciones del lado del servidor son comunes, y son cosas con las que todos hemos trabajado, o muchos de nosotros hemos trabajado en el pasado, así que intentemos eso. Puede que estés pensando, ¿cómo funcionaría eso? Primero, solicitaríamos los medios del navegador, así que me refería a obtener medios del usuario anteriormente. Puedes establecer diferentes restricciones. Simplemente estableceremos audio y video en verdadero, pero podrías ajustarlo si quisieras. Estableceremos ese flujo, lo agregaremos a un elemento video para poder verlo, luego capturaremos ese flujo y luego pasaremos ese flujo al grabador de medios, a una instancia del grabador de medios, o crearemos una nueva instancia de la API del grabador de medios, que simplemente te permite grabar contenido desde un navegador. Y luego, ese grabador expondrá este evento data disponible, por lo que cada vez que ese evento se active, tendremos un fragmento de video, así que simplemente enviaremos ese fragmento de video a través de una conexión WebSocket . Ahora, eso cumplirá con todo el proceso de creación de esa conexión WebSocket, pero suponiendo que tenemos una conexión WebSocket, ahora podemos simplemente enviar ese video a través de esa conexión WebSocket, lo cual es genial. Y luego, el lado del servidor también es bastante simple y directo. Tenemos este WebSocket, y cada vez que recibimos una nueva conexión, iniciaremos un proceso FFmpeg . Aquí, estoy usando un punto final RTMP de MUX, pero podría ser cualquier cosa. Haremos alguna limpieza si el proceso FFmpeg muere, o si el WebSocket se cierra, pero de lo contrario, cada vez que recibamos un nuevo mensaje y sea un búfer, simplemente lo escribiremos en FFmpeg y luego FFmpeg lo entregará a través de RTMP. Entonces esto funciona bastante bien. Si quieres ver una demostración de esto, puedes echar un vistazo a Glitch. Todo está funcionando. Puedes verlo funcionando en el navegador. Es bastante genial. Funciona bastante bien. Aquí, solo tienes que poner una clave de transmisión. Si quieres remixar el Glitch y usar un punto final RTMP diferente, está bien. También escribí una publicación de blog sobre todo esto.

QnA

Q&A: MUX Mercado Objetivo y Uso de un Div como Botón

Short description:

Me adentro un poco más en ello. Somos un producto orientado a desarrolladores, puramente APIs para que los desarrolladores las integren en sus plataformas. Si eres un streamer que solo quiere transmitir en vivo sin escribir código alguno, Twitch y YouTube son excelentes plataformas para usar. Si estás intentando construir una plataforma, probablemente seamos una mejor opción. Colocar HTML dentro de un botón no es realmente HTML semántico. Por lo tanto, podrían envolver ese contenido en un div y convertirlo en un botón accesible en lugar de poner un botón alrededor de él.

Así que si quieres echarle un vistazo y obtener más detalles, me adentro un poco más en ello. ¡Gracias a todos! ¡Wow! Eso es mucha información en solo 20 o 28 minutos. Cuatro temas geniales. Me gustaría invitar a todos los oradores de las Charlas Relámpago al escenario para hacer la última ronda de preguntas y respuestas del día.

¡Hola a todos! ¡Hola! Hola. ¡Hola! Buenas tardes, noches, lo que sea para ustedes. Voy a ir directo a las preguntas. Comenzaré con la primera pregunta de Matt McClure. ¿A qué mercado están apuntando y por qué alguien usaría MUX en lugar de Twitch o YouTube? Sí, es una pregunta válida. Somos un producto orientado a desarrolladores, puramente APIs para que los desarrolladores las integren en sus plataformas, a diferencia de Twitch y YouTube, que son productos más orientados al consumidor. Entonces, si eres un streamer que solo quiere transmitir en vivo sin escribir código alguno, esas son excelentes plataformas que deberías usar. Si estás intentando construir una plataforma, probablemente seamos una mejor opción. Bueno, creo que se trata más del público objetivo y de tener más control sobre lo que estás haciendo, ¿no? Sí, lo pensaríamos un poco como una mala analogía que mencioné en Slack, son más como PayPal o Venmo. Nosotros somos más como Stripe, si lo piensas en términos de APIs de pago. De acuerdo, gracias.

La siguiente pregunta es para Jen. ¿Cuáles son las razones por las que a un equipo web de React Native le gustaría usar un div como botón? La razón es que colocar HTML dentro de un botón no es realmente HTML semántico. Por lo tanto, podrían envolver ese contenido, por ejemplo, una tarjeta o un bloque de imagen y texto, en un div y convertirlo en un botón accesible en lugar de poner un botón alrededor de él. Sí, por lo tanto, si tienes una tarjeta completamente clickable con diferentes elementos dentro, no puedes hacerlo de manera semántica dentro de un botón. Correcto. En ese caso, querrás hacer un div accesible. Bueno, al menos deberías querer hacerlo. Quizás. Y puedo decir, si no lo haces, Jen vendrá a buscarte. Te tocaré amablemente en el hombro y te haré sugerencias. ¿Qué tal eso? Sí. Sí, pero tocar no funciona. Entonces podría hackearlo. Sí. Sí. No es realmente una pregunta, pero solo para ti, un toque amable en el hombro de Martin van Houten.

Agradecimiento por el Soporte de Mesh y Ionic Native

Short description:

No es realmente una pregunta, solo quería expresar mi agradecimiento por Mesh. En Albert Heijn, lo hemos estado usando y ha sido un placer. ¿Ionic admite aplicaciones nativas como React Native, o es más como una aplicación estándar de Cordova con una interfaz web? Es una combinación de ambos, permitiendo la integración con vistas nativas personalizadas. Gracias a todos por la charla, y hasta luego por ahora.

No es realmente una pregunta. Solo quiero decir que Mesh se ve increíble. Siempre es agradable escuchar eso. Muchas gracias. Espero que sientas lo mismo y no me odies. Bueno, en realidad, en la empresa para la que trabajo, Albert Heijn, lo estamos usando. Y debo decir que ha sido un placer. Así que, muchas gracias.

Oh, eres mi vecino. Puedo ir a visitarte. Sería gezellig. Mike, ¿Ionic admite aplicaciones nativas, similar a React Native? ¿O es más como una aplicación estándar de Cordova donde es una interfaz web en lugar de una aplicación nativa? Entonces, es una combinación de ambos, donde la mayoría de la interfaz de usuario se muestra en una vista web. Puedes integrar vistas nativas personalizadas o actividades en Android y mezclar qué vista se muestra, la vista web o la vista nativa, o incluso superponer la vista nativa encima de la vista web. Así que obtienes lo mejor de ambos mundos. Eso se siente poderoso.

De acuerdo. Gracias chicos y señorita por esta gran charla. Para las personas que están viendo, también estarán en las salas de Zoom para preguntas. Pero la parte formal ha terminado. Voy a despedirme de ustedes por un rato. Así que, gracias por unirse. Gracias. Gracias. Adiós adiós.

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

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.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
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.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Una Mirada al Futuro del Desarrollo Web en 2025
JSNation US 2024JSNation US 2024
32 min
Una Mirada al Futuro del Desarrollo Web en 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
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
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.