JavaScript Tools and Frameworks Faves

JavaScript Tools andFrameworks Favesphp|tek, May 26, 2011

Anna FilinaPHP Quebec - user group, organizerConFoo - non for proﬁt Web conference, organizerFooLab Inc. - IT solutions for businesses, founderI write code

Content jQuery and plugins Plupload RaphaelJS

jQuery:Framework

Features Event handling DOM traversing & manipulation Ajax Animations jQuery UI Interactions Widgets Theming

Reasons Easy to learn and to use Fast and lightweight Well documented Many features and plugins Big community

Example: Image Cycle$(#cycle).cycle({ fx: scrollLeft, speed: fast, timeout: 3000, pager: #cycle-nav}); http://conf.local/js-faves/web/1-jquery-cycle.html

Example: Popup$(a.popup).nyroModal();$.nyroModalData(E-mail sent); http://conf.local/js-faves/web/2-jquery-popup.html

Example: jQueryUI Tabs<div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div id="tabs1"></div> <div id="tabs2"></div></div>$(#tabs).tabs(); http://conf.local/js-faves/web/3-jquery-tabs.html

Scenarios Twitter: display user proﬁle in side-bar GitHub: slide navigation for code Facebook: autoload posts on scroll New York Times: top stories cycle Create user-customizable interfaces

Plupload:File upload queue

Features Upload multiple ﬁles Upload chunks HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus Queue widget with upload progress

Reasons Highly customizable Chooses runtime based on client capabilities Integration with jQuery UI

Example$(#uploader).plupload({ runtimes: html5,browserplus,gears, url: upload.php, chunk_size:1mb, rename: true, max_file_count: 20} http://conf.local/js-faves/web/4-plupload.html

Scenarios Flickr: trip photos Slideshare: conference organizers Dropbox Freshbooks (idea): upload and OCR receipts Magazine: articles Visual instructions for assembly line

RaphaelJS:Vector graphics

Features SVG, VML Draw Animate Handle events Drag and drop

Reasons Chooses SVG or VML based on browser Easy to learn and to use Clean syntax

Examplevar pathString = M 288 216 L 288 126 L342 126 L 342 216 L 288 216;var p = paper.path(pathString);p.attr({ fill: #FDF5CE, cursor: pointer, stroke: #666, stroke-width: 2}); http://conf.local/js-faves/web/5-raphaeljs.html

Scenarios Maps Interactive condo plans Annotate images with instructions NASDAQ: stock quotes Flowcharts Entire web application

Resources http://jqueryui.com http://www.malsup.com/jquery/cycle http://nyromodal.nyrodev.com http://jqueryui.com http://www.plupload.com http://raphaeljs.com Code used in this talk: http://annaﬁlina.com/blog/wp-content/uploads/js- faves.zip

JavaScript Tools and Frameworks Faves

by Anna Filina on May 26, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

JavaScript Tools and Frameworks Faves — Presentation Transcript