Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

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