Webapplikationen reloaded mit node.js und HTML5

Transcript

1. Webapplikationen reloaded mit node.js und HTML5 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. Wir sprechen nicht über <video> und <audio>
5. Und wir sprechen nicht über ...
6. Flash ist tot. Spätestens in 5 Jahren. (sagt sogar Adobe)
7. Wer nutzt bereits...
8. und wer bereits...
9. HTML5 in einem Satz?
10. „HTML5 is about moving from documents to applications and from hacks to solutions.“ Chris Heilmann (Mozilla) auf Twitter
11. Unterschied zwischen HTML und HTML5?
12. • Probier es im Internet Explorer • Funktioniert es? • Nein? • Es ist HTML5! :-)
13. Was bedeutet HTML5 für Entwickler?
14. HTML5 ~= HTML + CSS + JS
15. DEMO TIME HTML5 + node.js nginx + MySQL WebSockets
16. https://github.com/sspringer82/pairs.js
18. 1989 HTML wird am CERN entwickelt.
19. 1999 XMLHttpRequest Object
20. 2001 Microsoft stellt die Weiterentwicklung des IE6 ein
21. The dark age of the Web...
22. XHTML 2.0
24. Die Zeit verging ...
25. seit Version 5.0 (1999) seit Version 1.0 (2004) seit Version 1.2 (2004) seit Version 7.6 (2004)
26. 2004 Apple, Mozilla und Opera gründen die WHAT WG
27. 2005 Ajax: A New Approach to Web Applications Blogposting von Jesse James Garret
28. online === offline 2012
29. Die Zukunft besteht aus Web Apps!
30. Was hat das nun mit HTML5 zu tun?
31. Schauen wir uns das Web vor 10 Jahren an.
32. Client Server 2000: PHP chat style polling
33. Client Server Hey, wazzup? 2000: PHP chat style polling
34. Client Server Um, nothing actually... Hey, wazzup? 2000: PHP chat style polling
35. Client Server Hey, wazzup? 1 sec Um, nothing actually... 2000: PHP chat style polling
36. Client Server 2000: PHP chat style polling
37. Client Server Hey, wazzup? 2000: PHP chat style polling
38. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
39. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
40. Client Server 2000: PHP chat style polling
41. Client Server Hey, wazzup? 2000: PHP chat style polling
42. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
43. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
44. Client Server WTF??? 2000: PHP chat style polling
45. 1 user = 1 req / sec CPU #FAIL
46. Wir haben ein Problem
47. Wir brauchen Hilfe!
48. MEMORY: WIN CPU: 1/2 WIN
49. Client Client Client PHP Server
50. Was ist node.js?
51. Serverseitiges JS mit V8
52. Eventgetriebene Architektur
53. Asynchron
54. http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191 Bingo!
55. Warum node.js?
56. Es ist schnell.
57. Nonblocking I/O durch Eventloop
58. ♥ Community Love ♥
59. Schnelle, leichtgewichtige Entwicklung
60. Schnell installiert: Ubuntu (Linux) $ sudo apt-get install nodejs Homebrew (OS X) $ brew install node MacPorts (OS X) $ sudo port install nodejs
61. Viele eingebaute Bibliotheken Events Streams Debugger URL Query String HTTP OS File System
63. Heile Welt?
64. node.js hat auch seine Schattenseiten.
65. Single Process
66. Statische Inhalte
67. Sehr betriebssystemnah ...
68. #sadpanda #nodejs
69. node.js muss auch rechnen
70. We — node.js!
71. Non-Blocking
72. Non Blocking sleep(10); echo ‘Hello, World‘; vs. setTimeout( console.log(‘Hello, World‘), 10000 )
73. $sql = ‘SELECT * FROM users‘; $result = $conn->query($sql); vs. var query = ‘SELECT * FROM users‘; db.query(query, function(err, results, fields) {...}; );
74. Webserver
75. 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‘);
76. Bibliotheken als NPM • Socket.IO • Backbone.js • Underscore.js • express • Common.js • MySQL, redis, CouchDB
77. Kleine Helfer für node.js • Nodemon • https://github.com/remy/nodemon • Forever • https://github.com/indexzero/forever • Mehr?
78. Und was ist mit dem Client?
79. 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. }
80. 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
82. Immer mehr Logik wandert in den Client. Weg vom Backend.
83. 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
84. Demo
86. MVC mit Backbone.js Server (z.B. DB) View Model Router URL DOM Read/Write
87. 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
88. 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>
89. Demo
90. HTML 5 Basics
91. <!DOCTYPE html>
92. KISS Keep it simple & stupid Von HTML4 nach HTML5
93. Redundante und kaputte Elemente werden entfernt. Von HTML4 nach HTML5
94. HTML5 verlangt explizit nach CSS. Von HTML4 nach HTML5
95. <meta http- equiv=“Content-Type“ content=“text/html; charset=UTF-8“> <meta charset=“UTF-8“>
96. data Attribut für eigene data-* Attribute
97. Beispiel Facebook Like <div class="fb-like" data-send="true" data- width="450" data-show- faces="true"></div>
98. <semantic web/>
99. <header> <nav> <footer> <aside> <section> <article> <header> <footer>
100. <figure> and <figcaption> <figure> <img src=”foo.png”> <figcaption> Erklärung des Bildes </figcaption> </figure>
101. <progress> <progress max=”100” min=”0” value=”25”> 25% </progress>
102. Demo
103. <svg> Vektorgrafiken in XML <canvas> Pixelgrafiken in JavaScript
104. Demo
105. WebForms
106. Demo
107. CSS3
108. .row:nth-child(even) { background: #cccccc; } .row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4
109. @font-face { font-family: 'Papyrus'; src: url(Papyrus.otf); } header { font-family: 'Papyrus'; } Hallo, Welt!
110. 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
111. Mehr CSS3 Features...
112. 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
113. Opacity Opacity Opacity Opacity Opacity
114. HSL / HSLA Farben
115. Endlich runde Ecken! :-)
116. Gradienten
117. Shadows
118. Shadows
119. Transitions und Animations
120. Browser Support :-)
121. 28 % 64 % 74 % 70 % 77 % 87 % IE9 Mobile Safari Safari 6 Firefox 15 Opera 12 Chrome 22 html5test.com
122. 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?
123. Für IE 6 bis IE 8 ...
124. caniuse.com
125. Was wir weggelassen haben ... • Geolocation • WebMessaging • WebGL • contenteditable • Drag & Drop • Offline Web Applications • Audio/Video • LESS/SASS für CSS
126. Fragen?
127. Danke! Slides: https://speakerdeck.com/u/thorsten
128. 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