UI Component Libraries, a common language for designers and devs.

What was designed vs. what was coded.

Being seen as a bottleneck is not pleasant.

We decided it was time for our team to have a UX development branch. It was a pleasure for me to join this effort, as my background involves both designing and development.

HTML and CSS code samples for an alert.

Along came Stencil.js

Stencil.js is a fairly new framework that has especially been designed with this exact issue in mind. The description on their website reads “Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.” That hit right in the spot for us, and then there’s this other thing why we adopted it: “Stencil components are just Web Components, so they work with any major framework or no framework at all”. This means React, Angular, Vue, Ember, etc.

Getting dirty with the code.

We laid the framework foundation, and sat a basic rule that we still keep. Our components are dumb. This means they have no business logic at all. If you want the componente to have a business logic, then you create a wrapper around it within your code base. No exceptions.

The buttons and all their possible variants
Samples of both desktop and responsive versions of tables.
Our current code samples for alerts.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Linke

David Linke

UX Professional, User Advocate and Product Developer.