Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

4137f7daffde77fce06a26a1ac92f9bf?s=47 scottjehl
October 01, 2011

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

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

4137f7daffde77fce06a26a1ac92f9bf?s=128

scottjehl

October 01, 2011
Tweet

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 [...]”
  10. None
  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

  23. None
  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
  28. None
  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>
  34. None
  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">

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

  99. None
  100. http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...

  101. Milestones

  102. Alphas 1-3:

  103. Alpha 4

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

  111. None
  112. Also. • URL bar hidden: iOS + Android • Smoother

    transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF
  113. Beta 2

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

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