Javascript library toolbox
2 likes1,666 views
The document discusses JavaScript libraries and provides recommendations for choosing them. It explains that JavaScript libraries have become popular due to the need for dynamic frontend content. It outlines categories of tasks libraries can perform, such as handling UI elements, multimedia, and server-side JavaScript. The document recommends considering features, documentation, and community when selecting a library. It proposes a four-step process: listing needs, comparing options, making decisions with backups, and testing implementations. Resources for small helpful libraries and sites for code samples are also included.
Javascript library toolbox
- 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