Adobe has open-sourced a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. You can watch the recording of React Wednesday with Adobe React Spectrum team about the libraries, philosophy, and how to build out your own component library using these as a base or read below for highlights with timecode links.
What’s interesting about Adobe’s React Spectrum libraries is the architectural approach. Components contain a visual element, business logic, and adaptive behavior. Most component libraries ship all three parts in a single package so the software developer can be maximally efficient. React Spectrum comes with all three parts, and you can also use each independently. By using React Spectrum parts, you could even build your component design and implement the production-quality accessibility, adaptability, and behavior functionality provided for you by Adobe.
The three parts of Adobe’s React Spectrum are React Stately, React Aria, and React Spectrum. Each stands on its own and also works as part of the total package. If you want your components to follow the official Adobe design system Spectrum, use all three elements. If you want to customize the look and feel, you’ll want to select the appropriate pieces.
React Stately
React Stately is a collection of hooks that provide state management and core logic for each component. Stately implements the behavioral logic for UI elements and does not inject any visual design opinions. As an example, consider the behavior of a checkbox. A checkbox toggles between an on and off state. There is a certain amount of logic needed to know which is the active state, where to store state, and how to make that state available. React Stately contains all of this logic for all of the components, implemented in React Hooks. At 45:18, we get in to React Stately.
React Aria
React Aria is a library that provides accessibility and adaptability functions for components. The gold standard for web accessibility is the W3C WAI-ARIA Authoring Practices 1.2. The authoring practices are very detailed and describe how to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. Assistive and adaptive technologies rely on WAI-ARIA to function correctly. Implementing the whole specification requires a substantial amount of development time and testing. You get all this for free by using React Aria. Plus, React Aria supports over 30 languages, including right-to-left-specific behavior, internationalized date and number formatting, and more. At 22:07 we get into React Aria.
The Adobe team does very sophisticated and detailed testing for accessibility compliance. The team has invested countless hours in ensuring the React Aria library performs correctly. Whether you plan to implement React Spectrum as a design system or implement your own, you’ll need to account for accessibility properly. You could roll your own, or stand on the backs of Adobe and get production quality accessibility for your components without all the manual work. Devon mentioned the Axe tool as a good starting point to begin an analysis of application accessibility.
React Spectrum
React Spectrum is the visual layer implementing the design system with specific theme, gestures, and workflows for Adobe products. If you want to build your application to look at home to Adobe users, you need it. React Spectrum already implements React Stately and React Aria so you can focus on merely building out your app and rest assured the components you use will have production quality behavior, accessibility, and adaptability.
Adobe is going through a design rationalization process now where they are reskinning Adobe products to use the same design system. Many Adobe users use more than one Adobe product. Users will work more productively and efficiently when they are more able to intuit what an application wants them to do. Also, it is a brand strategy to have a unified design across the product portfolio.
At 7:50, Dan DiGangi, engineering manager at DocuSign, asked about the flexibility of the component suite. The following discussion went into depth about how the architecture of React Spectrum is optimized to provide maximum benefit even to those developers who want to use their own design system. React Stately and React Aria together do not inject visual opinions. They both handle non-visual but essential areas of responsibility. You can build your own design language for a fraction of the effort by implementing these two libraries.
Key sections:
- Why Adobe built their own component set (2:49)
- What is a Design System (3:55)
- How the libraries work together and independently (7:49)
- Walkthrough of libraries (13:22)
- Discussion of what is coupled to what (18:02)
- React Aria is like Accessibility, Internationalization, and Adaptability as a service (22:07)
- Visual customization and how to make your own style (29:29)
- How to learn about Accessibility concerns (33:41)
- How sophisticated accessibility testing is Adobe (36:22)
- Data-driven components (43:15)
