Mantener una Biblioteca de Componentes a Gran Escala

Rate this content
Bookmark

Esta charla trata sobre un enfoque de ejemplo sobre cómo organizar el mantenimiento en múltiples equipos, donde hablamos sobre cómo llegamos a este plan en Jumbo y qué beneficios aporta a la Experiencia del Desarrollador al poder entregar continuamente funciones a nuestros clientes.


Estamos lidiando con el mantenimiento, la propiedad, la adición de pequeñas funciones, la actualización de Vue2 a Vue3 y la cultura que respalda esta forma de trabajo.

9 min
01 Jun, 2023

Video Summary and Transcription

Jumbo, una cadena de supermercados en los Países Bajos, tiene un campus tecnológico con más de 400 desarrolladores trabajando en soluciones digitales. Construyeron una biblioteca de componentes distribuida llamada Kompas, que permite a todos contribuir y garantiza que el conocimiento no se pierda. Adoptaron una solución híbrida, combinando enfoques centralizados y descentralizados, para un desarrollo rápido manteniendo una visión clara y altos estándares de calidad. La lección clave es estar dispuesto a cambiar los procesos y encontrar lo que funciona mejor para su organización o equipo.

Available in English

1. Introduction to Jumbo and Kompas

Short description:

Buenas tardes a todos. Mi nombre es Joran. Trabajo para Jumbo, una cadena de supermercados en los Países Bajos. Tenemos un campus tecnológico de Jumbo con más de 400 desarrolladores trabajando en todas nuestras soluciones digitales. Valoramos la experiencia omnicanal y creamos un sistema de diseño llamado Kompas para facilitarla.

Buenas tardes a todos. Como pueden ver, es una pantalla grande. Es realmente súper brillante. Mi nombre es Joran. Trabajo para Jumbo, una cadena de supermercados en los Países Bajos.

Rápidamente, ¿quién es de los Países Bajos o de Bélgica? ¿Quién hace sus compras en Albert Heijn? Tenemos algo de trabajo allí, pero llegaremos. Somos una cadena de supermercados en los Países Bajos o Bélgica. Voy a hablar sobre si esto funciona. Sí funciona. Sobre LEGOs. Pero en realidad, una biblioteca de componentes. Hicimos algo en nuestra organización y quiero compartir nuestra historia con ustedes. Tengan en cuenta que esto puede no ser la solución perfecta para ustedes porque tienen una organización diferente, necesidades diferentes y un entorno diferente, pero funciona para nosotros. Espero poder al menos compartirlo a través de nuestro viaje y darles algo de inspiration para llevar a casa.

Como dije, somos una cadena de supermercados en los Países Bajos. Pasaré por esta diapositiva porque solo son 10 minutos. Es una cantidad corta. Para hacer nuestra solución de e-commerce y todos nuestros productos internos, tenemos un campus tecnológico de Jumbo donde trabajan más de 400 desarrolladores y trabajan en todas nuestras soluciones digitales. Eso no solo incluye el e-commerce, también incluye cosas de machine learning, los data lakes, todo, pero también hacemos web y también hacemos frontend, afortunadamente. Ahí es donde entro yo también.

Lo que valoramos mucho en Jumbo es la experiencia omnicanal. Eso significa para nosotros, al menos, que ponemos al cliente primero. Creemos que eso es realmente importante para nosotros como organización porque desde la perspectiva del cliente, estás tratando con Jumbo y no necesariamente con el Equipo Web A o no necesariamente con un representante de la tienda. Todo lo que proviene de nosotros debería ser, o al menos sentirse, tan familiar para ti como lo es, es la gran parte. Esta experiencia omnicanal es realmente importante para nosotros y para ayudarnos a facilitar una experiencia omnicanal, hicimos algo que mucha gente hace. Creamos un design system y nuestro design system se llama Kompas, que es holandés para compás. Espero que se traduzca bien. Creo que hicimos un buen trabajo allí. Pero esto nos ayuda a tomar buenas decisiones en cómo diseñamos y desarrollamos nuestros productos. Un poco de información de fondo sobre nuestra component library, y de nuevo, no entraré en detalles porque no están interesados en nuestra configuración de vista, pero está construido en Vue Storybook para documentar nuestros recursos.

2. Building a Distributed Component Library

Short description:

Construimos nuestra biblioteca de componentes desde cero para ofrecer funciones altamente específicas. En lugar de tener un equipo dedicado, adoptamos un enfoque distribuido que permite a todos contribuir. Esto crea un sentido de inversión y fomenta la propiedad. Las contribuciones distribuidas también garantizan que el conocimiento no se pierda cuando los miembros del equipo se van. Contar con un gran equipo de desarrolladores front-end que contribuyen ayuda a ofrecer funciones. Además, cada incremento agregado a la biblioteca de componentes es inmediatamente utilizable por otros equipos, lo que hace felices a los propietarios de productos. Para mantener la consistencia, establecemos reglas claras para los contribuyentes, que incluyen comunicación previa, reutilización y simplicidad.

También tenemos un par de acciones, y veo que Chromatic está allí, así que esas personas deberían estar contentas en su stand. Misma compañía. También usamos eso.

Nuestra biblioteca de componentes, la construimos desde cero porque tiene sentido para nosotros para ofrecer nuestras funciones altamente específicas. Ahora, si construyes una biblioteca de componentes desde cero, eso lleva mucho tiempo y esfuerzo. Tomamos la decisión de no tener un equipo dedicado, porque la simple razón, o la suposición en realidad, es que eso introduciría un gran cuello de botella para toda nuestra organización. Y eso es algo que queremos evitar. Queremos que nuestros equipos se muevan lo más rápido posible porque queremos lanzar funciones para que los clientes puedan pedir más comestibles en línea. Así que no hay un equipo dedicado. Y lo que sí hicimos, y lo explicaré en un momento, es que adoptamos un enfoque distribuido. Y para nosotros, eso significaba que todos los que usan la biblioteca de componentes pueden contribuir a la biblioteca de componentes. Así que expliquemos estos beneficios que vemos, o que vimos al menos. Y el primero, y creo que este es el más importante, y aún es válido hasta el día de hoy, es que todos los que contribuyen a una biblioteca tienen algún tipo de sentido de inversión o de cuidado, como quieras llamarlo. Algo a lo que quieres cuidar, ¿verdad? Porque es tuyo, lo construyes, lo mantienes, así que es tuyo, y sientes algún tipo de inversión, que creo que es lo más importante.

Otro beneficio es que a veces sucede que las personas dejan tu empresa. Y lo que no quieres es que se lleven todo su conocimiento, su conocimiento altamente específico de la biblioteca de componentes. Así que con contribuciones distribuidas, también tienes conocimiento distribuido. Esa es nuestra suposición. Y lo siguiente es que si tienes a todos estos desarrolladores front-end que contribuyen, entonces tienes un equipo enorme que te ayuda a ofrecer funciones. Así que esto también es algo bueno. Y por último, el último beneficio que vimos es que cada incremento o todo lo que agregas a la biblioteca de componentes es inmediatamente utilizable por todos esos otros equipos. Esto hace muy felices a los propietarios de productos, y queremos mantenerlos felices para tener sprints sensatos. Veamos qué sigue.

Sí, esto también es muy importante. Así que si tienes a todos estos contribuyentes en tu base de código, necesitas establecer algunas reglas. Básicamente, dijimos que si quieres que las personas jueguen tu juego, necesitas tener un conjunto claro de reglas para que todos estén jugando el mismo juego, y que quede claro qué se puede hacer y qué no se puede hacer. Comenzamos con algunas reglas simples. Es muy sencillo, supongo. Necesitas comunicar de antemano lo que vas a cambiar en la biblioteca de componentes, asegurarte de que sea reutilizable como componente y no altamente específico para las necesidades de tu equipo, y mantenerlo lo más simple posible. Y esto nos funcionó muy bien. Así que estamos muy contentos, estamos trabajando, estamos creciendo en equipos y complejidad, y luego suceden cosas.

3. Addressing Snags and Choosing a Hybrid Solution

Short description:

Encontramos obstáculos en el camino, incluyendo una importante actualización de Vue 2 a Vue 3. Revisamos la idea de un equipo dedicado y nos dimos cuenta de los beneficios de los enfoques centralizados y descentralizados. En lugar de elegir uno, adoptamos una solución híbrida donde los equipos contribuyen a la biblioteca de componentes con visión y orientación de un equipo central. Esto permite un desarrollo rápido mientras se mantiene una visión a largo plazo clara y estándares de alta calidad. La lección clave es estar dispuesto a cambiar los procesos que no funcionan y encontrar lo que mejor se adapte a su organización o equipo.

Encontramos un par de obstáculos en el camino, que poco a poco comenzaron a acumularse hasta un punto en el que necesitábamos abordarlos. Puedes leer sobre ellos. Uno de los ejemplos es una importante actualización de Vue 2 a Vue 3. Esto ocurre en cada framework o biblioteca en la que tienes que hacer algún mantenimiento. Y esto no fue abordado por las características comerciales. Así que hubo una especie de problema. Y si tienes un problema, necesitas encontrar una forma de solucionarlo.

Así que comenzamos a revisitar, una vez más, la idea de un equipo dedicado, porque también tiene algunos beneficios. Veamos, estoy a tiempo, pero está bien. Entonces, el enfoque centralizado y descentralizado, ambos tienen sus inconvenientes y sus beneficios. Algunos de los inconvenientes se enumeran aquí. Esto significa que nuestra descentralización no tenía una propiedad o dirección clara. Y también tienen algunos beneficios. La descentralización es muy rápida. Y la centralización tiene una visión muy clara. Y creemos que la visión también es muy importante.

Entonces, ¿qué hicimos? Bueno, tuvimos que elegir, ¿verdad? Bueno, en realidad, no elegimos nada. Elegimos una solución híbrida donde actualmente estamos investigando este nuevo modelo. Y tenemos una especie de enfoque híbrido donde todavía mantenemos a los equipos contribuyendo a la biblioteca de componentes, pero tienen visión y orientación de un equipo central. Eso es básicamente una especie de pastor de la biblioteca de componentes. Así que ellos cuidan la visión a largo plazo, cuidan la calidad. Y al mismo tiempo, tenemos todos esos equipos que aún pueden contribuir con alta velocidad para que podamos seguir desarrollando de manera adecuada. Así es como lo hacemos. Y quería terminar esto con una especie de conclusión. Si no te llevas nada de esta charla, por favor, ten paciencia conmigo, porque básicamente de eso se trata todo esto. El proceso con el que comenzamos funcionó para nosotros al principio, y con el tiempo nos dimos cuenta de que ese proceso necesitaba cambios. Lo que me gustaría transmitir debería ser obvio, espero, pero si hay algo que no funciona para ti, entonces cambia el proceso o cambia la forma en que haces las cosas para asegurarte de que termines con un proceso que se ajuste a tu organización o a tu equipo. Voy muy bien de tiempo, así que quiero agradecerte. Ha sido genial estar aquí y hablar con todas estas personas. Gracias por tu tiempo y gracias por recibirme.

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 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.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

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 Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.