The jQuery Projects, JAX edition

As presented at JAX 2012 in Mainz.

Transcript

1. The Projects
2. Jörn Zaefferer @bassistance The Projects jQuery is the stdio of the web -- Yehuda Katz (Merb, Rails 3, SproutCore, Ember.js)
3. Jörn Zaefferer @bassistance The Projects What mobile players have to learn really soon is that the framework wars are over and jQuery has won. -- PPK (quirksmode.org)
4. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery
5. Jörn Zaefferer @bassistance The Projects Chart from http://httparchive.org/trends.php
6. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery
7. Jörn Zaefferer @bassistance The Projects write less, do more jQuery tagline
8. The Projects Jörn Zaefferer @bassistance Old-school JavaScript var  tables  =  document.getElementsByTagName("table"); for  (var  t  =  0;  t  <  tables.length;  t++)  {        var  rows  =  tables[t].getElementsByTagName("tr");        for  (var  i  =  1;  i  <  rows.length;  i  +=  2)  {                if  (!/(^|s)odd(s|$)/.test(rows[i].className))  {                        rows[i].className  +=  "  odd";                }        } };
9. Jörn Zaefferer @bassistance The Projects
10. The Projects Jörn Zaefferer @bassistance jQuery JavaScript jQuery("table  tr:nth-­‐child(odd)").addClass("odd");
11. Jörn Zaefferer @bassistance The Projects A little history lesson Who? What? When?
12. Jörn Zaefferer @bassistance The Projects
13. Jörn Zaefferer @bassistance The Projects
14. Jörn Zaefferer @bassistance The Projects
15. Jörn Zaefferer @bassistance The Projects
16. Jörn Zaefferer @bassistance The Projects
17. Jörn Zaefferer @bassistance The Projects
18. Jörn Zaefferer @bassistance The Projects Flexible JavaScript Events September 2005
19. The Projects Jörn Zaefferer @bassistance Fun with event handling function  addEvent(  obj,  type,  fn  )  {    if  (  obj.attachEvent  )  {        obj['e'+type+fn]  =  fn;        obj[type+fn]  =  function(){            obj['e'+type+fn](  window.event  );        }        obj.attachEvent(  'on'+type,  obj[type+fn]  );    }  else        obj.addEventListener(  type,  fn,  false  ); } function  removeEvent(  obj,  type,  fn  )  {    if  (  obj.detachEvent  )  {        obj.detachEvent(  'on'+type,  obj[type+fn]  );        obj[type+fn]  =  null;    }  else        obj.removeEventListener(  type,  fn,  false  ); }
20. Jörn Zaefferer @bassistance The Projects jQuery January 2006
21. Jörn Zaefferer @bassistance The Projects jQuery UI September 2007
22. Jörn Zaefferer @bassistance The Projects
23. Jörn Zaefferer @bassistance The Projects QUnit May 2008
24. Jörn Zaefferer @bassistance The Projects Sizzle August 2008
25. Jörn Zaefferer @bassistance The Projects jQuery Mobile August 2010
26. Jörn Zaefferer @bassistance The Projects
27. Jörn Zaefferer @bassistance The Projects jQuery Core 1.7.2 1.5 - 1.7.1 in 2011, 1.7.2 in March deferreds, on, html5
28. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds $.when(  somethingHappens()  ) .then(  function()  {      doSomethingElse(); });
29. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds and Ajax $.ajax(  url  ) .then(  function()  {      doSomethingElse(); });
30. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds and Ajax $.when(  $.ajax(  url1  ),  $.ajax(  url2  )  ) .then(  function()  {      bothDone(); });
31. The Projects Jörn Zaefferer @bassistance jQuery 1.6 - Relative CSS //Before: var  sbwidth  =  parseInt(  $("#sidebar").css("width"),  10); $("#sidebar").css("width",  (sbwidth  +  100)  +  "px"); //Now: $("#sidebar").css("width",  "+=100px");
32. The Projects Jörn Zaefferer @bassistance jQuery 1.6 $.map() Enhancement var  names  =  {  firstname:  "Elijah",  lastname:  "Mannor",   age:  "OLD"};                   names  =  jQuery.map(names,  function(v)  {        return  v.toLowerCase(); });   //  returns:  ["elijah",  "manor",  "old"]
33. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".foo").bind("click",  function(e)  {}); //  now $(".foo").on("click",  function(e)  {});
34. The Projects Jörn Zaefferer @bassistance //  before $(".foo").delegate(".bar",  "click",  function(e)  {}); //  now $(".foo").on("click",  ".bar",  function(e)  {}); jQuery 1.7
35. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".bar").live("click",  function(e)  {}); //  now $(document).on("click",  ".bar",  function(e)  {});
36. The Projects Jörn Zaefferer @bassistance jQuery 1.7 - HTML5 Support //  selector  works,  even  in  IE6 $("header").hide(); //  still  needs  html5  shim  like  Modernizr $("<header>").appendTo("body");
37. Jörn Zaefferer @bassistance The Projects jQuery Core 1.8 Bug fixing!
38. The Projects Jörn Zaefferer @bassistance Work in progress https://github.com/dmethvin/jquery/tree/ccao
39. Jörn Zaefferer @bassistance The Projects
40. Jörn Zaefferer @bassistance The Projects
41. Jörn Zaefferer @bassistance The Projects jQuery UI 1.8.18 Widgets, Interactions, Effects, Utilities CSS Framework, ThemeRoller
42. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery-UI
43. Jörn Zaefferer @bassistance The Projects
44. Jörn Zaefferer @bassistance The Projects
45. The Projects Jörn Zaefferer @bassistance Autocomplete var  availableTags  =  [   "ActionScript",  "C",  "C++",  "Clojure",  "ColdFusion",   "Erlang",  "Fortran",  "Groovy",  "Java",  "JavaScript",   "Perl",  "PHP",  "Python",  "Ruby",  "Scala",  "Scheme" ]; $(  "#tags"  ).autocomplete({   source:  availableTags });
46. Jörn Zaefferer @bassistance The Projects
47. Jörn Zaefferer @bassistance The Projects
48. Jörn Zaefferer @bassistance The Projects
49. Jörn Zaefferer @bassistance The Projects
50. The Projects Jörn Zaefferer @bassistance connected lists Sortable $(  "#sortable1,  #sortable2"  ).sortable({   connectWith:  ".connectedSortable" });
51. Jörn Zaefferer @bassistance The Projects
52. Jörn Zaefferer @bassistance The Projects
53. Jörn Zaefferer @bassistance The Projects
54. Jörn Zaefferer @bassistance The Projects
55. The Projects Jörn Zaefferer @bassistance Position $("img").position({   my:  "right  middle",   at:  "left+25  middle",   of:  window });
56. The Projects Jörn Zaefferer @bassistance Animated Position $("img").position({   my:  "right  middle",   at:  "left+25  middle",   of:  window,   using:  function(to)  {     $(this).animate(to);   } });
57. Jörn Zaefferer @bassistance The Projects jQuery UI 1.9 Redesigns New Widgets
58. Jörn Zaefferer @bassistance The Projects
59. Jörn Zaefferer @bassistance The Projects
60. The Projects Jörn Zaefferer @bassistance Custom Content Tooltip <h3  data-­‐geo>Vienna,  Austria</h3> $(  "body"  ).tooltip({   items:  "[data-­‐geo]",   content:  function()  {       return  "<img  class='map'  src='"  +         "http://maps.google.com/maps/api/staticmap?"  +         "size=350x350&maptype=terrain&&center="  +         $(  this  ).text()  +  "'>";     }   } });
61. Jörn Zaefferer @bassistance The Projects
62. Jörn Zaefferer @bassistance The Projects
63. Jörn Zaefferer @bassistance The Projects
64. Jörn Zaefferer @bassistance The Projects
65. The Projects Jörn Zaefferer @bassistance Decimal Spinner $(  "#spinner"  ).spinner({   step:  0.01,   numberFormat:  "n" });
66. Jörn Zaefferer @bassistance The Projects
67. Jörn Zaefferer @bassistance The Projects
68. Jörn Zaefferer @bassistance The Projects jQuery Mobile 1.0.1 22 A-Grade platforms Ajax navigation with transitions Lists, Toolbars, Form controls ThemeRoller
69. Jörn Zaefferer @bassistance The Projects
70. Jörn Zaefferer @bassistance The Projects
71. Jörn Zaefferer @bassistance The Projects
72. The Projects Jörn Zaefferer @bassistance Simple page <!DOCTYPE  html>   <html>   <head>    <meta  charset="utf-­‐8">    <meta  name="viewport"  content="width=device-­‐width,  initial-­‐scale=1">      <title>Direct  Pizza  -­‐  Home</title>      <link  rel="stylesheet"  href="jquery.mobile.css"  />    <script  src="jquery.js"></script>    <script  src="jquery.mobile.js"></script> </head>   <body>   <div  data-­‐role="page">    <div  data-­‐role="header"><h1>Direct  Pizza</h1></div>    <div  data-­‐role="content"><p>Your  personal  pizza  service!</p></div>    <div  data-­‐role="footer"><h4>We  love  Pizza™</h4></div> </div> </body> </html>
73. Jörn Zaefferer @bassistance The Projects
74. Jörn Zaefferer @bassistance The Projects
75. Jörn Zaefferer @bassistance The Projects
76. Jörn Zaefferer @bassistance The Projects jQuery Mobile 1.1 Smoother transitions Real fixed toolbars
77. Jörn Zaefferer @bassistance The Projects
78. Jörn Zaefferer @bassistance The Projects
79. Jörn Zaefferer @bassistance The Projects
80. The Projects Jörn Zaefferer @bassistance Fixed Toolbars <div  data-­‐role="page"  class="type-­‐interior">   <div  data-­‐role="header"  data-­‐position="fixed">     <h1>Fixed  toolbars</h1>   </div>     <div  data-­‐role="content">     Whatever   </div>   <div  data-­‐role="footer"  data-­‐position="fixed">     <h1>Fixed  Footer</h1>   </div> </div>
81. Jörn Zaefferer @bassistance The Projects QUnit 1.5 Simple JavaScript unit testing
82. The Projects Jörn Zaefferer @bassistance QUnit Usage <!DOCTYPE  html> <html> <head>   <meta  charset="UTF-­‐8"  />   <title>QUnit  Test  Suite</title>   <link  rel="stylesheet"  href="qunit.css">   <script  src="qunit.js"></script>   <script>      function  add(a,  b)  {            return  a  +  b;      }      test("add  basics",  function()  {            equal(  add(1,  1),  2,  "result  should  be  2"  );      });      </script> </head> <body>   <div  id="qunit"></div>   <div  id="qunit-­‐fixture">test  markup</div> </body> </html>
83. Jörn Zaefferer @bassistance The Projects
84. Jörn Zaefferer @bassistance The Projects
85. Jörn Zaefferer @bassistance The Projects The End not really
86. Jörn Zaefferer @bassistance The Projects
87. Jörn Zaefferer @bassistance The Projects
88. Jörn Zaefferer @bassistance The Projects
89. Jörn Zaefferer @bassistance The Projects jQuery Foundation Since February 2012
90. Jörn Zaefferer @bassistance The Projects Membership program Launching soon...
91. Jörn Zaefferer @bassistance The Projects W3C and ECMA member Started the process to join
92. Jörn Zaefferer @bassistance The Projects Conferences SAN FRANCISCO - JUNE 28-29, 2012
93. Jörn Zaefferer @bassistance The Projects Getting involved Your help, we’re looking for! -- Master Yoda
94. Jörn Zaefferer @bassistance The Projects
95. Jörn Zaefferer @bassistance The Projects
96. Jörn Zaefferer @bassistance The Projects
97. Jörn Zaefferer @bassistance The Projects
98. Jörn Zaefferer @bassistance The Projects
99. Jörn Zaefferer @bassistance The Projects
100. Jörn Zaefferer @bassistance The Projects
101. Jörn Zaefferer @bassistance The Projects
102. Jörn Zaefferer @bassistance The Projects
103. Jörn Zaefferer @bassistance The Projects
104. Jörn Zaefferer @bassistance The Projects
105. Jörn Zaefferer @bassistance The Projects
106. Jörn Zaefferer @bassistance The Projects
107. Jörn Zaefferer @bassistance The Projects To recap... We’ve come a long way...
108. Jörn Zaefferer @bassistance The Projects Special Thanks Content: Ralph Whitbeck, Adam Sontag Design: Doug Neiner
109. Jörn Zaefferer @bassistance The Projects @bassistance joern@jquery.com http://bassistance.de TWITTER EMAIL WEB