Session

Design Systems in Wasm: One year on the bumpy road to the component model

Pierre Dureau - / Jean Valverde -

We used WebAssembly to package web Design Systems that run on any platform, language, or framework. To have a single build for server side and browser side rendering, we moved to the upcoming preview2 and its promising component model and we can’t wait to show you how it works.

–

Design systems are a great way to streamline the web development process and ensure consistency across different applications by collecting documented UI artifacts (components, styles, themes, layouts…). However, their implementations depend on specific backend languages, templating languages, or javascript frameworks, which limits their usability and portability.

What if I told you that you could use the same web design system implementation on any platform, language, or framework? Sounds too good to be true, right? Well, that’s exactly what we did using WebAssembly to package executable design systems that can be run everywhere while being fast, compact, secure, and convenient.

Our main challenge now is to reach full universality, with a single Wasm module for server side rendering (Python, Node, PHP, Java…) and headless applications (WebComponents, React, Vue…). So, we looked at the upcoming preview2 and its promising component model

By the end of this talk, you will first learn how WebAssembly can help you package universal design systems. You will also discover the benefits and drawbacks of the component model, and how it can shape the WebAssembly future.