HTML5 mit WebSockets und node.js im Einsatz

Transcript

1. HTML5 mit WebSockets und Node.js im Einsatz Thorsten Rinne / Sebastian Springer
2. Thorsten Rinne • 35 Jahre • Diplom-Informatiker (FH) • Senior Developer @ Yatego GmbH • Twitter: @ThorstenRinne
3. Sebastian Springer • 29 Jahre • Diplom-Informatiker (FH) • Senior Developer / Team Lead @ Mayflower GmbH • 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 (Mozilla) auf Twitter
12. Was bedeutet HTML5 für Entwickler?
13. HTML5 ~= HTML + CSS + JS
14. DEMO TIME HTML5 + node.js nginx + MySQL WebSockets
15. https://github.com/sspringer82/pairs.js
17. 1989 HTML wird am CERN entwickelt.
18. 1993 Die IETF verlangt die erste Implementierung: Mosaic
19. 1996 Tim Berners-Lee gründet das World Wide Web Consortium (W3C)
20. 1996 Browserkrieg: Netscape vs. Microsoft
21. - 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“ ...
22. 1999 PHP 3.0 - MySQL 3.22 Apache 1.3
24. 1999 XMLHttpRequest Object
25. 2001 Microsoft stellt die Weiterentwicklung des IE6 ein
26. The dark age of the Web...
27. XHTML 2.0
29. Die Zeit verging ...
30. seit Version 5.0 (1999) seit Version 1.0 (2004) seit Version 1.2 (2004) seit Version 7.6 (2004)
31. 2004 Apple, Mozilla und Opera gründen die WHAT WG
32. 2005 Ajax: A New Approach to Web Applications Blogposting von Jesse James Garret
34. Google Suggest Google Mail Google Maps
35. 2006 Comet
36. 2007 iPhone und Android
37. online === offline
39. Apps
40. Die Zukunft besteht aus Web Apps!
41. Was hat das nun mit HTML5 zu tun?
42. Schauen wir uns das Web vor 10 Jahren an.
43. Client Server 2000: PHP chat style polling
44. Client Server Hey, wazzup? 2000: PHP chat style polling
45. Client Server Um, nothing actually... Hey, wazzup? 2000: PHP chat style polling
46. Client Server Hey, wazzup? 1 sec Um, nothing actually... 2000: PHP chat style polling
47. Client Server 2000: PHP chat style polling
48. Client Server Hey, wazzup? 2000: PHP chat style polling
49. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
50. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
51. Client Server 2000: PHP chat style polling
52. Client Server Hey, wazzup? 2000: PHP chat style polling
53. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
54. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
55. Client Server WTF??? 2000: PHP chat style polling
56. 1 user = 1 req / sec CPU #FAIL
57. Client Server 2006: Comet style long poll
58. Client Server Hey, wazzup? 2006: Comet style long poll
59. Client Server Um, nothing actually... 1 sec 2006: Comet style long poll
60. Client Server Well ... 2006: Comet style long poll 1 sec
61. Client Server Wait ... 2006: Comet style long poll 1 sec
62. Client Server Uh, there is something! 2006: Comet style long poll 1 sec
63. Client Server No, nothing! 2006: Comet style long poll 1 sec
64. Client Server WTF??? 2006: Comet style long poll
65. 1 user = 1 apache child MEMORY #FAIL
66. Wir haben ein Problem
68. Wir brauchen Hilfe!
69. MEMORY: WIN CPU: 1/2 WIN
70. Client Client Client PHP Server
71. Was ist node.js?
72. Serverseitiges JS mit V8
73. Eventgetriebene Architektur
74. Asynchron
75. http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191 Bingo!
76. Warum node.js?
77. Es ist schnell.
78. Nonblocking I/O durch Eventloop
79. ♥ Community Love ♥
80. Schnelle, leichtgewichtige Entwicklung
81. Viele eingebaute Bibliotheken Events Streams Debugger URL Query String HTTP OS File System
83. Heile Welt?
84. node.js hat auch seine Schattenseiten.
85. Single Process
86. Statische Inhalte
87. Sehr betriebssystemnah ...
88. #sadpanda #nodejs
89. node.js muss auch rechnen
90. We — node.js!
91. Kenne die Schwächen deiner Infrastruktur!
92. Modi
93. Interaktiv
94. Nicht interaktiv $ node server.js
95. Non-Blocking
96. Non Blocking sleep(10); echo ‘Hello, World‘; vs. setTimeout( console.log(‘Hello, World‘), 10000 )
97. $sql = ‘SELECT * FROM users‘; $result = $conn->query($sql); vs. var query = ‘SELECT * FROM users‘; db.query(query, function(err, results, fields) {...}; );
98. Webserver
99. 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‘);
100. Bibliotheken als NPM • Socket.IO • Backbone.js • Underscore.js • express • Common.js • MySQL, redis, CouchDB
101. Kleine Helfer für node.js • Nodemon • https://github.com/remy/nodemon • Forever • https://github.com/indexzero/forever • Mehr?
102. Und was ist mit dem Client?
103. 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. }
104. 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
106. Immer mehr Logik wandert in den Client. Weg vom Backend.
107. 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
108. Demo
110. MVC mit Backbone.js Server (z.B. DB) View Model Router URL DOM Read/Write
111. <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://phpconference.de"); e.returnValue = false; return false; }); </script> WebMessaging
112. 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); }); }
113. 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
114. 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>
115. Demo
116. HTML 5 Basics
117. <!DOCTYPE html>
118. KISS Keep it simple & stupid Von HTML4 nach HTML5
119. Redundante und kaputte Elemente werden entfernt. Von HTML4 nach HTML5
120. HTML5 verlangt explizit nach CSS. Von HTML4 nach HTML5
121. <meta http- equiv=“Content-Type“ content=“text/html; charset=UTF-8“> <meta charset=“UTF-8“>
122. <a> ist flexibler <a>, <area> erhalten ein media Attribut
123. <a href=“http:// m.twitter.com“ rel=“alternate“ media=“handheld“> Twitter Mobile</a>
124. data Attribut für eigene data-* Attribute
125. Beispiel Facebook Like <div class="fb-like" data-send="true" data- width="450" data-show- faces="true"></div>
126. <section> Bereiche <address> und Überschriften
127. <header> <hgroup> <nav> <article> <footer>
128. <header> <nav> <footer> <aside> <section> <article> <header> <footer>
130. <figure> <figcaption> <figure> <img src=”foo.png”> <figcaption> Erklärung des Bildes </figcaption> </figure>
131. <progress> <progress max=”100” min=”0” value=”25”> 25% </progress>
132. <time> <time value=”2012-06-03T11:00:00”> 3. Juni 2012 11 Uhr </time>
133. <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">
134. <svg> Vektorgrafiken in XML <canvas> Pixelgrafiken in JavaScript
135. Demo
136. HTML 5 Microdata sind maschinenlesbare Daten in HTML. <div itemscope> <p> Mein Name ist <span itemprop="name">Thorsten</span>. </p> </div>
137. WebForms
138. Demo
139. CSS3
140. .row:nth-child(even) { background: #cccccc; } .row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4
141. @font-face { font-family: 'Papyrus'; src: url(Papyrus.otf); } header { font-family: 'Papyrus'; } Hallo, Welt!
142. 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
143. Mehr CSS3 Features...
144. 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
145. Opacity Opacity Opacity Opacity Opacity
146. HSL / HSLA Farben
147. Endlich runde Ecken! :-)
148. Gradienten
149. Shadows
150. Shadows
151. Transitions und Animations
152. Browser Support :-)
153. 30 % 64 % 64 % 69 % 69 % 79 % IE9 Mobile Safari Safari 5.1 Firefox 12 Opera 11.6 Chrome 19
154. 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
155. Kleine Helfer für HTML5
159. caniuse.com
161. Kleine Helfer für CSS
163. Was ist LESS?
164. • CSS Pre-Processor • sehr nahe am CSS Syntax • Erweiterung zu CSS • nach dem DRY Schema entworfen
165. LESS im Browser <link rel="stylesheet/less" type="text/css" href="style.less"> <script src="less.js" type="text/javascript"></script>
166. LESS Tools • LESS.app • CodeKit • LiveReload
168. $ npm install less $ lessc style.less > style.css LESS auf dem Server
169. Wie nutzt man LESS?
170. 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
172. .tweets { background: #f00; ul { color: #fff; } li { display: block; } } .tweets { background: #f00; } .tweets ul { color: #fff; } .tweets li { display: block; } Nesting
173. // Grays @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; Variables
174. @import "./vendor/bootstrap/less/bootstrap.less"; Import
175. @imagePath: "http://cdn.example.com/img/"; .tweet { background: url('@{imgPath}tweet.png') repeat-x; height: 24px; margin: 9px 0; } String Interpolation
176. .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
177. Chat
178. Fragen?
179. Danke! Slides: https://speakerdeck.com/u/thorsten
180. Kontakt Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Thorsten Rinne t.rinne@yatego.com Yatego GmbH Kobellstr. 15 80336 München Deutschland @ThorstenRinne https://github.com/thorsten