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.

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.

Available in Español

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.

3. Exploring Canva's Internal Component Library

Short description:

We had two options for creating the UI library: building a new set of components or exploring Canva's internal component library. We chose the latter option and released the library under a semi-open source license. This allows us to deliver the UI library quickly and share improvements with the community. In the future, we plan to move to a more relaxed license to make the UI library more widely available. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.

We could create an entirely new set of UI components that mimics Canva's UI, but wasn't on the same components that Canva engineers would use internally to build the main product. This would allow us to explore options such as CSS style sheets, but it would become a bit of a maintenance headache, however, as we would forever be updating components to be consistent with Canva's style and we would lose out on any of the localization and accessibility improvements that come part of Canva's internal component library, which is a huge focus for the company.

The other option was to try and explore Canva's internal component library or fork it in some way. This would involve partially releasing the library under some modified license, and as you can understand, there's a lot of proprietary code and stuff like that that we don't really want to be pushing into the public domain. But it would mean consumers of the UI library would have to be React consumers. We decided on the latter option. So with a semi-open source license whereby the library can only be used for apps built for the platform. This ended up being the fastest way for us to deliver the UI library, and it does mean that any improvements made internally will be bundled and released to the community. And over time, we want to move to a more relaxed license. So the UI library becomes much more feature complete and, like, more generally available to the wider community as a whole.

Over the last year or so, the developer community has added loads of apps integrations, both in our apps marketplace or otherwise incorporated into our platform. And they're now accessible to Canva's 150 million monthly active users. So what's everyone going to build? Thank you.

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

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.