¿Webpack en 5 años?

Rate this content
Bookmark

¿Qué podemos aprender de los últimos 10 años para los próximos 5 años? ¿Hay un futuro para Webpack? ¿Qué necesitamos hacer ahora?

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Webpack fue creado por Tobias Koppers en el año 2012.

Webpack introdujo características importantes como el code splitting, la carga bajo demanda y la co-localización de activos y módulos JavaScript.

Inicialmente, Webpack no requería configuración y funcionaba con un simple comando CLI. Sin embargo, con el tiempo y la creciente complejidad de las aplicaciones web, la configuración inicial se volvió más abrumadora y complicada.

Webpack enfrenta problemas de rendimiento relacionados con la recolección de basura y la dificultad para aprovechar múltiples CPUs. Una solución podría ser una reescritura utilizando un lenguaje nativo para optimizar el uso de CPU y adoptar una arquitectura de compilación incremental.

Se espera que Webpack siga siendo relevante, especialmente en proyectos existentes, debido a la inercia en la adopción de tecnologías en empresas y equipos de desarrollo.

El desarrollo de Webpack ha enfrentado desafíos de financiación recientemente, con un equipo reducido trabajando a tiempo completo, lo que podría impactar en su capacidad para realizar mejoras significativas a futuro.

Nuevas herramientas pueden ofrecer mejor rendimiento y características optimizadas, pero Webpack sigue siendo una opción robusta y flexible, con un amplio ecosistema de plugins y una amplia adopción.

Tobias Koppers
Tobias Koppers
26 min
16 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En los últimos 10 años, Webpack ha moldeado la forma en que desarrollamos aplicaciones web al introducir la división de código, la co-localización de hojas de estilo y activos con módulos de JavaScript, y permitiendo la agrupación para el procesamiento del lado del servidor. La flexibilidad de Webpack y su gran sistema de plugins también han contribuido a la innovación en el ecosistema. La configuración inicial para Webpack puede ser abrumadora, pero es necesaria debido a la complejidad de las aplicaciones web modernas. En aplicaciones de mayor escala, hay problemas de rendimiento en Webpack debido a problemas con la recolección de basura, el aprovechamiento de múltiples CPUs y las limitaciones arquitectónicas. Solucionar problemas en Webpack tiene compensaciones, pero una reescritura podría optimizar la arquitectura y solucionar problemas de rendimiento.
Available in English: Webpack in 5 Years?

1. Impacto y Futuro de Webpack

Short description:

En los últimos 10 años, Webpack ha moldeado la forma en que desarrollamos aplicaciones web al introducir la división de código, la co-localización de hojas de estilo y activos con módulos de JavaScript, y permitiendo la agrupación para el procesamiento del lado del servidor. La flexibilidad de Webpack y su gran sistema de plugins también han contribuido a la innovación en el ecosistema. Aunque Webpack puede no ser el agrupador más publicitado, sigue siendo una opción sólida por su estabilidad, flexibilidad y una amplia gama de casos de uso. Mirando hacia el futuro, es probable que Webpack siga siendo utilizado para proyectos existentes, pero los nuevos proyectos pueden tener otras opciones. Las lecciones aprendidas de 10 años de Webpack pueden guiar las futuras herramientas y mejoras. Sin embargo, debido a limitaciones de tiempo, no todas las lecciones pueden ser cubiertas en esta charla, pero están disponibles en las diapositivas de la presentación.

Entonces, mi título es en realidad Webpack en Cinco Años, pero en realidad eso es solo un cebo para hacer clic, así que te enganché. Hablaré sobre los últimos 10 años de Webpack y lo que podemos aprender para Webpack y para la comunidad en su conjunto y para el ecosistema sobre estos últimos 10 años. Qué errores cometimos, qué problemas tenemos, y qué podemos hacer mejor.

Vamos, vamos. Entonces, mi nombre es Tobias Koppers y creé Webpack en 2012, hace 10 años, así que lo mantengo durante 10 años y comencé a mantenerlo durante cinco años a tiempo parcial, como 10 horas por semana, y luego migré a trabajar a tiempo completo en Webpack financiado por Open Collective, patrocinadores, donaciones y cosas así, y ahora trabajo más de un año para y lo mantengo como parte de mi trabajo. También tengo dos hijos, de cinco y tres años, y vivo en Alemania en Baviera, así que cerca un poco.

Entonces, 10 años de Webpack, creo que deberíamos celebrarlo y en realidad es un tiempo bastante largo para el ecosistema web, como 10 años, en años web es como cientos de años o así, y creo que podemos decir que al menos moldeamos el ecosistema un poco y trato de encontrar cuatro cosas que, creo que Webpack moldeó la forma en que desarrollamos aplicaciones web. Entonces, una cosa, por qué comencé Webpack fue para agregar code splitting a los agrupadores y carga bajo demanda y creo que eso es algo que se ha establecido en la comunidad desde entonces y creo que está aquí para quedarse y hoy en día, cada bundler viene con code splitting y carga bajo demanda y casi todos están usando algo así. Otra cosa que promovimos o abrazamos es tener esta idea de combinar, co-localizar tus hojas de estilo, tus activos y tus otras cosas no-JavaScript con tus JavaScript modules. Entonces es como tener un gráfico de tu aplicación donde todo es importado por cada uno y creo que eso también es algo que se quedará en la comunidad e incluso las especificaciones involucradas como CSS modules spec y otras cosas que lo abrazan y lo mantienen en el ecosistema para siempre. Y otra cosa un poco más pequeña es que también aprendimos a usar agrupadores o herramientas de preprocesamiento para el procesamiento del lado del servidor o Node.js. Así que a menudo en una aplicación que usa Webpack y renderizado del lado del servidor y cosas así, entonces también agrupamos nuestra aplicación en el lado del servidor, eso es algo que no estaba allí antes de Webpack, probablemente porque no lo necesitábamos, pero creo que eso también es algo que probablemente se quedará en la comunidad al menos por un tiempo y otra cosa más grande que creo que Webpack abrazó es la flexibilidad. Webpack comenzó con una forma realmente flexible, un gran sistema de plugins con enormes habilidades para extender, configurar y personalizar tu construcción y creo que eso es algo que realmente abrazó la innovation en el ecosistema y nuevas soluciones, nuevas ideas pueden ser desarrolladas combinadas con Webpack y también moldea nuevas ideas en el ecosistema. Así que creo que eso está bastante bien. Pero hoy en día Webpack no es el Bundler más publicitado, es más como herramientas aburridas, quizás la elección estable o la elección si ya tienes algo con Webpack, pero en el ecosistema de Twitter también, es un equipo de desarrollo basado en la publicidad, hay nuevos Bundlers que surgen, o nuevas herramientas no-agrupadoras que están bastante publicitadas y hacen cosas buenas, y probablemente todos tienen una característica que es mejor que algo en Webpack, y quizás performance o optimización o algo así, así que eso es bastante lo que se publicita tipo de cosas que están surgiendo. Y todavía creo que Webpack sigue siendo la elección sólida cuando quieres tener algo que es realmente estable o realmente flexible, y quizás cubre muchos casos de uso, o tienes muchos plugins del ecosistema que quieres usar. Y en realidad, miré las descargas de NPM, y Webpack sigue creciendo, así que no es que esté disminuyendo o algo que está sucediendo aquí, pero sí, vemos que hay muchas cosas nuevas que surgen en el ecosistema. Entonces, ¿cómo se ve el futuro para Webpack y para el ecosistema en general? ¿Se seguirá utilizando Webpack en cinco años? Creo que sí, al menos para proyectos existentes, porque, como, las empresas, los equipos, no cambian la pila tan a menudo, es más como que usan cosas durante más años de los que podemos pensar. En realidad, la gente todavía está usando Webpack 2, que tiene cinco años, y no les importa no actualizar cosas durante mucho tiempo, si está funcionando, y creo que está destinado a funcionar, al menos. Para nuevos proyectos, hay otra elección. No sé qué pasará en cinco años. Podría ser que se desarrolle algo nuevo que podría ser mejor, o hay otras opciones obvias que puedes usar y empezar con nuevos proyectos. Qué pasa en cinco años, no lo sé. Es un tiempo realmente largo en el ecosistema. Decidí hacer un resumen de los últimos diez años de Webpack y comprobar qué lecciones podemos aprender de estos diez años, y qué podemos, creo que podemos mantener de Webpack, diez años de Webpack para el ecosistema y para Webpack en general. Entonces, sí. También quiero decir qué podemos hacer ahora o qué podemos hacer en futuras herramientas en Webpack para solucionar estos problemas o para mantener estas lecciones aprendidas. El problema es que hay tantas lecciones que recogí preparando esta charla que en realidad no caben en esta charla. Es una conferencia híbrida, pero lo que hice fue preparar cientos de diapositivas para todo esto y las mostré un segundo y la audiencia remota puede pausar la transmisión y leer todo esto y nos vemos en una hora después de discutir los más importantes con la audiencia en vivo.

2. Configuración y Personalización de Webpack

Short description:

La configuración inicial de Webpack puede ser abrumadora, pero es necesaria debido a la complejidad de las aplicaciones web modernas. Adaptarse al ecosistema y tener valores predeterminados personalizables puede ayudar a mejorar la experiencia de desarrollo. La personalización es importante tanto para proyectos individuales como para el ecosistema en general, permitiendo la innovación y desbloqueando a los usuarios. Sin embargo, las opciones de personalización actuales en Webpack pueden ser confusas, y la extensa superficie de la API dificulta la iteración y el mantenimiento. Para abordar estos desafíos, un concepto de plugin simplificado y la inclusión de análisis para la retroalimentación del usuario podrían ser beneficiosos. Además, el rendimiento es un área donde Webpack se queda atrás de sus competidores debido a su uso de Node.js.

Entonces, el primero, configuraciones iniciales. Actualmente, la gente a menudo piensa que la configuración inicial que necesitas para empezar con el proyecto es demasiado abrumadora, demasiado grande, demasiadas cosas necesarias, y en realidad no solía ser así en Webpack. Cuando Webpack empezó, no necesitabas ninguna configuración, simplemente funcionaba con un simple comando CLI, pero en realidad fue que hace cinco años, no desarrollábamos aplicaciones web tan complejas. Como hoy en día todo el mundo necesita usar CSS, JavaScript, activos, quieren procesar la optimización de imágenes, quieren un dialecto de JavaScript como TypeScript o quieren usar características de la etapa tres que necesitan ser transpiladas para navegadores más antiguos. Quieren integrar compiladores extra para su framework como React viene con sintaxis JSX, Svelte viene con un compilador diferente para compilar las plantillas, Angular tiene como un paso de preprocesamiento para los bits de producción. Vue también tiene estos geniales componentes de un solo archivo que necesitan ser procesados. Así que se añadió un montón de herramientas a las aplicaciones web y Webpack no se adaptó a eso un poco así que siguió teniendo realmente bajos valores predeterminados que se usan de esa manera. Entonces, ¿qué podemos hacer para arreglar eso? El clicker no es bueno. Así que creo que deberíamos estar más optimizados, en tener valores predeterminados así que deberíamos adaptarnos con el ecosistema. También creo que deberíamos reconocer el hecho de que estos valores predeterminados cambian con el tiempo, como dentro de diez años, quizás dentro de cinco años, probablemente tengamos valores predeterminados muy diferentes a los que tenemos ahora. Lo que creo que podemos hacer es como tener algo, lo que algunas personas ya hacen, es tener presets que están versionados con dependencias, así que podemos adaptarnos lentamente con el ecosistema, pero también mantener tu proyecto bloqueado en una cierta versión de valores predeterminados sin tener muchos cambios importantes. Otro tema es la personalización. Así que creo que la personalización es realmente importante, y también realmente importante para el ecosistema, incluso si no lo estás usando directamente para tu proyecto, porque abraza este concepto de innovación del ecosistema donde puedes mirar, como si tienes una idea genial y puedes escribir un plugin para tu bundler y para tu herramienta, y, como, probarlo, quizás publicarlo en npm, y dejar que la gente lo use, quizás se convierta en el nuevo estándar que desarrollamos aplicaciones en el futuro. Pero también ayuda a desbloquear a los usuarios. Si estás luchando con algo que el Bundler no soporta, o tu herramienta no soporta, entonces puedes realmente entrar a modificar, escribir un plugin, o personalizar la configuración para, como, tener tu uso caso, como, haciendo lo que haces, y realmente te quedas atascado con el Bundler, y quizás tienes que cambiar porque no soporta algo. También creo que fue uno de los factores de éxito de Webpack en los primeros días, y quizás también hoy en día que realmente tiene esta idea de flexibilidad y personalización y cosas así. Y, pero también es confuso en algunas cosas, como, hay tres niveles de personalización. Tienes configuración, tienes plugins, tienes cargadores. Es realmente complicado cuando tienes que usar la combinación de plugin y cargador con alguna configuración para hacer algo, así que puede ser confuso. Otra cosa es que la API es, puedes extender todo en Webpack. Tienes acceso a todos los internos en Webpack. Eso es un problema porque no sabemos qué se usa realmente. No podemos cambiar nada en nuestra API interna, y eso es realmente difícil para nosotros y también como hace fácil romper cosas porque podría cambiar internos y eso es raro. Sí. Entonces, ¿qué podemos hacer? Entonces, ¿qué podemos hacer? Creo que la idea es que no deberíamos tener este tipo de concepto de plugin. Creo que debería haber sólo un tipo de plugin que quizás tenga varios niveles de APIs. Como tienes como una API de bajo nivel y una API de alto nivel donde puedes acceder a ambas de estas APIs desde un solo plugin y eso haría más fácil para la gente usarlo. También hace la superficie de la API más restringida para exponer sólo lo que realmente sabemos que es usado por los plugins y no exponer todos los internos que hace difícil para nosotros iterar en los internos. Lo que también ayudaría, pero es realmente difícil de abrazar en las comunidades como tener algunas analíticas donde realmente obtenemos retroalimentación del usuario, quizás automatizada o quizás por optar por algo así, donde puedes informar cuáles son las APIs realmente utilizadas por los plugins para que sepamos qué deberíamos mejorar o qué podemos soltar o duplicar en el futuro. Entonces, otro tema realmente grande es el rendimiento. Así que como la mayoría de los competidores sobresalen en el rendimiento porque están escritos en lenguajes nativos y comparados con Webpack, que es Node.js,

QnA

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.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
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.

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
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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
WorkshopFree
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
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.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior