Sustainable UI

1. Describe the problem you are trying to solve.

Have you visited the Branch Magazine before and tried its Grid Intensity View functionality? Have you heard before about the terms Graceful Degradation and User Control as the 2 Green Mode Design principles? Mainly based on the two, the team behind the Sustainable UI (SUI) would like to present to you its vision for what it believes are the next steps on a trajectory towards standardized development of web UIs that are carbon aware.

When users visit a web app or a website today, they mostly experience the same thing from the visual perspective - no matter the times of their visits nor the locations from where the visits are happening. Carbon aware UI adjusts as the grid carbon intensity changes by automatically selecting the most appropriate variant of UI components for a given electricity mix. If the electricity mix was dirty, the UI components used would be simplified, low emission versions. If the electricity mix was clean, the UI components used would be more complex, higher energy versions. At the same time, the user remains at the center and in control of the experience, able to override the carbon aware defaults and choose their preferred UI experience.

It would be great if developers were able to build carbon aware UIs with ease in component driven web apps or websites. The reality is that if they decided to build such UIs today, they would need to set up everything from scratch, including:

1. User location management.

2. Managing connection with the service that provides grid carbon intensity data.

3. Maintaining logic that determines UI variants based on grid carbon intensity.

4. Maintaining logic that allows users to switch between UI variants as they prefer.

5. Managing the application state around the whole process.

We think the best solution would be to have one library that provides all of the above functionality after a quick initial setup to any component driven web app or a website. This removes the barriers to entry for responsible developers wanting to build carbon aware frontends, freeing them to focus on building their own UI component carbon variants. More impactful still, our SUI library makes it possible to build entire reusable carbon aware UI component libraries or make existing, massively popular UI libraries like Material UI (MUI) or ANT Design, carbon aware. In other words, SUI makes it possible to hugely scale up a carbon aware approach to frontend website development.

2. Describe what your project does exactly in layperson's terms.

SUI’s first library for building carbon aware web UIs is based on React. The library sui-headless-react is not tied to any UI tool such as MUI or ANT Design because of its headless nature. It’s suited for React developers who want to integrate UI carbon awareness either into an existing app or an app that is being built on the green field.

The library doesn’t tell developers how the UI component variants should look like nor what they should and shouldn’t be doing. This means developers are completely responsible for carbon efficiency of UI component variants in their applications that are built with the library. This is done on purpose as the sole objective for building the library was to provide generally applicable primitives that are reusable across different UI libraries or frameworks such as Svelte or Vue.

Namely, the primitives that the library provides are:

• Display Mode: The library provides 3 display modes: low, moderate and high. Each grid carbon intensity is associated with one of the display modes. Low display mode is chosen when the grid carbon intensity is high and vice-versa.

• Carbon Loader: carbon aware UI cannot work without having access to the user location. Until the user location and its grid carbon intensity is known on a page load, the Carbon Loader is the only view that the user is able to see. Fallback display mode shall be provided when a user decides to skip the process.

• Carbon Component: a component that is associated with one or more display modes. 

• Graceful Degradation Function: function that accepts different variants of the same UI component. It returns the one that is associated with a chosen display mode. These components share the same core functionality but shall operate with a different carbon efficiency.

• UI Switch: with SUI, the user is in control of the experience and remains at its center. This is why the UI Switch allows the user to select a display mode, independent of the grid carbon intensity at a given time and location.

What the library does for developers is that it manages carbon aware UI state in the following ways:

1. Handles communication with native browser geolocation API for retrieving user location.

2. Handles communication with an external provider for retrieving grid carbon intensity data for a user location. 

3. Implements graceful degradation by determining display mode based on grid carbon intensity and rendering components associated with it.

4. Implements user control by exposing functions that shall be called upon user request to change the UI display mode.

The library provides the above functionality without restricting the developer in terms of the ways they want to implement components in their applications. Developer is in control of the carbon efficiency of UI component variants that are handed over to the library through the Graceful Degradation Function.

3. Describe how it uses the API/SDK.

Library accepts a required api parameter which is pointing to an endpoint that returns grid carbon intensity at user coordinates. Since the API deployed for the hackathon by the Green Software Foundation hasn’t added support for such a use case for now, for the demo purposes only, we have decided to implement a proxy for the /emissions/bylocation endpoint of the API. The proxy translates user coordinates to the closest Azure region. It is implemented as an API route inside Next.js in the demo application that uses the sui-headless-react library.

Grid carbon intensity for a mapped user location is used by the library to determine the appropriate display mode for the application. It does it by using threshold values for low, moderate and high display modes. There is a default configuration that can be overriden by developers. Default display mode thresholds were chosen based on a gauge chart from the National Grid ESO website.

Gauge chart from the National Grid ESO website

4. Describe how impactful it might be in terms of CO2 reductions and user reach.

React is the most used frontend library in existence. It is estimated that 40% of the top 10,000 websites in the world were built using React. Among these are websites such as Facebook, Netflix, BBC, Trello, Skyscanner and more that many of you may have visited more than once in your lifetime before.

(The following calculations were made possible by the greenhouse gas equivalencies calculator from the US EPA)

If Facebook, which gets 18 billion monthly visits, was to reduce its emissions by a tenth of a gram of CO2e per visit using SUI Headless through gracefully degrading their UI, that would reduce its monthly emissions by 1,800 metric tons of gross CO2 emissions per month. This is equivalent to 24 tanker trucks’ worth of gasoline or 350 homes’ energy use for one year.

In case Netflix with 2 billions of monthly visits decided to achieve the same amount of reduction per user visit with the library as Facebook, that would reduce its monthly emissions by 200 metric tons of gross CO2 emissions. This equals to greenhouse gas emissions avoided by switching 7,500 incandescent lamps to LEDs or by recycling 8,600 trash bags of waste instead of landfilling them.

Primitives that the library introduces are going to be made available for other popular UI libraries and frameworks such as Vue, Angular and Svelte later in order to achieve even bigger potential for wide adoption. In comparison to React, it was estimated that 20% of the top 10,000 websites in the world were built using Vue, 6.5% using Angular and 0.5% using Svelte.

5. Describe how feasible it is for you to get to a production ready state with a bit of time or prize money; how feasible it would be for others to implement, and how likely it is that they would choose to use your tool if made available.

The SUI Headless for React can be used straight away by simply installing the library as a dependency from NPM and going through the initial setup. In an optimistic scenario, the plan is to build the first stable release candidate by the end of November 2022. It is exciting for us to see how many options for applications the library unlocks. Some of them are outlined in the next section as part of our longer-term vision.

Since we think we provide a solution with a very low barrier to entry thanks to the simple API which is based on carbon aware UI primitives that were defined, we expect it to get adopted quickly and scale fast. Furthermore, according to a survey made by Statista in May 2022, React is the second most used framework on the web which is yet another significant prerequisite for achieving wider adoption. The library is made available open-source under the MIT license on GitHub, which precisely aligns with the vision of the SUI where collaboration and transparency are at the core. Additionally, there is no similar open-source tool currently and we feel it is the right time to fill the gap.

We don’t need to emphasize on the fact that we would love to get involved in the development of the SUI ecosystem on a full-time basis. Needless to say, the aim is at winning the prize money and making this imagination a reality instead of a speculation. Using the prize money, we would be able to accelerate development of the SUI ecosystem.

There are many popular and great existing UI tools not only in the React world and we think SUI could serve as a great bridge that sparks collaboration cross-library & cross-framework. We believe that standardizing the concept of carbon aware UIs requires that all parties get involved in the conversation. 

6. Describe what your vision is for how the solution you have started to build in this hackathon could make a difference to the world.

We at SUI foresee alternative design systems being built from scratch with carbon aware and green mode design principles at their heart. With SUI, developers, including OSS contributors, will not only be able to build carbon aware UIs on the green field, but also immediately add low carbon variants to existing design systems and tools such as MUI or ANT Design, for instance.

The vision is to create an ecosystem of trusted open-source tools that make it easy for developers to build carbon aware UIs on the web, no matter the library or framework they are used to building with. The effort to introduce standards in the space will require a tight cooperation between developers and UI/UX specialists. The initial stage of the vision realization involved pure development effort for building the first headless library in order to resolve technical constraints in the web environment and identify reusable primitives that can be shared among UI libraries and frameworks.

SUI headless libraries are just the tip of the iceberg inside the SUI ecosystem. What would make a real difference to the world is represented by the SUI Component libraries part of the iceberg. We can reduce carbon emissions by serving gracefully degraded versions of traditional UI components that tend to be heavy such as the ones with images, videos, custom typography and the ones that tend to be heavy from the perspective of JavaScript execution.

If key partners at the Green Software Foundation embrace the tool and the concept, or if the core team of such a popular UI tool as MUI commits to building carbon efficient variants of their existing components, the SUI ecosystem could dramatically scale. Hence, the realization of the current vision consists of the following main points in a chronological order:

1. Release stable v1.0.0 version of sui-headless-react library development of which has been initiated during the hackathon to provide stable ground to build upon for the React developers.

2. Adapt the headless library to all major UI libraries and frameworks such as Angular or Vue to make building of carbon aware UIs on the web accessible to an even larger number of developers.

3. Start consulting with UI/UX specialists about the design for gracefully degraded versions of components. Part of the consulting process will be discussions between developers and UI/UX specialists in regards to defining how such components look and what they should and shouldn’t do when rendered in a particular display mode.

4. As a result of the discussions from the previous point, knowing the carbon aware UI constraints, UI/UX specialists will start creating the design system with UI components for the first carbon aware UI library. The developers will focus their efforts on the implementation of the first stable release of the carbon aware UI library. This is going to be an alternative to existing UI libraries such as MUI or ANT Design.

The timeline for the above objectives can be found below. It considers the fact that objectives in point 2 and point 3 can be achieved in parallel.

7. Add the URL to the prototype app and/or code.

• SUI Headless for React
  • Carbon Aware UI primitives for React
  • GitHub repository: https://github.com/sustainableui/sui-headless-react
  • NPM package: https://www.npmjs.com/@sustainableui/sui-headless-react
  • attached as sui-headless-react-main.zip
• SUI Headless for React - implementation demo
  • POC implementation of Carbon Aware UI primitives for React - Carbon Hack 22 demo
  • GitHub repository: https://github.com/sustainableui/ch22-sui-headless-react-demo
  • live demo URL: https://ch22-sui-headless-react-demo.vercel.app/
  • attached as ch22-sui-headless-react-demo-main.zip