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
   

   View Slide

2. filament group
   We design engaging sites and
   applications that are simple to
   use and accessible to everyone.
   

   View Slide

3. A quick restatement of goals & philosophy
   How’d we get here?
   

   View Slide

4. The mobile web is
   massive
   

   View Slide

5. http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf
   People
   Billion
   6.8
   Subscriptions
   5.3
   

   View Slide

6. 35 Billion
   Devices on
   the internet
   Eric Schmidt
   DLD Conference 2011 Keynote
   via http://tcrn.ch/hD4Owx
   

   View Slide

7. They aren’t all
   iPhones...
   

   View Slide

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
   

   View Slide

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

   View Slide

10. View Slide

11. The goal
    

    View Slide

12. ...and work especially well in capable browsers!
    Make it work
    everywhere.
    

    View Slide

13. All Platforms
    1 codebase
    

    View Slide

14. iOS Android WebOS
    Blackberry WP7
    Meego/Maemo Kindle 2
    Nook
    Playbook
    Symbian
    Symbian
    

    View Slide

15. Desktop too.
    

    View Slide

16. Also here.
    

    View Slide

17. Built on standards
    

    View Slide

18. and jQuery core
    Mobile + Tablet UI
    Tools + utilities
    

    View Slide

19. Familiar API, CDN delivery
    jquery.min.js
    jquery.mobile.min.js
    31kb
    10 - 25kb
    

    View Slide

20. Progressive Enhancement
    

    View Slide

21. Don’t break the web.
    Bookmark / Refresh
    Friendly URLS
    History Works
    Now with PushState!
    jquerymobile.com/test/docs/api/globalconfig.html
    

    View Slide

22. Not the OS
    Design for the brand
    

    View Slide

23. View Slide

24. Keep it accessible
    

    View Slide

25. Touch, mouse, keyboard
    Touch & Mouse
    Events
    Mouse Events
    

    View Slide

26. Load only what you need!
    Modular, Decoupled
    

    View Slide

27. mobile to tablet to desktop
    One framework that
    adapts to context
    

    View Slide

28. View Slide

29. One. Web.
    

    View Slide

30. without being exclusive.
    Build rich experiences
    

    View Slide

31. How to build a
    jQuery Mobile App
    

    View Slide

32. Step 1.
    Make a regular website
    

    View Slide

33. 
    
    
    My Web App
    body {text-align: center; }
    
    
    Welcome to my site!
    Contact
    
    
    

    View Slide

34. View Slide

35. Step 2.
    Add jQuery Mobile
    

    View Slide

36. 
    
    
    My Web App
    body { text-align: center; }
    
    
    
    
    
    
    Welcome to my Site!
    Contact
    
    
    

    View Slide

37. Set the zoom
    content="width=device-
    width,initial-scale=1">
    

    View Slide

38. View Slide

39. ...or something.
    Step 3
    Go shopping
    

    View Slide

40. How the heck?
    

    View Slide

41. Introducing...
    The Navigation model
    

    View Slide

42. Listen, intercept, handle w/ Ajax
    products.html
    
    TAP
    

    View Slide

43. After that, update the URL
    History, deep linking, bookmarking
    http://example.com/products.html
    

    View Slide

44. ...or in older browsers
    Hash works as a fallback
    http://example.com/#/products.html
    

    View Slide

45. Linking Pages
    

    View Slide

46. How to link pages
    
    This is a jQuery Mobile link!
    
    

    View Slide

47. WAT?
    

    View Slide

48. Look familiar?
    
    This is a jQuery Mobile link!
    
    

    View Slide

49. Transitions
    

    View Slide

50. Configuring Transitions
    
    This is a jQuery Mobile link!
    
    

    View Slide

51. Regular forms; Hijax’d
    
    Don’t thank us; thank this guy >
    

    View Slide

52. Transitions too!
    data-transition=”slideup”>
    

    View Slide

53. “Pages” in the page
    

    View Slide

54. Page container
    
    
    
    
    
    

    View Slide

55. Page containers are....
    • used to group “pages” in DOM
    • auto-generated for you
    • any kind of element you’d like
    

    View Slide

56. Dialogs
    

    View Slide

57. are pages
    data-rel=”dialog”>
    Open page as a dialog!
    
    

    View Slide

58. ...but not in history
    ...but they can be closed with back button
    

    View Slide

59. Multipage documents
    

    View Slide

60. 
    
    
    
    
    
    
    ID’d sections
    

    View Slide

61. Hello world
    
    Products
    Services
    About us
    Contact
    
    ...and local anchor links
    

    View Slide

62. Page Sections
    

    View Slide

63. Page child roles
    header
    footer
    content
    

    View Slide

64. 
    
    ...
    ...
    ...
    
    
    Page child roles
    

    View Slide

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
    

    View Slide

66. Listviews
    

    View Slide

67. 
    Products
    Services
    About us
    Contact
    
    A Regular UL
    

    View Slide

68. Basic unordered list
    

    View Slide

69. 
    Products
    Services
    About us
    Contact
    
    Basic unordered list
    

    View Slide

70. Basic unordered list
    

    View Slide

71. 
    Hello world
    
    Products
    Services
    About us
    Contact
    
    
    List with links
    

    View Slide

72. List with links
    

    View Slide

73. Etc.
    

    View Slide

74. Buttons
    

    View Slide

75. Headers, footers
    

    View Slide

76. “Fixed” toolbars
    

    View Slide

77. Form elements
    

    View Slide

78. Collapsibles
    

    View Slide

79. The jQM API
    

    View Slide

80. $.mobile
    

    View Slide

81. Navigation Scripting
    

    View Slide

82. $.mobile.changePage
    

    View Slide

83. Change pages via JS
    $.mobile.changePage(“about/us.html”);
    

    View Slide

84. ...and back
    window.history.back();
    

    View Slide

85. Submit form data
    $.mobile.changePage(“handler.php”, {
    type: "post",
    data: { "shipping": "Fast!" }
    });
    

    View Slide

86. $.mobile.loadPage
    

    View Slide

87. $.mobile.loadPage( "about/us.html" );
    Load pages via JS
    

    View Slide

88. Page
    loadPage() from HTML
    

    View Slide

89. Custom Events
    

    View Slide

90. Page Events
    

    View Slide

91. the new domready
    Introducing
    pagecreate
    

    View Slide

92. Small code tidbit.
    $( “.ui-page” ).live( “pagecreate”,
    function(){
    alert( “I’m created!” );
    });
    

    View Slide

93. pre-parse the markup here
    Also:
    pagebeforecreate
    

    View Slide

94. pagebeforecreate
    $( “div” ).live( “pagebeforecreate”,
    function(){
    alert( “I’m about to be created!” );
    });
    

    View Slide

95. Page Change Events
    

    View Slide

96. All Page Change Events
    • pagebeforechange
    • pagebeforeshow
    • pagebeforehide
    • pageshow
    • pagehide
    • pageremove
    • pagechange
    

    View Slide

97. Putting it all together
    

    View Slide

98. FlipPics
    

    View Slide

99. View Slide

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

     View Slide

101. Milestones
     

     View Slide

102. Alphas 1-3:
     

     View Slide

103. Alpha 4
     

     View Slide

104. View Slide

105. vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick
     Virtualized Events
     

     View Slide

106. Use ‘em like mouse events
     $( “a.toggleable” ).bind( “vclick”,
     function(){
     $(this)
     .next()
     .toggleClass( “hidden” );
     });
     

     View Slide

107. $.noConflict() for your HTML
     Data Attr Namespacing
     

     View Slide

108. $.mobile.allowCrossDomainPages
     

     View Slide

109. Also.
     • Configurable text strings (i18n)
     • Updating page titles
     • No more meta viewport injection
     

     View Slide

110. Beta 1
     

     View Slide

111. View Slide

112. Also.
     • URL bar hidden: iOS + Android
     • Smoother transitions
     • Improved URL Handling
     • Pinch zooming enabled
     • Auto Back buttons OFF
     

     View Slide

113. Beta 2
     

     View Slide

114. View Slide

115. Widget Decoupling
     • header/content/footer
     • collapsible
     • controlgroup
     • fieldcontain
     • fixheaderfooter
     • button
     • checkboxradio
     • select
     • slider
     • textinput
     • links theming
     • listview
     • navbar
     • grid
     

     View Slide

116. Cleaner design
     

     View Slide

117. Page wrapper: optional
     

     View Slide

118. Gradients: More!
     

     View Slide

119. New create event
     $( ...new markup that contains widgets... )
     .appendTo( ".ui-page" )
     .trigger( "create" );
     

     View Slide

120. Also.
     • DOM management
     • Data-prefetch
     • autoInitializePage
     • Configuration improvements
     

     View Slide

121. Beta 3
     

     View Slide

122. history.pushState
     

     View Slide

123. pagebeforechange
     

     View Slide

124. iOS5 Overflow & Fixies
     

     View Slide

125. 1.0 RC1
     

     View Slide

126. Well, ok.
     

     View Slide

127. data-content-theme
     

     View Slide

128. Search icon
     

     View Slide

129. API docs
     

     View Slide

130. What’s Next?
     

     View Slide

131. 1.0 in weeks
     

     View Slide

132. Theming is hard.
     

     View Slide

133. Basic TR demo movie
     

     View Slide

134. View Slide

135. Download Builder in the works!
     Also!
     

     View Slide

136. Build, Contribute
     

     View Slide

137. Demos & Docs
     jquerymobile.com/demos/1.0rc1/
     Live dev snapshot
     jquerymobile.com/test/
     Nightlies, Latest
     jquerymobile.com/latest/
     

     View Slide

138. fork & contribute
     github.com/jquery/jquery-mobile
     

     View Slide

139. Build your own
     $ git clone git://github.com/jquery/
     jquery-mobile.git
     $ cd jquery-mobile
     $ make
     1
     2
     3
     

     View Slide

140. Thanks core team!
     • Kin Blas ( Adobe )
     • John Bender ( Adobe )
     • Ghislain Seguin ( Jive )
     

     View Slide

141. Awesome sponsors are awesome
     filament group
     

     View Slide

142. Thanks! Questions?
     @toddmparker
     @scottjehl
     

     View Slide