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 6

Slide 6 text

FooLab -1 +1 6

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 14

Slide 14 text

FooLab Code: Popup 14 What is jQuery? $("a.popup").nm();

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 20

Slide 20 text

FooLab Code: Tabs 20
...
...
$("#tabs").tabs();

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