Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas

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.

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.

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.