Creating a foundational UI framework

Background

From 2015 to 2020, I designed and developed web applications for a medical-grade biometric system.

Problem

In early 2015, React was emerging as a powerful way to build dynamic, single-page web apps. Yet the React ecosystem was immature: there were few, decent component libraries and no meta-frameworks like Remix or Next.js. I wanted to create a foundational UI framework on top of React.

Solution

I created a “core” framework on top of React and Redux and organized it into loosely-coupled packages, including:

• components: Custom-made, general-purpose React components such as buttons, toggles and tabs
• state: Functions for working with state held in stores
• request: Functions for issuing API requests to our services
• cache: Functions for saving data locally
• routing: Functions for managing page “routes”
• localization: Functions for translating text and formatting dates and numbers
• math: Functions and constants for working with our domain data (biometrics)
• charts: Reusable charting components made with D3

Over five years, I built several applications with this framework:

The code

To make the framework easy to use and maintain, I was careful to hide implementation details whenever practical. For example, I created a cache package on top of the Web Storage API. This package enhanced the functionality of Web Storage by automatically serializing and deserializing data, and it also provided the flexibility to replace Web Storage with another technology if necessary:

And I created a localization package with the express purpose of hiding Moment.js. Today, I could swap out Moment for the widely-supported Intl API without breaking any clients:

Conclusion

My framework gave us exactly what we needed—nothing more, nothing less—to build a suite of fast, beautiful web apps.