1. From Pattern to Component
by @TylerTate

2. ?

3. 572
10,000
per year
per day

4. 572
10,000
per year
per day

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

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

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

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

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

11. ?

13. Blueprint ≠ Building

14. Blueprint ≠ Building

15. Blueprint ≠ Building
A B

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

17. <widget:facets
facetNames="Genres" />

18. <widget:facets
facetNames="Genres" />

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

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

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

22. 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.

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

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

25. 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.

26. 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.

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

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