1. How I Made PocketDDD Ross Scott 11/06/2011 1 3 2 Go 1 Ross Scott t: @RossDScott e: ross.d.scott@gmail.com

2. Before how, there’s why Ross Scott 2 VS 11/06/2011

4. Offline

5. Local storage

6. Mobile look and feel11/06/2011

7. Ross Scott 4 Take a look at the app 11/06/2011

8. Ross Scott 5 What is HTML5? 11/06/2011

10. Connectivity

11. Performance & Integration11/06/2011

12. Data Attributes Ross Scott 7 Var id = $(this).children(‘.hiddenId’).first().val(); <input data-slotid=“3“ /> Var id = $(this).data(‘slotid’); 11/06/2011

13. Local Storage Ross Scott 15/02/2011 8 if (checked) { localStorage['track:' + slotId] = sessionId; } else { localStorage['track:' + slotId] = null; }

14. Offline Application Ross Scott 9

15. Offline Application Ross Scott 10 PocketDDD.manifest CACHE MANIFEST #Version 13 Content/Pocket.css Scripts/PocketViewEvent.js NETWORK: http://api.twitter.com/ FALLBACK: Error.html 11/06/2011

16. Offline Application Ross Scott 11 11/06/2011

17. Offline Application Ross Scott 12 This slide is slightly different than the last one, honest! 11/06/2011

19. JSON View Model

20. Everything else generated client-side11/06/2011

21. jQuery Templates Ross Scott 14 Define a HTML Fragment: <script id=“speakerItem" type="text/x-jQuery-tmpl"> <li> <a href="" data-sessionid="${Id}"> <h3>${Speaker}</h3> </a> </li> </script> 11/06/2011

22. jQuery Templates Ross Scott 15 Apply an object: varspeakerList = {Id : 4, Speaker : “George Adamson”}; vargenHTML = $('#speakerItem').tmpl(speakerList); $('#speakerList').append(genHTML); 11/06/2011

24. Automatic initialization

25. Theming11/06/2011

26. jQuery Mobile Ross Scott 17 Anatomy of a Page: <div id=“home” data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> Navigation: $.mobile.changePage(‘#home’); 11/06/2011

27. jQuery Mobile Ross Scott 18 Lists: <ul data-role="listview" data-inset="true“> <li data-role="list-divider“>15:40 to 16:40</li> <li href=“#speakerA”>This Androids Life<li> </ul> $('#lst’).listview('refresh'); 11/06/2011

28. jQuery Mobile Ross Scott 19 Links & Buttons: <a href=“#home" data-role="button">Home</a> <a data-role="button" data-icon="delete">Delete</a> <select data-theme="b”> <option>Agenda</option> <option>My Day</option> <option>Speakers</option> </select> 11/06/2011

29. The End Ross Scott 20 11/06/2011