HTML5
That’s What You Need to Know Today
Ingo Rammer | thinktecture | ingo.rammer@thinktecture.com | @ingorammer
Ingo Rammer and thinktecture
• Support and consulting for software architects and developers
– Architectural Consulting and Prototyping
– Developer-Coaching and -Mentoring
– Application Optimization, Troubleshooting, Debugging
– Architecture and Code Reviews
• Slides/Samples: http://weblogs.thinktecture.com/ingo
• ingo.rammer@thinktecture.com
• @ingorammer
Today!
vision
Ingo != Microsoft
"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.”
(Microsoft, http://beautyoftheweb.com/#/unplugged)
http://beautyoftheweb.com/ .........................Microsoft
http://html5.com ............................................... Apple
http://html5rocks.com/ ................................... Google
http://bit.ly/gGPnQH ........................................... RIM
HTML5 + CSS3 + JS
Common Application Platform
Desktops, Tablets, Mobile
Windows, Mac, Linux
Mobile: iOS, Android, Blackberry 5+, Symbian 5,
webOS, Windows Phone 7 (Fall 2011)
Write once, run everywhere?
Or rather: write once, debug
everywhere?
Old School Web
1
Browser
2
User
HTTP GET
Server
ASP.NET
clicks
Browser
HTTP GET
Server
ASP.NET
Ajaxified Web
1
2
HTTP GET
Browser
Server
ASP.NET
User
clicks
Browser
runs JS
Display Data
Server
WCF
Offlineable Data
1
2
HTTP GET
Browser
Server
Static HTML (maybe)
User
clicks
Browser
HTTP GET
runs JS
Local Storage
Display Data
Server
WCF
Future: Offlineable Web Apps
1
2
Browser
Cached/local HTML
3
User
clicks
Browser
runs JS
Local Storage
Display Data
Server
HTML5 + CSS3 + JS
Common Application Platform
Desktops, Tablets, Mobile
HTML5: When will it be done?
HTML5: When will it be ready?
But ...
But ... Javascript SUCKS!?
You might have missed
the best parts!
This book might change
everything
you think about Javascript
And while we‘re at it ...
Online for free at http://diveintohtml5.org
But ... isn‘t this slow?
http://bit.ly/chJslK
Let‘s see code!
HTML5: Web Storage
(localStorage, sessionStorage)
http://www.w3.org/TR/webstorage/
Detect features, not browsers!
http://modernizr.com
General Information
http://caniuse.com/
Toolkits help you ...
modernizr
HTML5 Feature Detection
http://modernizr.com
jQuery
Web Framework, HTML-based
http://jQuery.com
Ext JS
Web Framework, Object-model driven,
graphical designer (GPLv3 or commercial)
http://sencha.com/
Sencha Touch
(Android, iOS, Blackberry 6 coming)
http://sencha.com/products/touch/
jQuery Mobile
http://jquerymobile.com/
(PhoneGap to iOS, Symbian 5, Blackberry
5+, Android 1.5+, webOS 1.4.1+)
WebApp.Net
http://webapp-net.com
Great UX, small community
PhoneGap
Open Source Packager + JS for native API (extensible!)
(iOS, Android, RIM, Palm, Symbian, ... Windows Phone 7 in Fall?)
http://phonegap.com
Organizational Framework
• Detect features, not browsers
• Pick your level of abstraction
• Frameworks help!
– jQuery, Dojo, Prototype, ExtJS, ...
Technological Platform
•
•
•
•
Local storage (localStorage, sessionStorage)
Local drawing (canvas)
Semantic information (markup, input types)
Abstractions (datajs, jQuery, jqplot, jqGrid, jQuery
Mobile, knockout.js, ...)
• CSS3 (incl. animations, transitions, ...)
• Future: Web Workers, Web Sockets
And more ...
• Polyfills and shims for backward compatibility
• Resource combination (JS + CSS)
– You don‘t *have* to develop everything in one file, but
you should ship only one file
• Minification, Compression, ...
– You *can* use descriptive method, function and
variable names
• Advanced Javascript techniques!
• Packagers for mobile OSes (PhoneGap, ...)