Grundlagen moderner WebApps mit HTML5

Transcript

1. Thorsten Rinne / Sebastian Springer Grundlagen moderner WebApps mit HTML5 und node.js
2. Thorsten Rinne • 35 Jahre • Yatego GmbH, München – Senior Developer • 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. DEMO TIME HTML5 + node.js nginx + MySQL WebSockets
6. Wir sprechen nicht über <video> und <audio>
7. <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. :-( </video> <audio controls="controls"> <source src="sound.ogg" type="audio/ogg" /> <source src="sound.mp3" type="audio/mp3" /> Your browser does not support the audio tag. :-( </audio>
8. Und wir sprechen nicht über ...
9. Flash ist tot. Spätestens in 5 Jahren.
10. Flash ist tot. Spätestens in 5 Jahren. (sagt sogar Adobe)
11. Wer nutzt bereits...
12. und wer bereits...
13. HTML5 in einem Satz?
14. „HTML5 is about moving from documents to applications and from hacks to solutions.“ Chris Heilmann (Mozilla) auf Twitter
15. Unterschied zwischen HTML und HTML5?
16. • Probier es im Internet Explorer
17. • Probier es im Internet Explorer • Funktioniert es?
18. • Probier es im Internet Explorer • Funktioniert es? • Nein?
19. • Probier es im Internet Explorer • Funktioniert es? • Nein? • Es ist HTML5! :-)
20. Was bedeutet HTML5 für Entwickler?
21. HTML5 ~= HTML + CSS + JS
22. 1989 HTML wird am CERN entwickelt.
23. 1993 Die IETF verlangt die erste Implementierung: Mosaic
24. 1996 Tim Berners-Lee gründet das World Wide Web Consortium (W3C)
25. 1996 Browserkrieg: Netscape vs. Microsoft
26. - 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
27. - 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“ ...
28. The dark age of the Web...
33. XHTML 2.0
35. Die Zeit verging ...
36. 1999 PHP 3.0 - MySQL 3.22 Apache 1.3
38. 1999 XMLHttpRequest Object
39. Die Zeit verging ...
40. seit Version 5.0 (1999) seit Version 1.0 (2004) seit Version 1.2 (2004) seit Version 7.6 (2004)
41. 2004 Apple, Mozilla und Opera gründen die WHAT WG
42. 2005 Ajax: A New Approach to Web Applications Blogposting von Jesse James Garret
44. Google Suggest Google Mail Google Maps
45. 2006 Comet
48. Push
49. Push Ajax
50. Push Ajax Push
51. Was passiert hier?
52. Content vs. Context
53. Facebook ist eine Applikation!
54. Page vs. Stream
55. Twitter ist eine Applikation!
56. Applikationen?
57. Apps!
60. online === offline
61. Ist das das neue Web?
62. Die Zukunft besteht aus Web Apps!
63. Der mobile Browser ist (fast) identisch mit dem Desktop Browser.
64. Browser haben extrem kurze Release-Zyklen.
65. Browser haben extrem kurze Release-Zyklen. Außer Microsoft und Apple!
66. Der Browser ist eine „cross platform realtime runtime“.
67. Was hat das nun mit HTML5 zu tun?
68. Requests Events
69. 2000: PHP chat style polling Client Server
70. Client Server Hey, wazzup? 2000: PHP chat style polling
71. Client Server Um, nothing actually... Hey, wazzup? 2000: PHP chat style polling
72. Client Server Hey, wazzup? 1 sec Um, nothing actually... 2000: PHP chat style polling
73. Client Server 2000: PHP chat style polling
74. Client Server Hey, wazzup? 2000: PHP chat style polling
75. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
76. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
77. Client Server 2000: PHP chat style polling
78. Client Server Hey, wazzup? 2000: PHP chat style polling
79. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling
80. Client Server Hey, wazzup? Um, nothing actually... 2000: PHP chat style polling 1 sec
81. Client Server WTF??? 2000: PHP chat style polling
82. 1 user = 1 req / sec CPU #FAIL
83. Client Server 2006: Comet style long poll
84. Client Server Hey, wazzup? 2006: Comet style long poll
85. Client Server Um, nothing actually... 1 sec 2006: Comet style long poll
86. Client Server Well ... 2006: Comet style long poll 1 sec
87. Client Server Wait ... 2006: Comet style long poll 1 sec
88. Client Server Uh, there is something! 2006: Comet style long poll 1 sec
89. Client Server No, nothing! 2006: Comet style long poll 1 sec
90. Client Server WTF??? 2006: Comet style long poll
91. 1 user = 1 apache child MEMORY #FAIL
92. Wir haben ein Problem
93. Wir brauchen Hilfe!
94. MEMORY: WIN CPU: 1/2 WIN
95. Client Client Client PHP Server
96. Was ist node.js?
97. Serverseitiges JS mit V8
98. Eventgetriebene Architektur
99. Nonblocking I/O durch Eventloop
100. Non Blocking sleep(10); echo ‘Hello, World‘; vs. setTimeout( function() { console.log(‘Hello, World‘); }, 10000 );
101. $sql = ‘SELECT * FROM users‘; $result = $conn->query($sql); vs. var query = ‘SELECT * FROM users‘; db.query(query, function(err, results, fields) {...}; );
102. Warum node.js?
103. Es ist schnell.
104. ♥ Community Love ♥
105. Schnelle, leichtgewichtige Entwicklung
106. 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! :-)
107. $ ./configure && make && make install Schnell kompiliert:
108. Viele eingebaute Bibliotheken Events Streams Debugger URL Query String HTTP OS File System
110. Heile Welt?
111. node.js hat auch seine Schattenseiten.
112. Single Process
113. node.js muss auch rechnen
114. Statische Inhalte
115. Sehr betriebssystemnah ...
116. We ♥ node.js!
117. Kenne die Schwächen deiner Infrastruktur!
118. Modi
119. Interaktiv
120. Nicht interaktiv $ node server.js
121. Demo
122. Webserver
123. 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‘);
124. Bibliotheken als NPM • Socket.IO • Backbone.js • Underscore.js • express • Connect • MySQL, redis, CouchDB
125. Kleine Helfer für node.js • Nodemon – https://github.com/remy/nodemon • Forever – https://github.com/indexzero/forever • Mehr?
126. Tools auf node.js Basis • less • compass • uglifyjs • grunt.js Dazu aber später mehr!
128. MVC mit Backbone.js Server (z.B. DB) User View Model Router URL DOM Read/Write
129. Und was ist mit dem Client?
130. 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. }
131. 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
133. Immer mehr Logik wandert in den Client. Weg vom Backend.
134. 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
135. Demo
136. <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> WebMessaging
137. 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); }); }
138. 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
139. 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>
140. Demo
141. HTML 5 Basics
142. <!DOCTYPE html>
143. <!DOCTYPE html>
144. Von HTML4 nach HTML5 KISS Keep it simple & stupid
145. Redundante und kaputte Elemente werden entfernt. Von HTML4 nach HTML5
146. HTML5 verlangt explizit nach CSS. Von HTML4 nach HTML5
147. <meta http- equiv=“Content-Type“ content=“text/html; charset=UTF-8“>
148. <meta charset=“UTF-8“>
149. <a> ist flexibler <a>, <area> erhalten ein media Attribut
150. <a href=“http:// m.twitter.com“ rel=“alternate“ media=“handheld“> Twitter Mobile</a>
151. data Attribut für eigene data-* Attribute
152. Beispiel Facebook Like <div class="fb-like" data-send="true" data- width="450" data-show- faces="true"></div>
153. <semantic web/>
154. <header> <nav> <footer> <aside> <section> <article> <header> <footer>
155. <figure> and <figcaption> <figure> <img src=”foo.png”> <figcaption> Erklärung des Bildes </figcaption> </figure>
156. <progress> <progress max=”100” min=”0” value=”25”> 25% </progress>
157. Demo
158. <svg> Vektorgrafiken in XML <canvas> Pixelgrafiken in JavaScript
159. Demo
160. HTML 5 Microdata is machine- readable data in HTML. Recursion. :-) <div itemscope> <p> Mein Name ist <span itemprop="name">Thorsten</span>. </p> </div>
161. WebForms
162. <input type="text" placeholder="Enter text here" name="placeholder">
163. <input type="text" maxlength="256" name="q" autofocus> <input type="text" maxlength="256" name="q" required="required">
164. <input type="tel" name="phonenumber"> <input type="url" name="url"> <input type="email" name="emailaddress">
165. <input type="number" min="0" max="10" step="2" value="6" />
166. <input type="number" min="0" max="10" step="2" value="6" />
167. <input type="number" min="0" max="10" step="2" value="6" />
168. <input type="number" min="0" max="10" step="2" value="6" />
169. <input type="range" min="0" max="10" step="2" value="6">
170. <input type="text" x-webit-speech>
171. <input type="text" x-webit-speech>
172. <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime">
173. <input type="color">
174. Demo
175. CSS3
176. .row:nth-child(even) { background: #cccccc; } .row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4
177. @font-face { font-family: 'Papyrus'; src: url(Papyrus.otf); } header { font-family: 'Papyrus'; } Hallo, Welt!
178. Mehr CSS3 Features...
179. 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
180. Opacity Opacity Opacity Opacity Opacity
181. HSL / HSLA Farben
182. Endlich runde Ecken! :-)
183. Gradienten
184. Shadows
185. Shadows
186. Transitions und Animations
187. Transitions und Animations
188. Transitions und Animations
189. Browser Support :-)
190. 28 % 64 % 74 % 70 % 77 % 87 % IE9 Mobile Safari Safari 6 Firefox 15 Opera 12 Chrome 22 html5test.com
191. 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.
192. Kleine Helfer für HTML5
199. Kleine Helfer für CSS
201. Fragen?
202. Danke!
203. 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