Acelerar la Innovación

Rate this content
Bookmark
Slides

Los diseñadores y desarrolladores trabajan en diferentes líneas de tiempo: los diseñadores miran hacia el futuro mientras que los desarrolladores construyen a partir de lo que ya ha sido diseñado. Hablan diferentes idiomas y siguen diferentes procesos. ¿Cómo podemos cerrar estas brechas y construir un proceso de desarrollo más colaborativo? Esta charla mostrará cómo los sistemas de diseño pueden mejorar la comunicación entre equipos multifuncionales, al tiempo que aumentan la productividad y la innovación.

10 min
02 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy se centra en acelerar la innovación y la importancia de resolver el problema correcto. El Pensamiento de Diseño y el ciclo de vida del producto se discuten como herramientas para la innovación de productos. Se introduce el enfoque R, que implica experimentación y aprendizaje constantes. Se explora la idea de sincronizar los componentes de producción desde Storybook hasta Figma. Finalmente, la charla enfatiza el papel de los desarrolladores como los nuevos creadores, desbloqueando sus poderes para innovar.

Available in English

1. Introducción y Antecedentes

Short description:

Hoy voy a hablar sobre acelerar la innovación y dar antecedentes sobre mí mismo. Comencé a trabajar para una startup en San Francisco, que luego fue adquirida por Google. Trabajé en Material Design y en Google Search y Maps. Ahora, vamos a adentrarnos en el tema de la innovación.

¿Cómo están todos hoy? ¡Woo! Muy bien. Hoy voy a hablar sobre acelerar la innovación. Qué es eso. Muy bien. Antes de eso, voy a dar antecedentes sobre mí mismo. Mi nombre es Christobal Chao. Soy de la ciudad de Nueva York. Como pueden ver, tengo acento. Soy de España. Lo siento por lo que sucedió ayer en el fútbol. La Copa del Mundo. Lo siento, alemanes. Fue terrible. Deberíamos haber ganado, pero algo sucedió, chicos. Lo siento. En fin.

Hace diez años fui a San Francisco y comencé a trabajar para una startup. Era una empresa de front-end. Yo era el primer ingeniero. Y un año después, Google adquirió la empresa. Y fui el único ingeniero como parte de esta adquisición. Fue una apuesta difícil. Pero tuve la oportunidad de trabajar en Material Design. Y ayudé a construir la versión uno y la versión dos. Después de eso, trabajé en Google Search y Maps, evangelizando sistemas de componentes. Hace tres años, me mudé a Nueva York. Y comencé mi propio estudio de front-end. Así que sí, este soy yo. Y hoy vamos a hablar sobre innovación.

Como sabrán, todos los días hay millones y millones de ideas.

2. Importance of Solving the Right Problem

Short description:

Pero solo muy pocos tienen éxito. Puede que te preguntes si tienes una idea, si realmente estás resolviendo el problema correcto. Permíteme compartir una historia. Esto es en 1959. Henry Cramer planteó esta pregunta: ¿puede un avión volar solo con la fuerza del cuerpo del piloto? Ofreció £100,000 a quien pudiera cruzar un canal de más de 3 kilómetros. Diez años después, nadie había logrado resolverlo. Pero Paul McGrady se interesó por esta pregunta: ¿cómo se puede construir un avión que pueda ser reconstruido en horas, no en meses? En solo seis meses, logró cruzar el canal de más de tres kilómetros. La historia se llama `Estás Resolviendo el Problema Equivocado` y fue publicada por la Universidad de Stanford. La recomiendo mucho. Échale un vistazo. Es una historia bastante interesante. Pero creo que la parte más importante aquí es lo importantes que son las iteraciones rápidas para comprender cada vez mejor el problema. Y ahora estamos hablando de productos digitales, ¿verdad? Entonces, ¿qué sucede con los productos digitales?

Puede que te preguntes si tienes una idea, si realmente estás resolviendo el problema correcto? Y probablemente no. La razón es que todos estamos limitados por nuestros viejos prejuicios y experiencias. Y eso nos aleja del problema correcto.

Permíteme compartir una historia. Esto es en 1959. Henry Cramer planteó esta pregunta: ¿puede un avión volar solo con la fuerza del cuerpo del piloto? Era una locura, ¿verdad? Hace casi un siglo, alguien hizo esta pregunta, como volar, como una bicicleta que vuela. Como E.T., ¿verdad? Así que ofreció £100,000 a quien pudiera cruzar un canal de más de 3 kilómetros. Había grandes jugadores involucrados. NASA y otras grandes empresas. También individuos. Diez años después, nadie había logrado resolverlo. Es una locura, ¿verdad? Diez años. Estaban invirtiendo mucho dinero en esto. Fallaban una y otra vez. Pero lo que sucede es que cada proyecto tardaba demasiado en armar una bicicleta que vuela. Como meses. Incluso años. Dieciocho años después, nadie había logrado resolverlo. Pero Paul McGrady se interesó por esta pregunta. ¿Cómo se puede construir un avión que pueda ser reconstruido en horas, no en meses? Así que con esta perspectiva, logró crear una bicicleta que vuela y arreglarla varias veces al día en cuestión de horas. Así pudo validar sus suposiciones de manera muy rápida. En solo seis meses, logró cruzar el canal de más de tres kilómetros. La historia se llama `Estás Resolviendo el Problema Equivocado`. Fue publicada por la Universidad de Stanford. La recomiendo mucho. Échale un vistazo. Es una historia bastante interesante. Pero creo que la parte más importante aquí es lo importantes que son las iteraciones rápidas para comprender cada vez mejor el problema.

Y ahora estamos hablando de productos digitales, ¿verdad? Entonces, ¿qué sucede con los productos digitales? Una vez más, la Universidad de Stanford presenta este sistema.

3. Design Thinking and Product Innovation

Short description:

El Design Thinking comienza con empatizar con el usuario, definir una solución, idear, prototipar y probar. El ciclo de vida del producto progresa desde el papel hasta los wireframes, baja fidelidad, alta fidelidad, completamente funcional y producto final. Construir el producto lleva mucho tiempo, especialmente en grandes empresas. Los desarrolladores pueden comenzar a innovar desde el principio.

Probablemente hayas oído hablar de eso. Se llama Design Thinking. Y comienza con empatizar con el usuario, definir una solución, idear, prototipar y probar. Y la idea es que quieras iterar rápidamente sobre esas suposiciones. Y aprender de cada prueba. Cada iteración es un experimento. Y como sabes, Albert Einstein dijo esto. Y él es un gran aprendiz experimental. ¿Verdad? Pero, de todos modos, ¿qué sucede con el producto?

Observamos el ciclo de vida de cualquier producto. Comienza con papel. Puedes tener tu idea y dibujarla rápidamente y ponerla frente a los usuarios y obtener algún tipo de validación. Pero probablemente no será tan precisa. ¿Verdad? A medida que avanzamos, wireframes, baja fidelidad, alta fidelidad, completamente funcional y producto, obtendremos una mejor retroalimentación. ¿Verdad? El producto es el nivel más alto de retroalimentación. Eso es lo real. ¿Verdad? Ahí es cuando nos golpean en la cara. ¿Verdad? Pero, ¿cuánto tiempo lleva llegar allí? ¿Verdad? Eso es lo más largo. ¿Verdad? Construir el producto lleva mucho tiempo. Especialmente si estás en una gran empresa. Cuanto más grande sea la empresa, más tiempo llevará llegar allí. ¿Verdad?

Entonces, si nos vemos a nosotros mismos como desarrolladores, estamos construyendo el producto. ¿Verdad? La innovación ocurre antes que eso. Y eso es lo que hacen los diseñadores. ¿Verdad? Están iterando. Están innovando. Y nosotros estamos construyendo lo que nos dan. ¿Verdad? Entonces, si miramos esto y luego... Lo siento. Pero... ¿Qué pasa si cambiamos un poco las cosas y revertimos este paradigma? Donde los desarrolladores pueden comenzar a innovar desde el principio.

4. El Enfoque R y la Sincronización de Componentes de Producción

Short description:

Esto es lo que llamo el enfoque R. Los niños son los aprendices más rápidos del mundo porque constantemente experimentan y aprenden. Hoy en día, tenemos sistemas de componentes que nos permiten tener componentes reutilizables. Anima está explorando la idea de sincronizar componentes de producción desde Storybook a Figma, lo que permite prototipar fácilmente con productos reales.

Esto es lo que llamo el enfoque R. O puedes llamarlo enfoque React, o como quieras. Estoy buscando nombres. Porque creo que esto es terrible. Y viene con esta idea de tener una mentalidad de niño. Los niños son los aprendices más rápidos del mundo. Y tal vez te preguntes por qué, ¿verdad?

Los niños están constantemente experimentando con diferentes cosas. No les importa. Desmontan cosas. Juntan cosas. Y siguen aprendiendo. Por eso tengo acento, ¿verdad? Aprendí inglés cuando era adulto. Así que... Lo mantengo.

En cualquier caso, hoy en día tenemos sistemas de componentes, ¿verdad? Y los sistemas de componentes nos permiten tener componentes reutilizables. Lo cual realmente nos da mucho tiempo para empezar a experimentar, ¿verdad? Componentes React. Esa es la filosofía principal del sistema React, ¿verdad? Pero esto va un paso más allá. Lo cual comenzó a suceder bastante temprano. Hay una empresa llamada Anima, que está explorando, yendo al siguiente nivel.

Y la idea es que si tienes tu componente de producción en un storybook, puedes sincronizarlo con Figma y tener todas las propiedades sincronizadas desde storybook a Figma. ¿Qué genial, ¿verdad? Si observamos esto, con solo un clic desde nuestro componente de storybook, podemos obtener todas las diferentes variaciones de nuestro componente en Figma. Así que en lugar de buscar propiedades CSS, ahora estamos mirando componentes React, ¿verdad? Hay un poco de retraso aquí. Lo siento, chicos. Y creo que lo más importante aquí es en realidad la capacidad de poder prototipar con componentes de producción. Al final del día, esta es la retroalimentación de mayor calidad que podemos obtener antes del producto. Pero en realidad es la sensación de tener un producto real. Hasta ahora, es 2022. Y Figma aún no lo ha resuelto, ¿verdad? Tener un campo de entrada. Eso es imposible en estos días en Figma.

5. Desbloqueando los Poderes de los Desarrolladores para la Innovación

Short description:

Comenzamos con componentes simples, validamos nuestras ideas y luego pasamos a Bootstrap o Material UI. En un taller reciente, creamos un sistema de componentes en un storybook con más de siete componentes en menos de tres horas. Esto marca una nueva fase en la que los desarrolladores son los nuevos creadores, desbloqueando nuestros poderes para innovar.

Así que sí, esto es bastante genial, chicos. Entonces, ¿cómo empezamos, verdad? Vamos a empezar con componentes simples que ya tenemos. HTML5 ya nos proporciona, como, esos sistemas de componentes de forma gratuita. ¿Verdad? Quiero decir, son bastante feos. Pero vamos a empezar a validar nuestras ideas, ¿verdad? Luego podemos ir un poco más allá, con Bootstrap o Material UI.

Hace como tres días, tuve un taller y en menos de tres horas, creamos un sistema de componentes en un storybook con más de siete componentes. Y lo enviamos de vuelta a Figma. Así que podemos empezar a innovar.

De todos modos, chicos, esto es lo último que quiero decir. Estamos entrando en una nueva fase en la que los desarrolladores son los nuevos creadores, ¿verdad? Ahora podemos desbloquear estos poderes que tenemos, y en lugar de pasar tanto tiempo construyendo cosas, también podemos empezar a innovar. Muy bien, chicos, muchas gracias. Ha sido un gran placer.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
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.
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion