Slide 1
Slide 1 text
HTML5 mit WebSockets
und Node.js im Einsatz
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
Wer seid ihr?
Slide 5
Slide 5 text
Wir sprechen nicht über
und
Slide 6
Slide 6 text
Und wir sprechen nicht über ...
Slide 7
Slide 7 text
Flash ist tot.
Spätestens in 5 Jahren.
(sagt sogar Adobe)
Slide 8
Slide 8 text
Wer nutzt bereits...
Slide 9
Slide 9 text
und wer bereits...
Slide 10
Slide 10 text
HTML5 in einem Satz?
Slide 11
Slide 11 text
„HTML5 is about
moving from
documents to
applications and from
hacks to solutions.“
Chris Heilmann (Mozilla) auf Twitter
Slide 12
Slide 12 text
Was bedeutet HTML5 für
Entwickler?
Slide 13
Slide 13 text
HTML5 ~= HTML + CSS + JS
Slide 14
Slide 14 text
DEMO TIME
HTML5 + node.js
nginx + MySQL
WebSockets
Slide 15
Slide 15 text
https://github.com/sspringer82/pairs.js
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
1989
HTML wird am CERN
entwickelt.
Slide 18
Slide 18 text
1993
Die IETF verlangt die erste
Implementierung: Mosaic
Slide 19
Slide 19 text
1996
Tim Berners-Lee gründet
das World Wide Web
Consortium (W3C)
Slide 20
Slide 20 text
1996
Browserkrieg:
Netscape vs. Microsoft
Slide 21
Slide 21 text
- Der Browser ist kostenlos
- Das Web ersetzt das OS
- Java bringt Web Apps
- 4 Versionen in 7 Jahren
- „kostenlos“ mit OS
- 1995: 6 Entwickler
- 1999: 1000 Entwickler
- 6 Versionen in 6 Jahren
Netscape verlor den „Krieg“ ...
Slide 22
Slide 22 text
1999
PHP 3.0 - MySQL 3.22
Apache 1.3
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
1999
XMLHttpRequest Object
Slide 25
Slide 25 text
2001
Microsoft stellt die
Weiterentwicklung des
IE6 ein
Slide 26
Slide 26 text
The dark age of
the Web...
Slide 27
Slide 27 text
XHTML 2.0
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Die Zeit verging ...
Slide 30
Slide 30 text
seit Version 5.0
(1999)
seit Version 1.0
(2004)
seit Version 1.2
(2004)
seit Version 7.6
(2004)
Slide 31
Slide 31 text
2004
Apple, Mozilla und Opera
gründen die WHAT WG
Slide 32
Slide 32 text
2005
Ajax: A New Approach to
Web Applications
Blogposting von Jesse James Garret
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Google Suggest
Google Mail
Google Maps
Slide 35
Slide 35 text
2006
Comet
Slide 36
Slide 36 text
2007
iPhone und Android
Slide 37
Slide 37 text
online === offline
Slide 38
Slide 38 text
2012
Slide 39
Slide 39 text
Apps
Slide 40
Slide 40 text
Die Zukunft besteht
aus Web Apps!
Slide 41
Slide 41 text
Was hat das nun mit
HTML5 zu tun?
Slide 42
Slide 42 text
Schauen wir uns das
Web vor 10 Jahren an.
Slide 43
Slide 43 text
Client Server
2000: PHP chat style polling
Slide 44
Slide 44 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 45
Slide 45 text
Client Server
Um, nothing actually...
Hey, wazzup?
2000: PHP chat style polling
Slide 46
Slide 46 text
Client Server
Hey, wazzup?
1 sec
Um, nothing actually...
2000: PHP chat style polling
Slide 47
Slide 47 text
Client Server
2000: PHP chat style polling
Slide 48
Slide 48 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 49
Slide 49 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 50
Slide 50 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 51
Slide 51 text
Client Server
2000: PHP chat style polling
Slide 52
Slide 52 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 53
Slide 53 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 54
Slide 54 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 55
Slide 55 text
Client Server
WTF???
2000: PHP chat style polling
Slide 56
Slide 56 text
1 user = 1 req / sec
CPU #FAIL
Slide 57
Slide 57 text
Client Server
2006: Comet style long poll
Slide 58
Slide 58 text
Client Server
Hey, wazzup?
2006: Comet style long poll
Slide 59
Slide 59 text
Client Server
Um, nothing actually...
1 sec
2006: Comet style long poll
Slide 60
Slide 60 text
Client Server
Well ...
2006: Comet style long poll
1 sec
Slide 61
Slide 61 text
Client Server
Wait ...
2006: Comet style long poll
1 sec
Slide 62
Slide 62 text
Client Server
Uh, there is something!
2006: Comet style long poll
1 sec
Slide 63
Slide 63 text
Client Server
No, nothing!
2006: Comet style long poll
1 sec
Slide 64
Slide 64 text
Client Server
WTF???
2006: Comet style long poll
Slide 65
Slide 65 text
1 user = 1 apache child
MEMORY #FAIL
Slide 66
Slide 66 text
Wir haben ein Problem
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Wir brauchen Hilfe!
Slide 69
Slide 69 text
MEMORY: WIN
CPU: 1/2 WIN
Slide 70
Slide 70 text
Client
Client
Client
PHP
Server
Slide 71
Slide 71 text
Was ist node.js?
Slide 72
Slide 72 text
Serverseitiges JS mit V8
Slide 73
Slide 73 text
Eventgetriebene
Architektur
Slide 74
Slide 74 text
Asynchron
Slide 75
Slide 75 text
http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191
Bingo!
Slide 76
Slide 76 text
Warum node.js?
Slide 77
Slide 77 text
Es ist schnell.
Slide 78
Slide 78 text
Nonblocking I/O
durch Eventloop
Slide 79
Slide 79 text
♥ Community Love ♥
Slide 80
Slide 80 text
Schnelle,
leichtgewichtige
Entwicklung
Slide 81
Slide 81 text
Viele eingebaute
Bibliotheken
Events
Streams
Debugger
URL
Query String
HTTP
OS
File System
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Heile Welt?
Slide 84
Slide 84 text
node.js hat auch seine
Schattenseiten.
Slide 85
Slide 85 text
Single Process
Slide 86
Slide 86 text
Statische Inhalte
Slide 87
Slide 87 text
Sehr
betriebssystemnah ...
Slide 88
Slide 88 text
#sadpanda #nodejs
Slide 89
Slide 89 text
node.js muss auch
rechnen
Slide 90
Slide 90 text
We — node.js!
Slide 91
Slide 91 text
Kenne die Schwächen deiner
Infrastruktur!
Slide 92
Slide 92 text
Modi
Slide 93
Slide 93 text
Interaktiv
Slide 94
Slide 94 text
Nicht interaktiv
$ node server.js
Slide 95
Slide 95 text
Non-Blocking
Slide 96
Slide 96 text
Non Blocking
sleep(10);
echo ‘Hello, World‘;
vs.
setTimeout(
console.log(‘Hello, World‘), 10000
)
Slide 97
Slide 97 text
$sql = ‘SELECT * FROM users‘;
$result = $conn->query($sql);
vs.
var query = ‘SELECT * FROM users‘;
db.query(query,
function(err, results, fields)
{...};
);
Slide 98
Slide 98 text
Webserver
Slide 99
Slide 99 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 100
Slide 100 text
Bibliotheken als NPM
• Socket.IO
• Backbone.js
• Underscore.js
• express
• Common.js
• MySQL, redis, CouchDB
Slide 101
Slide 101 text
Kleine Helfer für node.js
• Nodemon
• https://github.com/remy/nodemon
• Forever
• https://github.com/indexzero/forever
• Mehr?
Slide 102
Slide 102 text
Und was ist mit dem Client?
Slide 103
Slide 103 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 104
Slide 104 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 105
Slide 105 text
No content
Slide 106
Slide 106 text
Immer mehr Logik wandert in
den Client. Weg vom Backend.
Slide 107
Slide 107 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 108
Slide 108 text
Demo
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
MVC mit Backbone.js
Server (z.B. DB)
View
Model
Router
URL
DOM
Read/Write
Slide 111
Slide 111 text
Ziel iFrame:
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://phpconference.de"); e.returnValue = false; return false; }); WebMessagingSlide 112
Slide 112 text
Geolocation
if (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);
});
}
Slide 113
Slide 113 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 114
Slide 114 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 115
Slide 115 text
Demo
Slide 116
Slide 116 text
HTML 5
Basics
Slide 117
Slide 117 text
Slide 118
Slide 118 text
KISS
Keep it simple & stupid
Von HTML4 nach HTML5
Slide 119
Slide 119 text
Redundante und
kaputte Elemente
werden entfernt.
Von HTML4 nach HTML5
Slide 120
Slide 120 text
HTML5 verlangt
explizit nach CSS.
Von HTML4 nach HTML5
Slide 121
Slide 121 text
Slide 124
Slide 124 text
data Attribut
für eigene data-* Attribute
Slide 125
Slide 125 text
Beispiel Facebook Like
Slide 126
Slide 126 text
Bereiche
und Überschriften
Slide 127
Slide 127 text
Slide 128
Slide 128 text
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
<figure> <figcaption>
Erklärung des Bildes
Erklärung des Bildes
Slide 131
Slide 131 text
25%
Slide 132
Slide 132 text
Slide 133
Slide 133 text
Slide 134
Slide 134 text
Vektorgrafiken in XML
Pixelgrafiken in JavaScript
Slide 135
Slide 135 text
Demo
Slide 136
Slide 136 text
HTML 5 Microdata sind
maschinenlesbare Daten in
HTML.
Mein Name ist Thorsten.
Slide 137
Slide 137 text
WebForms
Slide 138
Slide 138 text
Demo
Slide 139
Slide 139 text
CSS3
Slide 140
Slide 140 text
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }
row 1
row 2
row 3
row 4
Slide 141
Slide 141 text
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}
header {
font-family: 'Papyrus';
}
Hallo, Welt!
Slide 142
Slide 142 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 143
Slide 143 text
Mehr CSS3 Features...
Slide 144
Slide 144 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 145
Slide 145 text
Opacity
Opacity
Opacity
Opacity
Opacity
Slide 146
Slide 146 text
HSL / HSLA Farben
Slide 147
Slide 147 text
Endlich runde Ecken! :-)
Slide 148
Slide 148 text
Gradienten
Slide 149
Slide 149 text
Shadows
Slide 150
Slide 150 text
Shadows
Slide 151
Slide 151 text
Transitions und Animations
Slide 152
Slide 152 text
Browser
Support :-)
Slide 153
Slide 153 text
30 %
64 % 64 %
69 % 69 %
79 %
IE9 Mobile Safari Safari 5.1
Firefox 12
Opera 11.6
Chrome 19
Slide 154
Slide 154 text
Was uns 2012 noch erwartet...
• Internet Explorer 10 mit Windows 8
(64% HTML5 Support)
• Safari 5.2 mit OS X Mountain Lion
(74% HTML5 Support)
• Opera 12
(72% HTML5 Support)
• viele neue Chrome- und Firefox-Versionen
• Chrome on Android im TV
• evtl. Mobile Safari im TV
Slide 155
Slide 155 text
Kleine Helfer
für HTML5
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
caniuse.com
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
Kleine Helfer
für CSS
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
Was ist LESS?
Slide 164
Slide 164 text
• CSS Pre-Processor
• sehr nahe am CSS Syntax
• Erweiterung zu CSS
• nach dem DRY Schema entworfen
Slide 165
Slide 165 text
LESS im Browser
Slide 166
Slide 166 text
LESS Tools
• LESS.app
• CodeKit
• LiveReload
Slide 167
Slide 167 text
No content
Slide 168
Slide 168 text
$ npm install less
$ lessc style.less > style.css
LESS auf dem Server
Slide 169
Slide 169 text
Wie nutzt man LESS?
Slide 170
Slide 170 text
a {
background: #f00;
color: #fff;
display: block;
&:hover {
background: #05761d;
}
&:visited {
background: #fffc00;
}
}
a {
background: #f00;
color: #fff;
display: block;
}
a:hover {
background: #05761d;
}
a:visited {
background: #fffc00;
}
Nesting
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
.tweets {
background: #f00;
ul {
color: #fff;
}
li {
display: block;
}
}
.tweets {
background: #f00;
}
.tweets ul {
color: #fff;
}
.tweets li {
display: block;
}
Nesting
Slide 173
Slide 173 text
// Grays
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
Variables
Slide 174
Slide 174 text
@import "./vendor/bootstrap/less/bootstrap.less";
Import
Slide 175
Slide 175 text
@imagePath: "http://cdn.example.com/img/";
.tweet {
background: url('@{imgPath}tweet.png') repeat-x;
height: 24px;
margin: 9px 0;
}
String Interpolation
Slide 176
Slide 176 text
.module() {
background: #fff;
color: rgb(45, 45, 45);
font-size: 14px;
padding: 12px;
}
.rounded(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
Mixins
Slide 177
Slide 177 text
Chat
Slide 178
Slide 178 text
Fragen?
Slide 179
Slide 179 text
Danke!
Slides:
https://speakerdeck.com/u/thorsten
Slide 180
Slide 180 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