El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

Spanish audio is available in the player settings
Rate this content
Bookmark

Cuando se trata de construir interfaces caprichosas, React es un aliado sorprendentemente capaz. En esta charla, te mostraré cómo uso React para orquestar interacciones complejas al profundizar en algunos ejemplos de mi blog.

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

FAQ

Las páginas de aterrizaje de Stripe no utilizan React y se basan más en JavaScript vainilla y paquetes personalizados sin un marco de componentes. En contraste, el producto principal utiliza React, indicando un enfoque de diseño más dinámico e interactivo.

React se utiliza en el producto de Stripe porque es adecuado para aplicaciones impulsadas por datos y de pila completa, lo que permite una mayor interactividad y dinamismo en la interfaz de usuario.

Se mencionan herramientas como React Spring y Framer Motion, ambas utilizadas para animar elementos en la web utilizando la física de los resortes, y se destaca su utilidad en proporcionar animaciones suaves y naturales.

React3 Fiber es un renderizador de React para las primitivas de Three.js que permite crear y manejar gráficos 3D en aplicaciones web, facilitando la integración de modelos 3D en entornos React.

Se puede mejorar la eficiencia de las animaciones web gestionando mejor los eventos y utilizando técnicas como el debouncing y el throttling para reducir el número de cálculos y redibujados necesarios, lo que optimiza el rendimiento sin necesidad de un marco específico como React.

Utilizar React para desarrollar animaciones y efectos interactivos ofrece la ventaja de manejar eficientemente los estados y el ciclo de vida de los componentes, permitiendo animaciones más controladas y optimizadas que interactúan de manera fluida con la interfaz de usuario.

Josh Comeau
Josh Comeau
28 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El orador discute el trabajo caprichoso y detallado de Stripe, particularmente sus páginas interactivas y dinámicas. Explican el uso de React para construir detalles caprichosos y rastrear la posición del mouse. El orador introduce React Spring para una animación suave y React3 Fiber para crear un modelo de huevo 3D. También mencionan el uso de Framer Motion y los componentes del servidor React para animar las propiedades de CSS.

1. Introducción al Potencial Caprichoso de Stripe

Short description:

El orador discute el trabajo caprichoso y detallado de Stripe, particularmente sus páginas interactivas y dinámicas. El orador compara la página de inicio de sesión del producto de Stripe con el resto de las páginas, destacando la ausencia de adornos caprichosos. Se revela que el tablero utiliza React, mientras que las páginas de aterrizaje no. El orador explica el razonamiento detrás del uso de React para una aplicación de pila completa y basada en datos.

Entonces, debo advertirles, los primeros dos minutos van a ser inevitablemente brillantes. El resto de las diapositivas serán oscuras, pero prepárense. Soy un gran fan del trabajo que hace Stripe. Me parece realmente caprichoso y detallado. Recuerdo cuando salió este degradado de malla y fue un gran problema. Pero todas sus páginas son realmente interactivas, dinámicas. Tienes este globo 3D que primero podrías pensar que es un video, pero luego cambia a medida que te desplazas, por lo que realmente muestra que es un modelo 3D. Cosas muy, muy geniales.

Sin embargo, cuando realmente inicias sesión en el producto de Stripe, es un poco como pasar por una puerta a un universo diferente. No hay degradados de malla. No hay globos flotantes. Eso no es necesariamente algo malo. Como, ya sabes, es un producto SaaS de empresa a empresa. No necesariamente necesitas un montón de adornos caprichosos. Pero mi punto es que solo mirando entre los dos, ¿verdad? Es muy claro que es un producto diferente construido por un equipo diferente, utilizando herramientas diferentes.

Y probablemente no nos sorprenda saber que el tablero utiliza React. Entonces, si tienes las DevTools, te dirá que esta página está construida con React. Y las páginas de aterrizaje no. No utilizan React. He visto al equipo de desarrollo hablar sobre las herramientas que utilizan. Es mucho de JavaScript vainilla y, como, paquetes personalizados pero sin marco de componentes. No React, no Vue, no Angular. Creo que esto tiene sentido. Como, ya sabes, pensamos en React. Como, esto parece una aplicación React. Está impulsada por data. Es de pila completa. Es todo lo que hemos estado hablando. Y entonces podrías preguntarte razonablemente, como, ¿por qué querrías usar React para construir algo como esto? Y de eso es de lo que estoy aquí para hablar hoy. Esta charla se llama el potencial caprichoso de los frameworks de JavaScript.

2. Construyendo Detalles Caprichosos con React

Short description:

El orador comparte su uso de React para construir detalles caprichosos, como un corazón rastreado por el cursor y un botón de Me gusta juguetón. Explican la inspiración detrás de estos detalles y discuten el concepto de su blog como un patio de recreo personal. El orador también introduce la idea de construir una forma de huevo y se centra en el seguimiento del cursor para la rotación de la cabeza y la traducción del ojo.

Y quiero compartir cómo he estado usando React para construir algunos detalles bastante juguetones y caprichosos. También me di cuenta de que no tengo agua, así que voy a tomar una de estas mientras dejamos que mi muy divertida pantalla de título se desarrolle.

Entonces, para aquellos que no lo saben, tengo un blog. Blogueo en JoshWComo.com y cuando construí este blog, pensé que este iba a ser mi patio de recreo. Así que iba a complacer todas las ideas caprichosas que tenía. Así que si había una idea juguetona que quería hacer, iba a hacerla. Esto, me inspiró un poco esos, como virutas de hierro que obtienes con un imán y mueves el imán y las virutas de hierro se ondulan alrededor. Es exactamente el tipo de detalle pequeño pero divertido que acepto cuando es mi blog porque es mi propio patio de recreo y puedo hacer lo que quiera.

Uno de los pequeños detalles, y voy a acercar esto mucho. Oh, esta parte también, déjame, espera, modo oscuro. Este pequeño amigo aquí abajo, tiene un montón de pequeños detalles. Rastrea tu cursor, por lo que el corazón mismo rota dependiendo de la posición de tu cursor. Un poco más sutil, los ojos se mueven independientemente y no sé cuán claro es eso, pero es una pequeña cosa. Si te acercas al botón de Me gusta, pero luego te alejas, si no interactúas con él, se pone un poco triste. Porque, ya sabes, es un botón de Me gusta, a los botones de Me gusta les gusta ser clickeados, pero no se queda triste mucho tiempo, decidí hacerlo muy alegre. Y, por supuesto, puedes hacer clic en él. Me pregunto si tengo sonido, déjame ver. Está bien, hace un pequeño ruido de glug, puedes imaginar eso. Y si sigues haciendo clic en él hasta el final, eventualmente, llegas a la cima y obtienes un pequeño estallido de confeti. Un pequeño huevo de Pascua que la gente no sabe. Puedes hacer clic derecho para quitar Me gusta. Puedes divertirte con eso.

Entonces, esto es esencialmente de lo que quiero hablar. Ahí estamos. Vamos a construir esto, vamos a construir un huevo. Elegí un huevo porque es una forma un poco más sencilla. Y nos vamos a centrar en el seguimiento del cursor, por lo que la rotación de la cabeza y la traducción del ojo. Ahora, incluso antes de llegar a React, ¿verdad?, ¿qué son las cosas que tenemos que saber para construir este tipo de interacción? Bueno, necesito saber dónde en el viewport está el cursor. Y la forma en que normalmente hacemos esto es midiendo la distancia desde la esquina superior izquierda en píxeles. Entonces, a medida que te mueves más a la derecha, tu valor x se hace más alto.

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

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
React Day Berlin 2022React Day Berlin 2022
28 min
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
JavaScript Haikus: Mis Aventuras en la Programación Mínima
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
JavaScript Haikus: Mis Aventuras en la Programación Mínima
This Talk is about writing super tiny JavaScript programs, known as tiny code. It explores the concept of code golf and the use of a live editor for instant feedback. The Talk discusses various ways to share tiny code, including Twitter.net. It also covers creating graphics, games, and sound in a small space. The speaker highlights inspiring tweets and showcases examples of tiny code, including asemic writing. The future of tiny code includes new techniques, better browser support, and AI-assisted programming.
AI + UX: Diseño de Producto para Experiencias Inteligentes
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Diseño de Producto para Experiencias Inteligentes
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.
Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Patrones Probados de Pinia
Vue.js London 2023Vue.js London 2023
20 min
Patrones Probados de Pinia
Top Content
Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.
Patrones de Diseño de Componentes
Vue.js London 2023Vue.js London 2023
18 min
Patrones de Diseño de Componentes
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.

Workshops on related topic

Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.