Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

Rate this content
Bookmark

Existen muchas formas de crear componentes en React, y hacerlo correctamente puede no ser tan fácil, especialmente cuando los componentes se vuelven más complejos. En esta charla, aprenderás cómo construir componentes de React a prueba de futuro. Cubriremos dos enfoques diferentes para construir componentes: Composición y Configuración, para construir el mismo componente utilizando ambos enfoques y explorar sus ventajas y desventajas.

17 min
21 Jun, 2022

Video Summary and Transcription

La charla de hoy discute la construcción de componentes de React flexibles, resilientes y a prueba de futuro utilizando enfoques de composición y configuración. El enfoque de composición permite flexibilidad sin lógica condicional excesiva mediante el uso de múltiples componentes y la transmisión de props. La API de contexto se puede utilizar para estilizar variantes, permitiendo una especificación adecuada de estilos y clases. Agregar variantes e iconos es fácil mediante el consumo del contexto de variantes. Los enfoques de composición y configuración se pueden combinar para obtener lo mejor de ambos mundos.

Available in English

1. Building Flexible and Resilient React Components

Short description:

Hoy, discutiré cómo construir componentes flexibles, resilientes y a prueba de futuro en React. Exploraremos dos enfoques: composición y configuración. Construir componentes a prueba de futuro puede ser desafiante a medida que la complejidad aumenta. Agregar características como encabezados, variantes e iconos requiere una cuidadosa consideración de props y estilos.

Findly y soy un desarrollador web y móvil full-stack con 10 años de experiencia en programación. Soy co-propietario de Findly WebTech, así como mentor y consultor en la plataforma CodeMentor.io. Además, soy autor de los libros React, the Road to Enterprise y Viewed the Road to Enterprise. También escribo artículos para los blogs de Telerik y the Road to Enterprise. De acuerdo, eso es suficiente sobre mí. Ahora, componentes. Entonces, seamos honestos. Construir componentes a prueba de futuro no es fácil. Quiero decir, bueno, si tienes un componente como este, es muy simple. Para este ejemplo, usaré un componente de alerta. Por ejemplo, si quisieras tener un componente de alerta que muestre un mensaje de alerta básico, bueno, podríamos hacer algo como esto, ¿verdad? Podríamos recibir entradas de texto como props, tener algunos divs con estilos y luego renderizar lo que se pasó, ¿verdad? Y así es como podríamos usarlo. Simplemente usa el componente de alerta y pasa el mensaje de texto dentro de él. Entonces, obviamente, eso es muy simple, pero el problema de construir buenos componentes es que, a medida que necesitamos agregar más funcionalidad, la complejidad simplemente crece, ¿verdad? El código es cada vez más difícil de mantener y extender. Entonces, ¿qué pasaría si quisiéramos agregar más características a este componente de alerta? Digamos que solo queremos agregar un encabezado también. Podríamos recibir un encabezado como prop, y si se pasó uno, lo mostraríamos, ¿verdad? Como se muestra aquí en el ejemplo. Entonces, por ejemplo, en el lado derecho, tenemos una alerta solo con y otra con tanto el encabezado de alerta como el mensaje de texto. Aún así, eso es bastante simple. Ahora, ¿qué pasa con las variantes? Bueno, supongo que podríamos agregar otra prop, como variante, ¿verdad? Y luego, en función de esa prop y la variante seleccionada, podríamos agregar estilos apropiados. Por ejemplo, podríamos admitir variantes como éxito, peligro, advertencia o información, como se puede ver en el lado derecho. Y así es como lo usaríamos. Simplemente pasa las props de encabezado y variante y algún texto dentro.

Entonces, ¿qué tal agregar, tal vez, un icono? Bueno, nuevamente, otra prop, como icono. Si se pasó y encontramos un icono compatible, entonces podemos renderizarlo. Simple, ¿verdad? Y así es como podríamos usarlo. Entonces, básicamente, de forma predeterminada, el icono se podría mostrar a la izquierda Pero, ¿qué pasa si queremos especificar en qué lado queremos que se muestre? ¿Quizás no a la izquierda, sino a la derecha? ¡Bueno, adivina qué? ¡Otra prop! Por ejemplo, podríamos pasar una prop como posiciónIcono, ¿verdad? De forma predeterminada, podríamos establecerlo en la izquierda. Y luego, si, por ejemplo, era right, podríamos especificar algunas clases, ¿verdad, que se agregarían en el contenedor de alerta? Ten en cuenta que estoy usando Tailwind aquí para las clases.

2. Using Composition for Flexibility

Short description:

El enfoque de configuración puede volverse problemático cuando agregar más funcionalidad requiere agregar más props y lógica condicional. Se vuelve más difícil extender o sobrescribir la lógica del componente. Por otro lado, la composición ofrece un enfoque diferente. Al usar múltiples componentes y pasar props, podemos lograr flexibilidad sin una lógica condicional excesiva. En el ejemplo, el componente de alerta está compuesto por los componentes de envoltura de alerta, contenido de alerta y cuerpo de alerta, lo que permite un mayor control y una extensión más fácil.

Y sí, así es como lo usaríamos, solo más props. Entonces, ese era el enfoque de configuración, ¿verdad? Básicamente, cada vez que necesitamos agregar más funcionalidad, agregamos más props. Pero, bueno, eso puede ser problemático en algún momento. Porque la cosa es que, para cada nueva variante y funcionalidad, necesitamos agregar más y más props y lógica condicional, ¿verdad?

Y a veces puede volverse mucho más difícil sobrescribir la lógica ya definida dentro de un componente o incluso extenderla. Entonces, eso no es realmente lo mejor. El enfoque de configuración lo dificulta mucho. Entonces, a veces, si un componente no se puede extender, es posible que necesitemos construir una nueva versión de él. En cuanto a las ventajas, obviamente, un enfoque de configuración, un componente construido con un enfoque de configuración, es rápido y fácil de usar, ¿verdad? Porque solo necesitas saber qué props están realmente disponibles y qué necesitas proporcionar. Entonces, sí. Básicamente, la funcionalidad y las variantes visuales diferentes se pueden controlar a través de props y eso es todo. Y otro beneficio de eso es que es mucho más difícil divergir del sistema de diseño, ¿verdad? Porque la cosa es que solo puedes proporcionar props y eso es todo. No puedes hacer realmente nada más con eso. Entonces, bueno, esto mantiene la consistencia de la interfaz de usuario y el comportamiento.

Pero sí, como mencioné, el problema es que no podemos extender fácilmente el componente construido con configuración o anularlo. Entonces, ¿qué podemos hacer? Bueno, quiero decir, obviamente podríamos proporcionar props como, digamos, renderizar icono, renderizar encabezado, ya sabes, renderizar cuerpo, y así sucesivamente. Pero nuevamente, más props serían simplemente más desorden. Habría más lógica condicional dentro del componente de alerta. Entonces, en lugar de tratar de configurarlo todo, ¿qué tal si usamos un enfoque diferente, la composición? Entonces, en este ejemplo, tenemos tres componentes. Primero, el envoltorio de alerta, luego el contenido de alerta y el cuerpo de alerta. Y al cuerpo de alerta, pasamos el mensaje de texto. Sé que tres componentes solo para el mensaje de texto es un poco excesivo, pero quédate conmigo. ¿Cómo podría verse? Básicamente, el componente de alerta, obviamente, recibiría algunas props. Luego, renderizaría un div con los estilos apropiados y los hijos, ¿verdad? Entonces, en este caso, los hijos serían el contenido de alerta y el cuerpo de alerta. Luego tenemos el contenido de alerta. Como puedes ver, es muy similar al componente de alerta. Porque, nuevamente, solo recibe las props. Y tiene un div con algunos estilos. Y en realidad, bueno, lo mismo se aplica al cuerpo de alerta. Sé que hay un poco de repetición,

3. Using Context API for Variant Styling

Short description:

En este ejemplo, podemos usar diferentes componentes para construir la funcionalidad de alerta, incluido el marcado personalizado. Para proporcionar variantes a componentes como alertHeader y alertBody, podemos usar el API de contexto. La variante se pasa como una prop al proveedor de contexto de variantes, que luego la proporciona a todos los componentes en el árbol de componentes. Esto permite el estilo apropiado y la especificación de clase para el componente de alerta. La fábrica de contexto crea el contexto y el consumidor para facilitar su consumo en otros componentes.

y ya tenemos algunos de los componentes, pero vale la pena al final. Solo recuerda que este es un ejemplo de contrato. Entonces, sí, así es como lo usamos. Ahora, si quisiéramos agregar, digamos, un encabezado de alerta, bueno, no necesitamos agregar una prop. Solo agregamos otro componente, como el encabezado de alerta, básicamente. Entonces, todos estos componentes son simplemente bloques de construcción que usamos para componer la funcionalidad. Y qué tal, digamos, sí, primero, nuestro encabezado en este caso también es muy similar a otros componentes. Solo recibe las props, renderiza el div con los estilos correctos y finalmente los hijos. Ahora, ¿qué pasa si queremos tener variantes? Bueno, supongo que podríamos pasar una prop al componente de alerta. Por supuesto, también podríamos crear un componente para eso. Pero para este ejemplo, esto funcionará. Entonces, pasaríamos una prop de variante a la alerta. Pero ahora, la cosa es que no podemos componer los componentes correctamente para construir la funcionalidad de alerta. Pero la cosa es que también podemos usar no solo los bloques de construcción, los componentes que construimos específicamente para la alerta, sino que en realidad podemos usar cualquier marcado personalizado que queramos. Si realmente lo deseáramos, podríamos no usar ninguno de estos bloques de construcción, solo el componente de alerta.

Entonces, ¿cómo proporcionamos una variante a todos estos otros componentes como alertHeader y alertBody? Porque necesitan saber cuál es la variante. Porque necesitan tener estilos apropiados. Por ejemplo, el encabezado y el cuerpo para la variante de éxito tienen un texto verde oscuro, mientras que el fondo de la alerta es claro. Y también, tenemos el borde en el lado izquierdo que es oscuro. Entonces, lo que podemos hacer es usar el API de contexto para proporcionar la variante que se especificó a todos los componentes en el árbol de componentes. Entonces, en este caso, recibimos la variante como una prop, y luego la pasamos al proveedor de contexto de variantes. Además de eso, también lo usamos para especificar las clases apropiadas para el componente de alerta. Ahora, veamos cómo podemos construir este proveedor de contexto de variantes. He usado un pequeño ayudante de fábrica de contexto, llegaremos a eso en un momento. Básicamente, devuelve un gancho personalizado que consumirá el contexto y el contexto en sí. Y como puedes ver, en la línea cinco aquí, el uso del contexto de variantes se exporta para que pueda ser consumido en otros componentes. Y luego, en el proveedor de contexto de variantes, básicamente solo renderizamos el proveedor y le pasamos la variante. Y eso es todo. Siguiente. Entonces aquí tenemos la fábrica de contexto que básicamente crea el contexto, crea el consumidor y los devuelve.

4. Using Variants and Icons

Short description:

Actualizamos los componentes de encabezado y cuerpo de la alerta para tener acceso a la variante. Usamos el gancho de variante y consumimos el contexto para aplicar estilos. Agregar un ícono es fácil usando un componente predefinido o marcado personalizado. Usamos un mapa de configuración de íconos para asignar íconos a componentes. Consumimos el contexto de variante para agregar estilos apropiados al ícono. El enfoque de composición es flexible y permite una fácil extensión de la funcionalidad. Sin embargo, requiere componer bloques de construcción y comprender su composición. El enfoque de configuración solo requiere proporcionar props.

Ahora, encabezado de alerta. Sí. Entonces ahora debemos actualizar los componentes de encabezado y cuerpo de la alerta porque también necesitan acceso a la variante. Importamos este gancho de variante, consumimos el contexto y luego lo usamos para aplicar estilos apropiados. Y hacemos lo mismo en el cuerpo de la alerta, nuevamente consumimos el contexto y aplicamos los estilos. Ok. Siguiente. Entonces tenemos el componente de alerta con variantes e íconos, ¿verdad? Entonces, si quisiéramos agregar un ícono, nuevamente, otro bloque de construcción, ¿verdad? Podemos simplemente usar un componente que ya se haya construido como parte de todos los componentes de alerta y pasar un ícono específico. O si quisieras, incluso podríamos agregar algún marcado personalizado para ello. ¿Cómo lo usaríamos? Primero, podemos tener un mapa de configuración de íconos, donde básicamente el ícono se asigna a, digamos, íconos SFG o cualquier otro componente que quieras usar. Luego, usamos la prop del ícono para recuperar uno de los íconos admitidos. Y luego, si tenemos uno, renderizamos el marcado para él. Además de eso, también consumimos el contexto de variante para poder agregar estilos apropiados al ícono, por ejemplo, colores correctos. Como en nuestro ejemplo, el ícono de éxito obviamente será verde mientras que el ícono de advertencia será naranja. En cuanto a las posiciones, básicamente podríamos mover el componente de ícono de alerta hacia abajo y podríamos agregarle algunos estilos. Por ejemplo, en este caso, el ícono de alerta, al haberse movido hacia abajo, se renderizará después del contenido de la alerta, por lo que estará en el lado derecho. Y luego, por ejemplo, podemos agregarle algún margen izquierdo automático con algún relleno derecho con algún valor de margen derecho para que se posicione en el lado derecho, como puedes ver aquí. Ese fue el enfoque de composición. Obviamente, el enfoque de composición es extremadamente flexible, ¿verdad? Porque básicamente solo usas los componentes, que son bloques de construcción, para componer la funcionalidad. Si, por ejemplo, necesitas algo más personalizado, simplemente puedes crear un nuevo marcado, ¿verdad?, o puedes agregar más bloques de construcción y ya está. Por eso, el enfoque de composición es realmente flexible. Y no es difícil, ¿sabes?, extender la funcionalidad, o ni siquiera tienes que sobrescribir nada, ¿verdad? Porque simplemente compones todo. Entonces, sí, es muy fácil crear diferentes funcionalidades y variantes de UI con el enfoque de composición. Sin embargo, hay algunas desventajas en este enfoque, ¿verdad? Porque obviamente necesitas componer los bloques de construcción tú mismo para crear este componente o función completamente funcional. Debido a eso, necesitas saber cómo funcionan los bloques de construcción, qué hacen y cómo deben componerse. Esto no ocurre cuando se utiliza el enfoque de configuración. Porque con el enfoque de configuración, básicamente solo necesitas saber qué props debes proporcionar. Y eso es todo. En el enfoque de configuración, básicamente el componente se encarga de todo.

5. Combining Composition and Configuration

Short description:

El enfoque de composición ofrece más flexibilidad pero requiere más conocimiento sobre cómo componer bloques de construcción. El enfoque de configuración es menos flexible pero más simple de usar y ayuda a mantener la consistencia. Ambos enfoques se pueden combinar para obtener lo mejor de ambos mundos.

Correcto, bajo el capó. Porque no sabes... es posible que no sepas qué está sucediendo allí. Solo necesitas saber las props y qué valores debes pasar. Eso es todo. Mientras que con el enfoque de composición, sí necesitas saber qué están haciendo los bloques de construcción y cómo se deben usar. Y bueno, obviamente, otra desventaja es que lleva más tiempo y código, ¿verdad, para crear lo mismo? Porque, nuevamente, necesitas componer los bloques de construcción tú mismo.

Y otra desventaja es que es mucho más fácil divergir del sistema de diseño y enviar una IU y un comportamiento inconsistentes. Obviamente, porque básicamente puedes componer los bloques de construcción como quieras, ¿verdad? Por lo tanto, sería más fácil cometer errores y enviar una IU inconsistente simplemente, básicamente, al proporcionar clases incorrectas o ordenar los bloques de construcción de manera incorrecta. Esto no ocurre con el enfoque de configuración. Porque, nuevamente, solo proporcionas props y ya está. Entonces, nuevamente, ambos enfoques tienen sus pros y sus contras, ¿verdad? Entonces, la pregunta es, ¿cuándo debemos usar uno u otro? Bueno, técnicamente, ¿por qué no ambos? ¿Verdad? Porque lo que podemos hacer es usar primero el enfoque de composición para construir, básicamente, crear los componentes que son los bloques de construcción, ¿verdad? Y luego podemos usarlos para crear un componente configurado, como aquí tenemos un ejemplo. Nuevamente, como hicimos en el ejemplo del enfoque de configuración, recibimos un número de props para la alerta, luego tenemos el componente de línea de base, que básicamente acepta la variante y el nombre de clase. Luego también tenemos el ícono de alerta. Si se pasó el ícono, se renderizará. Y el contenido de la alerta, donde si se pasó el encabezado, se renderizará el componente de alerta. Y si se pasó el texto para los hijos, se renderizará el cuerpo de la alerta. Y sí, así es como puedes combinar los enfoques de composición y configuración para construir componentes. Entonces, la mayor parte del tiempo, simplemente puedes usar un componente configurado, pero si necesitas más flexibilidad, ¿verdad? Entonces tienes estos bloques de construcción disponibles para ti. En resumen, el enfoque de composición ofrece más flexibilidad, pero requiere más conocimiento sobre cómo componer los bloques de construcción, ¿verdad? Y cómo funcionan. Por otro lado, el enfoque de configuración es menos flexible, pero es más simple de usar y facilita seguir el sistema de diseño. Pero sí, podemos combinar ambos enfoques para obtener lo mejor de ambos mundos. Puedes encontrar ejemplos de código para esta presentación en este repositorio de GitHub. Además, si quieres aprender más sobre patrones avanzados, mejores prácticas, técnicas para muchos conceptos cruciales como la gestión de estado local y global, la arquitectura de proyectos escalables, la optimización del rendimiento, la gestión de APIs, las pruebas y mucho más, definitivamente deberías consultar Road to Enterprise de React.io. Y si quieres ponerte en contacto, puedes encontrarme en Twitter, LinkedIn, CodeMentor y también en la plataforma Road to Enterprise. Bueno, eso es todo por hoy. Espero que hayas disfrutado de la charla y que tengas un buen día.

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
WorkshopFree
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A