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.

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
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
Descubre el arte de crear programas JavaScript extremadamente pequeños. En esta charla aprenderás los principios y técnicas detrás de la creación de scripts compactos pero poderosos que son más cortos que esta descripción. Sumérgete en el cautivador mundo de la programación minimalista, donde utilizamos estos scripts para crear arte, juegos, herramientas y una multitud de experimentos intrigantes.
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
Introducción al Diseño Dirigido por Dominio- ¿Qué es DDD?- Principios clave de DDD- Beneficios de usar DDD en el desarrollo de aplicaciones webModelado de Dominio en Aplicaciones Vue 3- Cómo diseñar e implementar modelos de dominio en Vue 3- Estrategias para integrar la lógica de dominio con el modelo de datos reactivo de Vue y la arquitectura basada en componentesMejores Prácticas para Implementar DDD en Vue 3- Estrategias para organizar el código de una manera que siga los principios de DDD- Técnicas para reducir el acoplamiento entre la lógica de dominio y la lógica de la aplicación- Consejos para probar y depurar la lógica de dominio en las aplicaciones Vue 3
Patrones Probados de Pinia
Vue.js London 2023Vue.js London 2023
20 min
Patrones Probados de Pinia
Top Content
Con la nueva y mejorada biblioteca de gestión de estado de Vue, Pinia, obtenemos una herramienta mucho más modular. Siendo más flexible, más ligera y sin las Mutaciones de Vuex, Pinia nos presenta más oportunidades para ser creativos, para bien o para mal, con la arquitectura de nuestra aplicación y cómo se lleva a cabo y se organiza la gestión del estado dentro de ella.Esta charla explora algunas mejores prácticas aprobadas por @posva y patrones de diseño arquitectónico a considerar cuando se utiliza Pinia en producción.
Patrones de Diseño de Componentes
Vue.js London 2023Vue.js London 2023
18 min
Patrones de Diseño de Componentes
¿Cómo se escribe un buen componente? En esta charla exploraremos varios patrones diferentes para escribir componentes mejores. Analizaremos técnicas para simplificar nuestros componentes, hacerlos más fáciles de entender y aprovechar al máximo los componentes que ya tenemos.
Sigue Desplazándote
JSNation Live 2021JSNation Live 2021
33 min
Sigue Desplazándote
¡Espera! ¡No tan rápido - Deja de desplazarte y quédate un rato conmigo! Cuando se hace correctamente, las animaciones basadas en el desplazamiento pueden agregar pulido a un sitio y hacer que la narración en línea se sienta más inmersiva. ScrollTrigger de GreenSock te permite lograr animaciones suaves basadas en el desplazamiento con un código mínimo. Vamos a explorar juntos algunas de sus características.

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.