React Component Selection Considerations

considerations.md

Footprint

1. What’s the minified bundle size of the component/library?
2. For a given component library, can we just import a single module if we only need that one component?

import { Component1 } from ‘widgets/libs/component1’;

instead of

import * as components from ‘widgets’;

Accessibility

Depending on Section 508 compliance requirements

1. Does the component render to Semantic HTML? For example, a slider should emit an <input type=”range” /> element, not a <div/>
2. Does it emit aria- attributes?

Customizability

1. Is it open source?

Performance

1. Especially important for organisms (e.g.: grid)
2. Does it use any direct-DOM manipulation (jQuery, Zepto)
3. Does it only repaint the parts that changed?

Maintainability

1. Is it open source?

Volatility

1. Is it pre-release? How much API churn is to be expected?

Support

1. Is it from a big company?
2. If OSS, how active is development? Do they have clearly defined roadmap or milestones?

Other

Controlled vs. Uncontrolled?

Server rendering?

Here are my thoughts:

Accessibility

I would say that the level of accessibility that is designed into the component is dependent on whether Section 508 is being upheld. There should always be some level of accessibility at a minimum.

Maintainability

How many other libraries does the component require (if any)? Having to build on top of other libraries decreases the maintainability. For example multiple, overlapping style-sheets.

(NEW) Mobility

1. Does the component accommodate a Responsive Web Design?
2. Does the component support touch-enabled devices? Hover states for desktop?