Creando un Sistema de Diseño para 1B+ Usuarios en la Era de la IA

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2026
November 16 - 19, 2026
New York, US & Online
Upcoming event
JSNation US 2026
JSNation US 2026
November 16 - 19, 2026. New York, US & Online
Bookmark
Rate this content
Sentry
Promoted
Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

Durante 11 años, la plataforma WhatsApp Web ha sido utilizada por mil millones de personas, sin ningún sistema de diseño consistente durante todo ese tiempo. Esta charla es la historia de cómo vendí el proyecto, construí uno desde cero e influí en otros para migrarlo a un frontend de 1M+ LoC. Además, cómo este proyecto fue impulsado por la IA y beneficia fuertemente la productividad de la IA.

This talk has been presented at Web Engineering Summit 2026, check out the latest edition of this Tech Conference.

Noah Yamamoto
Noah Yamamoto
25 min
11 Jun, 2026

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Noe Yamamoto, un ingeniero de UI, comparte su viaje desde Squarespace a WhatsApp, destacando una pasión por la UI. WhatsApp Web ha evolucionado a una plataforma rica en funciones con un lenguaje de diseño consistente. Los ingenieros enfrentan desafíos en mantener la consistencia del diseño y la paridad de características con el móvil. También encuentran problemas al identificar inconsistencias de diseño y problemas de usabilidad. Una actualización de UI en 2024 trajo mejoras significativas en el diseño, con comentarios positivos de los usuarios. La gestión de componentes heredados y la integración de IA presentan desafíos, al igual que iniciar y evolucionar el sistema de diseño. Se enfatizan los sistemas de diseño impulsados por la comunidad y la integración de IA, junto con los enfoques de prueba y la importancia de la accesibilidad en los sistemas de diseño.

1. Noe Yamamoto's UI Journey at WhatsApp

Short description:

Noe Yamamoto, ingeniero de UI, comparte su viaje de Squarespace a WhatsApp, enfatizando su pasión por la UI. Involucra a la audiencia con preguntas sobre el uso de WhatsApp y reconoce las mejoras de diseño en la plataforma web.

Así que, sí, gracias por la introducción. Como él dijo, mi charla será más una historia que algo educativo pero espero tener algunas cosas educativas interesantes también. Así que sí, soy Noe Yamamoto, técnicamente mi título es ingeniero de interfaz de usuario, lo que realmente enfatiza el hecho de que me importa la UI y me ha importado durante mucho tiempo. Antes de trabajar en WhatsApp, estuve en Squarespace haciendo rendimiento web. Antes de eso ayudé a refactorizar la página web de marble.com, lo cual es muy genial para el nerd en mí. JavaScript fue el primer lenguaje de programación que aprendí y realmente sigue siendo el único que conozco bien, así que en ese sentido soy un especialista.

Pero, bueno, una rápida muestra de manos, ¿cuántas personas usan WhatsApp aquí? Levanten la mano, levanten la mano. Bien, eso es una buena cantidad. Siempre puedes ver a los estadounidenses en la multitud. Aquellos que no levantan la mano aún no han abordado ese mercado del todo. Ahora levanten la mano si han usado WhatsApp en las plataformas web o de escritorio. ¿Alguien? Eso es increíble. Eso es increíble. Bien. Levanten la mano si alguna vez se han encontrado con errores en el WhatsApp web. No, es broma, es broma, no hagan eso. Probablemente no sean culpa mía. Podrían ser culpa mía. Probablemente no sean culpa mía.

Pero sí, así es como se ve la aplicación hoy. Si vas a web.whatsapp.com, primero tendrás una pequeña página de inicio de sesión y luego serás recibido con este hermoso diseño. Bastante moderno, bastante limpio. Sabes, muchos colores y formas consistentes. Podría mejorarse, por supuesto, pero está a años luz de lo que solía ser. ¿Alguien usó WhatsApp web cuando se veía así? ¿Alguien? Oh, tenemos un par. Tenemos mucha gente en realidad. Eso es increíble. Así que creo que hay mucho que amar de este diseño. Sabes, tiene un encanto. Puedes enviar mensajes a tus contactos.

2. Evolution of WhatsApp Web Features

Short description:

La evolución de WhatsApp web desde las primeras dependencias del teléfono hasta una plataforma más rica en funciones con un lenguaje de diseño consistente desde 2015 hasta 2024.

Puedes enviar imágenes a tus contactos, videos a tus contactos. Eso es todo. Eso es todo lo que realmente podías hacer. Sabes, tan simple como se pone. Incluso soportábamos todos los teléfonos más populares de la época. Tienes tu Windows phone, tienes tu BlackBerry 10, tu Nokia S60 ahí arriba.

En ese momento, en realidad usábamos una conexión directa a tu teléfono para ejecutar WhatsApp web. Tal vez aquellos de ustedes que estaban por ahí en ese entonces, recuerden que si su teléfono se apagaba o se ponía en modo avión o algo así, no podían usar la web más. Esa fue una gran queja, pero fue una de las cosas que se hizo difícil por el cifrado de extremo a extremo. Eventualmente encontramos una manera de solucionar eso.

Pero sí, esta versión temprana de la aplicación fue desarrollada y diseñada casi en su totalidad por una sola persona. Fue el mismo tipo que desarrolló la página de marketing de WhatsApp.com. Ese es un verdadero desarrollador 10X ahí mismo. Eso no fui yo. Fue antes de mi tiempo, pero súper impresionante. Para cuando WhatsApp web salió en 2015, así es como se veía esa página de inicio. Puedes ver tu Android genérico y iPhone justo ahí. Puedes ver los acentos muy azulados-verdes que usamos para todo. Muy cuadrado, muchos bordes afilados y tonos claros. Pero sigue siendo bastante bonito. Esta es una captura de pantalla un poco más tardía, cuando comenzamos a soportar más funciones como mensajes que desaparecen mensajes destacados, documentos. Esta es una captura de pantalla de 2021. Esto fue bastante poco después de que me uní. Aún puedes ver que es en gran medida el mismo diseño con el que comenzó. Las cosas son un poco más limpias, un poco más desarrolladas. Pero en términos del lenguaje de diseño real, no había cambiado realmente en absoluto. Y continuó de esta manera por un tiempo. Desde 2015 hasta 2024, WhatsApp web siguió siendo desarrollado. Las funciones seguían siendo lanzadas. La base de código seguía creciendo.

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

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
React Summit 2022React Summit 2022
27 min
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
Descubre si tu sistema de diseño es mejor que nada
React Summit 2022React Summit 2022
20 min
Descubre si tu sistema de diseño es mejor que nada
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

Workshops on related topic

De Caos a Claridad: Gestionando la Complejidad de Sistemas Agénticos en FinTech Nativo de la Nube
TechLead Conference 2025: AI in OrgsTechLead Conference 2025: AI in Orgs
49 min
De Caos a Claridad: Gestionando la Complejidad de Sistemas Agénticos en FinTech Nativo de la Nube
Workshop
Sibasis Padhi
Sibasis Padhi
Visión general:        La adopción de AI trae complejidad al sistema, especialmente cuando la autonomía, la orquestación y los microservicios nativos de la nube colisionan. Basado en mi investigación publicada y experiencia empresarial, este masterclass desglosa la complejidad de implementar sistemas agénticos de manera responsable. Este masterclass está dirigido a ingenieros senior que están navegando arquitecturas nativas de la nube mientras introducen componentes autónomos de AI, sin un plan claro.Contenidos:1. La Nueva Pila de Complejidad    a) Microservicios, AI y generadores de código de terceros    b) Dónde comienza el caos del sistema y por qué se intensifica
2. Comprendiendo el Comportamiento de AI Agéntico    a) Autonomía, memoria y riesgo de alucinación    b) Ejemplos del mundo real del soporte de decisiones financieras
3. Patrones de Diseño para la Claridad    a) Barandillas para la observabilidad del sistema    b) Compromisos: orquestación vs generación de código
4. Escalabilidad Sin Agotamiento    a) Lo que los ingenieros senior deben liderar: gobernanza, ética, fiabilidad     b) Diseñando sistemas que escalen de manera segura bajo carga
5. Conclusiones    a) Hoja de ruta para la adopción agéntica    b) Cómo probar y monitorear AI no determinista    c) Alineación con la velocidad del equipo y los resultados del negocio
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
React Advanced 2022React Advanced 2022
118 min
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
Workshop
Richard Moss
Richard Moss
En este masterclass, recorreremos los enfoques más efectivos para construir componentes de UI escalables que mejoren la productividad y felicidad del desarrollador :-) Esto implicará una combinación de ejercicios prácticos y presentaciones, que cubrirán los aspectos más avanzados de la popular biblioteca styled-components, incluyendo la tematización e implementación de utilidades styled-system a través de props de estilo para un desarrollo rápido de UI, y culminando en cómo puedes construir tu propia biblioteca de componentes personalizada y escalable.
Nos enfocaremos tanto en el escenario ideal, donde trabajas en un proyecto nuevo, como en tácticas para adoptar incrementalmente un sistema de diseño y enfoques modernos para el estilo en una base de código existente con algo de deuda técnica (¡que suele ser el caso!). Al final del masterclass, deberías sentir que comprendes los compromisos entre diferentes enfoques y sentirte seguro para comenzar a implementar las opciones disponibles para avanzar hacia el uso de una biblioteca de componentes basada en un sistema de diseño en la base de código en la que trabajas.
Prerrequisitos: - Familiaridad y experiencia trabajando en grandes bases de código de React- Una buena comprensión de los enfoques comunes para el estilo en React