Slide 1
Slide 1 text
Webapplikationen
reloaded mit node.js und
HTML5
Thorsten Rinne / Sebastian Springer
Slide 2
Slide 2 text
Thorsten Rinne
• 35 Jahre
• Diplom-Informatiker (FH)
• Senior Developer @ Yatego GmbH
• Twitter: @ThorstenRinne
Slide 3
Slide 3 text
Sebastian Springer
• 29 Jahre
• Diplom-Informatiker (FH)
• Senior Developer / Team Lead @
Mayflower GmbH
• Twitter: @basti_springer
Slide 4
Slide 4 text
Wir sprechen nicht über
und
Slide 5
Slide 5 text
Und wir sprechen nicht über ...
Slide 6
Slide 6 text
Flash ist tot.
Spätestens in 5 Jahren.
(sagt sogar Adobe)
Slide 7
Slide 7 text
Wer nutzt bereits...
Slide 8
Slide 8 text
und wer bereits...
Slide 9
Slide 9 text
HTML5 in einem Satz?
Slide 10
Slide 10 text
„HTML5 is about
moving from
documents to
applications and from
hacks to solutions.“
Chris Heilmann (Mozilla) auf Twitter
Slide 11
Slide 11 text
Unterschied zwischen
HTML und HTML5?
Slide 12
Slide 12 text
• Probier es im Internet Explorer
• Funktioniert es?
• Nein?
• Es ist HTML5! :-)
Slide 13
Slide 13 text
Was bedeutet HTML5 für
Entwickler?
Slide 14
Slide 14 text
HTML5 ~= HTML + CSS + JS
Slide 15
Slide 15 text
DEMO TIME
HTML5 + node.js
nginx + MySQL
WebSockets
Slide 16
Slide 16 text
https://github.com/sspringer82/pairs.js
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
1989
HTML wird am CERN
entwickelt.
Slide 19
Slide 19 text
1999
XMLHttpRequest Object
Slide 20
Slide 20 text
2001
Microsoft stellt die
Weiterentwicklung des
IE6 ein
Slide 21
Slide 21 text
The dark age of
the Web...
Slide 22
Slide 22 text
XHTML 2.0
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Die Zeit verging ...
Slide 25
Slide 25 text
seit Version 5.0
(1999)
seit Version 1.0
(2004)
seit Version 1.2
(2004)
seit Version 7.6
(2004)
Slide 26
Slide 26 text
2004
Apple, Mozilla und Opera
gründen die WHAT WG
Slide 27
Slide 27 text
2005
Ajax: A New Approach to
Web Applications
Blogposting von Jesse James Garret
Slide 28
Slide 28 text
online === offline
2012
Slide 29
Slide 29 text
Die Zukunft besteht
aus Web Apps!
Slide 30
Slide 30 text
Was hat das nun mit
HTML5 zu tun?
Slide 31
Slide 31 text
Schauen wir uns das
Web vor 10 Jahren an.
Slide 32
Slide 32 text
Client Server
2000: PHP chat style polling
Slide 33
Slide 33 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 34
Slide 34 text
Client Server
Um, nothing actually...
Hey, wazzup?
2000: PHP chat style polling
Slide 35
Slide 35 text
Client Server
Hey, wazzup?
1 sec
Um, nothing actually...
2000: PHP chat style polling
Slide 36
Slide 36 text
Client Server
2000: PHP chat style polling
Slide 37
Slide 37 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 38
Slide 38 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 39
Slide 39 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 40
Slide 40 text
Client Server
2000: PHP chat style polling
Slide 41
Slide 41 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 42
Slide 42 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 43
Slide 43 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 44
Slide 44 text
Client Server
WTF???
2000: PHP chat style polling
Slide 45
Slide 45 text
1 user = 1 req / sec
CPU #FAIL
Slide 46
Slide 46 text
Wir haben ein Problem
Slide 47
Slide 47 text
Wir
brauchen
Hilfe!
Slide 48
Slide 48 text
MEMORY: WIN
CPU: 1/2 WIN
Slide 49
Slide 49 text
Client
Client
Client
PHP
Server
Slide 50
Slide 50 text
Was ist node.js?
Slide 51
Slide 51 text
Serverseitiges JS mit V8
Slide 52
Slide 52 text
Eventgetriebene
Architektur
Slide 53
Slide 53 text
Asynchron
Slide 54
Slide 54 text
http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191
Bingo!
Slide 55
Slide 55 text
Warum node.js?
Slide 56
Slide 56 text
Es ist schnell.
Slide 57
Slide 57 text
Nonblocking I/O
durch Eventloop
Slide 58
Slide 58 text
♥ Community Love ♥
Slide 59
Slide 59 text
Schnelle,
leichtgewichtige
Entwicklung
Slide 60
Slide 60 text
Schnell installiert:
Ubuntu (Linux)
$ sudo apt-get install nodejs
Homebrew (OS X)
$ brew install node
MacPorts (OS X)
$ sudo port install nodejs
Slide 61
Slide 61 text
Viele eingebaute
Bibliotheken
Events
Streams
Debugger
URL
Query String
HTTP
OS
File System
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Heile Welt?
Slide 64
Slide 64 text
node.js hat auch seine
Schattenseiten.
Slide 65
Slide 65 text
Single Process
Slide 66
Slide 66 text
Statische Inhalte
Slide 67
Slide 67 text
Sehr
betriebssystemnah ...
Slide 68
Slide 68 text
#sadpanda #nodejs
Slide 69
Slide 69 text
node.js muss auch
rechnen
Slide 70
Slide 70 text
We — node.js!
Slide 71
Slide 71 text
Non-Blocking
Slide 72
Slide 72 text
Non Blocking
sleep(10);
echo ‘Hello, World‘;
vs.
setTimeout(
console.log(‘Hello, World‘), 10000
)
Slide 73
Slide 73 text
$sql = ‘SELECT * FROM users‘;
$result = $conn->query($sql);
vs.
var query = ‘SELECT * FROM users‘;
db.query(query,
function(err, results, fields)
{...};
);
Slide 74
Slide 74 text
Webserver
Slide 75
Slide 75 text
Webserver Code
var 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‘);
Slide 76
Slide 76 text
Bibliotheken als NPM
• Socket.IO
• Backbone.js
• Underscore.js
• express
• Common.js
• MySQL, redis, CouchDB
Slide 77
Slide 77 text
Kleine Helfer für node.js
• Nodemon
• https://github.com/remy/nodemon
• Forever
• https://github.com/indexzero/forever
• Mehr?
Slide 78
Slide 78 text
Und was ist mit dem Client?
Slide 79
Slide 79 text
WebSockets
if ("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 doesn't support WebSockets.
}
Slide 80
Slide 80 text
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
^n:ds[4U
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
8jKS'y:G*Co,Wxa-
Client
Server
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Immer mehr Logik wandert in
den Client. Weg vom Backend.
Slide 83
Slide 83 text
WebWorker
var worker = new Worker('backgroundtask.js');
worker.onmessage = function(event) {
alert(event.data);
};
self.onmessage = function(event) {
// Do some heavy work
self.postMessage('Hello, Berlin');
}
backgroundtask.js
main.js
Slide 84
Slide 84 text
Demo
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
MVC mit Backbone.js
Server (z.B. DB)
View
Model
Router
URL
DOM
Read/Write
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
Web Storage
This page was requested if (!sessionStorage.pageCounter) { sessionStorage.setItem('pageCounter',0); } sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); times.
Slide 89
Slide 89 text
Demo
Slide 90
Slide 90 text
HTML 5
Basics
Slide 91
Slide 91 text
Slide 92
Slide 92 text
KISS
Keep it simple & stupid
Von HTML4 nach HTML5
Slide 93
Slide 93 text
Redundante und
kaputte Elemente
werden entfernt.
Von HTML4 nach HTML5
Slide 94
Slide 94 text
HTML5 verlangt
explizit nach CSS.
Von HTML4 nach HTML5
Slide 95
Slide 95 text
Slide 96
Slide 96 text
data Attribut
für eigene data-* Attribute
Slide 97
Slide 97 text
Beispiel Facebook Like
Slide 98
Slide 98 text
Slide 99
Slide 99 text
Slide 100
Slide 100 text
<figure> and <figcaption>
Erklärung des Bildes
Erklärung des Bildes
Slide 101
Slide 101 text
25%
Slide 102
Slide 102 text
Demo
Slide 103
Slide 103 text
Vektorgrafiken in XML
Pixelgrafiken in JavaScript
Slide 104
Slide 104 text
Demo
Slide 105
Slide 105 text
WebForms
Slide 106
Slide 106 text
Demo
Slide 107
Slide 107 text
CSS3
Slide 108
Slide 108 text
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }
row 1
row 2
row 3
row 4
Slide 109
Slide 109 text
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}
header {
font-family: 'Papyrus';
}
Hallo, Welt!
Slide 110
Slide 110 text
Browser Support
WOFF TTF OTF EOT SVG
Safari
Chrome
Firefox
IE
Opera
iOS
x x x
x x x
x x x
x x
x x x
x
Slide 111
Slide 111 text
Mehr CSS3 Features...
Slide 112
Slide 112 text
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore
et dolore magna
aliqua. Ut enim ad
minim veniam, quis
nostrud exercitation
ullamco laboris nisi ut
aliquip ex ea
commodo
consequat. Duis aute
irure dolor in
reprehenderit in
voluptate velit esse
cillum dolore eu
fugiat nulla pariatur.
Excepteur sint
occaecat cupidatat
non proident, sunt in
culpa qui officia
deserunt mollit anim
id est laborum.
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore
et dolore magna
aliqua. Ut enim ad
minim veniam, quis
nostrud exercitation
ullamco laboris nisi ut
aliquip ex ea
commodo
consequat. Duis aute
irure dolor in
reprehenderit in
voluptate velit esse
cillum dolore eu
fugiat nulla pariatur.
Excepteur sint
occaecat cupidatat
non proident, sunt in
culpa qui officia
deserunt mollit anim
id est laborum.
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore
et dolore magna
aliqua. Ut enim ad
minim veniam, quis
nostrud exercitation
ullamco laboris nisi ut
aliquip ex ea
commodo
consequat. Duis aute
irure dolor in
reprehenderit in
voluptate velit esse
cillum dolore eu
fugiat nulla pariatur.
Excepteur sint
occaecat cupidatat
non proident, sunt in
culpa qui officia
deserunt mollit anim
id est laborum.
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore
et dolore magna
aliqua. Ut enim ad
minim veniam, quis
nostrud exercitation
ullamco laboris nisi ut
aliquip ex ea
commodo
consequat. Duis aute
irure dolor in
reprehenderit in
voluptate velit esse
cillum dolore eu
fugiat nulla pariatur.
Excepteur sint
occaecat cupidatat
non proident, sunt in
culpa qui officia
deserunt mollit anim
id est laborum.
Multi-column layouts
Slide 113
Slide 113 text
Opacity
Opacity
Opacity
Opacity
Opacity
Slide 114
Slide 114 text
HSL / HSLA Farben
Slide 115
Slide 115 text
Endlich runde Ecken! :-)
Slide 116
Slide 116 text
Gradienten
Slide 117
Slide 117 text
Shadows
Slide 118
Slide 118 text
Shadows
Slide 119
Slide 119 text
Transitions und Animations
Slide 120
Slide 120 text
Browser
Support :-)
Slide 121
Slide 121 text
28 %
64 %
74 %
70 %
77 %
87 %
IE9 Mobile Safari Safari 6
Firefox 15
Opera 12
Chrome 22
html5test.com
Slide 122
Slide 122 text
Was uns 2012 noch erwartet...
• Internet Explorer 10 mit Windows 8
(64% HTML5 Support)
• viele neue Chrome- und Firefox-Versionen
• Chrome on Android im (Smart)-TV
• Safari in Apple TV?
Slide 123
Slide 123 text
Für IE 6 bis IE 8 ...
Slide 124
Slide 124 text
caniuse.com
Slide 125
Slide 125 text
Was wir weggelassen
haben ...
• Geolocation
• WebMessaging
• WebGL
• contenteditable
• Drag & Drop
• Offline Web Applications
• Audio/Video
• LESS/SASS für CSS
Slide 126
Slide 126 text
Fragen?
Slide 127
Slide 127 text
Danke!
Slides:
https://speakerdeck.com/u/thorsten
Slide 128
Slide 128 text
Kontakt
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82
Thorsten Rinne
[email protected]
Yatego GmbH
Kobellstr. 15
80336 München
Deutschland
@ThorstenRinne
https://github.com/thorsten