HTML5 und node.js Grundlagen

Thorsten Rinne / Sebastian SpringerWebapplikationen reloaded mitnode.js und HTML5 - Die Grundlagen

Thorsten Rinne• 34 Jahre• Mayflower GmbH, München – Senior Developer / Team Lead – Head of Open Source Labs• Diplom-Informatiker (FH)• Twitter: @ThorstenRinne

Sebastian Springer• 29 Jahre• Mayflower GmbH – Senior Developer / Team Lead• Diplom-Informatiker (FH)• Twitter: @basti_springer

Wer seid ihr?

Wir sprechen nicht über <video> und <audio>

Und wir sprechen nicht über ...

Flash ist tot.Spätestens in 5 Jahren. (sagt sogar Adobe)

Wer nutzt bereits...

und wer bereits...

HTML5 in einem Satz?

„HTML5 is about moving fromdocuments to applications and from hacks to solutions.“ Chris Heilmann auf Twitter

Was bedeutet HTML5 für Entwickler?

HTML5 ~= HTML + CSS + JS

1989HTML wird am CERN entwickelt.

1993Die IETF verlangt die ersteImplementierung: Mosaic

1996Tim Berners-Lee gründet das World Wide Web Consortium (W3C)

1996Browserkrieg:Netscape vs. Microsoft

- Der Browser ist kostenlos - „kostenlos“ mit OS- Das Web ersetzt das OS - 1995: 6 Entwickler- Java bringt Web Apps - 1999: 1000 Entwickler- 4 Versionen in 7 Jahren - 6 Versionen in 6 Jahren Netscape verlor den „Krieg“ ...

The dark age of the Web...

XHTML 2.0

#sadpanda

1999PHP 3.0 - MySQL 3.22 Apache 1.3

1999XMLHttpRequest Object

Die Zeit verging ...

seit Version 5.0(1999) seit Version 1.0 (2004) seit Version 1.2 (2004) seit Version 7.6 (2004)

2005Ajax: A New Approach to Web Applications Blogposting von Jesse James Garret

Google Suggest Google Mail Google Maps

2006 Comet

Push Ajax Push

Was passiert hier?

Content vs.Context

Facebook ist eine Applikation!

Page vs.Stream

Twitter ist eine Applikation!

Applikationen?

online === offline

Ist das das neue Web?

Die Zukunft besteht aus Web Apps!

Der mobile Browser ist (fast) identisch mit dem Desktop Browser.

Der Mobile Browser hat kurzeRelease-Zyklen. Der auf dem Desktop inzwischen auch.

Der Browser ist eine „cross platform realtime runtime“.

Was hat das nun mit HTML5 zu tun?

Requests Events

2000: PHP chat style polling Client Server

2000: PHP chat style polling Hey, wazzup? Client Server

2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client Server

2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client 1 sec Server

2000: PHP chat style polling WTF??? Client Server

1 user = 1 req / sec CPU #FAIL

2006: Comet style long poll Client Server

2006: Comet style long poll Hey, wazzup? Client Server

2006: Comet style long poll Um, nothing actually... Client 1 sec Server

2006: Comet style long poll Well ... Client 1 sec Server

2006: Comet style long poll Wait ... Client 1 sec Server

2006: Comet style long poll Uh, there is something! Client 1 sec Server

2006: Comet style long poll No, nothing! Client 1 sec Server

2006: Comet style long poll WTF??? Client Server

1 user = 1 apache child MEMORY #FAIL

Wir haben ein Problem

Wir brauchen Hilfe!

MEMORY: WINCPU: 1/2 WIN

PHP ServerClient Client Client

Was ist node.js?

Serverseitiges JS mit V8

Eventgetriebene Architektur

Asynchron

Bingo! http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191

Warum node.js?

Es ist schnell.

Nonblocking I/Odurch Eventloop

♥ Community Love ♥

Schnelle,leichtgewichtige Entwicklung

Events File System Streams Viele eingebauteOS Bibliotheken Query String Debugger HTTP URL

Heile Welt?

node.js hat auch seineSchattenseiten.

Single Process

Statische Inhalte

Sehrbetriebssystemnah ...

#sadpanda #nodejs

node.js muss auch rechnen

We ♥ node.js!

Kenne die Schwächen deiner Infrastruktur!

Interaktiv

Nicht interaktiv$ node server.js

Non-Blocking

Non Blockingsleep(10);echo ‘Hello, World‘; vs.setTimeout( console.log(‘Hello, World‘, 10000) )

$sql = ‘SELECT * FROM users‘;$result = $conn->query($sql); vs.var query = ‘SELECT * FROM users‘;db.query(query, function(err, results, fields) {...};);

Webserver

Webserver Codevar http = require(‘http‘);http.createServer( function(req, res) { res.writeHead( 200, {‘Content-Type‘: ‘text/plain‘} ); res.end(‘Hello, World‘); }).listen(1337, ‘127.0.0.1‘);

Bibliotheken als NPM• Socket.IO• Backbone.js• Underscore.js• express• Common.js• MySQL, redis, CouchDB

Kleine Helfer für node.js• Nodemon – https://github.com/remy/nodemon• Forever – https://github.com/indexzero/forever• Mehr?

Und was ist mit dem Client?

WebSocketsif ("WebSocket" in window) { var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // WebSocket is connected. // You can send data by send() method. ws.send("message to send"); // .... }; ws.onmessage = function (evt) { var received_msg = evt.data; }; ws.onclose = function() { // WebSocket is closed };} else { // the browser doesnt support WebSockets.}

ClientGET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-WebSocket-Key2: 12998 5 Y3 1 .P00^n:ds[4U Server HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKSy:G*Co,Wxa-

Immer mehr Logikwandert in den Client. Weg vom Backend.

WebWorker main.jsvar myWorker = new Worker(backgroundtask.js); myWorker.onmessage = function(event) { alert(event.data); }; backgroundtask.js self.onmessage = function(event) { // Do some heavy work self.postMessage(Hello, Amsterdam); }

MVC mit Backbone.js User DOM URL View Router Read/Write Model Server (z.B. DB)

WebMessaging<form><input type="text" name="msg" value="My message" id="msg"><input type="submit"><h2>Ziel iFrame:</h2><iframe id="iframe" src="postmessage.html"></iframe></form><script> var win = document.getElementById("iframe").contentWindow; addEvent( document.getElementsByTagName(form)[0], submit, function (e) { if (e.preventDefault) e.preventDefault(); win.postMessage(document.getElementById("msg").value, "http://www.phpconference.nl"); e.returnValue = false; return false; }); </script>

Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map); });}

Web Storage‣„kurzlebige“ Daten ‣sessionStorage Object ‣wird beim Schließen des Browsers gelöscht‣„langlebige“ Daten ‣localStorage Objekt ‣wird nicht beim Schließen des Browsers gelöscht‣produziert File I/O, läuft synchron Safari/Chrome Firefox IE Opera 2 MB 5 MB ~ 200MB 5 MB 4 MB

Web Storage <p>This page was requested <b> <script> if (!sessionStorage.pageCounter) { sessionStorage.setItem(pageCounter,0); } sessionStorage.setItem(pageCounter, parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); </script> </b> times.</p> <p> <input value="sessionStorage leeren" type="button"onClick="sessionStorage.clear();location.reload(true);"> <input value="Seite laden" type="button"onClick="location.reload(true);"> </p>

HTML 5Basics

<!DOCTYPE html>

Von HTML4 nach HTML5 KISSKeep it simple & stupid

Von HTML4 nach HTML5Redundante undkaputte Elemente werden entfernt.

Von HTML4 nach HTML5 HTML5 verlangtexplizit nach CSS.

<a> ist ﬂexibler <a>, <area>erhalten ein media Attribut

<a href=“http:// m.twitter.com“ rel=“alternate“ media=“handheld“>Twitter Mobile</a>

data Attributfür eigene data-* Attribute

Beispiel Facebook Like <div class="fb-like"data-send="true" data-width="450" data-show- faces="true"></div>

<section> Bereiche<address> und Überschriften

HTML 5 Microdata is machine- readable data in HTML. Recursion. :-)<div itemscope> <p> Mein Name ist <span itemprop="name">Thorsten</span>. </p></div>

WebForms

.row:nth-child(even) { background: #cccccc; }.row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4

@font-face { font-family: Papyrus; src: url(Papyrus.otf);}header { font-family: Papyrus;} Hallo, Welt!

Mehr CSS3 Features...

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolorsit amet, sit amet, sit amet, sit amet,consectetur consectetur consectetur consecteturadipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, seddo eiusmod do eiusmod do eiusmod do eiusmodtempor incididunt tempor incididunt tempor incididunt tempor incididuntut labore et dolore ut labore et dolore ut labore et dolore ut labore et doloremagna aliqua. Ut magna aliqua. Ut magna aliqua. Ut magna aliqua. Utenim ad minim enim ad minim enim ad minim enim ad minimveniam, quis veniam, quis veniam, quis veniam, quisnostrud nostrud nostrud nostrud Multi-column layoutsexercitation exercitation exercitation exercitationullamco laboris nisi ullamco laboris nisi ullamco laboris nisi ullamco laboris nisiut aliquip ex ea ut aliquip ex ea ut aliquip ex ea ut aliquip ex eacommodo commodo commodo commodoconsequat. Duis consequat. Duis consequat. Duis consequat. Duisaute irure dolor in aute irure dolor in aute irure dolor in aute irure dolor inreprehenderit in reprehenderit in reprehenderit in reprehenderit involuptate velit voluptate velit voluptate velit voluptate velitesse cillum dolore esse cillum dolore esse cillum dolore esse cillum doloreeu fugiat nulla eu fugiat nulla eu fugiat nulla eu fugiat nullapariatur. Excepteur pariatur. Excepteur pariatur. Excepteur pariatur. Excepteursint occaecat sint occaecat sint occaecat sint occaecatcupidatat non cupidatat non cupidatat non cupidatat nonproident, sunt in proident, sunt in proident, sunt in proident, sunt inculpa qui officia culpa qui officia culpa qui officia culpa qui officia

OpacityOpacityOpacityOpacityOpacity

HSL / HSLA Farben

Endlich runde Ecken! :-)

Gradienten

Shadows

Transitions und Animations

BrowserSupport :-)

79 % 69 % 69 % 64 % 64 %30 %IE9 Mobile Safari Safari 5.1 Firefox 10 Opera 11.6 Chrome 17

Was uns 2012 noch erwartet...• Internet Explorer 10 mit Windows 8 (64% HTML5 Support)• Safari 5.2 (74% HTML5 Support)• Opera 12 (72% HTML5 Support)• viele neue Chrome- und Firefox-Versionen• Chrome on Android im TV• evtl. Mobile Safari im TV

Kleine Helfer für HTML5

caniuse.com

html5test.com

Kleine Helfer für CSS

Fragen?

Danke!http://joind.in/4692

KontaktThorsten Rinne Sebastian Springerthorsten.rinne@mayflower.de sebastian.springer@mayflower.de+49 89 242054-1131 +49 89 242054-1120Mayflower GmbH Mayflower GmbHMannhardtstr. 6 Mannhardtstr. 680538 München 80538 MünchenDeutschland Deutschland@ThorstenRinne @basti_springer

http://www.scoop.it	661
http://it-republik.de	462
http://entwickler.com	276
http://entwickler.de	121
http://blog.seso.at	112
http://entwickler-magazin.de	6
http://www.java-magazin.de	4
http://phpmagazin.de	2
http://createordie.de	2
http://www.phpmag.de	1
http://webinale.de	1
https://twimg0-a.akamaihd.net	1

HTML5 und node.js Grundlagen

by Mayflower GmbH on Mar 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,649

Statistics

HTML5 und node.js Grundlagen Presentation Transcript