$30 off During Our Annual Pro Sale. View Details »

JavaScript Tools and Frameworks Faves

JavaScript Tools and Frameworks Faves

Anna Filina
PRO

August 14, 2012
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. FooLab
    JavaScript Tools and
    Frameworks Faves
    JS Montreal - August 14, 2012
    Anna Filina

    View Slide

  2. 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.

    View Slide

  3. FooLab
    Content
    • jQuery and jQuery UI
    • Image cycle, popup and table sorter plugins
    • Benchmark.js
    • Highcharts
    • Plupload
    • 9 examples
    3

    View Slide

  4. FooLab
    jQuery
    Framework

    View Slide

  5. FooLab
    Example: Votes
    5
    http://conference/js-faves/jquery-dom.html

    View Slide

  6. FooLab
    -1
    +1



    6

    View Slide

  7. 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

    View Slide

  8. 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

    View Slide

  9. FooLab
    Why jQuery
    • Easy to learn and to use
    • Fast and lightweight
    • Well documented
    • Complete and extensible
    • Big community
    9

    View Slide

  10. FooLab
    jQuery Plugins
    Easily add advanced functionality

    View Slide

  11. FooLab
    Example: Image Cycle
    11
    http://conference/js-faves/jquery-cycle.html

    View Slide

  12. FooLab
    Code: Image Cycle
    12





    $("#cycle").cycle({
    fx: "scrollLeft",
    speed: 500,
    timeout: 2000,
    pager: "#cycle-navigation"
    });

    View Slide

  13. FooLab
    Example: Popup
    13
    http://conference/js-faves/jquery-popup.html

    View Slide

  14. FooLab
    Code: Popup
    14

    What is jQuery?

    $("a.popup").nm();

    View Slide

  15. FooLab
    Example: Table Sorter
    15
    http://conference/js-faves/jquery-tablesorter.html

    View Slide

  16. FooLab
    Code: Table Sorter
    16



    Country (airport)
    Speakers
    Fare


    ...

    $("table.sortable").tablesorter();

    View Slide

  17. 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

    View Slide

  18. FooLab
    jQuery UI
    Common UI widgets and behaviors

    View Slide

  19. FooLab
    Example: Tabs
    19
    http://conference/js-faves/jquery-tabs.html

    View Slide

  20. FooLab
    Code: Tabs
    20


    Tickets
    New

    ...
    ...

    $("#tabs").tabs();

    View Slide

  21. FooLab
    Code: Tabs
    21
    My tickets
    $tabs.tabs("add", "#tab-1", "Title");
    $tabs.find(".ui-tabs-nav").sortable({
    axis: "x"
    });
    cookie: {
    expires: 7
    }

    View Slide

  22. FooLab
    Example: Date
    22
    http://conference/js-faves/jquery-datepicker.html

    View Slide

  23. FooLab
    Code: Date
    23
    Date:
    $("input.date").datepicker();

    View Slide

  24. FooLab
    Features: Date
    24
    { dateFormat: "d M, y",
    minDate: -20,
    maxDate: "+1M",
    numberOfMonths: 2,
    showAnim: "slide"
    }

    View Slide

  25. FooLab
    Why jQuery UI
    • Better support than 3rd party plugins
    • Complex widgets made easy
    • Well documented
    • Themes
    25

    View Slide

  26. FooLab
    Benchmark.js
    Performance testing

    View Slide

  27. FooLab
    Example
    27
    http://conference/js-faves/benchmark.html

    View Slide

  28. FooLab
    Code
    28
    var suite = new Benchmark.Suite;
    suite.add("tablesort#sort", function() {
    $("#tablesort thead th:first").click();
    });

    View Slide

  29. FooLab
    Code
    29
    suite.on("cycle", function(event, bench) {
    console.log(String(bench));
    });
    suite.run({
    async: false,
    minSamples: 20,
    maxTime: 5
    });

    View Slide

  30. FooLab
    Highcharts
    Interactive charts

    View Slide

  31. FooLab
    Example: Highcharts
    31

    View Slide

  32. FooLab
    Example: Highcharts
    32
    http://conference/js-faves/highcharts.html

    View Slide

  33. FooLab
    Code: Highcharts
    33

    new Highcharts.Chart({
    chart: { renderTo: "chart" },
    xAxis: { categories: data }
    });

    View Slide

  34. FooLab
    Features: Highcharts
    34
    tooltip:
    formatter: function() {
    return "" + this.point.name + "";
    },
    plotOptions...select: {
    radius: 6,
    fillColor: "#da7700"
    }

    View Slide

  35. FooLab
    Example: Highcharts
    35
    http://www.highcharts.com/demo/combo-dual-axes

    View Slide

  36. FooLab
    Why Highcharts
    • Works with jQuery, MooTools or Prototype framework
    • Well documented
    • Highly customizable
    • Can spice up any application with charts
    36

    View Slide

  37. FooLab
    Plupload
    Upload files

    View Slide

  38. FooLab
    Example: Plupload
    38
    http://conference/js-faves/plupload.html

    View Slide

  39. 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
    }

    View Slide

  40. FooLab
    Why Plupload
    • Customizable
    • HTML4 , HTML5, Silverlight, Flash, Gears, BrowserPlus
    • Upload multiple files
    • Queue widget with upload progress
    • Optional integration with jQuery UI
    40

    View Slide

  41. FooLab
    Go and use!
    And donate to your favorite projects

    View Slide

  42. 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

    View Slide