Slide 1
Slide 1 text
Thorsten Rinne / Sebastian Springer
Grundlagen moderner WebApps mit
HTML5 und node.js
Slide 2
Slide 2 text
Thorsten Rinne
• 35 Jahre
• Yatego GmbH, München
– Senior Developer
• Diplom-Informatiker (FH)
• Twitter: @ThorstenRinne
Slide 3
Slide 3 text
Sebastian Springer
• 29 Jahre
• Mayflower GmbH
– Senior Developer / Team Lead
• Diplom-Informatiker (FH)
• Twitter: @basti_springer
Slide 4
Slide 4 text
Wer seid ihr?
Slide 5
Slide 5 text
DEMO TIME
HTML5 + node.js
nginx + MySQL
WebSockets
Slide 6
Slide 6 text
Wir sprechen nicht über
und
Slide 7
Slide 7 text
Your browser does not support the video tag. :-(
Your browser does not support the audio tag. :-(
Slide 8
Slide 8 text
Und wir sprechen nicht über ...
Slide 9
Slide 9 text
Flash ist tot.
Spätestens in 5 Jahren.
Slide 10
Slide 10 text
Flash ist tot.
Spätestens in 5 Jahren.
(sagt sogar Adobe)
Slide 11
Slide 11 text
Wer nutzt bereits...
Slide 12
Slide 12 text
und wer bereits...
Slide 13
Slide 13 text
HTML5 in einem
Satz?
Slide 14
Slide 14 text
„HTML5 is about
moving from
documents to
applications and from
hacks to solutions.“
Chris Heilmann (Mozilla) auf Twitter
Slide 15
Slide 15 text
Unterschied zwischen
HTML und HTML5?
Slide 16
Slide 16 text
• Probier es im Internet Explorer
Slide 17
Slide 17 text
• Probier es im Internet Explorer
• Funktioniert es?
Slide 18
Slide 18 text
• Probier es im Internet Explorer
• Funktioniert es?
• Nein?
Slide 19
Slide 19 text
• Probier es im Internet Explorer
• Funktioniert es?
• Nein?
• Es ist HTML5! :-)
Slide 20
Slide 20 text
Was bedeutet HTML5 für
Entwickler?
Slide 21
Slide 21 text
HTML5 ~= HTML + CSS + JS
Slide 22
Slide 22 text
1989
HTML wird am CERN
entwickelt.
Slide 23
Slide 23 text
1993
Die IETF verlangt die erste
Implementierung: Mosaic
Slide 24
Slide 24 text
1996
Tim Berners-Lee gründet das World
Wide Web Consortium (W3C)
Slide 25
Slide 25 text
1996
Browserkrieg:
Netscape vs. Microsoft
Slide 26
Slide 26 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
Slide 27
Slide 27 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 28
Slide 28 text
The dark age of
the Web...
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
XHTML 2.0
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Die Zeit verging ...
Slide 36
Slide 36 text
1999
PHP 3.0 - MySQL 3.22
Apache 1.3
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
1999
XMLHttpRequest Object
Slide 39
Slide 39 text
Die Zeit verging ...
Slide 40
Slide 40 text
seit Version 5.0
(1999)
seit Version 1.0
(2004)
seit Version 1.2
(2004)
seit Version 7.6
(2004)
Slide 41
Slide 41 text
2004
Apple, Mozilla und Opera
gründen die WHAT WG
Slide 42
Slide 42 text
2005
Ajax: A New Approach to Web
Applications
Blogposting von Jesse James Garret
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Google Suggest
Google Mail
Google Maps
Slide 45
Slide 45 text
2006
Comet
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Push
Slide 49
Slide 49 text
Push Ajax
Slide 50
Slide 50 text
Push Ajax
Push
Slide 51
Slide 51 text
Was passiert hier?
Slide 52
Slide 52 text
Content
vs.
Context
Slide 53
Slide 53 text
Facebook ist eine
Applikation!
Slide 54
Slide 54 text
Page
vs.
Stream
Slide 55
Slide 55 text
Twitter ist eine
Applikation!
Slide 56
Slide 56 text
Applikationen?
Slide 57
Slide 57 text
Apps!
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
online === offline
Slide 61
Slide 61 text
Ist das das neue Web?
Slide 62
Slide 62 text
Die Zukunft besteht
aus Web Apps!
Slide 63
Slide 63 text
Der mobile Browser ist (fast)
identisch mit dem Desktop
Browser.
Slide 64
Slide 64 text
Browser haben extrem kurze
Release-Zyklen.
Slide 65
Slide 65 text
Browser haben extrem kurze
Release-Zyklen.
Außer Microsoft und Apple!
Slide 66
Slide 66 text
Der Browser ist eine
„cross platform
realtime runtime“.
Slide 67
Slide 67 text
Was hat das nun mit
HTML5 zu tun?
Slide 68
Slide 68 text
Requests
Events
Slide 69
Slide 69 text
2000: PHP chat style polling
Client Server
Slide 70
Slide 70 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 71
Slide 71 text
Client Server
Um, nothing actually...
Hey, wazzup?
2000: PHP chat style polling
Slide 72
Slide 72 text
Client Server
Hey, wazzup?
1 sec
Um, nothing actually...
2000: PHP chat style polling
Slide 73
Slide 73 text
Client Server
2000: PHP chat style polling
Slide 74
Slide 74 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 75
Slide 75 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 76
Slide 76 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 77
Slide 77 text
Client Server
2000: PHP chat style polling
Slide 78
Slide 78 text
Client Server
Hey, wazzup?
2000: PHP chat style polling
Slide 79
Slide 79 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
Slide 80
Slide 80 text
Client Server
Hey, wazzup? Um, nothing actually...
2000: PHP chat style polling
1 sec
Slide 81
Slide 81 text
Client Server
WTF???
2000: PHP chat style polling
Slide 82
Slide 82 text
1 user = 1 req / sec
CPU #FAIL
Slide 83
Slide 83 text
Client Server
2006: Comet style long poll
Slide 84
Slide 84 text
Client Server
Hey, wazzup?
2006: Comet style long poll
Slide 85
Slide 85 text
Client Server
Um, nothing actually...
1 sec
2006: Comet style long poll
Slide 86
Slide 86 text
Client Server
Well ...
2006: Comet style long poll
1 sec
Slide 87
Slide 87 text
Client Server
Wait ...
2006: Comet style long poll
1 sec
Slide 88
Slide 88 text
Client Server
Uh, there is something!
2006: Comet style long poll
1 sec
Slide 89
Slide 89 text
Client Server
No, nothing!
2006: Comet style long poll
1 sec
Slide 90
Slide 90 text
Client Server
WTF???
2006: Comet style long poll
Slide 91
Slide 91 text
1 user = 1 apache child
MEMORY #FAIL
Slide 92
Slide 92 text
Wir haben ein Problem
Slide 93
Slide 93 text
Wir
brauchen
Hilfe!
Slide 94
Slide 94 text
MEMORY: WIN
CPU: 1/2 WIN
Slide 95
Slide 95 text
Client
Client
Client
PHP
Server
Slide 96
Slide 96 text
Was ist node.js?
Slide 97
Slide 97 text
Serverseitiges JS mit V8
Slide 98
Slide 98 text
Eventgetriebene
Architektur
Slide 99
Slide 99 text
Nonblocking I/O
durch Eventloop
Slide 100
Slide 100 text
Non Blocking
sleep(10);
echo ‘Hello, World‘;
vs.
setTimeout( function() {
console.log(‘Hello, World‘);
}, 10000
);
Slide 101
Slide 101 text
$sql = ‘SELECT * FROM users‘;
$result = $conn->query($sql);
vs.
var query = ‘SELECT * FROM users‘;
db.query(query,
function(err, results, fields)
{...};
);
Slide 102
Slide 102 text
Warum node.js?
Slide 103
Slide 103 text
Es ist schnell.
Slide 104
Slide 104 text
♥ Community Love ♥
Slide 105
Slide 105 text
Schnelle,
leichtgewichtige
Entwicklung
Slide 106
Slide 106 text
Schnell installiert:
Ubuntu (Linux)
$ sudo apt-get install nodejs
Homebrew (OS X)
$ brew install node
MacPorts (OS X)
$ sudo port install nodejs
... und auch als Windows Installer! :-)
Slide 107
Slide 107 text
$ ./configure && make && make install
Schnell kompiliert:
Slide 108
Slide 108 text
Viele eingebaute
Bibliotheken
Events
Streams
Debugger
URL
Query String
HTTP
OS
File System
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
Heile Welt?
Slide 111
Slide 111 text
node.js hat auch
seine
Schattenseiten.
Slide 112
Slide 112 text
Single Process
Slide 113
Slide 113 text
node.js muss auch rechnen
Slide 114
Slide 114 text
Statische Inhalte
Slide 115
Slide 115 text
Sehr
betriebssystemnah ...
Slide 116
Slide 116 text
We ♥ node.js!
Slide 117
Slide 117 text
Kenne die Schwächen
deiner Infrastruktur!
Slide 118
Slide 118 text
Modi
Slide 119
Slide 119 text
Interaktiv
Slide 120
Slide 120 text
Nicht interaktiv
$ node server.js
Slide 121
Slide 121 text
Demo
Slide 122
Slide 122 text
Webserver
Slide 123
Slide 123 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 124
Slide 124 text
Bibliotheken als NPM
• Socket.IO
• Backbone.js
• Underscore.js
• express
• Connect
• MySQL, redis, CouchDB
Slide 125
Slide 125 text
Kleine Helfer für node.js
• Nodemon
– https://github.com/remy/nodemon
• Forever
– https://github.com/indexzero/forever
• Mehr?
Slide 126
Slide 126 text
Tools auf node.js Basis
• less
• compass
• uglifyjs
• grunt.js
Dazu aber später mehr!
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
MVC mit Backbone.js
Server (z.B. DB)
User
View
Model
Router
URL
DOM
Read/Write
Slide 129
Slide 129 text
Und was ist mit dem Client?
Slide 130
Slide 130 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 131
Slide 131 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 132
Slide 132 text
No content
Slide 133
Slide 133 text
Immer mehr Logik
wandert in den Client.
Weg vom Backend.
Slide 134
Slide 134 text
var myWorker = new Worker('backgroundtask.js');
myWorker.onmessage = function(event) {
alert(event.data);
};
self.onmessage = function(event) {
// Do some heavy work
self.postMessage('Hello, Amsterdam');
}
main.js
WebWorker
Slide 135
Slide 135 text
Demo
Slide 136
Slide 136 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://www.phpconference.nl"); e.returnValue = false; return false; }); WebMessagingSlide 137
Slide 137 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 138
Slide 138 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 139
Slide 139 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 140
Slide 140 text
Demo
Slide 141
Slide 141 text
HTML 5
Basics
Slide 142
Slide 142 text
Slide 143
Slide 143 text
Slide 144
Slide 144 text
Von HTML4 nach HTML5
KISS
Keep it simple &
stupid
Slide 145
Slide 145 text
Redundante und
kaputte Elemente
werden entfernt.
Von HTML4 nach HTML5
Slide 146
Slide 146 text
HTML5 verlangt
explizit nach CSS.
Von HTML4 nach HTML5
Slide 147
Slide 147 text
Slide 148
Slide 148 text
Slide 151
Slide 151 text
data Attribut
für eigene data-* Attribute
Slide 152
Slide 152 text
Beispiel Facebook Like
Slide 153
Slide 153 text
Slide 154
Slide 154 text
Slide 155
Slide 155 text
and
Erklärung des Bildes
Erklärung des Bildes
Slide 156
Slide 156 text
25%
Slide 157
Slide 157 text
Demo
Slide 158
Slide 158 text
Vektorgrafiken in XML
Pixelgrafiken in JavaScript
Slide 159
Slide 159 text
Demo
Slide 160
Slide 160 text
HTML 5 Microdata is machine-
readable data in HTML.
Recursion. :-)
Mein Name ist Thorsten.
Slide 161
Slide 161 text
WebForms
Slide 162
Slide 162 text
Slide 163
Slide 163 text
Slide 164
Slide 164 text
Slide 165
Slide 165 text
Slide 166
Slide 166 text
Slide 167
Slide 167 text
Slide 168
Slide 168 text
Slide 169
Slide 169 text
Slide 170
Slide 170 text
Slide 171
Slide 171 text
Slide 172
Slide 172 text
Slide 173
Slide 173 text
Slide 174
Slide 174 text
Demo
Slide 175
Slide 175 text
CSS3
Slide 176
Slide 176 text
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }
row 1
row 2
row 3
row 4
Slide 177
Slide 177 text
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}
header {
font-family: 'Papyrus';
}
Hallo, Welt!
Slide 178
Slide 178 text
Mehr CSS3 Features...
Slide 179
Slide 179 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
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
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
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
Multi-column layouts
Slide 180
Slide 180 text
Opacity
Opacity
Opacity
Opacity
Opacity
Slide 181
Slide 181 text
HSL / HSLA Farben
Slide 182
Slide 182 text
Endlich runde Ecken! :-)
Slide 183
Slide 183 text
Gradienten
Slide 184
Slide 184 text
Shadows
Slide 185
Slide 185 text
Shadows
Slide 186
Slide 186 text
Transitions und Animations
Slide 187
Slide 187 text
Transitions und Animations
Slide 188
Slide 188 text
Transitions und Animations
Slide 189
Slide 189 text
Browser
Support :-)
Slide 190
Slide 190 text
28 %
64 %
74 %
70 %
77 %
87 %
IE9 Mobile Safari Safari 6
Firefox 15
Opera 12
Chrome 22
html5test.com
Slide 191
Slide 191 text
Was uns demnächst erwartet...
• Internet Explorer 10 mit Windows 8
(64% HTML5 Support)
• viele neue Chrome- und Firefox-Versionen
• Chrome auf Android im (Smart)-TV
• Safari in Apple TV?
• nach W3C
– HTML 5.0 Recommendation Ende 2014
– HTML 5.1 Recommendation Ende 2016
– usw.
Slide 192
Slide 192 text
Kleine Helfer
für HTML5
Slide 193
Slide 193 text
No content
Slide 194
Slide 194 text
No content
Slide 195
Slide 195 text
No content
Slide 196
Slide 196 text
No content
Slide 197
Slide 197 text
No content
Slide 198
Slide 198 text
No content
Slide 199
Slide 199 text
Kleine Helfer
für CSS
Slide 200
Slide 200 text
No content
Slide 201
Slide 201 text
Fragen?
Slide 202
Slide 202 text
Danke!
Slide 203
Slide 203 text
Kontakt
Sebastian Springer
[email protected]
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