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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

En Canva, los servicios de back-end generalmente están escritos en Java. Para el tooling se utiliza Go, Bash, TypeScript o Python, siendo Python el preferido para los modelos de ML. El front-end utiliza principalmente TypeScript y React.

Canva utiliza un patrón modificado de MVP llamado patrón de componente presentado en la tienda, que incluye tiendas para mantener el estado, presentadores que operan en estas tiendas, componentes sin estado y fábricas que hacen el cableado de los componentes.

Inicialmente, Canva fue desarrollado sin un marco específico en 2013. Sin embargo, hacia 2017, se adoptaron TypeScript, MobX y React para mejorar la gestión del estado y facilitar el desarrollo modular, adecuándose a los cambios en el panorama de JavaScript.

Canva proporciona una biblioteca de interfaz de usuario con una licencia semi-abierta, diseñada específicamente para aplicaciones construidas para la plataforma. Esta estrategia permite integrar mejoras y mantener la consistencia con el estilo y accesibilidad de Canva.

Canva comenzó con 14 empleados en 2013 y experimentó un crecimiento rápido, alcanzando casi 250 empleados para el año 2017. Este crecimiento impulsó una reestructuración significativa para permitir que cientos de desarrolladores trabajaran productivamente en la base de código.

En Canva, las tiendas mantienen el estado y son utilizadas por los presentadores, quienes contienen la lógica para los componentes, manejan la mutación de datos y desencadenan efectos secundarios. Este diseño ayuda a separar la interfaz de usuario de la lógica empresarial, facilitando las pruebas y la mantenibilidad.

El uso de MobX y React ha permitido a Canva crear un patrón de diseño masivamente componible, lo que ha sido clave para escalar la plataforma y facilitar el desarrollo modular y la gestión eficiente del estado a través de la base de código.

La comunidad de desarrolladores ha enriquecido la plataforma de Canva con numerosas integraciones de aplicaciones, aumentando la funcionalidad disponible para los 150 millones de usuarios activos mensuales y fomentando una participación más activa en el ecosistema de 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.

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

Menos desorden, más poder: Aprovecha el poder de la plataforma web
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Menos desorden, más poder: Aprovecha el poder de la plataforma web
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.
JavaScript en la Gran Pantalla: Creando Apps de TV
JSNation 2024JSNation 2024
22 min
JavaScript en la Gran Pantalla: Creando Apps de TV
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Envía tu interfaz de usuario más rápido con Turborepo
DevOps.js Conf 2024DevOps.js Conf 2024
21 min
Envía tu interfaz de usuario más rápido con Turborepo
The Turboverse focuses on making the development process faster and more efficient. TurboPak is an incremental bundler with function-level caching, and TurboRepo is a high-performance build system with features like incremental building, remote caching, and parallel execution. TurboRepo can optimize task runners, set up monorepos, and speed up development time. vclink-repo enables seamless integration with the Vercel remote cache, and Conformance and Codoners provide static analysis and automated code reviews. TurboPak and TurboRepo offer faster CI processes and exciting advancements in web bundling.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
React Summit 2024React Summit 2024
9 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.
Incluido Técnicamente (El Mejor Tipo de Inclusión)
React Summit 2024React Summit 2024
30 min
Incluido Técnicamente (El Mejor Tipo de Inclusión)
Being technically included leads to better results and UIs. Incorporating multiple team members comes with challenges and compromises. The evolution of tools and technologies has standardized industry practices. Closing the gap between developers and designers requires collaboration and a common source of truth. Embracing change and building trust can improve collaboration between developers and designers.