Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
  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.
  3. FooLab Content • jQuery and jQuery UI • Image cycle,

    popup and table sorter plugins • Benchmark.js • Highcharts • Plupload • 9 examples 3
  4. FooLab jQuery Framework

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

  6. FooLab <a class="btnVote" href="#">-1</a> <a class="btnVote" href="#">+1</a> <span class="minus"></span> <span

    class="neutral"></span> <span class="plus"></span> 6
  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
  8. FooLab var status = $('<span class="status">'+value+'</span>'); $("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
  9. FooLab Why jQuery • Easy to learn and to use

    • Fast and lightweight • Well documented • Complete and extensible • Big community 9
  10. FooLab jQuery Plugins Easily add advanced functionality

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

  12. FooLab Code: Image Cycle 12 <div id="cycle"> <img src="img/image1.jpg" />

    <img src="img/image2.jpg" /> </div> <div id="cycle-navigation"></div> $("#cycle").cycle({ fx: "scrollLeft", speed: 500, timeout: 2000, pager: "#cycle-navigation" });
  13. FooLab Example: Popup 13 http://conference/js-faves/jquery-popup.html

  14. FooLab Code: Popup 14 <a href="jquery.html" class="popup"> What is jQuery?

    </a> $("a.popup").nm();
  15. FooLab Example: Table Sorter 15 http://conference/js-faves/jquery-tablesorter.html

  16. FooLab Code: Table Sorter 16 <table class="sortable"> <thead> <tr> <th>Country

    (airport)</th> <th>Speakers</th> <th>Fare</th> </tr> </thead> <tbody>...</tbody> </table> $("table.sortable").tablesorter();
  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
  18. FooLab jQuery UI Common UI widgets and behaviors

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

  20. FooLab Code: Tabs 20 <div id="tabs"> <ul> <li><a href="#tickets">Tickets</a></li> <li><a

    href="#new">New</a></li> </ul> <div id="tickets">...</div> <div id="new">...</div> </div> $("#tabs").tabs();
  21. FooLab Code: Tabs 21 <li><a href="page.html">My tickets</a></li> $tabs.tabs("add", "#tab-1", "Title");

    $tabs.find(".ui-tabs-nav").sortable({ axis: "x" }); cookie: { expires: 7 }
  22. FooLab Example: Date 22 http://conference/js-faves/jquery-datepicker.html

  23. FooLab Code: Date 23 Date: <input type="text" class="date"> $("input.date").datepicker();

  24. FooLab Features: Date 24 { dateFormat: "d M, y", minDate:

    -20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide" }
  25. FooLab Why jQuery UI • Better support than 3rd party

    plugins • Complex widgets made easy • Well documented • Themes 25
  26. FooLab Benchmark.js Performance testing

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

  28. FooLab Code 28 var suite = new Benchmark.Suite; suite.add("tablesort#sort", function()

    { $("#tablesort thead th:first").click(); });
  29. FooLab Code 29 suite.on("cycle", function(event, bench) { console.log(String(bench)); }); suite.run({

    async: false, minSamples: 20, maxTime: 5 });
  30. FooLab Highcharts Interactive charts

  31. FooLab Example: Highcharts 31

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

  33. FooLab Code: Highcharts 33 <div id="chart"></div> new Highcharts.Chart({ chart: {

    renderTo: "chart" }, xAxis: { categories: data } });
  34. FooLab Features: Highcharts 34 tooltip: formatter: function() { return "<b>"

    + this.point.name + "</b>"; }, plotOptions...select: { radius: 6, fillColor: "#da7700" }
  35. FooLab Example: Highcharts 35 http://www.highcharts.com/demo/combo-dual-axes

  36. FooLab Why Highcharts • Works with jQuery, MooTools or Prototype

    framework • Well documented • Highly customizable • Can spice up any application with charts 36
  37. FooLab Plupload Upload files

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

  39. FooLab Code: Plupload 39 <div id="uploader"> You browser doesn't support

    HTML5, Silverlight or Flash. </div> $("#uploader").plupload({ runtimes: "html5,silverlight,flash", url: "upload.php", rename: true, max_file_count: 20 }
  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
  41. FooLab Go and use! And donate to your favorite projects

  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