October 25, 2019
629 words 3 mins readTerra UI: A Health-Care focused UI Component Library
-
By:
Back in 2013, like most other companies, Cerner was heavily invested in building user interfaces with Twitter Bootstrap. Around that time, Dave Rupert wrote about the concept of Responsive Deliverables and touched on a key concept, creating "Tiny Bootstraps, for Every Client". Along with this, Brad Frost had started promoting the idea of Atomic Design. We saw a lot of value in these ideas and saw that we needed to evolve how we were developing UI at Cerner. We could see that Bootstrap was no longer meeting our needs and we felt we needed to start the process of building our own “tiny bootstrap”.
A small team was formed to begin work on a project named "Terra" to establish a component library for reusable UI patterns needed in our health care applications. We begin work building responsive, accessible, and internationalized components. The work was very similar to Twitter Bootstrap, but tailored to our specific needs at Cerner. We found great success and adoption with this new project but as tech evolved, we found our jQuery based UI components were showing a bit of age.
Fast-forward a few years, ReactJS and ES2015 had started to grow in popularity. At Cerner, we started to see more and more teams developing solutions with ReactJS. We could see that if we wanted to continue to provide consistent UI solutions that incorporated responsive design, accessibility, and internationalization concerns, we needed to evolve our component library.
We took this as an opportunity to build something new and share it with a wider audience. We decided to build a new version of our component library and base it on ReactJS. We also decided we wanted to make the project open source so anyone could help contribute to it. Today, we have a wide offering of UI components with a focus on health care applications in our open source component library, Terra UI.
Who is Terra UI for?
Terra UI is developed with the goal of helping consumers (including many app teams across Cerner, as well as external consumers in the open-source community) focus their efforts towards higher-level app concerns. We’ve leveraged the expertise of our UX team to create attractive and intuitive UI components that provide a consistent look and feel backed by usability research. Additionally, we’ve put a heavy focus into abstracting styling, accessibility, responsive design, cross-browser support, and internationalization considerations into our components so that consumers can get their projects up and running quickly. Cerner is utilizing Terra UI for healthcare web applications at scale with great success. We’re proud to make it available to other via open source and we hope you’ll check it out. Keep reading below to learn more about how you can consume and/or contribute to Terra UI.
Terra UI Ecosystem
The Terra UI ecosystem covers three types of components.
Terra Core
A repository containing a collection of common UI components ranging from buttons, to alerts, to form components, and more needed for building accessible, responsive, and internationalized applications.
Terra Framework
A repository that contains higher-order and composable UI components that build on top of terra-core components that help with application layout concerns and progressive disclosures.
Terra Clinical
A repository that includes clinically focused UI components that build on top of terra-core.
Additional Terra Packages
Along with our component repositories, we provide webpack configuration and testing utilities via terra-toolkit, linter configs for stylelint and eslint, a component doc site webpack plugin via terra-dev-site, and tooling to help aggregate application translations.
Getting Started
To get started, we recommend checking out our guide to installing your first Terra UI component.
Contributions
We welcome contributions to Terra UI. Check our Github issues for ways you can get started with contributing, and be sure to check out our contribution guidelines.