Mantener una Biblioteca de Componentes a Gran Escala

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.

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.

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.