from pattern to component
DESCRIPTION
TRANSCRIPT
![Page 1: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/1.jpg)
From Pattern to Componentby @TylerTate
![Page 2: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/2.jpg)
?
![Page 3: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/3.jpg)
572per year10,000
per day
![Page 4: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/4.jpg)
572per year10,000
per day
![Page 5: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/5.jpg)
The design patterns of today must become the UI components of tomorrow.
![Page 6: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/6.jpg)
A design pattern is a refined solution to an everyday problem communicated through a written description.
![Page 7: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/7.jpg)
★ What problem does this pattern address?★ When should this pattern be used?★ Why should this pattern be used?★ How is this pattern achieved?
![Page 8: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/8.jpg)
★ Yahoo!’s Design Pattern Library★ Peter Morville’s Flickr Collection★ Endeca’s UI Design Pattern Library★ Welie.com Patterns in Interaction Design
![Page 9: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/9.jpg)
![Page 10: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/10.jpg)
A component is a reusable building block that fully encapsulates all the code necessary to put a design pattern into action.
![Page 11: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/11.jpg)
?
![Page 12: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/12.jpg)
![Page 13: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/13.jpg)
Blueprint ≠ Building
![Page 14: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/14.jpg)
Blueprint ≠ Building
![Page 15: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/15.jpg)
Blueprint ≠ Building
A B
![Page 16: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/16.jpg)
<widget:facets facetNames="Genres" showCount="false" />
![Page 17: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/17.jpg)
<widget:facets facetNames="Genres" />
![Page 18: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/18.jpg)
<widget:facets facetNames="Genres" />
![Page 19: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/19.jpg)
<widget:facets facetNames="Genres,Actors" mode="expandable" />
![Page 20: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/20.jpg)
<widget:facets facetNames="Genres,Actors" mode="expandable" />
![Page 21: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/21.jpg)
★ jQuery UI★ Ext Js★ YUI★ Highcharts★ TwigKit
![Page 22: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/22.jpg)
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.
![Page 23: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/23.jpg)
2. Clean code
A component’s front-end code should validate, be cross-browser compatible, light to download, and optimised for browser performance.
![Page 24: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/24.jpg)
3. Ready to use
A component should be easy to implement with as little configuration as is practical. One line of code is ideal.
![Page 25: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/25.jpg)
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.
![Page 26: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/26.jpg)
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.
![Page 27: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/27.jpg)
“Libraries give the team speed and efficiency, letting them leverage the rich history of things-implemented-before.”
– Jared Spool
![Page 28: From Pattern to Component](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c83ba24a795961498b45b7/html5/thumbnails/28.jpg)
★ From Pattern to Component on UX Magazine: http://uxm.ag/h9
★ TwigKit’s UI Components:http://twigkit.com/components.html
@TylerTate