It's Time to De-Fragment the Web

Rate this content
Bookmark
Slides

Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.

Sami Jaber
Sami Jaber
34 min
02 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.

Available in Español

1. Introduction to Framework Agnostic Components

Short description:

Today, I will discuss the idea of framework agnostic components. Building these components can be tedious, and current solutions like writing them by hand or using web components have tradeoffs. That's why we've developed Mitosis, an open source project that solves this problem. I'll show you why building these components is tedious, why Mitosis is a good solution, and how it works better than expected.

Well, you guys have a lot of energy for a full day of talks. Thank you for sticking around for mine. Thank you to the React Day Berlin organizers for choosing my talk and for everyone else who's in the room today. I'm really, really excited about what I want to talk about, so let's just dive in.

What I'm going to be discussing today is the idea of framework agnostic components. Those to those who are unfamiliar with that idea is when you write a component that you want to render in different web frameworks. So a React app, a Quick app, a Svelte app, a Vue app. There are a lot of scenarios where you want to build such a component because of a business need or any other kind of need. Doing that today is really tedious. You effectively have one of two choices. You can either do it by hand, write that same component over and over by hand four, five, six times, which is obviously not great, or you can use web components, which is a standard that's been developed on top of web browsers. Both of those have tradeoffs that we at Builder we're unhappy with. This is why we've come up with a solution, which is Mitosis, an open source project that's already been available for a couple of years now, that solves this problem for us and hopefully for other people. So I'm going to try to convince you that building those components is tedious right now, and I'm going to try to convince you that Mitosis is a good solution for that. And towards the end, I'm going to try to really, really convince you that Mitosis works, because it is almost too crazy to work, but it does work better than you would expect.

2. Introduction to Sami Jaber and Buildr

Short description:

I'm Sami Jaber, a software engineer at Buildr and the primary contributor and maintainer of the Buildr.io SDKs. Buildr is a headless visual CMS that allows non-web developers to build web pages by dragging and dropping components. I also build the SDKs using Mitosis. Previously, I worked on Splash as a web developer.

Now, before we get into all of that, I just want to introduce myself briefly. My name is Sami Jaber, I'm a software engineer at Buildr. I'm the primary contributor and maintainer of the Buildr.io SDKs. So Buildr is a headless visual CMS, which means you can drag and drop your own components in a way that lets non-web developers build web pages, and what powers all of that is the SDKs, which need to be different for each web framework. And so I'm the contributor to those SDKs and I build them using Mitosis, which I'm also the primary contributor to. Before my time at Buildr, I was one of the web developers on Splash.

QnA

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

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
Authoring HTML in a JavaScript World
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.
Let's talk about Web Components
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.