A Practical Approach to
The Component Library Challenge
Amy Gebhardt · MidwestJS · 8/9/18
Hi, I'm Amy.
Lead UI Engineer at SportsEngine
Chapter Leader for Girl Develop It Minneapolis
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.
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.
Get to know your users
Who will be using this? Engineers? Designers? Product Owners?
What would make this successful from their perspective?
Take an inventory
Do you have an existing app? What's currently out there?
Do this from both a code and design perspective
Determine the Deal-Breakers
What's prevented this from being successful in the past?
Framework? Versioning? Lack of interest?
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!
Pay Attention to Terminology
What is a "component" ?
How about a "dual scrolly" ?
Or a "drop down" ?
Decide & Commit to a
Component Life Cycle
How does a component get designed?
When is it ready for development?
What are the technical expectations?
Don't forget about
What assets do they have available to them?
How can you help them follow standards and component limitations?
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.
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
Respect the Creative Process
Remove as many roadblocks as possible while still ensuring consistency
Keep adjusting your "component life cycle" as needed
Questions / Comments / Discussion