TechPrufer
Get started
Cloudflare
Cloudflare logoCloudflare · Feature trail

Frontend UI Framework

1 post · Jun 2016

What this trail covers

Cloudflare has open-sourced its internal UI framework, cf-ui, built on React and Redux. This framework includes over 50 packages with dozens of components, utilities, and test helpers. It utilizes Lerna for managing a multi-package repository structure, enabling independent versioning and code sharing. The framework introduces 'builder' components that can be directly tied to Redux state, simplifying integration. It also includes integrated test utilities for Mocha, Sinon, and Redux, and wraps external APIs to allow for confident changes to underlying modules. Accessibility improvements were a key focus during the rewrite, with open-sourced libraries for keyboard navigation and focus management.

All Cloudflare trails
  1. Open Sourcing CloudFlare’s UI FrameworkThis post details the open-sourcing of Cloudflare's internal UI framework, cf-ui, which was rebuilt from scratch on top of React and Redux. It highlights the adoption of Lerna for managing a monorepo structure with multiple independent npm packages, facilitating code sharing and versioning. The introduction of 'builder' components that integrate directly with Redux state and reducers is a key technical contribution. The post also discusses integrated test utilities that sandbox and reset stubs between tests, and the strategy of wrapping external APIs to create a stable interface for internal applications. Significant effort was also put into improving component accessibility, with open-sourcing of related libraries.