Patrones de Diseño de Componentes

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

¿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.

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Hace un año, el orador renunció a su trabajo para dedicarse a tiempo completo a enseñar, escribir artículos, crear cursos y libros.

El tema principal de la charla es sobre cómo escribir componentes más limpios y simplificar el código.

Los patrones VIP se refieren a la práctica de extraer código de las ramas de una condicional, lo cual es posible porque cada rama está semánticamente relacionada y sirve a un propósito unificado.

El orador descubrió un error en el uso de la condicional 'V show' en su código, debido a la complejidad generada al combinar dos componentes que realizan funciones diferentes.

El orador menciona el principio DRY (No te repitas), enfatizando que este principio se refiere más a evitar la repetición del conocimiento y la intención detrás del código, no simplemente los caracteres en la pantalla.

Se discutió que un error común es combinar componentes que cumplen con funciones distintas, lo que puede aumentar la complejidad y llevar a errores en el código.

El orador recomienda extraer la lógica de componentes grandes utilizando 'composables', lo que permite una organización más clara y facilita la comprensión del código.

Integrar nuevos patrones en una biblioteca de componentes involucra pensar cuidadosamente en la API y en cómo los patrones pueden afectar la estructura de los componentes para mantener la facilidad de uso.

Michael Thiessen
Michael Thiessen
18 min
12 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla cubre componentes limpios y cuándo crear nuevos componentes, así como patrones para escribir componentes más limpios y los beneficios de los patrones VIP. La refactorización y la separación del código en componentes separados puede hacerlo más corto y más fácil de leer, reduciendo la complejidad. Se discute la importancia de no repetirse y los beneficios de usar componentes más pequeños para el rendimiento y la experiencia del desarrollador. Los componibles pueden ayudar a extraer lógica en componentes grandes y complejos, y los patrones se pueden incorporar en bibliotecas de componentes y sistemas de diseño.
Available in English: Component Design Patterns

1. Introducción a Componentes Limpios y Patrones VIP

Short description:

Hablaré sobre componentes limpios y cuándo crear nuevos componentes. Cubriremos patrones para escribir componentes más limpios y cuándo no crear nuevos componentes. También exploraremos los patrones VIP y sus beneficios.

Gracias por esa introducción. Es realmente genial estar aquí hoy porque exactamente hace un año, renuncié a mi trabajo y me dediqué a enseñar y escribir artículos, crear cursos y libros y cosas por el estilo a tiempo completo. Así que, gracias por tenerme aquí. Me gustaría hablarles sobre los componentes limpios. Al hablar con diferentes personas en la community y ver las preguntas que se hacen en Twitter y las cosas que recibo en mi correo electrónico, he visto que surgen dos preguntas fundamentales una y otra vez. La primera es que queremos saber cuándo creamos nuevos componentes. ¿Creamos componentes más pequeños? ¿Creamos componentes más grandes? Y, ¿este componente es demasiado grande o demasiado complicado? ¿Deberíamos sacarlo y ponerlo en algo más? Y esto es algo con lo que lidiamos todos los días. Pero una vez que lo hemos descubierto, también necesitamos descubrir cómo hacerlo bien. Y no se trata solo de mover trozos de código en nuestro sistema de archivos y hacer todo tipo de cosas así. Sino que realmente queremos simplificar nuestra base de código y hacer que nuestro código sea más fácil de usar. Así que en esta charla, cubriremos tres cosas principales. Patrones y métodos para escribir componentes más limpios y simplificar nuestro código. Y solo rascaremos la superficie de estas dos preguntas porque son bastante grandes preguntas. Pero espero que te vayas de aquí con un par de cosas que puedas aplicar. Así que vamos a cubrir algunos patrones aquí. Y al final, también vamos a hablar sobre cuándo no crear nuevos componentes. Así que el primer conjunto de patrones se trata de VIPs. Y son realmente agradables porque básicamente podemos ver las diferentes ramas. Y la mayoría de las veces, podemos extraer el código que está en el cuerpo de cada rama sin necesidad de saber mucho más sobre el código que está sucediendo allí. Y sabemos que podemos hacer esto debido a dos cosas. La primera es que cada rama de esta condicional está relacionada semánticamente. Entonces, el código que va en cada rama diferente funciona junto para el mismo propósito. Puede que conozcas esto como cohesión. Pero realmente, solo estamos hablando de código que funciona junto. Y la segunda razón es similar. Relacionada con eso. Y es que no solo cada rama funciona junto, sino que cada rama diferente es distinta. De lo contrario, no tendríamos una condicional. Simplemente, ya sabes, ejecutaríamos tu código. Para ver esto en

2. Explicación del Código de Componentes y Refactorización

Short description:

Es un componente que muestra una lista de artículos en mi blog. Tiene una vista expandida y una versión colapsada. Al refactorizar y separar el código en componentes separados, se vuelve más corto y más fácil de leer. También podemos trasladar la lógica al componente hijo, reduciendo la complejidad en el componente padre. El resultado es un componente de visualización de artículos con código combinado y una condicional basada en la propiedad de colapso.

Para más detalles, vamos a ver un ejemplo. Y este ejemplo es, oh, olvidé conectarme al Wi-Fi aquí, así que no veremos este ejemplo. Así que solo te daré una explicación rápida. Es un componente que muestra una lista de artículos en mi blog. Puedes tener una vista expandida que muestra, como, la fecha y la descripción, o puedes tener la versión colapsada que muestra al final de la publicación del blog, todas las, como, los diferentes artículos relacionados. Entonces este es el código para ese componente. Y no espero que lo leas completo en este momento. Tendré mis diapositivas disponibles más adelante, así que solo para que lo sepas. Sí, puedes ver que en el nivel superior tenemos un VF allí con los dos cuerpos diferentes de esta rama aquí. Y hacen cosas diferentes. Uno es una versión colapsada. Uno es una versión expandida. Pero aunque son similares, aunque son diferentes, comparten algo de código allí. Entonces, se ven similares. Pero podemos refactorizar eso extrayéndolo en componentes separados. Y no solo este código es más corto, sino que es mucho más fácil de leer a simple vista. Podemos ver fácilmente 'article-collapsed' y 'article-expanded' y saber que esa es la intención de lo que hace este código. Y así es como es el código autoexplicativo. Nos dice qué hace a medida que lo leemos sin tener que pensar profundamente en las diferentes condiciones y todas las cosas diferentes que están sucediendo.

Y un patrón rápido que quería mencionar aquí pero no tengo tiempo para profundizar es que podemos tomar toda esta lógica de V4 aquí y realmente podemos empujarla al componente hijo. Y el razonamiento detrás de esto es similar a preferir métodos como filter y map y reduce en lugar de escribir tu bucle for cada vez. Entonces, ¿qué hacemos cuando las ramas, aunque sean distintas, son bastante similares? Bueno, algo que podemos hacer con este VF aquí es tomar ese VF y realmente empujarlo hacia abajo en el componente hijo. Entonces estamos tomando la complejidad de este componente padre y poniéndola en el componente hijo. Entonces, en nuestro caso, tenemos este componente padre con nuestros componentes colapsados y expandidos. Y respectivamente, se ven algo así. Entonces tenemos un enlace de Nuxt en cada uno. Y el expandido también tiene algunos párrafos allí. Y si lo combinamos, podríamos obtener algo como este componente de visualización de artículos, donde hemos tomado el código que es similar y lo hemos juntado y lo hemos convertido en un componente un poco más largo, pero no está mal. Y, por supuesto, tenemos que tomar esa condicional y ahora moverla al componente hijo. Entonces tenemos algunas cosas diferentes sucediendo aquí. Tenemos este v-show, donde tenemos

3. Refactorización y Promociones

Short description:

Combinamos dos componentes que hacen cosas diferentes, lo que hace que el componente sea más complejo. Hubo un error en el código debido a la complejidad. No repetirse se trata de conocimiento e intención, no solo de duplicación de código. Deberíamos volver al componente padre y separar los componentes colapsados y expandidos. Estoy trabajando en un nuevo curso y también enseñando Mastering Next 3 con Vue School. Puedes encontrar más información en Twitter y mis otras plataformas en línea.

para cambiar según esta propiedad de colapso. Y luego las etiquetas de párrafo en la parte inferior, también vamos a representar condicionalmente. Y también tenemos que calcular la clase, porque uno es flexbox y el otro es grid. En teoría, puedes hacer que sea una cuadrícula de una sola columna dentro de flexbox, pero este es solo el primer paso en nuestra refactorización aquí. Entonces, al final, al empujar este vfConditional del padre al hijo, nuestro componente padre ahora se vuelve un poco inútil, e incluso podríamos deshacernos de él. Pero tenemos un problema bastante grande, en mi opinión. Y eso nos lleva a cuándo no crear este componente. Y así, tenemos este componente corto. Pero debido a que hemos tomado dos componentes que hacen cosas diferentes y los hemos combinado, en realidad hemos hecho que este componente sea mucho más complejo. Y al practicar esta charla y escribir mis diapositivas, después de un tiempo, me di cuenta de que en realidad hay un error en este código, que no me di cuenta al principio, porque es más complejo. Este V show, este colapso aquí, debería haber eliminado esa negación. Y así, al principio, es fácil pasar por alto ese tipo de cosas, porque hay muchas cosas sucediendo aquí, y para entender este código y lo que está sucediendo, es mucho pensar, mucho mirar paso a paso y tratar de determinar qué está sucediendo aquí. Y así, esto es en última instancia una cuestión de si es mejor mantener, es mejor eliminar código duplicado o no. Y a mucha gente le gusta seguir el principio DRY, no te repitas, pero en realidad, no te repitas se trata más del conocimiento y la intención detrás del código y no de los caracteres reales en la pantalla. Y así, aunque esos componentes se ven iguales, en realidad representan intenciones muy diferentes. Y así, combinarlos juntos, en este caso, fue un error. Así que queremos volver a lo que teníamos antes con este componente padre aquí. Y luego tomar estos componentes de artículo colapsado y artículo expandido y, sí, separarlos. Así que tenemos dos componentes simples en lugar de uno más complejo, más difícil de entender.

Entonces... eso es todo lo que quería cubrir aquí. Y ahora es el final de la charla donde puedo promocionarme descaradamente por un momento. Estoy trabajando en un nuevo curso que debería salir en un par de meses y que habla más sobre este tipo de patterns y profundiza más en cómo creamos nuevos componentes. ¿Cómo lo hacemos bien? Y un par de conceptos relacionados más. Así que si quieres más información sobre eso, puedes seguirme en Twitter o en cualquier lugar en línea y estaré hablando de eso. También soy el instructor de Mastering Next 3, que es en colaboración con Vue School y si quieres aprender Next 3, cómo hacer desarrollo full-stack, cubrimos todo desde lo básico hasta la authentication y la integración con Stripe y todas esas cosas con eso. Y luego, por supuesto, también está este libro si quieres obtenerlo en línea. También hay una versión de libro electrónico para que no tengas que tener la copia física. Y ahí están mis enlaces e información. ¡Muchas gracias! Por favor, toma asiento, toma asiento. Hubo muchas buenas preguntas pero ahora, y me encanta que esta siga, oh, esta sigue ahí con

4. Michael's T-shirt y Estructura de Componentes

Short description:

La camiseta de Michael es increíble. Él la diseñó él mismo y la mandó a imprimir personalizada. Los componentes más pequeños pueden mejorar el rendimiento, pero se debe considerar la complejidad. La experiencia del desarrollador también es importante. Al estructurar el código en componentes grandes y complejos, el uso de composables puede ayudar a extraer la lógica. Los patrones se pueden incorporar en bibliotecas de componentes y sistemas de diseño.

una de las preguntas más votadas, y es una de mis preguntas personales. ¿Han notado la camiseta de Michael? Es bastante increíble. ¿De dónde la obtuviste? Porque tal vez necesite pedir una para mí. Hace unos años, mi esposa me regaló una camiseta de Vue para mi cumpleaños, pero ya saben, se va desgastando y se pone vieja, así que en realidad diseñé esta camiseta yo mismo y la mandé a imprimir personalizada. ¡Genial, genial! Ahora tienen algo de inspiración para imprimir su propia camiseta de Vue. Tenemos algunas otras preguntas aquí, solo voy a responder las que son relevantes para su charla. Tenemos una que dice que los componentes más pequeños a menudo pueden tener un mejor rendimiento. No cargan ningún CSS o JS cuando no es necesario. Pero ¿cuándo la complejidad de los componentes más pequeños supera los beneficios de rendimiento y esto está relacionado con cuándo no crear un nuevo componente? Es una pregunta un poco larga, pero tiene sustancia, encontrar el momento adecuado para hacer el cambio.

Sí, no tengo tanta experiencia en la optimización del rendimiento de las aplicaciones web, así que no puedo hablar mucho de ese aspecto. Pero en general, creo que hay esta pregunta de ¿cuán pequeño es demasiado pequeño? Porque eventualmente no quieres tener 30 archivos abiertos y cada archivo tiene cinco líneas, porque el cambio de contexto entre cada una de esas cosas es lo que lo hace difícil. Así que tal vez el rendimiento en términos de capacidad mental también es importante. Sí, definitivamente. Es como lo que Evan también dijo, hay rendimiento y hay qué tan feliz estás como desarrollador al escribir el código. Sí, la experiencia del desarrollador. Creo que la experiencia del desarrollador es algo en lo que también debes optimizar. Y otra pregunta relacionada con Vue, para componentes grandes y complejos escritos con la API de composición, ¿cómo recomendarías estructurar el código dentro de la etiqueta de script? Sí. Una cosa que me gusta mucho es, como, podemos crear estos composables para, como, podemos crear estos composables, y así es muy fácil extraer la lógica de tu componente. Y puedes hacer esto, como, con composables reutilizables que puedes usar en diferentes componentes, pero también puedes hacerlo, como, uno a uno donde tal vez tienes un componente que es más complejo y no hay una forma fácil de hacerlo más pequeño. Pero podrías tomar, ya sabes, tomar secciones de ese script y sacarlas, tal vez tengas tres composables diferentes. Y esos composables solo se usan en ese componente. Pero al menos te permite separar esa lógica de una manera organizada y fácil de entender. Genial. Y hagamos una pregunta más, porque sé que nos estamos quedando sin tiempo. ¿Cómo se traducen estos patrones, esta es de Edward, ¿cómo se traducen estos patrones a una biblioteca de componentes o a un sistema de diseño más abstracto? Si ya estás usando una biblioteca de componentes o un sistema de diseño y también tienes estos otros patrones que quieres incorporar, ¿cómo los incorporarías? Sí. Creo que es un enfoque bastante similar, diría yo. Trabajar en una biblioteca de componentes implica mucho más pensamiento en la API, como Eduardo mencionó sobre hacerla más fácil de usar. Y creo que eso puede afectar de alguna manera cómo estructuras tus componentes. Pero sí.

Genial. Genial. Gracias. Ahora sé que tienes algunas copias adicionales del libro, no solo para las preguntas que se hicieron. Así que si hiciste una pregunta y se leyó tu respuesta. Y tal vez si también quieres echar un vistazo al libro, definitivamente ve y encuentra a Michael arriba después de esta charla también. Definitivamente podrá responder cualquier otra pregunta que no hayamos podido responder. Pero Michael, muchas gracias. Aplausos para Michael.

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

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
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Aprende patrones de React ampliamente utilizados, incluyendo HOCs, Compound Components, Provider Patterns, Functions as Child, y Portals, para escribir código más limpio y eficiente y crear aplicaciones escalables y mantenibles.Visión general En esta masterclass, los espectadores aprenderán sobre patrones clave de React que pueden hacer su código más eficiente, legible y mantenible. Presentaremos cada patrón, explicaremos cómo funciona y demostraremos ejemplos prácticos. Al final de la sesión, los participantes tendrán una comprensión sólida de cómo usar estos patrones en sus proyectos.Objetivos de aprendizajeHOCs Compound Components Provider Patterns Functions as Child Portals Modularidad Mantenibilidad Aplicación en el mundo real.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
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
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento