How I Made PocketDDD<br />Ross Scott<br />11/06/2011<br />1<br />3<br />2<br />Go<br />1<br />Ross Scott<br />t: @RossDSco...
Before how, there’s why<br />Ross Scott<br />2<br />VS<br />11/06/2011<br />
Ross Scott<br />3<br />What are the requirements?<br /><ul><li>Lightweight
Offline
Local storage
Mobile look and feel</li></ul>11/06/2011<br />
Ross Scott<br />4<br />Take a look at the app<br />11/06/2011<br />
Ross Scott<br />5<br />What is HTML5?<br />11/06/2011<br />
Ross Scott<br />6<br />Key Features of HTML5<br /><ul><li>Offline & Storage
Connectivity
Performance & Integration</li></ul>11/06/2011<br />
Data Attributes<br />Ross Scott<br />7<br />Var id = $(this).children(‘.hiddenId’).first().val();<br /><input data-slotid=...
Local Storage<br />Ross Scott<br />15/02/2011<br />8<br /> if (checked) {<br />localStorage['track:' + slotId] = sessionId...
Offline Application<br />Ross Scott<br />9<br />
Offline Application<br />Ross Scott<br />10<br />PocketDDD.manifest<br />CACHE MANIFEST<br />#Version 13<br />Content/Pock...
Offline Application<br />Ross Scott<br />11<br />11/06/2011<br />
Offline Application<br />Ross Scott<br />12<br />This slide is slightly different than the last one, honest!<br />11/06/20...
Lightweight<br />Ross Scott<br />13<br /><ul><li>MVC + EF Code First
JSON View Model
Everything else generated client-side</li></ul>11/06/2011<br />
Upcoming SlideShare
Loading in …5
×

How I Made PocketDDD

2,161 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,161
On SlideShare
0
From Embeds
0
Number of Embeds
1,529
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How I Made PocketDDD

  1. 1. How I Made PocketDDD<br />Ross Scott<br />11/06/2011<br />1<br />3<br />2<br />Go<br />1<br />Ross Scott<br />t: @RossDScott<br />e: ross.d.scott@gmail.com<br />
  2. 2. Before how, there’s why<br />Ross Scott<br />2<br />VS<br />11/06/2011<br />
  3. 3. Ross Scott<br />3<br />What are the requirements?<br /><ul><li>Lightweight
  4. 4. Offline
  5. 5. Local storage
  6. 6. Mobile look and feel</li></ul>11/06/2011<br />
  7. 7. Ross Scott<br />4<br />Take a look at the app<br />11/06/2011<br />
  8. 8. Ross Scott<br />5<br />What is HTML5?<br />11/06/2011<br />
  9. 9. Ross Scott<br />6<br />Key Features of HTML5<br /><ul><li>Offline & Storage
  10. 10. Connectivity
  11. 11. Performance & Integration</li></ul>11/06/2011<br />
  12. 12. Data Attributes<br />Ross Scott<br />7<br />Var id = $(this).children(‘.hiddenId’).first().val();<br /><input data-slotid=“3“ /><br />Var id = $(this).data(‘slotid’);<br />11/06/2011<br />
  13. 13. Local Storage<br />Ross Scott<br />15/02/2011<br />8<br /> if (checked) {<br />localStorage['track:' + slotId] = sessionId;<br /> }<br /> else {<br />localStorage['track:' + slotId] = null;<br /> }<br />
  14. 14. Offline Application<br />Ross Scott<br />9<br />
  15. 15. Offline Application<br />Ross Scott<br />10<br />PocketDDD.manifest<br />CACHE MANIFEST<br />#Version 13<br />Content/Pocket.css<br />Scripts/PocketViewEvent.js<br />NETWORK:<br />http://api.twitter.com/<br />FALLBACK:<br />Error.html<br />11/06/2011<br />
  16. 16. Offline Application<br />Ross Scott<br />11<br />11/06/2011<br />
  17. 17. Offline Application<br />Ross Scott<br />12<br />This slide is slightly different than the last one, honest!<br />11/06/2011<br />
  18. 18. Lightweight<br />Ross Scott<br />13<br /><ul><li>MVC + EF Code First
  19. 19. JSON View Model
  20. 20. Everything else generated client-side</li></ul>11/06/2011<br />
  21. 21. jQuery Templates<br />Ross Scott<br />14<br />Define a HTML Fragment:<br /><script id=“speakerItem" type="text/x-jQuery-tmpl"><br /> <li><br /> <a href="" data-sessionid="${Id}"><br /> <h3>${Speaker}</h3><br /> </a><br /> </li><br /></script><br />11/06/2011<br />
  22. 22. jQuery Templates<br />Ross Scott<br />15<br />Apply an object:<br />varspeakerList = {Id : 4, Speaker : “George Adamson”};<br />vargenHTML = $('#speakerItem').tmpl(speakerList);<br />$('#speakerList').append(genHTML);<br />11/06/2011<br />
  23. 23. Ross Scott<br />16<br /><ul><li>Target wide variety of platforms
  24. 24. Automatic initialization
  25. 25. Theming</li></ul>11/06/2011<br />
  26. 26. jQuery Mobile<br />Ross Scott<br />17<br />Anatomy of a Page:<br /><div id=“home” data-role="page"> <br /> <div data-role="header">...</div> <br /> <div data-role="content">...</div> <br /> <div data-role="footer">...</div> <br /></div><br />Navigation:<br />$.mobile.changePage(‘#home’);<br />11/06/2011<br />
  27. 27. jQuery Mobile<br />Ross Scott<br />18<br />Lists:<br /><ul data-role="listview" data-inset="true“><br /> <li data-role="list-divider“>15:40 to 16:40</li><br /> <li href=“#speakerA”>This Androids Life<li><br /></ul><br />$('#lst’).listview('refresh');<br />11/06/2011<br />
  28. 28. jQuery Mobile<br />Ross Scott<br />19<br />Links & Buttons:<br /><a href=“#home" data-role="button">Home</a><br /><a data-role="button" data-icon="delete">Delete</a><br /><select data-theme="b”><br /> <option>Agenda</option><br /> <option>My Day</option><br /> <option>Speakers</option><br /></select><br />11/06/2011<br />
  29. 29. The End<br />Ross Scott<br />20<br />11/06/2011<br />

×