JavaScript Tools and Frameworks Faves

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