1. Thorsten Rinne / Sebastian Springer
Webapplikationen reloaded mit
node.js und HTML5 - Die Grundlagen

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

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

4. Wer seid ihr?

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

6. Und wir sprechen nicht über ...

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

8. Wer nutzt bereits...

9. und wer bereits...

10. HTML5 in einem
Satz?

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

12. Was bedeutet HTML5 für
Entwickler?

13. HTML5 ~= HTML + CSS + JS

14. 1989
HTML wird am CERN
entwickelt.

15. 1993
Die IETF verlangt die erste
Implementierung: Mosaic

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

17. 1996Browserkrieg:
Netscape vs. Microsoft

18. - 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“ ...

19. The dark age of the Web...

20. XHTML 2.0

21. #sadpanda

22. 1999
PHP 3.0 - MySQL 3.22
Apache 1.3

24. 1999
XMLHttpRequest Object

25. Die Zeit verging ...

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

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

29. Google Suggest
Google Mail
Google Maps

30. 2006
Comet

32. Push Ajax
Push

33. Was passiert hier?

34. Content
vs.
Context

35. Facebook ist eine
Applikation!

36. Page
vs.
Stream

37. Twitter ist eine
Applikation!

38. Applikationen?

39. Apps!

42. online === offline

43. Ist das das neue Web?

44. Die Zukunft besteht
aus Web Apps!

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

46. Der Mobile Browser hat kurze
Release-Zyklen. Der auf dem
Desktop inzwischen auch.

47. Der Browser ist eine
„cross platform
realtime runtime“.

48. Was hat das nun mit
HTML5 zu tun?

49. Requests
Events

50. 2000: PHP chat style polling
Client Server

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

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

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

54. 2000: PHP chat style polling
Client Server

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

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

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

58. 2000: PHP chat style polling
Client Server

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

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

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

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

63. 1 user = 1 req / sec
CPU #FAIL

64. 2006: Comet style long poll
Client Server

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

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

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

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

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

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

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

72. 1 user = 1 apache child
MEMORY #FAIL

73. Wir haben ein Problem

75. Wir brauchen Hilfe!

76. MEMORY: WIN
CPU: 1/2 WIN

77. PHP
Server
Client
Client
Client

78. Was ist node.js?

79. Serverseitiges JS mit V8

80. Eventgetriebene
Architektur

81. Asynchron

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

83. Warum node.js?

84. Es ist schnell.

85. Nonblocking I/O
durch Eventloop

86. ♥ Community Love ♥

87. Schnelle,
leichtgewichtige
Entwicklung

88. Events
File System
Streams
Viele eingebaute
OS Bibliotheken
Query String
Debugger
HTTP
URL

90. Heile Welt?

91. node.js hat auch
seine
Schattenseiten.

92. Single Process

93. Statische Inhalte

94. Sehr
betriebssystemnah ...

95. #sadpanda #nodejs

96. node.js muss auch rechnen

97. We ♥ node.js!

98. Kenne die Schwächen
deiner Infrastruktur!

99. Modi

100. Interaktiv

101. Nicht interaktiv
$ node server.js

102. Non-Blocking

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

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

105. Webserver

106. 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‘);

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

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

109. Und was ist mit dem Client?

110. 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.
}

111. Client
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
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
8jKS'y:G*Co,Wxa-

113. Immer mehr Logik
wandert in den Client.
Weg vom Backend.

114. WebWorker main.js
var 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');
}

115. Demo

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

118. 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>

119. 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);
});
}

120. 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

121. 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>

122. Demo

123. HTML 5
Basics

124. <!DOCTYPE html>

125. Von HTML4 nach HTML5
KISS
Keep it simple & stupid

126. Von HTML4 nach HTML5
Redundante und
kaputte Elemente
werden entfernt.

127. Von HTML4 nach HTML5
HTML5 verlangt
explizit nach CSS.

128. <meta <meta http-
charset=“UTF-8“>
equiv=“Content-Type“
content=“text/html;
charset=UTF-8“>

129. <a>
ist flexibler
<a>, <area>
erhalten ein media Attribut

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

131. data Attribut
für eigene data-* Attribute

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

133. <section> Bereiche
<address> und Überschriften

134. <header>
<hgroup>
<nav>
<article>
<footer>

135. <time>
<details>
<figure>
<figcaption>
<mark>

136. <link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="http://www.phpconference.de/feed/">
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="http://www.phpconference.de/opensearch.xml">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://www.phpconference.de/xmlrpc.php">
<link rel="prefetch" href="http://www.phpconference.de/main.php">
<link rel="archives" href="http://www.phpconference.de/archive/">
<link rel="external" href="http://www.php.net">
<link rel="license" href="http://www.gnu.org/licenses/gpl.html">
<link rel="nofollow" href="http://www.ruby-lang.org">

137. <svg>
Vektorgrafiken in XML
<canvas>
Pixelgrafiken in JavaScript

138. Demo

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

140. WebForms

141. <input type="text" placeholder="Mayflower GmbH">

142. <input type="text" maxlength="256" name="q" autofocus>
<input type="text" maxlength="256" name="q" required="required">

143. <input type="tel" name="phonenumber">
<input type="url" name="url">
<input type="email" name="emailaddress">

144. <input type="number" min="0" max="10" step="2" value="6" />

145. <input type="range" min="0" max="10" step="2" value="6">

146. <input type="text" x-webit-speech>

147. <input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">

148. <input type="color">

149. Demo

150. CSS3

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

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

153. Mehr CSS3 Features...

154. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
sit amet, sit amet, sit amet, sit amet,
consectetur consectetur consectetur consectetur
adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed
do eiusmod do eiusmod do eiusmod do eiusmod
tempor incididunt tempor incididunt tempor incididunt tempor incididunt
ut labore et dolore ut labore et dolore ut labore et dolore ut labore et dolore
magna aliqua. Ut magna aliqua. Ut magna aliqua. Ut magna aliqua. Ut
enim ad minim enim ad minim enim ad minim enim ad minim
veniam, quis veniam, quis veniam, quis veniam, quis
nostrud nostrud nostrud nostrud
Multi-column layouts
exercitation exercitation exercitation exercitation
ullamco laboris nisi ullamco laboris nisi ullamco laboris nisi ullamco laboris nisi
ut aliquip ex ea ut aliquip ex ea ut aliquip ex ea ut aliquip ex ea
commodo commodo commodo commodo
consequat. Duis consequat. Duis consequat. Duis consequat. Duis
aute irure dolor in aute irure dolor in aute irure dolor in aute irure dolor in
reprehenderit in reprehenderit in reprehenderit in reprehenderit in
voluptate velit voluptate velit voluptate velit voluptate velit
esse cillum dolore esse cillum dolore esse cillum dolore esse cillum dolore
eu fugiat nulla eu fugiat nulla eu fugiat nulla eu fugiat nulla
pariatur. Excepteur pariatur. Excepteur pariatur. Excepteur pariatur. Excepteur
sint occaecat sint occaecat sint occaecat sint occaecat
cupidatat non cupidatat non cupidatat non cupidatat non
proident, sunt in proident, sunt in proident, sunt in proident, sunt in
culpa qui officia culpa qui officia culpa qui officia culpa qui officia

155. Opacity
Opacity
Opacity
Opacity
Opacity

156. HSL / HSLA Farben

157. Endlich runde Ecken! :-)

158. Gradienten

159. Shadows

160. Shadows

161. Transitions und Animations

162. Browser
Support :-)

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

164. 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

165. Kleine Helfer
für HTML5

169. caniuse.com

170. html5test.com

171. Kleine Helfer
für CSS

173. Fragen?

174. Danke!
http://joind.in/4692

175. Kontakt
Thorsten Rinne Sebastian Springer
thorsten.rinne@mayflower.de sebastian.springer@mayflower.de
+49 89 242054-1131 +49 89 242054-1120
Mayflower GmbH Mayflower GmbH
Mannhardtstr. 6 Mannhardtstr. 6
80538 München 80538 München
Deutschland Deutschland
@ThorstenRinne @basti_springer