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

Rate this content
Bookmark

En Canva, ayudamos a más de 150 millones de usuarios mensuales a crear y diseñar. ¿Cómo habilitamos a los desarrolladores para hacer lo mismo? Presentamos el SDK de Apps de Canva, que está construido para empoderar a los desarrolladores para crear interfaces de usuario para sus Apps de Canva usando React. Canva recientemente optimizó el proceso de creación de aplicaciones al compilar algunos de los componentes de UI más utilizados y solicitados por nuestros desarrolladores en nuestro

paquete @Canva /app-ui-kit. Compartiré cómo iteramos sobre nuestro SDK de Apps para empoderar a los desarrolladores de todo el mundo para integrar su marca en Canva.

Tom Northall-Little
Tom Northall-Little
8 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

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.

Available in English

1. Introducción a Canva Tech Talk

Short description:

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

Short description:

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.

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

Ship Your UI Faster With Turborepo
DevOps.js Conf 2024DevOps.js Conf 2024
21 min
Ship Your UI Faster With Turborepo
Iteration velocity is the key to unlocking the potential of your technical teams and business. In this talk, we'll build the groundwork for a highly scalable monorepo using Turborepo and talk about the philosophies behind architecting codebases for teams of all scales. Through the power of Remote Caching, we'll never do the same work twice and we'll deliver your applications at the speed of Turbo.