1. JavaScript Library Toolbox
Essential JavaScript Libraries for Frontend Designers
and Developers
Justin Hu web developer at EMU Design
Email Justinhu-cg@msn.com

2. Why there are so many JavaScript libraries ?
Why we should invest time to learn them?
What can JavaScript libraries do ?
How to choose a JavaScript wisely ?
How to effectively learn JavaScript and
libraries ?
Structure of This Talk
• Why ?
• What ?
• How ?
• Resource

3. Why ? Why there are so many JavaScript libraries ?

4. Why ? we should invest time to learn them?
There is a fuzzy grey area to consider in frontend web
development for dynamic content.
The solution is JavaScript and this boost the popularity of
libraries, frameworks and plugins such as
query, Backbone.js, Require.js etc.
Frontend Backend

5. Why ? we should invest time to learn them?

6. Why ? we should invest time to learn them?
1. For better team communication
2. For career path – strong marketable skill
3. For self-development – logical thinking skills
4. For Fun

7. Old days
1. Solve browser issues
2. Dynamic and Interactive UI elements
What ? What can JavaScript libraries do ?

8. Now and the future
1. Solve browser issues
2. Dynamic and Interactive UI elements
3. Advanced web applications – MVC, Modulate
4. Server-Side JavaScript
What ? What can JavaScript libraries do ?

9. What ? What can JavaScript libraries do ?
JavaScript Libraries
UI
Elements
UI
Elements
Multimedia
Graphics
Multimedia
Animation
Audio
Video
Players
Graphics
Data Visualization
WebGL
Mapping
the top of the Iceberg

10. What ? Checklist for Web site project
Libraries Responsibility
Essential
query UI Web UI elements
query Mobile Mobile friendly widgets
Bootstrap Responsive layout and
visual elements
Modernizr Feature Detector
Optional
TweenLite Animation
soundmanager2 audio
Jquery.easing.js Transition
Jquery.cookie.js Cookie
Jquery.history.js History

11. What ? JavaScript is not just ‘JavaScript’ anymore
JavaScript Libraries
Visual
UI Elements
Multimedia
Graphics
Development
Package
Management
Compilers
Debugging
Build Utilities
Testing
Data
Data
Structure
Storage
Validation
File Formats
Architecture
App
Frameworks
Mobile
Desktop GUI
Dependency
management
Templating
Misc.
Class System
i18n
DOM
Routing
Server-Side
The Full Picture

12. What ? Sample Site – ANZ
http://www.anz.com.au/personal/travel-foreign-exchange/currency-
converter/
Technology:
Backbone.js - MVC
Handlebar.js - Templating
jQueryUI - Buttons

13. What ? Checklist for Web application project
Libraries Responsibility Alternative Libraries
Require.js Module, dependency
management
Backbone.js Model-View-Controller Knockout.js
Handlerbar.js Templating Engine Mustache.js
Modernizr Browser issue handling
Bootstrap Responsive layout Fondation, BluePrint
query UI, query Mobile UI widgets Zepto.js
D3.js Data Visualization
Node.js Server-side
development

14. Rich text editor
Autocompletion tools
HTML generation tools
Widgets themeable / skinnable
GUI resizable panels and modal
dialogs
GUI page layout
Canvas support
Mobile/ tablet support ( touch
events)
Accessibility / graceful degradation
ARIA compliant
Developer tools, Visual design
offline storage
Cross-browser 2d Vector
Charting & Dashboard
RTL Support in UI Components
How ? How to choose a JavaScript wisely ?
Things to consider :
feature detection
DOM wrapped
XMLHttpRequest data retrieval
JSON data retrieval
Server puch data retrieval
Other data retrieval
Drag and drop
Simple visual effects
Animation/ advanced visual effects
event handling
back button support/ history
management
Input form widgets & validation
Grid
Hierarchical Tree

15. How ? How to choose a JavaScript wisely ?
My JavaScript library decision making workflow - MCMT

16. Sample Site – ANZ Currency Converter
http://www.anz.com.au/personal/travel-foreign-exchange/currency-
converter/
Technology Analysis:
Application Architecture -
MVC – Backbone.js
Templating - Handlebars.js
Module loader – Require.js
UI elements –
lightbox
button dropdowns
button groups
tabs
pager
Effect - Flip

17. How ? How to choose a JavaScript wisely ?
Item Library candidates
‘Visible’ part
UI - Light box Colorbox facyBox
UI - Button
dropdown
Bootstrap jQuery
UI - Button group Bootstrap jQueryUI jQuery
UI - Tabs Bootstrap jQueryUI jQuery
UI - Pager Bootstrap jQueryUI jQuery
Effect - Flip Flippy Flip! jQuery
‘Invisible’ part
MVC Backbone.js Spine.js Knockout.js
Angular.js
Templating Mustache.js Handlebars
Module loader Require.js
Step 1 Make a list of UI items need to be used for the project

18. Criteria for UI libraries:
ct - customizable theme
ca - customizable animation
in - integration – nesting, AJAX
support
bf - * browser friendly
mf - * mobile friendly - responsive
How ? How to choose a JavaScript wisely ?

19. General criteria:
ds - data retrieving support
ap - application
performance
v - version
doc - documentation
com - community
How ? How to choose a JavaScript wisely ?

20. Component Bootstrap Fuel UX MetroUI …
ct,ca,in,bf,mf,ds,
ap,v
ct,ca,in,bf,mf,
v
ct,bf,mf,ds,ap,v
Tiles *
Menu * *
Sidebar * *
spinner *
Accordion * *
Buttons set * ?
Rating *
Progress bars *
Carousel
List view *
Slider *
….
Step 2 Check UI Components Comparison Table

21. How ? How to choose a JavaScript wisely ?
Item Library Notes Backup
‘Visible’ part
UI - Light box Colorbox No browser issue
UI - Button
dropdown
Bootstrap
UI - Button group Bootstrap
UI - Tabs Bootstrap
UI - Pager Bootstrap
Effect - Flip Flip! Non javascript
animation
‘Invisible’ part
MVC Backbone.js Community
support
Templating Handlebars Learning curve
Module loader Require.js Optional
Step 3 Make a decision

22. How ? How to choose a JavaScript wisely ?
Step 4 - Test , Implement - Doesn’t work 100% ? Don’t give up!
Common Scenarios (rank by complexity level )
• one UI library solve all problem - yippee !
• one UI library + one or two support plugins
example : jQueryUI + jQuery UI Touch Punch
• one UI library ( + one or two plugins ) + browser support +
conflict solving
example : x + y + modernizr.js
x + y + old school JavaScript debugging

23. Mobile generation -> Rich interactive web
application and dynamic content -> A niche
job market is opened up which is full of
potential
With the support of large library community,
JavaScript still does what it does for stunning
visual experience and it is secretly expanding
to nearly every corner of web development
4 steps workflow for effective decision
making - MCMT
Wrap it up
• Why ?
• What ?
• How ?

24. Grid / Spreadsheet: SlickGrid
Windows 8 style tiles: Metro UI
Drag-and –drop grid: gridster.js
Flip book: Turn.js
Twitter Bootstrap Extension : Fuel UX
Light weight bootstrap substitution: w2ui
Small helper libraries: jquery.imgpreload, jquery-cookie
events support:
Cascading grid layout: Isotope , Masonry.js
Sliders: Royal slider , circular, Flexslider2
Resources - short list of small libraries worth taking a look

25. Repository and Resource Sites :
https://github.com/ - large community
http://jster.net/catalog - handy JavaScript library review site
http://stackoverflow.com/ - find answers to JavaScript issues
http://jsfiddle.net/ - test libraries online
Blogs :
http://www.paulirish.com/
http://ejohn.org/category/blog/
http://addyosmani.com/blog/
http://benalman.com/
http://james.padolsey.com/
http://www.jspatterns.com/
Resources

26. { Thank You }
Essential JavaScript Libraries for Frontend Designers
and Developers
Justin Hu web developer at EMU Design
Email Justinhu-cg@msn.com