Slide 1
Slide 1 text
FooLab
JavaScript Tools and
Frameworks Faves
JS Montreal - August 14, 2012
Anna Filina
Slide 2
Slide 2 text
FooLab
Anna Filina
2
• PHP Quebec - user group
• ConFoo - non for profit Web
conference
• FooLab Inc. - IT consulting
• I write code, coach programmers
and solve problems.
Slide 3
Slide 3 text
FooLab
Content
• jQuery and jQuery UI
• Image cycle, popup and table sorter plugins
• Benchmark.js
• Highcharts
• Plupload
• 9 examples
3
Slide 4
Slide 4 text
FooLab
jQuery
Framework
Slide 5
Slide 5 text
FooLab
Example: Votes
5
http://conference/js-faves/jquery-dom.html
Slide 7
Slide 7 text
FooLab
$(".btnVote").click(onVoteClick);
function onVoteClick() {
var votes = plus + minus;
var minusWidth = Math.floor(minus/votes*100);
$(".minus").css("width", minusWidth + "%");
$(".votes").html(votes);
...
}
7
Slide 8
Slide 8 text
FooLab
var status = $(''+value+'');
$("body").append(status);
status.css({
"top": btn.offset().top,
"left": btn.offset().left
}).animate({
"top": "-=30",
"opacity": 0
}, 600, "linear", onStatusComplete);
function onStatusComplete() {
status.remove();
}
8
+1
+1
Slide 9
Slide 9 text
FooLab
Why jQuery
• Easy to learn and to use
• Fast and lightweight
• Well documented
• Complete and extensible
• Big community
9
Slide 10
Slide 10 text
FooLab
jQuery Plugins
Easily add advanced functionality
Slide 11
Slide 11 text
FooLab
Example: Image Cycle
11
http://conference/js-faves/jquery-cycle.html
Slide 12
Slide 12 text
FooLab
Code: Image Cycle
12
$("#cycle").cycle({
fx: "scrollLeft",
speed: 500,
timeout: 2000,
pager: "#cycle-navigation"
});
Slide 13
Slide 13 text
FooLab
Example: Popup
13
http://conference/js-faves/jquery-popup.html
Slide 15
Slide 15 text
FooLab
Example: Table Sorter
15
http://conference/js-faves/jquery-tablesorter.html
Slide 16
Slide 16 text
FooLab
Code: Table Sorter
16
...
Country (airport)
Speakers
Fare
$("table.sortable").tablesorter();
Slide 17
Slide 17 text
FooLab
Why jQuery Plugins
• Most plugins are easy to use
• Over 5,000 plugins
• Speed up your development
• Download JS, include and call function
17
Slide 18
Slide 18 text
FooLab
jQuery UI
Common UI widgets and behaviors
Slide 19
Slide 19 text
FooLab
Example: Tabs
19
http://conference/js-faves/jquery-tabs.html
Slide 21
Slide 21 text
FooLab
Code: Tabs
21
My tickets
$tabs.tabs("add", "#tab-1", "Title");
$tabs.find(".ui-tabs-nav").sortable({
axis: "x"
});
cookie: {
expires: 7
}
Slide 22
Slide 22 text
FooLab
Example: Date
22
http://conference/js-faves/jquery-datepicker.html
Slide 23
Slide 23 text
FooLab
Code: Date
23
Date:
$("input.date").datepicker();
Slide 24
Slide 24 text
FooLab
Features: Date
24
{ dateFormat: "d M, y",
minDate: -20,
maxDate: "+1M",
numberOfMonths: 2,
showAnim: "slide"
}
Slide 25
Slide 25 text
FooLab
Why jQuery UI
• Better support than 3rd party plugins
• Complex widgets made easy
• Well documented
• Themes
25
Slide 26
Slide 26 text
FooLab
Benchmark.js
Performance testing
Slide 27
Slide 27 text
FooLab
Example
27
http://conference/js-faves/benchmark.html
Slide 28
Slide 28 text
FooLab
Code
28
var suite = new Benchmark.Suite;
suite.add("tablesort#sort", function() {
$("#tablesort thead th:first").click();
});
Slide 29
Slide 29 text
FooLab
Code
29
suite.on("cycle", function(event, bench) {
console.log(String(bench));
});
suite.run({
async: false,
minSamples: 20,
maxTime: 5
});
Slide 30
Slide 30 text
FooLab
Highcharts
Interactive charts
Slide 31
Slide 31 text
FooLab
Example: Highcharts
31
Slide 32
Slide 32 text
FooLab
Example: Highcharts
32
http://conference/js-faves/highcharts.html
Slide 33
Slide 33 text
FooLab
Code: Highcharts
33
new Highcharts.Chart({
chart: { renderTo: "chart" },
xAxis: { categories: data }
});
Slide 34
Slide 34 text
FooLab
Features: Highcharts
34
tooltip:
formatter: function() {
return "" + this.point.name + "";
},
plotOptions...select: {
radius: 6,
fillColor: "#da7700"
}
Slide 35
Slide 35 text
FooLab
Example: Highcharts
35
http://www.highcharts.com/demo/combo-dual-axes
Slide 36
Slide 36 text
FooLab
Why Highcharts
• Works with jQuery, MooTools or Prototype framework
• Well documented
• Highly customizable
• Can spice up any application with charts
36
Slide 37
Slide 37 text
FooLab
Plupload
Upload files
Slide 38
Slide 38 text
FooLab
Example: Plupload
38
http://conference/js-faves/plupload.html
Slide 39
Slide 39 text
FooLab
Code: Plupload
39
You browser doesn't support HTML5,
Silverlight or Flash.
$("#uploader").plupload({
runtimes: "html5,silverlight,flash",
url: "upload.php",
rename: true,
max_file_count: 20
}
Slide 40
Slide 40 text
FooLab
Why Plupload
• Customizable
• HTML4 , HTML5, Silverlight, Flash, Gears, BrowserPlus
• Upload multiple files
• Queue widget with upload progress
• Optional integration with jQuery UI
40
Slide 41
Slide 41 text
FooLab
Go and use!
And donate to your favorite projects
Slide 42
Slide 42 text
FooLab
@afilina
• jQuery: http://jquery.com/
• jQuery Cycle: http://malsup.com/jquery/cycle/
• NyroModal: http://nyromodal.nyrodev.com/
• tablesorter: http://tablesorter.com/docs/
• Benchmark.js: http://benchmarkjs.com/
• Highcharts: http://highcharts.com/
• Plupload: http://plupload.com/
• Code on GitHub: https://github.com/afilina/demo_jsfaves
42