RFC: Clarity Core (Web Components, React Support, and More)

[mathisscott]

Today, many of Clarity’s assets are framework-independent – the icons library and api, the CSS library, the Clarity City font. Ideally, we want our design patterns to deliver an effective experience to our customers regardless of the framework used. @clr/ui delivers a CSS-only set of styles that could be used with any framework. Our icons library (@clr/icons) is built on top of web components and can be used independently of any framework. It can even be used independently of Clarity itself.

That said, if you need interactive components with complicated data-bindings – like the datagrid – you must use our Angular library of UI components (@clr/angular). Clarity Angular is used all across VMware and by companies large and small across the industry. It’s been downloaded over a million times and continues to be one of our most popular Clarity packages.

• In the short term, Angular will continue to be our framework of focus. However, over the next few weeks, we’ll be announcing Clarity’s investment in building Clarity Core: a web component library of Clarity components.
• In the long term, Clarity Core would make it possible for Clarity's UI components to be used with React, Vue.js, and any other framework that supports web standards.
• Ultimately, we believe Clarity’s future is framework-independence. This is not because we believe frameworks are going away but because we want to ensure developers are getting the greatest benefit from our library regardless of their choice of framework.

Goals

Build a version of Clarity using the W3C custom elements (web components) specification so that consumers can benefit from its consistency, stability, and increased efficiency without a framework dependency.

Benefits

• Removes dependency on frameworks to focus on core web technologies
• Technology stack will no longer be an obstacle to adopt Clarity
• Faster development cycles for non-Angular teams
• Consistency in design and quality standards
• De-risks investment in a single framework
• A headstart on accessibility for non-Angular teams

Technical Goals

• Stateless or minimally stateful components with APIs aligned with Clarity's API conventions
• FLUX-inspired pathways in and out of the custom elements to ease integration with React and others
• Lay the foundation for a library of React wrappers that will offer an improved and consistent developer experience for React product teams
• Make components that can be and are reused within Clarity Angular to build value and consistency
• Standardize theming and allow for CSS-only based theming in Clarity that allows teams to more easily theme and switch themes in Clarity-based applications

What We Want to Avoid

• Building or maintaining a separate React library of components
• Building a framework inside a library of components that is intended to be used within yet another framework

Technical Architecture

Clarity Base will be an npm package that exists alongside the @clr/ui, @clr/angular, and @clr/icons packages. Product teams will add @clr/core to their dependencies and then import them into their projects and use them like any other HTML element. Documentation will be made available on the Clarity website to help product teams with advanced interactions.

Developers will be able to take advantage of Clarity's benefits in any framework they choose (or even no framework if they are building a static website).

Anatomy of a Clarity Web Component

Co-Existence

High Level Architecture

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.