javascript tools and frameworks faves
DESCRIPTION
TRANSCRIPT
JavaScript Tools and Frameworks Favesphp|tek, May 26, 2011
Anna Filina
PHP Quebec - user group, organizer
ConFoo - non for profit Web conference, organizer
FooLab Inc. - IT solutions for businesses, founder
I write code
Content
jQuery and plugins
Plupload
RaphaelJS
jQuery:Framework
FeaturesEvent 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 profile 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 files
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
Example
var pathString = 'M 288 216 L 288 126 L 342 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
Resourceshttp://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://annafilina.com/blog/wp-content/uploads/js-faves.zip