AWS is creating a 'new open source design system' with React

No documentation yet, but big ambitions for UI components tailored for AWS services


Amazon Web Services has released AWS UI, which the cloud services biz describes as "the first step in a larger process of creating a new open source design system."

The context for this is the open-sourcing of the user interface code for the .NET Porting Assistant, a tool to scan Windows-only .NET Framework applications to discover what needs fixing in order to port them to .NET Core, the open-source version of .NET that runs on Linux.

AWS seems keen to persuade customers to move away from Windows, and referred in its post to the "performance, cost savings, and robust ecosystem of Linux."

Although the Porting Assistant for .NET was already open source, the code for the tool's user interface, which is built using React and Electron, was previously not available. React is a popular JavaScript framework originally developed by Facebook, and Electron is a project for building cross-platform desktop applications with JavaScript, HTML, and CSS.

Why not build a .NET porting tool with .NET? Since .NET Framework applications only run on Windows, you might wonder why AWS would not take advantage of the ability to run .NET Core code on the desktop using Windows Forms, Windows Presentation Foundation, or UWP. Although this is possible, AWS appears to be standardising on JavaScript/TypeScript and to some extent React for its cross-platform user interface components, getting the benefit of being able to share libraries between web and desktop.

This direction is now explicit, with the first release of AWS UI, described as "a collection of React components that help create intuitive, responsive, and accessible user experiences for web applications."

Although the AWS UI project is released under the Apache 2.0 open-source licence, the source code is not yet on GitHub or similar, but only available as NPM packages.

The company said: "AWS UI's source code and documentation has not been open sourced or released yet. For now the best way to obtain the list of available components and parameters for the components is to look into the package within node_modules. If you need additional help with AWS UI please file an issue, we will be happy to provide the help you need."

There is a comprehensive collection of more than 50 components, from basics like button, text input, checkbox, progress bar, and table, to complex items like a code editor and a wizard component with configurable steps. The code is written for the most part in TypeScript.

There are other NPM packages that are also part of AWS UI, including collection-hooks, which control the state of some UI components via React hooks; design-tokens, which assist with building new custom components that are consistent with AWS UI; and others for global styles and test utilities.

Why is AWS creating "a new open source design system," (in its own words)? We are speculating, but as a cloud services company AWS is not in the business of creating client applications but does have an interest in making its services easy to consume.

There is an AWS SDK for all sorts of languages, from C++ to Python, from Java and .NET to Android and iOS. Maintaining support for these diverse systems is essential, but for some of its services the complexity of building the client is still a barrier to adoption.

One example is the Chime SDK, its video, audio and chat solution, which is why alongside support in the SDK there is also a set of React components that provide higher-level components for developers building applications using Chime. React is a good choice because, in combination with solutions like Electron, it covers a wide range of platforms.

One odd thing in all this is that the actual UI for the .NET Porting Assistant is as plain and ugly as hell. Considering its purpose, that is not really a problem, but we can presumably hope for more impressive examples of AWS UI in due course. ®


Keep Reading

Biting the hand that feeds IT © 1998–2021