JavaScript Tools and Frameworks Faves

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