HTML 5 - Offline Business Applications

This is the slide deck for a session presented at Software Architect 2011 in London.

Session abstract: HTML5 allows the creation of line of business applications which rely on the browser’s offline storage capabilities for application and data. These applications can provide user experiences comparable to native applications and allow large percentages of code and markup reuse between Desktop, Android, iOS and the most recent Blackberry OSes (and Windows Phone 7 in November 2011). In this session, you will learn about the capabilities of HTML5 which pertain to these kinds of applications, about the frameworks which can help you create offline business applications and about the pitfalls and uncharted/semicharted areas you will have to enter.

Original session date: 2011-10-20

Transcript

1. HTML 5 Offline Business Applications Ingo Rammer ingo.rammer@thinktecture.com
2. Ingo Rammer and thinktecture •  Support and consulting for software architects and developers –  Application Optimization, Troubleshooting, Debugging –  Architectural Consulting and Prototyping –  Developer-Coaching and -Mentoring –  Architecture and Code Reviews •  http://weblogs.thinktecture.com/ingo •  ingo.rammer@thinktecture.com
3. Who are you?
4. This session is not a collection of HTML5 coding tips ...
5. today‘s tooling vision
6. This session easy
7. change?
8. Which company proclaimed the following in March 2011 on their web site?
9. "We believe that HTML5 and related technologies, in conjunction with faster and faster browsers, finally give developers the tools they need to create experiences that are just as vivid, interactive and high- fidelity as what you have come to expect from native applications without the need for plug-ins.”
10. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” Google? (Chrome + ChromeOS)
11. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” Apple? (Safari on MacOS + iOS)
12. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” Mozilla Foundation? (ok, that would be obvious)
13. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” Opera? (same here)
14. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” Microsoft? (but why?)
15. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” IBM? Gartner? Consulting companies?
16. “[…] just as vivid, interactive and high-fidelity as what you have come to expect from native applications” http://www.beautyoftheweb.com (Microsoft, March 2011)
18. http://www.w3.org/TR/2008/WD-html5-diff-20080122/
19. http://html5.com .............................................. Apple http://www.html5rocks.com/ ......................... Google http://bit.ly/gGPnQH ........................................... RIM http://beautyoftheweb.com/ ....................... Microsoft
20. This session: HTML5, but not the web!
21. Old School Web Browser Server ASP.NET HTTP GET Dynamically generated HTML User Browser clicks Server ASP.NET HTTP GET Dynamically generated HTML 1 2
22. Ajaxified Web Browser Server ASP.NET HTTP GET Dynamically generated HTML User Browser clicks Server WCF HTTP GET Data only 1 2 runs JS Display Data
23. Offlineable Web (Online) Browser Server HTTP GET Static HTML (maybe) User Browser clicks Server WCF HTTP GET Data only 1 2 runs JS Display Data caches Local Storage
24. Offlineable Web (Offline) Browser User Browser clicks 1 2 runs JS Display Data Cached HTML Local Storage 3 Server
25. HTML5: Application Cache http://bit.ly/3fVYjc
26. Not supported on all environments, we‘ll see a better way later today ...
27. HTML5: Web Storage (localStorage, sessionStorage) http://www.w3.org/TR/webstorage/
28. This session: HTML5, but not the web!
29. HTML5 + CSS3 + JS Common Application Platform Desktops, Tablets, Mobile
30. Windows, Mac, Linux iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (~Nov 2011)
31. But ...
32. But ... Javascript SUCKS!
33. You might have missed the best parts!
35. This book might change everything you think about Javascript.
36. And while we‘re at it ...
37. Online for free at http://diveintohtml5.org (NOT ANYMORE. CHECK FOR MIRRORS!)
38. But ... isn‘t this slow?
39. http://bit.ly/chJslK
40. Aren‘t there too many browsers to support?
41. Remember Offlineable Web? Browser User Browser clicks 1 2 runs JS Display Data Cached HTML Local Storage 3 Server
42. Shelled Your App User Your App clicks 1 2 runs JS Display Data HTML from Local Disk (installed with App) Local Storage 3 Server Browser Control
43. You maybe don‘t have to support every browser. (Only your shell!)
44. ... think Windows 8 WinRT can be programmed with HTML5 + JS
45. ... or Adobe AIR Not just Flash! http://adobe.com/products/air/ Wallaby? (Flash>HTML)
46. ... or PhoneGap Open Source Packager + JS for native API (extensible!) (iOS, Android, RIM, Palm, Symbian) http://phonegap.com Becoming part of Apache Foundation (Project Callback)
47. Native Application Frame (for example Objective C) WebKit Browser Javascript API JS PhoneGap API abstraction JS Custom API abstraction PhoneGap APIs implementation Custom API native implementation Porting to Android Custom API native implementation (JAVA)
48. PhoneGap Build Beta – Cloud-Based Packager
49. Desktop Appstores Already here: Apple, Google, Adobe, ...
50. Aren‘t there too many browsers to support?
51. General Information http://caniuse.com/
52. Detect features, not browsers! http://modernizr.com
53. Progressive Enhancement
54. Hashchange Back/Forward/URLs
55. Toolkits help you ...
56. modernizr HTML5 Feature Detection http://modernizr.com
57. jQuery Web Framework, HTML-based http://jQuery.com
58. Ext JS Web Framework, Object-model driven, graphical designer (GPLv3 or commercial) http://sencha.com/
59. Sencha Touch (Android, iOS, Blackberry 6 coming) http://sencha.com/products/touch/
60. jQTouch (Sencha) Mainly iPhone http://jqtouch.com/ (~Sencha ?)
61. jQuery Mobile http://jquerymobile.com/ (PhoneGap to iOS, Symbian 5, Blackberry 5+, Android 1.5+, webOS 1.4.1+)
62. WebApp.Net http://webapp-net.com Great UX, small community
63. Knockout.js http://knockoutjs.com/ MVVM/Model Binding
64. Backbone.js http://documentcloud.github.com/backbone/ Model binding
65. And lots more ... jqGrid (Client-style Grids) jqChart (Commercial charting) jqplot (Free charting, zoomable)
66. Why?
67. Desktop stagnant (ask your kids!) Innovation: Mobile (Phones + Tablets) HTML5 reaches 98.773% of market Deploy as App (shelled) or Online Windows 8 Metro
68. Will PhoneGap be The Right Thing? I don‘t know. But something will be there to run your HTML5 app ...
69. “We believe that HTML5 and related technologies, in conjunction with faster and faster browsers, finally give developers the tools they need to create experiences that are just as vivid, interactive and high- fidelity as what you have come to expect from native applications …”
70. Contact ingo.rammer@thinktecture.com Weblog, slides and samples http:// weblogs.thinktecture.com/ingo