Moving on From Runtime Css-In-Js at Scale

Rate this content
Bookmark

In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.

Siddharth Kshetrapal
Siddharth Kshetrapal
29 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

Available in Español

1. Introduction to Styling Architecture

Short description:

Earlier this year, I found myself thinking about components, styles, and the amount of JavaScript needed for rendering. Assigned the task of figuring out the styling architecture for Primer React, which powers GitHub. The challenge was that any change would have cascading effects on all of GitHub. Let's explore how we got here and the state of the styling infrastructure.

I have a lot of slides, so I'm going to be very quick about this. Earlier this year, I found myself thinking about components, thinking about styles, but also thinking a lot about the amount of JavaScript we needed to render our styles. I was going on this spectrum of JavaScript on, we should have very little JavaScript to do our styles, do we actually need a lot more JavaScript to do it? I just spent a lot of time just tilting in this one line.

How I got there was, I was basically assigned this task. Which is, figure out the styling architecture for Primer React. What is Primer React? Primer React is the design system that powers GitHub. I'm Siddharth. I work on the design engineering team at GitHub. This was one big, it's funny that we call them epic, because it was kind of an epic task. And before GitHub, I used to work at all of these companies and for the last six years I've been basically working on design systems and component libraries. Fun fact, just like React, I also started my career exactly 10 years ago today, so thank you for that. I appreciate the balloon. Thank you.

All right, so, back to the moving slide. And why this was such a confusing task? Because when I was trying to figure out the styling architecture for Primer, it ended up being the styling architecture for a lot of React at GitHub. Any tiny change that I make would have cascading effects, get it? Cascading? Effects on all of GitHub. And that's a scary thing to do. So let me first talk about how did we land up in the space that we are.

This is not just GitHub. This is mostly the entire styling infrastructure. Think about it. It's 2015, and this meme just came out. This is that old. The best movie of all time, Mad Max, was also released in 2015, and Drake gave us this extremely cool song. Internet Explorer 11 was still around. Edge wouldn't be released until later that year. Which also means things like CSS variables that we take for granted now weren't actually supported in much except maybe like Chrome or new Firefox. I think Firefox is the first that implemented it all the way in 2014. Different times. You require very little JavaScript to get your styles done.

2. Styling Architecture Evolution

Short description:

You write your style like this. This is a button component. You put your colors, put your padding. With a little amount of JavaScript, you could nest your styles and compile them out to CSS. React introduced the concept of defining components in different files and creating a dependency tree between them, allowing for smarter bundles and elimination of dead code. CSS modules further enhanced this by creating a one-to-one relationship between component JavaScript and CSS, enabling efficient bundling and dead code elimination.

You write your style like this. This is a button component. You put your colors, put your padding. You see a lot of hex codes, pixel values hard coded over here. This isn't as nice as you'd like it to be, but there was some tooling that existed.

I put it on like slightly more JavaScript because you have to use Node.js and the compiler for JavaScript is written in JavaScript. With a little amount of JavaScript these are the kinds of things you could do. You could nest your styles and have slightly better DX and then you could compile it out back to CSS.

The other thing that you got was variables. You could define these variables in a single place, which is huge for our design systems. And then in our components you could just use those variables. So when React came around in 2013, and then when we started using React, you would use it something like this. You have a button component and it uses the class name. And then you could use this button component in another type of page.

The nice thing that we just did, by defining a component in a different file, and then using it in a new file, is that we've created this relation. We've created a dependency tree between components. And that helps us create smarter bundles, eliminate dead code. You get a lot of tooling from that. But the same kind of tooling doesn't really exist for... Or didn't really exist for CSS.

This class that is coming from button, there wasn't really a good way of knowing which file does it come from. You would just have to guess and bundle a lot more CSS. That of course changed very quickly with just a little more JavaScript with CSS modules. So you could configure CSS modules, you could basically fake an import, is what I'd call it. Because there is no actual CSS import that's happening this way. But we are creating a dependency tree. So now that your CSS dependency tree matches your JavaScript dependency tree, you get this really nice one-to-one between component JavaScript and CSS. And then you can bundle them together. You can tree shake them, you can eliminate dead code very quickly.

The next interesting thing that gets to is even though you have variables in Sass, wow, I see your eyes, I'm sorry about that.

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)