Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

The jQuery Mobile Keynote delivered at jQuery Conference Fall 2011 in Boston, MA.

Transcript

1. Todd Parker & Scott Jehl filament group State of the Framework
2. filament group We design engaging sites and applications that are simple to use and accessible to everyone.
3. A quick restatement of goals & philosophy How’d we get here?
4. The mobile web is massive
5. http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf People Billion 6.8 Subscriptions 5.3
6. 35 Billion Devices on the internet Eric Schmidt DLD Conference 2011 Keynote via http://tcrn.ch/hD4Owx
7. They aren’t all iPhones...
8. July 2011 World Mobile Browsers 4.01 12.3 17.1 18.17 19.95 22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
9. Tim Berners-Lee July 1996 “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a web page appears to be yearning for the bad old days [...]”
11. The goal
12. ...and work especially well in capable browsers! Make it work everywhere.
13. All Platforms 1 codebase
14. iOS Android WebOS Blackberry WP7 Meego/Maemo Kindle 2 Nook Playbook Symbian Symbian
15. Desktop too.
16. Also here.
17. Built on standards
18. and jQuery core Mobile + Tablet UI Tools + utilities
19. Familiar API, CDN delivery jquery.min.js jquery.mobile.min.js 31kb 10 - 25kb
20. Progressive Enhancement
21. Don’t break the web. Bookmark / Refresh Friendly URLS History Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html
22. Not the OS Design for the brand
24. Keep it accessible
25. Touch, mouse, keyboard Touch & Mouse Events Mouse Events
26. Load only what you need! Modular, Decoupled
27. mobile to tablet to desktop One framework that adapts to context
29. One. Web.
30. without being exclusive. Build rich experiences
31. How to build a jQuery Mobile App
32. Step 1. Make a regular website
33. <!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body {text-align: center; }</style> </head> <body> <h1>Welcome to my site!</h1> <p><a href=”contact.html”>Contact</a></p> </body> </html>
35. Step 2. Add jQuery Mobile
36. <!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body { text-align: center; }</style> <meta name="viewport" content="width=device-width,initial- scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> <body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p> </body> </html>
37. Set the zoom <meta name="viewport" content="width=device- width,initial-scale=1">
39. ...or something. Step 3 Go shopping
40. How the heck?
41. Introducing... The Navigation model
42. Listen, intercept, handle w/ Ajax products.html <div data-role=”page”> TAP
43. After that, update the URL History, deep linking, bookmarking http://example.com/products.html
44. ...or in older browsers Hash works as a fallback http://example.com/#/products.html
45. Linking Pages
46. How to link pages <DIV class=”click-me” url=”page.html”> This is a jQuery Mobile link! </DIV>
47. WAT?
48. Look familiar? <a href=”page.html”> This is a jQuery Mobile link! </a>
49. Transitions
50. Configuring Transitions <a href=”1.html” data-transition=”fade”> This is a jQuery Mobile link! </a>
51. Regular forms; Hijax’d <form action="handler.php" method="post"> Don’t thank us; thank this guy >
52. Transitions too! <form action="handler.php" method="post" data-transition=”slideup”>
53. “Pages” in the page
54. Page container <body> <div data-role="page"> <!-- page content goes here --> </div> </body>
55. Page containers are.... • used to group “pages” in DOM • auto-generated for you • any kind of element you’d like
56. Dialogs
57. are pages <a href=”dialogs-1.result.html” data-rel=”dialog”> Open page as a dialog! </a>
58. ...but not in history ...but they can be closed with back button
59. Multipage documents
60. <body> <div data-role="page" id="home"></div> <div data-role="page" id="products"></div> <div data-role="page" id="services"></div> <div data-role="page" id="about"></div> <div data-role="page" id="contact"></div> </body> ID’d sections
61. <p>Hello world</p> <ul data-role="listview"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About us</a></li> <li><a href="#contact">Contact</a></li> </ul> ...and local anchor links
62. Page Sections
63. Page child roles header footer content
64. <body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> </body> Page child roles
65. pros / cons •May lend a “native” app feel. •Useful in certain simple UI situations: full-page photo galleries, etc. •Often translate poorly to desktop. •Only feel “native” to iOS users •Uncanny Valley
66. Listviews
67. <ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> A Regular UL
68. Basic unordered list
69. <ul data-role=”listview”> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> Basic unordered list
70. Basic unordered list
71. <div data-role="content"> <p>Hello world</p> <ul data-role="listview"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content --> List with links
72. List with links
73. Etc.
74. Buttons
75. Headers, footers
76. “Fixed” toolbars
77. Form elements
78. Collapsibles
79. The jQM API
80. $.mobile
81. Navigation Scripting
82. $.mobile.changePage
83. Change pages via JS $.mobile.changePage(“about/us.html”);
84. ...and back window.history.back();
85. Submit form data $.mobile.changePage(“handler.php”, { type: "post", data: { "shipping": "Fast!" } });
86. $.mobile.loadPage
87. $.mobile.loadPage( "about/us.html" ); Load pages via JS
88. <a href=”page.html” data-prefetch>Page</a> loadPage() from HTML
89. Custom Events
90. Page Events
91. the new domready Introducing pagecreate
92. Small code tidbit. $( “.ui-page” ).live( “pagecreate”, function(){ alert( “I’m created!” ); });
93. pre-parse the markup here Also: pagebeforecreate
94. pagebeforecreate $( “div” ).live( “pagebeforecreate”, function(){ alert( “I’m about to be created!” ); });
95. Page Change Events
96. All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide • pageshow • pagehide • pageremove • pagechange
97. Putting it all together
98. FlipPics
100. http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...
101. Milestones
102. Alphas 1-3:
103. Alpha 4
105. vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized Events
106. Use ‘em like mouse events $( “a.toggleable” ).bind( “vclick”, function(){ $(this) .next() .toggleClass( “hidden” ); });
107. $.noConflict() for your HTML Data Attr Namespacing
108. $.mobile.allowCrossDomainPages
109. Also. • Configurable text strings (i18n) • Updating page titles • No more meta viewport injection
110. Beta 1
112. Also. • URL bar hidden: iOS + Android • Smoother transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF
113. Beta 2
115. Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain • fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid
116. Cleaner design
117. Page wrapper: optional
118. Gradients: More!
119. New create event $( ...new markup that contains widgets... ) .appendTo( ".ui-page" ) .trigger( "create" );
120. Also. • DOM management • Data-prefetch • autoInitializePage • Configuration improvements
121. Beta 3
122. history.pushState
123. pagebeforechange
124. iOS5 Overflow & Fixies
125. 1.0 RC1
126. Well, ok.
127. data-content-theme
128. Search icon
129. API docs
130. What’s Next?
131. 1.0 in weeks
132. Theming is hard.
133. Basic TR demo movie
135. Download Builder in the works! Also!
136. Build, Contribute
137. Demos & Docs jquerymobile.com/demos/1.0rc1/ Live dev snapshot jquerymobile.com/test/ Nightlies, Latest jquerymobile.com/latest/
138. fork & contribute github.com/jquery/jquery-mobile
139. Build your own $ git clone git://github.com/jquery/ jquery-mobile.git $ cd jquery-mobile $ make 1 2 3
140. Thanks core team! • Kin Blas ( Adobe ) • John Bender ( Adobe ) • Ghislain Seguin ( Jive )
141. Awesome sponsors are awesome filament group
142. Thanks! Questions? @toddmparker @scottjehl