From Pattern to Component
by @TylerTate

?

572
10,000
per year
per day

572
10,000
per year
per day

The design patterns of today must
become the UI components of tomorrow.

A design pattern is a refined solution
to an everyday problem communicated
through a written description.

★ What problem does this pattern address?
★ When should this pattern be used?
★ Why should this pattern be used?
★ How is this pattern achieved?

★ Yahoo!’s Design Pattern Library
★ Peter Morville’s Flickr Collection
★ Endeca’s UI Design Pattern Library
★ Welie.com Patterns in Interaction Design

A component is a reusable building block
that fully encapsulates all the code necessary
to put a design pattern into action.

?

Blueprint ≠ Building

Blueprint ≠ Building

Blueprint ≠ Building
A B

<widget:facets
facetNames="Genres"
showCount="false" />

<widget:facets
facetNames="Genres" />

<widget:facets
facetNames="Genres" />

<widget:facets
facetNames="Genres,Actors"
mode="expandable" />

<widget:facets
facetNames="Genres,Actors"
mode="expandable" />

★ jQuery UI
★ Ext Js
★ YUI
★ Highcharts
★ TwigKit

1. Sound interaction design
A component must adequately address the
needs of the user. It must be both useful and
usable, properly support all of the desired
mouse, keyboard, and/or touch interactions,
and plan for accessibility.

2. Clean code
A component’s front-end code should
validate, be cross-browser compatible, light
to download, and optimised for browser
performance.

3. Ready to use
A component should be easy to implement
with as little configuration as is practical.
One line of code is ideal.

4. Easy to configure
A component should be easy to customise.
The best components are versatile enough
to work in a variety of situations, giving the
designer ample control over the main variables.

5. Well documented
A component library must be thoroughly
documented. At the least, documentation
must indicate how to start using a component
and describe all of the available configuration
options.

“Libraries give the team speed and
efficiency, letting them leverage the rich
history of things-implemented-before.”
– Jared Spool

★ From Pattern to Component on UX Magazine:
http://uxm.ag/h9
★ TwigKit’s UI Components:
http://twigkit.com/components.html
@TylerTate