Código bajo demanda: El futuro de la colaboración en código

Entonces, echemos un vistazo. Saludos a todos y gracias por acompañarme hoy. Durante los próximos 20 minutos, demostraré cómo se puede incorporar el streaming en nuestro flujo de trabajo de desarrollo. Manténganse atentos, para un fascinante viaje.

No hace mucho tiempo cuando todos comprábamos CDs para escuchar música, o DVDs para ver películas. Sin embargo, nadie hace esto ya. Los servicios de streaming, como Spotify y Netflix, lo han reemplazado todo. Pero, ¿qué pasa con nuestro código? Aquí hay un pequeño secreto. Nuestro código todavía está atrapado en los años 90 en esos CDs. ¿No creen que es hora de una actualización?

Antes de abrirnos a este nuevo bit, permítanme contarles un poco sobre mí y por qué estoy hablando de esto hoy. Así que un poco sobre mí. Soy el líder de ingeniería en Bit. He estado trabajando en Bit durante 6 años, especialmente en el proyecto de código abierto. Para ponerlo simplemente, Bit es una cadena de herramientas de código abierto hecha para crear software componible. Es algo así como construir con Lego. Y créanme, después de todos estos años, tengo un montón de historias sobre colaboración de código y metodologías de desarrollo. Aparte de eso, chateo en blogs, hablo en escenarios, sobre javascript, typescript, frontend, y convirtiendo casas en hogares inteligentes. Si algo de eso suena interesante para ti, sígueme en ix. Pero al final del día, principalmente estoy codificando, y haciendo lo que todo desarrollador dedicado ama hacer. Transformar café en código.

Bueno, ya basta de hablar de mí. Volvamos a nuestra historia principal, el streaming. ¿Por qué todos están tan emocionados con esto? Desglosemos lo que hace funcionar al streaming. En un momento, veremos cómo podemos rociar algo de esa magia en nuestro juego de desarrollo.

¿Recuerdas comprar un CD y pagar por todo solo por esa una pista? El streaming cambió el juego. Ahora puedes componer tu propia lista de reproducción, eligiendo solo las pistas que te gustan. En la era del CD, buscar música era como una mini búsqueda. Ahora con el streaming, es pan comido. Escribe un estado de ánimo, artista o ritmo, obtén todos los detalles, como quién está cantando, cuánto tiempo está sonando, y otra información genial justo frente a ti.

En los días del CD, la música era un viaje en solitario. El streaming cambia eso. Ahora puedes vibrar con melodías con amigos, dejar comentarios y compartir tus sentimientos sobre pistas particulares, todo en un solo lugar. Recuerda los DVD's. Una vez que los tenías, estaban grabados en piedra. La versión del director o alguna escena eliminada genial salió. Con el streaming, está ahí, esperándote. Sin complicaciones.

Algo genial del streaming, quién llega a hacer los ritmos. En el pasado, soñar con lanzar una pista significaba acercarse a las discográficas y gastar dinero en tiempo de estudio, design y distribución. Ahora, agarra el micrófono, presiona grabar y boom, estás en Spotify. Apuesto a que algunos de ustedes están pensando, espera, ¿no estamos ya montando esta ola? Sí, todos somos componentes astutos y hábiles viviendo ese sueño modular. Eso es un buen comienzo, seguro, pero créeme, hay más jugo para exprimir de este enfoque. Antes de profundizar, aclaremos lo que entendemos por componente. Es esencialmente cualquier pieza de código utilizable, incluyendo componentes de UI, funciones de utilidad, o microservices. Pero no se limita solo a componentes de UI. Profundicemos más.

Bien, permíteme presentarte a dos desarrolladores que nos pintarán el cuadro. Claudia está viviendo la vida futurista del cloud-streaming, y McDonald está tocando en el mundo de hoy, todavía girando CDs. Saltaremos entre sus experiencias, destacando el contraste y trayendo esas características clave del streaming al foco. Vamos a rodar.

Ambos fueron contratados como ingenieros de front-end en Spotify la semana pasada. Qué suerte tienen. Mientras codifican para la aplicación de Spotify, están sintonizando una lista de reproducción seleccionada a mano que he seleccionado especialmente para esta charla. Tómate un momento, incluso pausa el video, y realmente revisa los nombres de esas pistas. Y el consejo profesional, la banda número seis, son la verdadera oferta. Asegúrate de escucharlos. Ambos tienen la misma tarea, construir un nuevo menú de reproductor para la aplicación móvil de Spotify.

Bien, comencemos con McDonalds. Su flujo de trabajo, probablemente bastante familiar para la mayoría de ustedes aquí. Lo pasaré por alto, pero presta atención a los matices. Primero, McDonalds ejecuta git clone, o el repositorio de la aplicación móvil, y ahora comienza el juego de la espera. Desde el principio, está incorporando un montón de código que quizás ni siquiera use para su tarea. A continuación, McDonald siente que está vagando por una tienda masiva, tratando de encontrar el lugar perfecto para su nuevo componente. Pero hombre, hay carpeta tras carpeta. ¿De qué trata todo este código? Se siente increíble aquí. Después de un poco de caminata, McDonald encuentra el lugar correcto y configura una nueva carpeta para el componente del Reproductor.

McDonald comienza, escribiendo su primera línea de código. Importar, botón, barra de progreso, de... ¿pero de dónde? ¡Tiene que haber un botón en algún lugar que pueda usar! ¿Pero dónde se esconde? Con un poco de suspiro, se dirige a su compañero de equipo senior. Oye, ¿de dónde puedo sacar este botón? Su compañero de equipo le señala los muelles confluentes. Mira eso, dicen, se trata del sistema de design de Spotify. Con ese obstáculo superado, McDonald termina esa línea inicial de código. Pero aquí está el giro, está incorporando extras, ¡gracias al viejo paquete! El tree-shaking tiene su propio límite, ¿verdad? Ahora, al siguiente desafío, ¿cómo trabaja con ese botón? Buenas noticias, hay un enlace al storybook de Spotify. Pero oh, no está actualizado. Resulta que un equipo diferente lo mantiene, y aún no han lanzado la última versión. Aunque está lo suficientemente cerca. El próximo rompecabezas de McDonald, un mar de variaciones de botones. ¿Cuál es el adecuado? Avanzando, McDonald revisa las APIs y los indicadores de los botones. Hay un enum para el estilo de borde, opciones como cuadrado o redondo. Pero espera, necesita un botón circular, eso no está en la lista. Ahora, ¿de dónde va desde aquí? Mejoremos la API del botón.

¿Fácil, verdad? Todo lo que necesitamos es clonar el repositorio del sistema de design, leer los documentos de contribución, actualizar el código, enviar el PR, ahora esperar a que sea aprobado. Vale, está aprobado y fusionado, vale, espera de nuevo. Necesitamos una nueva versión. Vale, se ha publicado una nueva versión del sistema de design. Pero espera, ¿qué pasará con mi barra de progreso ahora? ¿Se romperá? De nuevo, IPEI Extra.

En realidad, McDonald decide, simplemente copiemos ese código del botón y modifiquémoslo aquí. Quiero decir, ¿por qué dejar que la decisión de alguien más me retrase? ¿Qué podría salir mal? Muy bien, McDonald ha desplegado su nuevo código de reproductor. Avancemos rápidamente a la siguiente parte de su viaje. Espera, antes de avanzar a toda velocidad. Necesitas construir este proyecto. Eso significa sumergirse en más documentos y luego el juego de la espera. La construcción lleva su tiempo, algo así como grabar un DVD entero. Menos mal que McDonald piensa, oye, estoy registrando horas para esto. Todo listo y luciendo bien. Es hora de una revisión por parte de los equipos de producto y design. ¿Dónde debería ir esta versión actualizada? Para desplegar los cambios, tenemos que desplegar una nueva versión completa de la aplicación. Es como grabar un CD fresco y llevarlo a la tienda. Pero oye, eso es algo que alguien más debe manejar, ¿verdad? McDonald piensa, solo me relajaré mientras el equipo de dev ops se encarga de eso.

Ahora cambiemos de marcha y echemos un vistazo al mundo de Cloudia. ¿Cómo es su experiencia? Cloudia inicia las cosas simplemente creando una nueva carpeta vacía llamada Espacio de Trabajo del Reproductor para su proyecto de reproductor. Sin estar atada a un contexto de aplicación específico, el enfoque de Cloudia cambia. Ella está creando para la usabilidad, asegurando límites claros, documentación completa, y una API fácil de usar.

Despliega dos nuevos componentes, Reproductor y Control del Reproductor. Aprovechando una herramienta de andamiaje, los genera a partir de la plantilla de Componente React especializada de Spotify. Esta plantilla ya incluye el código esencial, documentación completa, ejemplos como historias, y todas las configuraciones, TypeScript, Linterpreter, Webpack. Lo mejor de todo, estas configuraciones están cuidadosamente guardadas. Sin distracciones ni desorden, Cloudia puede concentrarse puramente en lo que ama, escribir código.

A continuación, en su agenda, encontrar el botón correcto, Cloudia se sumerge en la plataforma de streaming. Está diseñada para desarrolladores como ella, ofreciendo una poderosa búsqueda contextual con filtros, como etiquetas como input o TypeScript, tecnología, en su caso React, y más. Además, es recibida con una rica experiencia de descubrimiento que muestra la versión actual del componente, tiene etiquetas completas, el tamaño del paquete de componentes, documentación completa, una demostración en vivo del componente, ejemplos preestablecidos, una referencia detallada de la API, todo lo que necesita justo en sus huellas dactilares, puntas de los dedos.

Pero espera, hay más, una vista clara de las dependencias y qué componentes dependen de este, detalles sobre los casos de prueba y su cobertura. Una lista de componentes similares que ofrecen alternativas. Claudia puede evaluar rápidamente si este componente se ajusta a la factura o tal vez explorar los similares. La mejor parte, todo está fresco y actualizado ya que es una parte integral del componente. No hay documentación desactualizada aquí. Claudia instaló sin problemas solo el botón, reflejando la experiencia de Spotify, descargando precisamente lo que requiere. No hay una parte innecesariamente voluminosa de un gran sistema de diseño. Esto no solo agiliza el tamaño de su paquete, sino que las futuras actualizaciones para este componente en particular serán más sencillas y seguras.

Claudia integra el componente de botón específico en su código. Sin embargo, pronto se da cuenta de que al botón le falta el estilo de circuito que necesita. En este enfoque moderno, Claudia tiene la capacidad de bifurcar un componente. Al hacerlo, extrae el código fuente del botón directamente en su espacio de trabajo. Este proceso incluye sin problemas sus dependencias y configuración como TypeScript, Jest y el linter. Aún mejor, todo se conecta automáticamente con el fork local, permitiéndole integrar y usar el botón en el código del reproductor tal como antes sin ningún ajuste adicional.

Claudia modificó la API del botón para acomodar el estilo específico que necesita. Tras este cambio, ejecuta un comando dedicado. Este comando no solo compila el botón, sino que también lo lintea y lo prueba, todo mientras aprovecha las herramientas nativas del botón y las configuraciones. Esto asegura que el botón actualizado permanezca consistente con sus estándares de calidad originales.

Con todo en su lugar, Claudia ahora puede concluir el desarrollo de sus elegantes nuevos componentes de control de reproductor y reproductor. Claudia procede a importar la aplicación a su espacio de trabajo ya que requiere actualizaciones para acomodar el nuevo reproductor. Esta acción, muy similar a la bifurcación, integra el componente original, pero con una distinción significativa. Altera el componente original en lugar de crear una bifurcación separada. Importar la aplicación también trae el código fuente, la configuración y las dependencias necesarias para una integración sin problemas.

Con todo configurado, Claudia puede incorporar sin esfuerzo su nuevo reproductor como si ya estuviera instalado desde el registro NPM. Todas las conexiones y configuraciones necesarias se manejan automáticamente, agilizando el proceso de integración. El proceso BIT ahora avanza a la velocidad del rayo gracias al espacio de trabajo de Claudia que solo contiene cuatro componentes. Claudia lanza la aplicación localmente sin necesidad de manipular configuraciones. Todos los ajustes necesarios del servidor de desarrollo están integrados sin problemas en el componente de la aplicación en sí. Esto le permite validar fácilmente que todo funciona como se esperaba. Para recopilar comentarios, Claudia envía una solicitud de cambio en la cloud. Esta solicitud abarca dos nuevos componentes, reproductor y control de reproductor, un componente defectuoso, el botón, y un componente modificado, la aplicación. Con esto, prepara el escenario para revisiones y posibles mejoras.

Esto no es solo una revisión de código regular. Es una evaluación holística de 360 grados. Abarca toda la iniciativa empresarial e involucra a varios roles, incluyendo diseñadores, gerentes de producto, desarrolladores, escritores técnicos, y no se detiene ahí. También reúne a diferentes equipos y diferentes miembros del equipo, como el equipo de Claudia, el equipo del sistema de design, el equipo de la aplicación. La aportación y perspectiva de todos contribuyen al proceso de revisión integral. La transparencia es clave en esta iniciativa empresarial. Hay un feed dedicado donde todos pueden mantenerse al tanto del proceso completo. Esto incluye actualizaciones sobre cambios de código, nuevos ejemplos, comentarios de revisión y mucho más. Y la mejor parte, todo esto se desarrolla antes de que se fusione cualquier código. Ahora Claudia puede realmente medir su impacto, al igual que los artistas que han compartido sus canciones en podcasts en Spotify. Seguir a la audiencia es crucial. Es una fuente de empoderamiento, ver a las personas interactuar con el contenido, y es una fuerza impulsora detrás de la motivación para seguir creando. Esto es cierto, incluso si hay una compensación involucrada es decir, y depende del número de oyentes. De manera similar, en el mundo del código, hay un deseo de socializar y compartir el impacto de nuestro trabajo. Ahora, comparemos rápidamente el mundo del CD y el mundo del streaming basado en los factores clave que destacamos al principio. En el mundo del CD, siempre hay un costo extra.

Terminas pagando por canciones, también conocidas como código, que en realidad no necesitas. Dado que todo está agrupado en un CD masivo, te quedas con un tamaño de paquete considerable, más existe el riesgo siempre presente de actualizaciones cuando quieres actualizar un componente. ¿Quién sabe cuál de los otros 100 componentes podría romperse en el proceso? Este enfoque es un claro anti-patrón para los incentivos de colaboración.

En el mundo del CD, estás constantemente trayendo montones de código que no necesitas de inmediato. Esta llegada continua crea una distracción significativa durante el proceso de desarrollo. Es un poco como buscar en una tienda física, buscando ese cómo encontrar CD. Sin mecanismos de búsqueda y descubrimiento adecuados, te quedas dependiendo de la suerte.

En contraste marcado, el enfoque de streaming ofrece una experiencia optimizada con búsqueda contextual por etiquetas, tecnología, dependencias y tamaño, acceso a ejemplos en vivo, documentación legible y buscable, referencia de API. Si bien podrías tener una experiencia de descubrimiento parcial para secciones más pequeñas del código de tu organización, como el sistema design, la mayoría del código de tu organización no es el sistema design. Entonces, a veces el código que necesitas está escondido en algún lugar, lo que lo hace desafiante de localizar en el mundo de la ciudad.

En el mundo de la ciudad, es un trato único. Entierras tu código en la ciudad y eso es todo. Pero en el mundo futuro, tu código siempre está en vivo y abre un mundo de posibilidades sociales. Puedes rastrear tu impacto como individuo o como equipo dentro de la organización. Descubre cuántas personas que nunca imaginaste están usando tu código. Evalúa la calidad de tu código y tu crecimiento personal con el tiempo. Evalúa cuánto mejor eres hoy que ayer. Además, recibes constantemente retroalimentación sobre tu código, dejando espacio para mejoras constantes. Es un entorno de desarrollo dinámico y social.

En el mundo del CD, estás lidiando con copias físicas y las copias físicas pueden ser bastante desafiantes de modificar. Implica un proceso que consume mucho tiempo de crear una nueva versión del CD, recopilando todos los cambios, grabando un CD nuevo, y luego enviándolo a las tiendas. Esto resulta en largas esperas para las actualizaciones para que estén disponibles para ti, tu equipo o tus usuarios. Estás esencialmente a merced de cambios no relacionados que se fusionan, soportando tiempos de construcción largos y navegando por el complejo proceso de despliegue. En el mundo del streaming, es una historia completamente diferente. Puedes reemplazar archivos en el servidor sin esfuerzo, haciendo que los cambios estén instantáneamente disponibles para todos. En nuestro caso, modificamos, revisamos, y desplegamos componentes individuales, lo que agiliza el proceso de código a producción. Es un viaje significativamente más rápido.

En el mundo de la ciudad, solo unos pocos seleccionados pueden convertirse en artistas y llegar a un público amplio. De manera similar, en nuestro caso, solo un número limitado de desarrolladores pueden crear y distribuir código reutilizable. Implica numerosas herramientas y procesos, y solo ellos pueden tener un impacto significativo dentro de la organización. Pero en el mundo del streaming, es una historia completamente diferente. Cualquiera puede participar. Cualquiera puede crear un componente reutilizable y compartirlo sin esfuerzo dentro de la organización o con el mundo en general. Te sorprenderá descubrir cuán vasto es el mundo. Y hay personas, tanto dentro como fuera de tu organización, que han estado buscando tu pieza específica de código. Se trata de democratizar el desarrollo y ampliar el alcance de tu trabajo. Esta visión puede sonar como una utopía. Pero no es solo un cuento de hadas. Entonces, ¿cómo convertimos este sueño en realidad? Lograr esta transformación es de hecho una empresa considerable, tocando varios aspectos, desde cambios filosóficos y metodológicos hasta cambios organizacionales y avances en tecnología y productos. He estado dedicándome a desarrollar estos procesos y tecnologías a tiempo completo durante los últimos seis años.

Ahora profundicemos en algunos factores clave a considerar en el camino hacia este futuro. El primer paso es cambiar nuestra perspectiva en cuanto a la relación entre las aplicaciones y los componentes. En lugar de centrar nuestro proceso de desarrollo en las aplicaciones, que incluyen la estructura organizativa, los repositorios, la tubería CICD y testing específicos para las aplicaciones, deberíamos colocar el componente en el núcleo. Aquí es cómo.

Trata los componentes como productos completos que merecen respeto. Desarrolla componentes con la reutilización en mente, suponiendo que se utilizarán más de una vez. Organiza tu estructura alrededor de los componentes. Prioriza las revisiones de componentes. Versiona y envía componentes individualmente. Documenta de manera integral los componentes. Enfoca tus esfuerzos de testing en los componentes y establece una tubería CI específicamente para los componentes. Este enfoque cambia el foco a la liberación de sencillos individuales a tu entorno de desarrollo, similar a cómo los artistas lanzan canciones en Spotify en lugar de armar álbumes completos de CD.

Al final, es la presencia de componentes reutilizables bien elaborados lo que realmente construye tu valor compuesto de I+D. Estos componentes sirven como la base para desarrollar las características del mañana sin la necesidad de reinventar la rueda cada vez. Además, te permiten dejar atrás la carga de un gigantesco monolito legado pesado que te retiene.

Simplificar el proceso de creación y compartición de componentes individuales es clave. Debería ser tan sencillo que cualquier persona en tu organización no solo sea capaz, sino también esté motivada para hacerlo. Considera este aspecto crítico, proporcionando plantillas fáciles de usar para la creación de componentes, simplificando la configuración de las herramientas de desarrollo necesarias, simplificando la gestión de las dependencias de los componentes, y asegurando los permisos apropiados para compartir y colaborar en los componentes. Dedica tiempo y esfuerzo a mejorar tus herramientas de descubrimiento.

Considera el siguiente aspecto, haz que la búsqueda de componentes sea fluida y efectiva. Implementa un sistema de etiquetado para categorizar los componentes. Proporciona ejemplos claros y útiles para mostrar la funcionalidad del componente. Establece un sistema de clasificación para destacar los componentes populares y de alta calidad. Además, infunde una dimensión social en tus herramientas de descubrimiento. Piensa en formas de medir y presentar el impacto, el uso y otras métricas sociales. También asegura una conexión directa entre el código y las herramientas de descubrimiento. El desarrollador responsable de crear un componente debe ser responsable de su experiencia de descubrimiento. No es el problema de alguien más. Recuerda, incluso una gran canción pasa desapercibida si nadie puede encontrarla. Mejora tu flujo de trabajo para bifurcar y contribuir a otros componentes.

Este proceso debería ser sencillo. Facilita la bifurcación de un componente existente. Realiza cambios y constrúyelo. Facilita el proceso de sugerir nuevos cambios. Asegúrate de que haya una forma conveniente de usar el componente bifurcado mientras se espera que el componente original se actualice con las nuevas sugerencias.

Asegúrate de que fomentar la contribución y la colaboración estén en el corazón de tu cultura de desarrollo. Recuerda que esta transformación debe suceder gradualmente, un paso a la vez. No puedes cambiar completamente toda la organización en un solo día. Cuando comiences a trabajar en tu próxima característica, intenta construirla con los componentes y la usabilidad en mente. Cada pequeño paso contribuye a un proceso de desarrollo más ágil y eficiente.

Para concluir, queda una última pregunta. ¿En qué mundo te gustaría vivir? No dudes en compartir tus pensamientos y preferencias conmigo en los comentarios o a través del formulario de comentarios. Gracias por acompañarme en este viaje. Espero que lo hayas encontrado agradable e informativo. He incluido el código QR para un breve formulario de comentarios anónimos. También puedes encontrar mi información de redes sociales en caso de que te gustaría conectar. Tus comentarios son muy apreciados. Gracias de nuevo, y espero tenerte conmigo la próxima vez. Adiós. ♪♪