javascript library toolbox

Javascript Library Toolbox

JavaScript Library ToolboxEssential JavaScript Libraries for Frontend Designers and DevelopersJustin Hu web developer at EMU DesignEmail [email protected]

1

Justin HU2Essential JavaScript libraries for frontend designersWhy 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 TalkWhy ?

What ?

How ?

Resource

8o7jhtrehuil89p65erh.765yegvbnmu2

Justin HU3Essential JavaScript libraries for frontend designers

Why ? Why there are so many JavaScript libraries ?

3

Justin HU4Essential JavaScript libraries for frontend designersWhy ? 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.

4

Justin HU5Essential JavaScript libraries for frontend designersWhy ? we should invest time to learn them?

5

Justin HU6Essential JavaScript libraries for frontend designersWhy ? we should invest time to learn them?

For better team communication For career path strong marketable skillFor self-development logical thinking skillsFor Fun

6

Justin HU7Essential JavaScript libraries for frontend designersOld daysSolve browser issues Dynamic and Interactive UI elements

What ? What can JavaScript libraries do ?

7

Justin HU8Essential JavaScript libraries for frontend designers

Now and the future Solve browser issues Dynamic and Interactive UI elementsAdvanced web applications MVC, Modulate Server-Side JavaScript

What ? What can JavaScript libraries do ?

8

Justin HU9Essential JavaScript libraries for frontend designersWhat ? What can JavaScript libraries do ?the top of the Iceberg

9

Justin HU10Essential JavaScript libraries for frontend designersWhat ? Checklist for Web site projectLibrariesResponsibilityEssentialquery UIWeb UI elementsquery MobileMobile friendly widgetsBootstrapResponsive layout and visual elementsModernizrFeature Detector OptionalTweenLiteAnimationsoundmanager2audioJquery.easing.jsTransitionJquery.cookie.jsCookieJquery.history.jsHistory

10

Justin HU11Essential JavaScript libraries for frontend designersWhat ? JavaScript is not just JavaScript anymoreThe Full Picture

gehtuyio;90876rghj,u11

Justin HU12Essential JavaScript libraries for frontend designersWhat ? Sample Site ANZ http://www.anz.com.au/personal/travel-foreign-exchange/currency-converter/

Technology:Backbone.js - MVCHandlebar.js - TemplatingjQueryUI - Buttons

12

Justin HU13Essential JavaScript libraries for frontend designersWhat ? Checklist for Web application projectLibrariesResponsibilityAlternative LibrariesRequire.jsModule, dependency managementBackbone.jsModel-View-ControllerKnockout.jsHandlerbar.jsTemplating EngineMustache.js ModernizrBrowser issue handlingBootstrapResponsive layoutFondation, BluePrintquery UI, query MobileUI widgetsZepto.js D3.jsData VisualizationNode.jsServer-side development


Justin HU14Essential JavaScript libraries for frontend designersRich text editorAutocompletion toolsHTML generation toolsWidgets themeable / skinnableGUI resizable panels and modal dialogs GUI page layout Canvas supportMobile/ tablet support ( touch events)Accessibility / graceful degradationARIA compliantDeveloper tools, Visual designoffline storageCross-browser 2d Vector Charting & DashboardRTL Support in UI Components How ? How to choose a JavaScript wisely ? Things to consider :

feature detectionDOM wrapped XMLHttpRequest data retrieval JSON data retrievalServer puch data retrieval Other data retrieval Drag and drop Simple visual effectsAnimation/ advanced visual effectsevent handlingback button support/ history management Input form widgets & validation GridHierarchical Tree

Justin HU15Essential JavaScript libraries for frontend designersHow ? How to choose a JavaScript wisely ? My JavaScript library decision making workflow - MCMT

Justin HU16Essential JavaScript libraries for frontend designersSample Site ANZ Currency Converterhttp://www.anz.com.au/personal/travel-foreign-exchange/currency-converter/

Technology Analysis:

Application Architecture - MVC Backbone.jsTemplating - Handlebars.jsModule loader Require.jsUI elements lightbox button dropdownsbutton groups tabspagerEffect - Flip


Justin HU17Essential JavaScript libraries for frontend designersHow ? How to choose a JavaScript wisely ? ItemLibrary candidatesVisible partUI - Light boxColorbox facyBox UI - Button dropdownBootstrap jQueryUI - Button groupBootstrap jQueryUI jQueryUI - TabsBootstrap jQueryUI jQueryUI - PagerBootstrap jQueryUI jQueryEffect - Flip Flippy Flip!jQueryInvisible partMVCBackbone.js Spine.js Knockout.js Angular.jsTemplatingMustache.js HandlebarsModule loaderRequire.js

Step 1 Make a list of UI items need to be used for the project

Justin HU18Essential JavaScript libraries for frontend designersCriteria for UI libraries:

ct - customizable themeca - customizable animationin - integration nesting, AJAX supportbf - * browser friendlymf - * mobile friendly - responsive

How ? How to choose a JavaScript wisely ?

Justin HU19Essential JavaScript libraries for frontend designersGeneral criteria:

ds - data retrieving supportap - application performance

v - versiondoc - documentationcom - communityHow ? How to choose a JavaScript wisely ?

Justin HU20Essential JavaScript libraries for frontend designersComponent BootstrapFuel UXMetroUIct,ca,in,bf,mf,ds,ap,vct,ca,in,bf,mf,vct,bf,mf,ds,ap,vTiles*Menu**Sidebar**spinner*Accordion**Buttons set*?Rating*Progress bars*CarouselList view*Slider*.

Step 2 Check UI Components Comparison Table

Justin HU21Essential JavaScript libraries for frontend designersHow ? How to choose a JavaScript wisely ? ItemLibraryNotesBackupVisible partUI - Light boxColorboxNo browser issueUI - Button dropdownBootstrap UI - Button groupBootstrap UI - TabsBootstrap UI - PagerBootstrap Effect - Flip Flip!Non javascript animationInvisible partMVCBackbone.jsCommunity supportTemplatingHandlebarsLearning curveModule loaderRequire.js Optional

Step 3 Make a decision

Justin HU22Essential JavaScript libraries for frontend designersHow ? How to choose a JavaScript wisely ? Step 4 - Test , Implement - Doesnt work 100% ? Dont 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 solvingexample : x + y + modernizr.js x + y + old school JavaScript debugging

Justin HU23Essential JavaScript libraries for frontend designersMobile 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 - MCMTWrap it upWhy ?

What ?

How ?

8o7jhtrehuil89p65erh.765yegvbnmu23

Justin HU24Essential JavaScript libraries for frontend designersGrid / Spreadsheet: SlickGridWindows 8 style tiles: Metro UIDrag-and drop grid: gridster.jsFlip book: Turn.jsTwitter Bootstrap Extension : Fuel UX Light weight bootstrap substitution: w2uiSmall helper libraries: jquery.imgpreload, jquery-cookieevents support: Cascading grid layout: Isotope , Masonry.jsSliders: Royal slider , circular, Flexslider2

Resources - short list of small libraries worth taking a look

Justin HU25Essential JavaScript libraries for frontend designersRepository and Resource Sites : https://github.com/ - large community http://jster.net/catalog - handy JavaScript library review site http://stackoverflow.com/ - find answers to JavaScript issueshttp://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

{ Thank You } Essential JavaScript Libraries for Frontend Designers and DevelopersJustin Hu web developer at EMU DesignEmail [email protected]