Video Summary and Transcription
Bienvenidos a la charla técnica de Canva donde se discuten el stack tecnológico de Canva, la estructura de componentes de React y el kit de UI para desarrolladores. Canva utiliza Java, Go, Bash, TypeScript y React para el desarrollo. TypeScript, MobX y React fueron elegidos para permitir a cientos de desarrolladores trabajar productivamente en la base de código. La biblioteca de componentes interna de Canva fue explorada y lanzada bajo una licencia semi-abierta, permitiendo una entrega rápida y compartiendo mejoras con la comunidad. La comunidad de desarrolladores ha añadido numerosas integraciones de aplicaciones accesibles para los 150 millones de usuarios activos mensuales de Canva.
1. Introducción a Canva Tech Talk
Bienvenidos a la charla técnica de Canva. Hemos ampliado y mejorado la experiencia de Canva. Repasaré la pila tecnológica de Canva, la estructura de los componentes de React y cómo llevamos nuestro kit de interfaz de usuario a los desarrolladores. Canva es una plataforma de diseño con una suite visual, que incluye presentaciones, pizarras, documentos, productos impresos y sitios web. Utilizamos lenguajes bendecidos para el desarrollo, como Java para los servicios de back-end, Go, Bash, TypeScript o Python para las herramientas, y TypeScript y React para el front-end.
Gracias. Bienvenidos a la charla técnica de Canva. Esta es una versión diferente de la charla. Hemos trabajado un poco para ampliar y mejorar la experiencia de Canva.
En esta charla, voy a repasar rápidamente la pila tecnológica de Canva, cómo estructuramos nuestros React componentes y cómo llevamos nuestro kit de interfaz de usuario a las manos de los desarrolladores. Si no estás familiarizado con Canva, es una design plataforma con una suite visual, que incluye herramientas como presentaciones, pizarras, documentos, productos impresos y sitios web.
Así que, de todos modos, comencemos a sumergirnos en la pila tecnológica de Canva y cómo llegamos a donde estamos hoy. En Canva tenemos lo que llamamos lenguajes bendecidos, que consideramos ser lenguajes aceptables para desarrollar productos, características y tooling cuando trabajamos en esos respectivos dominios. Al limitar el número de lenguajes que consideramos bendecidos, ganamos enfoque para el interno tooling mientras construimos experiencia especializada en toda la organización y el producto. Entonces, los servicios de back-end generalmente están escritos en Java. Tooling está escrito en Go, Bash, TypeScript o Python. Python es el preferido para los modelos de ML. Y finalmente, TypeScript y React es el lenguaje del front-end.
2. React, TypeScript y el SDK de Apps
En el MVP inicial para Canva en 2013, había una prisa por construir nuevas características. A medida que la empresa creció rápidamente, el objetivo en 2017 era permitir que cientos de desarrolladores trabajaran productivamente en la base de código. Decidimos por TypeScript, MobX y React por su flexibilidad y modularidad. Nuestro patrón MVP modificado, el patrón de componente presentado en la tienda, separa la interfaz de usuario de la lógica empresarial. MobX y React nos permiten crear un patrón componible en todo el código. Durante los últimos tres años, he estado trabajando en el SDK de aplicaciones, que permite a los desarrolladores construir experiencias únicas en el editor de Canva.
Pero no siempre usamos React y TypeScript. En el MVP inicial para Canva en 2013 fue efectivamente sin marco. Hubo esta constante prisa al principio para seguir construyendo nuevas características y cualquier cambio arquitectónico al producto tendría que hacerse junto con el desarrollo agresivo de características. La base de código original podría acomodar fácilmente a cinco o más ingenieros trabajando simultáneamente, productivamente. Pero estábamos creciendo muy rápidamente como empresa. Y solo para comparar, en 2013, solo teníamos 14 empleados. Pero para 2017, teníamos más de, bueno, casi 250 empleados.
Entonces, cuando comenzamos a pensar en esta refactorización en 2017, el objetivo principal era permitir que cientos de desarrolladores trabajaran productivamente en la base de código. Entonces, para 2017, cuando comenzamos a investigar, descubrimos que el panorama de JS había cambiado bastante dramáticamente en esos años, como, considera el hecho de que React se lanzó en 2013, y esa fue la misma época en que realmente, ya sabes, desarrollamos nuestro MVP inicial. Entonces puedes empezar a entender cómo había cambiado el panorama. Y entonces tuvimos que encontrar qué bibliotecas funcionaban con los patrones de diseño que habíamos desarrollado y perfeccionado internamente, y finalmente decidimos por TypeScript, MobX y React. React, por supuesto, porque no tenía opiniones, estaba basado en componentes y permitía desarrollo modular para empoderar a nuestros equipos. De manera similar, MobX nos permitió distribuir el estado a través de la base de código con una mejor gestión, más sobre eso en un momento. Y finalmente, TypeScript fue seleccionado por su sistema de tipos flexible, que solo ha demostrado ser cada vez más valioso con el tiempo. En Canva usamos un patrón MVP modificado, al que llamamos patrón de componente presentado en la tienda. Este patrón consta de cuatro partes principales, las tiendas que mantienen el estado y no tienen acceso a nada. Los presentadores operan en esas tiendas, componentes sin estado que no son conscientes de esas tiendas, y fábricas que hacen todo el cableado juntas. A diferencia de MVP, el presentador no manipula el componente directamente y no tiene acceso a nada, y el presentador solo cambia la tienda, lo que a su vez conduce a una nueva representación del componente. Los componentes de React son una capa de vista, son responsables de renderizar la interfaz de usuario en función de las propiedades de entrada y para desencadenar eventos. Las clases de tienda mantienen el estado y son utilizadas por presentadores o componentes. Los presentadores contienen la lógica para los componentes, mutan datos, desencadenan efectos secundarios como análisis, llamadas de servicio, ese tipo de cosas. Los presentadores nos permiten separar la interfaz de usuario de la lógica empresarial, y esto hace que sea mucho más fácil probar y segmentar todo cuando llegas a una empresa tan grande como la nuestra. Y finalmente, la función de fábrica simplemente une todo. Idealmente, las fábricas no tienen efectos secundarios ni otra lógica que el cableado, no deberían ser realmente una razón para probar estas fábricas, solo como unir todo. Entonces, MobX y React nos permitieron crear este patrón masivamente componible en todo el código Y esto realmente nos ha permitido escalar.
De todos modos, volviendo a lo que he estado haciendo en Canva, así que durante los últimos tres años he estado personalmente trabajando en el SDK de aplicaciones, un conjunto de API que permite a los desarrolladores construir experiencias únicas en el editor de Canva. Las aplicaciones son experiencias de usuario distintas. Aquí tenemos el editor de Canva, y en el lado izquierdo tenemos una aplicación de terceros, y todo personalizable por el desarrollador. La cosa es, sin embargo, con la gran libertad para diseñar aplicaciones, viene una gran responsabilidad de UX. Así que queríamos proporcionar a los desarrolladores una biblioteca de interfaz de usuario que hiciera que la construcción de sus aplicaciones fuera muy fácil, mientras cumplía con las estrictas restricciones de diseño de UX de Canva.
3. Explorando la Biblioteca de Componentes Internos de Canva
Teníamos dos opciones para crear la biblioteca de interfaz de usuario: construir un nuevo conjunto de componentes o explorar la biblioteca de componentes internos de Canva. Elegimos la segunda opción y lanzamos la biblioteca bajo una licencia semi-abierta. Esto nos permite entregar la biblioteca de interfaz de usuario rápidamente y compartir mejoras con la comunidad. En el futuro, planeamos pasar a una licencia más relajada para hacer que la biblioteca de interfaz de usuario esté más ampliamente disponible. La comunidad de desarrolladores ha añadido numerosas integraciones de aplicaciones accesibles para los 150 millones de usuarios activos mensuales de Canva.
Así que teníamos un par de decisiones críticas que tomar. Podríamos crear un conjunto completamente nuevo de componentes de interfaz de usuario que imiten la interfaz de usuario de Canva, pero que no estén en los mismos componentes que los ingenieros de Canva usarían internamente para construir el producto principal. Esto nos permitiría explorar opciones como las hojas de estilo CSS, pero se convertiría en un poco de dolor de cabeza de mantenimiento, sin embargo, ya que siempre estaríamos actualizando los componentes para ser consistentes con el estilo de Canva y perderíamos cualquier mejora de localización y accessibility que forma parte de la biblioteca de componentes internos de Canva, que es un gran enfoque para la empresa.
La otra opción era intentar explorar la biblioteca de componentes internos de Canva o hacer una bifurcación de alguna manera. Esto implicaría liberar parcialmente la biblioteca bajo alguna licencia modificada, y como puedes entender, hay mucho código propietario y cosas así que realmente no queremos estar empujando al dominio público. Pero significaría que los consumidores de la biblioteca de interfaz de usuario tendrían que ser consumidores de React. Decidimos la última opción. Así que con una licencia semi-abierta en la que la biblioteca solo puede ser utilizada para aplicaciones construidas para la plataforma. Esto resultó ser la forma más rápida para nosotros de entregar la biblioteca de interfaz de usuario, y significa que cualquier mejora realizada internamente será agrupada y lanzada a la community. Y con el tiempo, queremos pasar a una licencia más relajada. Así que la biblioteca de interfaz de usuario se vuelve mucho más completa en características y, como, más generalmente disponible para la community en general.
Durante el último año más o menos, la community de desarrolladores ha añadido un montón de integraciones de aplicaciones, tanto en nuestro mercado de aplicaciones o incorporadas de otra manera en nuestra plataforma. Y ahora están accesibles para los 150 millones de usuarios activos mensuales de Canva. Entonces, ¿qué va a construir todo el mundo? Gracias. Gracias, Tom.
Comments