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
• [email protected]
Slide 3
Slide 3 text
Who are you?
Slide 4
Slide 4 text
This session is not a collection of
HTML5 coding tips ...
Slide 5
Slide 5 text
today‘s tooling
vision
Slide 6
Slide 6 text
This session
easy
Slide 7
Slide 7 text
change?
Slide 8
Slide 8 text
Which company proclaimed the
following in March 2011 on their
web site?
Slide 9
Slide 9 text
"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.”
Slide 10
Slide 10 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
Google? (Chrome + ChromeOS)
Slide 11
Slide 11 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
Apple? (Safari on MacOS + iOS)
Slide 12
Slide 12 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
Mozilla Foundation? (ok, that would be obvious)
Slide 13
Slide 13 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
Opera? (same here)
Slide 14
Slide 14 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
Microsoft? (but why?)
Slide 15
Slide 15 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
IBM? Gartner? Consulting companies?
Slide 16
Slide 16 text
“[…] just as vivid, interactive and high-fidelity as what
you have come to expect from native applications”
http://www.beautyoftheweb.com
(Microsoft, March 2011)
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
http://www.w3.org/TR/2008/WD-html5-diff-20080122/
Slide 19
Slide 19 text
http://html5.com .............................................. Apple
http://www.html5rocks.com/ ......................... Google
http://bit.ly/gGPnQH ........................................... RIM
http://beautyoftheweb.com/ ....................... Microsoft
Slide 20
Slide 20 text
This session: HTML5, but
not the web!
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Offlineable Web (Offline)
Browser
User
Browser
clicks
1
2
runs JS
Display
Data
Cached HTML
Local Storage
3 Server
Slide 25
Slide 25 text
HTML5: Application Cache
http://bit.ly/3fVYjc
Slide 26
Slide 26 text
Not supported on all environments, we‘ll see
a better way later today ...
Slide 27
Slide 27 text
HTML5: Web Storage
(localStorage, sessionStorage)
http://www.w3.org/TR/webstorage/
Slide 28
Slide 28 text
This session: HTML5, but
not the web!
Slide 29
Slide 29 text
HTML5 + CSS3 + JS
Common Application Platform
Desktops, Tablets, Mobile
Slide 30
Slide 30 text
Windows, Mac, Linux
iOS, Android, Blackberry 5+, Symbian 5,
webOS, Windows Phone 7 (~Nov 2011)
Slide 31
Slide 31 text
But ...
Slide 32
Slide 32 text
But ... Javascript SUCKS!
Slide 33
Slide 33 text
You might have missed
the best parts!
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
This book might change
everything you think
about Javascript.
Slide 36
Slide 36 text
And while we‘re at it ...
Slide 37
Slide 37 text
Online for free at http://diveintohtml5.org
(NOT ANYMORE. CHECK FOR MIRRORS!)
Slide 38
Slide 38 text
But ... isn‘t this
slow?
Slide 39
Slide 39 text
http://bit.ly/chJslK
Slide 40
Slide 40 text
Aren‘t there too many
browsers to support?
Slide 41
Slide 41 text
Remember Offlineable Web?
Browser
User
Browser
clicks
1
2
runs JS
Display
Data
Cached HTML
Local Storage
3 Server
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
You maybe don‘t have to
support every browser.
(Only your shell!)
Slide 44
Slide 44 text
... think Windows 8
WinRT can be programmed with HTML5 + JS
Slide 45
Slide 45 text
... or Adobe AIR
Not just Flash!
http://adobe.com/products/air/
Wallaby? (Flash>HTML)
Slide 46
Slide 46 text
... 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)
Slide 47
Slide 47 text
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)
Backbone.js
http://documentcloud.github.com/backbone/
Model binding
Slide 65
Slide 65 text
And lots more ...
jqGrid (Client-style Grids)
jqChart (Commercial charting)
jqplot (Free charting, zoomable)
Slide 66
Slide 66 text
Why?
Slide 67
Slide 67 text
Desktop stagnant (ask your kids!)
Innovation: Mobile (Phones + Tablets)
HTML5 reaches 98.773% of market
Deploy as App (shelled) or Online
Windows 8 Metro
Slide 68
Slide 68 text
Will PhoneGap be The Right Thing?
I don‘t know. But something will be there
to run your HTML5 app ...
Slide 69
Slide 69 text
“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 …”
Slide 70
Slide 70 text
Contact
[email protected]
Weblog, slides and samples http://
weblogs.thinktecture.com/ingo