JavaScript Library Toolbox
Essential JavaScript Libraries for Frontend Designers
and Developers
Justin Hu web developer at...
Why there are so many JavaScript libraries ?
Why we should invest time to learn them?
What can JavaScript libraries do ?
H...
Why ? Why there are so many JavaScript libraries ?
Why ? we should invest time to learn them?
There is a fuzzy grey area to consider in frontend web
development for dynamic ...
Why ? we should invest time to learn them?
Why ? we should invest time to learn them?
1. For better team communication
2. For career path – strong marketable skill
3...
Old days
1. Solve browser issues
2. Dynamic and Interactive UI elements
What ? What can JavaScript libraries do ?
Now and the future
1. Solve browser issues
2. Dynamic and Interactive UI elements
3. Advanced web applications – MVC, Modu...
What ? What can JavaScript libraries do ?
JavaScript Libraries
UI
Elements
UI
Elements
Multimedia
Graphics
Multimedia
Anim...
What ? Checklist for Web site project
Libraries Responsibility
Essential
query UI Web UI elements
query Mobile Mobile frie...
What ? JavaScript is not just ‘JavaScript’ anymore
JavaScript Libraries
Visual
UI Elements
Multimedia
Graphics
Development...
What ? Sample Site – ANZ
http://www.anz.com.au/personal/travel-foreign-exchange/currency-
converter/
Technology:
Backbone....
What ? Checklist for Web application project
Libraries Responsibility Alternative Libraries
Require.js Module, dependency
...
Rich text editor
Autocompletion tools
HTML generation tools
Widgets themeable / skinnable
GUI resizable panels and modal
d...
How ? How to choose a JavaScript wisely ?
My JavaScript library decision making workflow - MCMT
Sample Site – ANZ Currency Converter
http://www.anz.com.au/personal/travel-foreign-exchange/currency-
converter/
Technolog...
How ? How to choose a JavaScript wisely ?
Item Library candidates
‘Visible’ part
UI - Light box Colorbox facyBox
UI - Butt...
Criteria for UI libraries:
ct - customizable theme
ca - customizable animation
in - integration – nesting, AJAX
support
bf...
General criteria:
ds - data retrieving support
ap - application
performance
v - version
doc - documentation
com - communit...
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 ...
How ? How to choose a JavaScript wisely ?
Item Library Notes Backup
‘Visible’ part
UI - Light box Colorbox No browser issu...
How ? How to choose a JavaScript wisely ?
Step 4 - Test , Implement - Doesn’t work 100% ? Don’t give up!
Common Scenarios ...
Mobile generation -> Rich interactive web
application and dynamic content -> A niche
job market is opened up which is full...
Grid / Spreadsheet: SlickGrid
Windows 8 style tiles: Metro UI
Drag-and –drop grid: gridster.js
Flip book: Turn.js
Twitter ...
Repository and Resource Sites :
https://github.com/ - large community
http://jster.net/catalog - handy JavaScript library ...
{ Thank You }
Essential JavaScript Libraries for Frontend Designers
and Developers
Justin Hu web developer at EMU Design
E...
Upcoming SlideShare
Loading in...5
×

Javascript library toolbox

1,064

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,064
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript library toolbox

  1. 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. 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. 3. Why ? Why there are so many JavaScript libraries ?
  4. 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. 5. Why ? we should invest time to learn them?
  6. 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. 7. Old days 1. Solve browser issues 2. Dynamic and Interactive UI elements What ? What can JavaScript libraries do ?
  8. 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. 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. 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. 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. 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. 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. 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. 15. How ? How to choose a JavaScript wisely ? My JavaScript library decision making workflow - MCMT
  16. 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. 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. 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. 19. General criteria: ds - data retrieving support ap - application performance v - version doc - documentation com - community How ? How to choose a JavaScript wisely ?
  20. 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. 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. 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. 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. 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. 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. 26. { Thank You } Essential JavaScript Libraries for Frontend Designers and Developers Justin Hu web developer at EMU Design Email Justinhu-cg@msn.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×