Canva’s App UI Kit: Empowering Developers With Modern Web Technologies

Rate this content
Bookmark

At Canva, we help 150 million + monthly users create and design. How do we enable developers to do the same? Intro Canva's Apps SDK, which is built to empower developers to efficiently create UIs for their Canva Apps using React. Canva recently streamlined the app creation process by compiling some of the most frequently used and requested UI components by our developers in our 

@Canva /app-ui-kit package. I'll be sharing how we iterated upon our Apps SDK to empower developers globally to build their brand into Canva.

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

Watch video on a separate page

FAQ

Canva utilizes Java for back-end services, Go, Bash, TypeScript, and Python for tooling, with Python specifically for machine learning models. The front-end primarily uses TypeScript and React.

Initially, Canva's MVP in 2013 was framework-free. As the company grew, the need for scalable architecture led to the adoption of TypeScript, MobX, and React around 2017 to better manage the growing number of developers and features.

The store presented component pattern at Canva consists of four main parts: stores that hold state, presenters that operate on those stores, stateless components, and factories that wire everything together. This pattern helps separate UI from business logic, enhancing testability and scalability.

Canva offers an apps SDK with a set of APIs that allow developers to create unique user experiences within the Canva editor. The platform provides a UI library under a semi-open source license specifically for building apps compatible with Canva.

Canva chose to use its internal UI library to ensure consistency with Canva's style, along with benefiting from ongoing improvements in localization and accessibility. This approach also avoids the maintenance challenges of developing a separate UI component set.

The apps marketplace and integrations within Canva's platform have significantly expanded the functionality available to its 150 million monthly active users, fostering a vibrant developer community and enhancing user engagement.

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

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.

1. Introduction to Canva Tech Talk

Short description:

Welcome to the Canva Tech talk. We've extended and enhanced the Canva experience. I'll run through the Canva tech stack, React component structure, and how we got our UI kit to developers. Canva is a design platform with a visual suite, including presentations, whiteboards, documents, print products, and websites. We use blessed languages for development, such as Java for back-end services, Go, Bash, TypeScript, or Python for tooling, and TypeScript and React for the front-end.

Thank you. Welcome to the Canva Tech talk. This is a different version of the talk. We've done a bit of work to extend and enhance the Canva experience.

In this talk, I'm going to quickly run through the Canva tech stack, how we structure our React components and how we got our UI kit into the hands of developers. If you're not familiar with Canva, it's a design platform with a visual suite, including tools such as presentations, whiteboards, documents, print products and websites.

So, anyway, let's start diving into the Canva tech stack and how we got to where we are today. At Canva we have what we call blessed languages, which we consider to be acceptable languages for developing products, features and tooling when working in those respective domains. By limiting the number of languages we consider to be blessed, we gain focus for internal tooling while building up specialized expertise across the organization and the product. So, back-end services are generally written in Java. Tooling is written in Go, Bash, TypeScript or Python. Python is the go-to for ML models. And finally, TypeScript and React is the language of the front-end.

2. React, TypeScript, and the Apps SDK

Short description:

In the initial MVP for Canva back in 2013, there was a rush to build new features. As the company grew rapidly, the goal in 2017 was to enable hundreds of developers to work on the code base productively. We decided on TypeScript, MobX, and React for their flexibility and modularity. Our modified MVP pattern, the store presented component pattern, separates the UI from the business logic. MobX and React enable us to create a composable pattern across the code. Over the past three years, I've been working on the apps SDK, which allows developers to build unique experiences in the Canva editor.

But we didn't always use React and TypeScript. In the initial MVP for Canva back in 2013 was effectively framework-free. There was this constant rush early on to keep building new features and any architectural changes to the product would have to be made alongside aggressive feature development. The original code base could easily accommodate five or so engineers working simultaneously, productively. But we were growing very rapidly as a company. And just for comparison, in 2013, we only had 14 employees. But by 2017, we had over, like, well, nearly 250 employees.

So, when we started thinking of this refactor in 2017, the primary goal was to enable hundreds of developers to work on the code base productively. So, by 2017, when we started investigating, we found that the JS landscape had changed pretty dramatically in those years, like, consider for the fact that React launched in 2013, and that was the same time we actually, you know, developed our initial MVP. So you can start to understand how the landscape had changed. And so we had to find which libraries worked with the design patterns that we had developed and honed internally, and eventually we decided on TypeScript, MobX, and React. React, of course, because it was unopinionated, it was component-based, and it allowed for modular development for empowering our teams. Similarly, MobX enabled us to distribute the state across the code base with better management, more on that in a bit. And finally, TypeScript was selected for its flexible type system, which has only proved to be more and more valuable over time. At Canva we use a modified MVP pattern, which we call the store presented component pattern. This pattern is comprised of four main parts, the stores that hold state and don't have access to anything. Presenters operate on those stores, stateless components that aren't aware of those stores, and factories that do all the wiring together. Unlike MVP, the presenter doesn't manipulate the component directly and doesn't have access to anything, and the presenter just changes the store, which in turn leads to a re-rendering of the component. The React components are a view layer, they're responsible for rendering UI based on the input props and for triggering events. Store classes hold state and are used by presenters or components. Presenters contain the logic for the components, they mutate data, trigger side effects such as analytics, service calls, that sort of thing. Presenters enable us to separate the UI from the business logic, and this makes it a lot easier to test and segment everything when you get to a company as large as ours. And finally the factory function just wires everything together. Ideally the factories don't have any side effects or other logic than wiring, they shouldn't be really a reason to test to these factories, just like wiring everything together. So MobX and React enabled us to create this massively composable pattern across the code. And this has really enabled us to scale out.

Anyway, back to what I've been doing at Canva, so over the past three years I've been personally working on the apps SDK, a set of APIs that enables developers to build unique experiences in the Canva editor. Apps are distinct user experiences. Here we have the Canva editor, and on the left side we have a third-party app, and everything customizable by the developer. The thing is, though, with great freedom to design apps, there comes great UX responsibility. So we wanted to provide developers with a UI library that would make building their apps a breeze, whilst meeting Canva's strict UX design constraints.