Slides - Thinktecture

needlessoybeanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

92 εμφανίσεις

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

vision

Today!

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

Browser

Server

ASP.NET

HTTP

GET

User

Browser

clicks

Server

ASP.NET

HTTP

GET

1

2

Ajaxified Web

Browser

Server

ASP.NET

HTTP GET

User

Browser

clicks

Server

WCF

1

2

runs JS

Display Data

Offlineable Data

Browser

Server

HTTP GET

Static HTML (maybe)

User

Browser

clicks

Server

WCF

HTTP GET

1

2

runs JS

Display Data

Local Storage

Future: Offlineable Web Apps

Browser

User

Browser

clicks

1

2

runs JS

Display Data

Cached/local HTML

Local Storage

3

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