HTML5That’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

visionToday!

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/ .........................Microsofthttp://html5.com ............................................... Applehttp://html5rocks.com/ ................................... Googlehttp://bit.ly/gGPnQH ........................................... RIM

HTML5 + CSS3 + JS

Common Application PlatformDesktops, 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 WebBrowser Server

ASP.NET

HTTP GET

Dynamically generated HTML

User

Browserclicks Server

ASP.NET

HTTP GETDynamically generated HTML

1

2

Ajaxified WebBrowser Server

ASP.NET

HTTP GET

Dynamically generated HTML

User

BrowserclicksServer

WCF

HTTP GET

Data only

12

runs JSDisplay

Data

Offlineable Data

Browser ServerHTTP GET

Static HTML (maybe)

User

BrowserclicksServer

WCF

HTTP GET

Data only

12

runs JSDisplay

DataLocal Storage

Future: Offlineable Web Apps

Browser

User

Browserclicks

12

runs JSDisplay

Data

Cached/local HTML

Local Storage

3 Server

Sync via HTTP POST + GET

when online

HTML5 + CSS3 + JS

Common Application PlatformDesktops, 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 Informationhttp://caniuse.com/

Toolkits help you ...

modernizrHTML5 Feature Detectionhttp://modernizr.com

jQueryWeb Framework, HTML-based http://jQuery.com

Ext JSWeb 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 Mobilehttp://jquerymobile.com/(PhoneGap to iOS, Symbian 5, Blackberry 5+, Android 1.5+, webOS 1.4.1+)

WebApp.Nethttp://webapp-net.comGreat UX, small community

PhoneGapOpen 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, ...)