A Practical Approach to

The Component Library Challenge

Amy Gebhardt · MidwestJS · 8/9/18

Hi, I'm Amy.

@amlyhamm

Lead UI Engineer at SportsEngine

Chapter Leader for Girl Develop It Minneapolis

ENJF

component

A generic term to describe a piece of the website UI. It can refer to a single static HTML element, a whole page or (more commonly) something in between. At its bare minimum it will consist of just a piece of markup, however more complex components can also potentially include styles, behavior, tests, documentation and more.
Mark Perkins, On Building Component Libraries

component library

A collection of components, organized in a meaningful manner, and often (but not necessarily) providing some way to browse and preview those components and their associated assets.
Mark Perkins, On Building Component Libraries
1

Get to know your users

Who will be using this? Engineers? Designers? Product Owners?
What would make this successful from their perspective?
2

Take an inventory

Do you have an existing app? What's currently out there?
Do this from both a code and design perspective
3

Determine the Deal-Breakers

What's prevented this from being successful in the past?
Framework? Versioning? Lack of interest?
4

Determine a Tech-Stack

What's compatible with your app(s)?
How is this going to limit you in the future?
Where are things now and where do you see it going?
Be prepared for this to keep changing!
5

Pay Attention to Terminology

What is a "component" ?
How about a "dual scrolly" ?
Or a "drop down" ?
6

Decide & Commit to a
Component Life Cycle

How does a component get designed?
When is it ready for development?
What are the technical expectations?
(accessibility standards, testing, documentation, linters,
versioning, internationalization, seo, responsive, etc)
7

Don't forget about
your designers

What assets do they have available to them?
How can you help them follow standards and component limitations?
8

Propose your Plan and Determine an Owner for the Project

Get your team excited and committed to the idea.
Focus on the why: who is this for? Why will it benefit them?
Don't allow this to become a "nice-to-have" in your workflow - determine an owner and let them own the project.
9

Be prepared to use
those soft skills

You'll be wearing a lot of hats
Not everyone will be easy to please
Listen, adapt, educate
Buy-in is essential to the success of the project
10

Respect the Creative Process

Remove as many roadblocks as possible while still ensuring consistency
Keep adjusting your "component life cycle" as needed

Demo

THANK YOU!

Questions / Comments / Discussion