Open Source Junction

I gave a talk about the FT web app at Open Source Junction 3, at Trinity College, Oxford.

Transcript

1. We’ve got a website for that HTML5, offline and the future of the mobile web Open Source Junction 3 Trinity College, Oxford 20-21 March 2012
3. The web has transformed our lives. Now we need that stuff on the move.
4. 1999: WAP . Seriously?
5. 2001: BlackBerry. Now we’re talking. (except ironically we’re not talking because Blackberry wouldn’t add phone capabilities for another 3 years)
6. 2007: iPhone. Cracked it.
7. 2008: Apps arrive. Web largely forgotten.
8. But wait, what exactly is an app, anyway?
9. Adaptive interaction Adaptive design +
11. But, couldn’t we just make a website do all that app stuff?
12. Challenges for the web •  Layout –  Adapt, adapt, adapt •  Navigation and interaction –  Interpreting touches is a subtle art •  Offline use –  Just reinvent the whole way the web works •  Rethink backend architecture –  Fewer pages, more APIs •  Analytics –  Record activity while user is offline
13. Flowed columns
14. Flowed columns
15. So you want to use the Internet when you’re not online? Good luck with that.
16. Breaking it down •  Launching the app offline •  Making text content available offline •  Storing content images offline •  Dealing with quota limits •  Analytics
17. Offline technologies Application cache (manifest) WebSQL / SQLite / IndexedDB Local storage Cookies
18. Launching •  Application cache •  Manifest is atomic – download all or none – Boot page, fonts, sprites, splash screen, icons only. •  Webkit manifest bug – obscure naming of the manifest helps •  Set dynamic comment in manifest for dev
19. Manifest contents •  Fonts •  Sprites •  Icons •  Splash screen •  One HTML page •  JavaScript •  HTML •  CSS YES   NO  
20. CACHE MANIFEST # Version: 2012030613 /favicon.ico /lib/imgs/sprite.png /lib/imgs/splash-logo.jpg /lib/fonts/main.ttf FALLBACK: / /controller.html NETWORK: * Cached files Use network when possible Fallback for booting offline
21. Boot process •  Fallback page is loaded from app cache •  Load resources from local storage – JS, CSS, HTML •  Use cookie to identify user •  Load requested content from local DB •  Display it    
22. Offline text content •  Client side database •  IndexedDB is coming, SQLite works now. •  5MB for free, up to 50 with consent •  Use localStorage for index, as it's faster
23. Offline images •  Lots. High turnover. Binary data. •  Client side database •  Download base64 encoded strings •  Render as data: URIs –  <img src=“data:image/png;……” /> •  Nice: Stops operators interfering •  Unfortunate: 30% bigger
24. Quota Native apps get whatever storage they want ! Web apps have hard storage limits
25. Tricks for super storage •  local storage and local DB use UTF-16 text •  That’s a minimum 2 bytes per character •  Pack ASCII into (pretend) UTF-16: if (in.length % 2 !== 0) in += ' '; for (i = 0, l = in.length; i < l; i+=2) { out += String.fromCharCode( (in.charCodeAt(i)*256) + string.charCodeAt(i+1) ); }
26. App cache, local storage, eval()ed JavaScript, invalid UTF-16… Congratulations, you’ve made a debugging nightmare
28. Useful tools •  Charles – www.charlesproxy.com •  WeinRE – phonegap.github.com/weinre/ •  WebDriver for mobile browsers – http://code.google.com/p/selenium/wiki/ WebDriverForMobileBrowsers
29. In summary •  Ease of use is critical. Adapt, adapt, adapt. •  The web can do this •  Web approach retains all the benefits of the web that you give up when building native.
30. “Don’t build native apps, build web apps” -­‐  Tim  Berners-­‐Lee  
31. Questions? •  Andrew Betts •  andrew.betts@assanka.net •  You should follow me on twitter here: – @triblondon •  Build this stuff: – assanka.net/jobs