Opt in Design – The New Era of React Frameworks

Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.


Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.

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

Watch video on a separate page

FAQ

Key principles of opt-in design include starting with the lowest common denominator, making complexity easy to add only when intended, and maintaining a user-first approach in API design, which ensures applications are built with the end user's experience as a priority.

Opt-in design in web development refers to a methodology where tools and features are not included by default but can be added as needed. This approach allows developers to start with the most fundamental setup and incrementally add complexity only when necessary, ensuring lighter and more optimized applications.

Traditional web development often starts with a comprehensive set of tools and features, which can lead to heavier and more complex applications. In contrast, opt-in design starts with a minimal setup, adding tools and features only as required, which can lead to better performance and more tailored applications.

Ben Holmes is a core maintainer at Astro.build and also holds the unofficial title of Chief Whiteboard Officer, where he contributes to educational content and framework maintenance.

Ben Holmes has worked on maintaining content formats such as Markdown, MDX, and Markdoc within the Astro framework.

According to Ben Holmes, using Astro for web development supports the opt-in design philosophy, allowing developers to start with static templating and minimal JavaScript, and then opt-in to more complex features as needed. This approach can lead to more efficient and user-centric applications.

Benjamin Holmes
Benjamin Holmes
23 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
  • naim boubobo 🇹🇯
    naim boubobo 🇹🇯
    https://x.com/snaim1736/status/1798943666536628534
  • naim boubobo 🇹🇯
    naim boubobo 🇹🇯
    https://www.linkedin.com/posts/naim-bouboboev-0241637b_axhadafaxhoiglobali-activity-7204337960299773952-lleS?utm_source=share&utm_medium=member_desktop
Video Summary and Transcription
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

1. Introduction to Opt-in Design in Web Development

Short description:

Hello everyone! I'm Ben Holmes, a core maintainer at Astro.build, and today I'll be talking about opt-in design in web development. Opt-in design is not about UI or systems design, but rather API design and understanding good defaults when building tools and frameworks. Let's dive into a classic example of building an app with create React app and how it evolves with added features.

All right, hello, everyone. Hope you all are enjoying the conference. Sad I'm joining you all virtually for this one, but I have a great talk lined up, so I'm hoping that we can make up for it.

My name is Ben Holmes, and I'm going to be talking about opt-in design, which I am boldly dubbing a new era in web development, new trends that I've noticed. So to clarify what is opt-in design, it's not a UI design talk, although graphic design is clearly my passion. It's also not a systems design talk. We're not going to be talking about Kubernetes clusters or anything like that. It's an API design talk, so learning what good defaults mean when you're building a tool or you're using a framework of choice and both finding and building those tools so that we can build the best apps for our users.

So a little extended intro, I'm a core maintainer at Astro.build, so I've been working in open source for a bit and getting paid to do it, which is very rare to do. I'm also the chief whiteboard officer at Astro as well. Unofficial title, of course, but if you've ever seen some videos of a vertical whiteboard online, I do a lot of educational content, might've been me and you can find an archive right over there. And I'm a champion of content formats. So Markdown, MDX, Markdoc, if you've ever used any of those, I love them and I work on maintaining all of those in the Astro framework. So you might see me around the support forums.

So in order to walk you through the journey of building an app for the first time and introducing what opt-in design is, I'm going to talk about, you know, a classic example of how you might've built an app in 2015, 2016 era with create React app. That's where I got started with component systems might've been your learning journey as well. So when you start, you read that blog post from whomever and you're building your hello world for the first time. And you're reaching for tools like React and React dom. You're using a router like React router and you're reaching for some CSS and JS option like style components. So you can co-locate everything. It was pretty nice to use as a developer, but you can see our little, a kilobyte meter at the bottom is going to start ticking up. There's definitely a base cost to using these tools. Then you want to add in more features as your application develops a signup form. For example, in reaction, there's a lot of form libraries that you could use here. Maybe it was for mech back in the earlier days and you're going to be preventing the default behavior of the browser. So you can drive the whole thing with Java script, which of course means larger bundle But you stick with that dev experience that you were kind of told, or you're trying, is a good idea. And then it progresses a little bit further. Now we have a full e-commerce flow, and we want to add a cart bubble to say how many items are in your cart, like the number 2 or something like that. And you need to persist that in storage, maybe you're using Redux to duplicate server state inside of your client, so you don't have to deal with flashes as it's fetching things for the first time, and you're using client-side storage, maybe local storage or something like that. Again, we're going to take up our JavaScript meter a little bit further, because as we add new features, they all have to be replicated in the React bundle, in the React flow.

2. Opt-out and Opt-in Design in Web Development

Short description:

And then you get your performance audit when you've reached a certain state, and you wonder why you have a 39 on your Lighthouse score. That is the pain of an opt-out system. Opt-out means opting out of the default configurations provided by libraries or frameworks. Opt-out requires extra work and knowledge of the concerns. Opt-out can be seen in various areas, such as managing web config, using CSS variables instead of JavaScript, and opting out of React context. The opt-out ethos assumes a goal of a highly interactive app and reduces developer friction, but requires dealing with complexity later during performance audits. Opt-in design, like ASTRO, offers a different approach, allowing developers to start with minimal tools and gradually add complexity as needed.

And then you get your performance audit when you've reached a certain state, and you wonder why you have a 39 on your Lighthouse score. And you were following the blog post. You were doing what the community said was a good idea. But that is the consequence of using a SPA. You're assuming all this reactivity, and you might have to walk things backwards and dig through the React dev tools in order to figure out how you can scrape up those Lighthouse metrics again. And that is the pain of an opt-out system.

So talking about opt-out, what does that really mean? Well, first off, looking at the Create React app library, framework, whatever you want to call it, it has a happy path where they manage a big old web config for you. And if you ever need to modify that or bundle your app in a different way, you need to opt-out, which is using the eject seat, literally just hitting a button and managing it all yourself. Which of course, is a very scary thing to do, which is why many people just stick with Create React app and whatever it gives you, and they avoid opting out of any of the opinions.

We also have style components, where the happy path is using JavaScript first to drive the experience. function in order to drive variables into your CSS, and you can opt-out of any of the client side JavaScript that shifts with your styles by using CSS variables or alternatives instead. And it kind of feels like you're going against the grain, you got to do extra work to get more performance, so it kind of hurts that you have to be knowledgeable about the concerns before you can address them. And opt-out panes of React context. This is the easiest one to understand, honestly, where you're storing state higher up, which is very convenient if you're storing the cart at the top of your application so everyone knows how many items are in the cart. But it's going to be very expensive if that cart ever changes, because as you know, anywhere down the React tree that relies on that state is going to re-render, so you need to opt-out with usememo across anywhere in the app that has intense calculations, which isn't a very fun experience. That, again, is performance auditing. It's not the happy path. We can sum that up into an opt-out ethos. You assume a goal, which is a highly interactive app, and you lower the developer friction to get there, but you need to bundle the best toolbox up front in order to get them there, hiding complexity, and then asking developers to deal with the complexity monster later once they do that performance audit and have to figure out what they could do differently. I want to flip that mindset with the more modern frameworks that we have today. ASTRO is, of course, my favorite example, unbiased opinion as an employee. It's a great way to do opt-in design. We'll start with our Hello World again. In this case, you don't have to cobble together a bunch of tools. You can use ASTRO and static templating in order to just write the Hello World and display it to the user. Zero kilobytes of JavaScript. You're just using HTML and CSS to get there. Then we add that complexity, the signup form, but we can be a little bit smarter about how we do it. Now that it's a static app or maybe a server-driven app, you could use a plain old POST request to an endpoint. Maybe prevent default.

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
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
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.