Entwicklung moderner Web-Apps mit HTML5 und JavaScript

Transcript

1. Entwicklung moderner Web-Apps mit HTML5 und JavaScript Thorsten Rinne / Sebastian Springer
2. Sebastian Springer Team Lead @ Mayflower
3. Thorsten Rinne Team Lead Engineering @ Yatego
4. Kontakt • Sebastian • sebastian.springer@mayflower.de • @basti_springer • Thorsten • thorsten@yatego.com • @ThorstenRinne
5. Wer seid ihr?
6. • Browser • Yeoman = Bower + Grunt + Awesomeness • HTML5 und JavaScript APIs • Unsere Web App • Tipps & Tricks
7. Was braucht ihr?
9. Editor
10. Browser
12. Welche Versionen? • Chrome latest (derzeit Version 32) • Chromium latest (derzeit Version 34) • Firefox latest (derzeit Version 27) • Firefox Nightly latest (derzeit Version 30) • Safari latest (derzeit Version 6.1 bzw 7) • Opera kann man sich sparen, da wie Chrome
13. Fehlt da nicht jemand?
15. Welche IE Versionen?
16. • Internet Explorer 7 (??) • Internet Explorer 8 (?) • Internet Explorer 9 • Internet Explorer 10 (?) • Internet Explorer 11
17. Automatisierung
19. Entwickler sind faul.
20. • Linting • Abhängigkeiten auflösen • Zusammenfügen und Kompilieren • Testing • Debug Code entfernen
21. The JavaScript Task Runner $ npm install grunt-cli -g
22. The JavaScript Task Runner • aufgabenbasiertes Kommandozeilen-Tool • ähnlich make / rake / ant / phing • Konfiguration in JavaScript • Große Community • Hunderte Plugins • Linting, Concat, Watcher, Testing out of the box
23. Grunt installieren $ cd /path/to/project $ npm install grunt --save-dev
24. package.json { "name": „chat.js", "version": "1.0.0", "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.4.1", "grunt-contrib-uglify": "~0.2.2" }, "engines": { "node": ">=0.10.0" } }
25. Gruntfile.js module.exports = function(grunt) { ! grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.registerTask('default', ['uglify']); ! };
26. Grunt Tasks // Run Jasmine and DalekJS tests grunt.registerTask(
 'testrun',
 ['jshint', 'jasmine', 'dalek'] ); ! // Build production grunt.registerTask(
 'production', ['copy', 'less', 'cssmin', 'jshint', 'uglify'] );
27. The JavaScript Task Runner • http://gruntjs.com • http://gruntjs.com/plugins
28. Linting • JSHint oder JSLint • .jshintrc $ npm install grunt-contrib-jshint --save-dev
29. LiveReload • Plugin • Chrome • Firefox • Safari • Triggert Seitenreload via grunt watch • Browser Extensions auf http://livereload.com/
30. Package Manager für das Web • Installieren und Entfernen von Paketen • Keine Abhängigkeiten • keine sudo Rechte nötig • Schnell installiert:
 
 $ npm install bower -g
31. Pakete installieren $ bower install $ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version>
32. Paket-Quellen • Registrierte Bower-Pakete wie z.B. jQuery • Git-Repositories • Lokale Ordner • URLs mit .zip/.tar.gz Dateien • Werden normal nach bower_components installiert
33. Pakete suchen $ bower search angular Search results: ! angular git://github.com/angular/bower-angular.git angular-mocks git://github.com/angular/bower-angular-mocks.git angular-resource git://github.com/angular/bower-angular-resource.git angular-scenario git://github.com/angular/bower-angular-scenario.git angular-cookies git://github.com/angular/bower-angular-cookies.git angular-sanitize git://github.com/angular/bower-angular-sanitize.git angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
34. Pakete verwenden <script type="text/javascript" 
 src="/components/jquery/jquery.min.js">
 </script>
35. Pakete löschen $ bower remove <package> $ bower remove jasmine
36. Konfiguration .bowerrc { "directory": "public/vendor" }
37. Konfiguration bower.json {
 "name": "yatego.com",
 "version": "2.0.0",
 "dependencies": {
 "jquery": "1.10.2",
 "bootstrap": "3.0.0",
 "modernizr": "2.6.2"
 },
 "devDependencies": {
 "jasmine": "~1.3.1", },
 "resolutions": {
 "jquery": "1.10.2"
 }
 }
38. Packen und Kompilieren • grunt-contrib-copy • grunt-contrib-concat • grunt-contrib-uglify • grunt-contrib-cssmin • grunt-contrib-imagemin
39. Schön. Und nun?
40. Geht das nicht noch einfacher?
41. Yeoman!
42. Yeoman • Scaffolding neuer Apps • Schreibt Grunt Konfiguration • Yeoman = Grunt + Bower + Awesomeness • über 500 Generatoren • Installation
 
 $ npm install -g yo

43. Yeoman $ npm install -g generator-webapp
 
 $ cd /path/to/webroot
 
 $ mkdir jsdays-app
 
 $ cd jsdays-app
 
 $ yo webapp

44. Yeoman und Grunt $ grunt server $ grunt test $ grunt build

45. Generator WebApp • Watcher für HTML, CSS und JS mit LiveReload • Builtin Webserver auf Port 9000 • JSHint • Mocha-Tests • Bootstrap 3
46. DEMO
47. Verfügbare Generatoren • AngularJS • Bootstrap • WordPress • EmberJS • Firefox OS Apps • ExpressJS • Laravel • Knockout • Jekyll • Phonegap • Meteor • Symfony2
49. Struktur • Frontend • JavaScript • LESS / CSS • Media • Tests • Backend • MVC • Templates • Routes • Tests
50. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <!DOCTYPE html>
51. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <html>
52. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <head>
53. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <meta charset="utf-8">
54. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <title></title>
55. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> </head>
56. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> <body></body>
57. <header> <nav> <footer> <aside> <section> <article> <header> <footer>
58. <!DOCTYPE html> <html> <head>
 <meta charset="utf-8"> <title>Hallo, München</title> </head> <body> <h1>Hallo, München</h1> </body> </html> </html>
59. JavaScript API • FullScreen API • Forms • Webworkers • Geolocation • Storage • Offline Application
60. Full Screen
61. var elem = $('#content')[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } Full Screen
62. Full Screen if(document.cancelFullScreen) { document.cancelFullScreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
63. • Bitte mit Vorsicht verwenden • Styling für z.B. Hintergrund: • -webkit-full-screen • -moz-full-screen Full Screen
64. Forms
65. Progress var interval = setInterval(function () { var progress = $('progress'); ! if (progress.val() < progress.attr('max')) { progress.val(progress.val() + 1); } else { clearInterval(interval); } }, 10);
66. Meter $('meter').val(100); Keine Progress-Bar! Zur Anzeige von Werten in einem bestimmten Wertebereich
67. Datalist <input list="kanzler"> ! <datalist id="kanzler"> <option>Angela Merkel</option> <option>Gerhard Schröder</option> ... </datalist>
68. output $('#output').on('input', function () { var nr1 = parseInt($('#nr1').val()); var nr2 = parseInt($('#nr2').val()); $('output').val(nr1 + nr2); }); Element zur Ausgabe von Berechnungen
69. <input type="...
70. Input Types • Viele Aufgaben, die bisher mit JavaScript erledigt wurden, funktionieren jetzt mit HTML5 nativ • Können (kaum) angepasst werden
72. Input types • tel • search • url • email • date • month • week • time • number • range • color
73. HINWEIS datetime und datetime-local sind deprecated!
75. Attribute • autofocus • placeholder • form • required • autocomplete • pattern • dirname • novalidate • formaction • formenctype • formmethod • formnovalidate • formtarget
76. Webworker
77. Webworker • Workerthreads im Browser • Rechenintensive Prozesse auslagern • Zugriff auf: navigator, location, XMLHttpRequest,... • Kein Zugriff auf: DOM, window, document, parent
78. Webworker var worker = new Worker('/js/ webworker.js'); worker.onmessage = function (msg) { $('#result').html(msg.data); };
79. Webworker var i, n = 1, results = 1; outerLoop: while (true) { n += 1; for (i = 2; i <= Math.sqrt(n); i += 1) { if (n % i === 0) { continue outerLoop; } } self.postMessage(n); results += 1; if (results >= 1000) { self.close(); } }
81. Websockets
82. Websockets • Bidirektionale Kommunikation zwischen Client und Server • Protokoll auf TCP-Basis • Eventbasiert • Sichere Variante wss://
83. Websockets var addr = 'ws://localhost:8181/'; var socket = new WebSocket(addr, 'myapp'); ! $('#sayHello').on('click', function () { socket.send('Hello Server'); }); ! socket.onmessage = function (msg) { $('#response').html(msg.data); }; !
84. var WebSocketServer = require('websocket').server; var http = require('http'); var server = http.createServer().listen(8181); wsServer = new WebSocketServer({ httpServer: server, autoAcceptConnections: false }); wsServer.on('request', function(req) { var connection = req.accept('myapp', req.origin); ! connection.on('message', function(message) { connection.sendUTF("Hello Client!"); console.log(message.utf8Data); }); });
85. Websockets
87. Geolocation • Aktuelle Position des Clients • WLAN-Position • GPS-Position
88. Geolocation var geolocation = navigator.geolocation; ! geolocation.getCurrentPosition(function (pos) { var posString = 'Lat: ' + pos.coords.latitude + ' Long: ' + pos.coords.longitude; ! $('#position').html(posString); });
89. Geolocation
90. Geolocation
91. <!DOCTYPE html> <html> <head> </head> <link href="//developers.google.com/maps/ documentation/javascript/examples/default.css" rel="stylesheet"> <script src="//maps.googleapis.com/maps/ api/js?v=3.exp&sensor=false" /> <script src="/js/geolocation2.js" /> <body> <div id="map-canvas"></div> </body> </html>
92. function initialize() { ! navigator.geolocation.getCurrentPosition(function (pos) { var myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); var mapOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); ! var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); }); } ! google.maps.event.addDomListener(window, 'load', initialize);
93. Storage
94. Storage • Local Storage - zeitlich unbegrenzt • Session Storage - nur für eine Browser-Session • IndexedDB • Web SQL
95. <div> Items in Storage: &nbsp;<span id="itemCount"></span> </div> <table id="content"> <thead> <tr><th>key</th><th>value</th><th></th></tr> </thead> <tbody></tbody> </table> <div id="add"> <div> <label class="control-label">key:</label> <input id="storageKey"> </div> <div> <label class="control-label">value:</label> <input id="storageVal"> </div> <div> <button id="save">OK</button> </div> </div>
96. var writeLine = function (k, v) { var line = '<tr><td>' + k + '</td><td>' + v + '</td><td><button data-value="' + k + '">delete' + '</button></td></tr>'; ! $('#content tbody').append(line); writeStorageLength(); }; ! ! for (var i = 0; i < localStorage.length; i++) { k = localStorage.key(i); v = localStorage.getItem(k); writeLine(k, v); }
97. var writeStorageLength = function () { $('#itemCount').html(localStorage.length); }; $('#save').on('click', function () { var k = $('#storageKey').val(); var v = $('#storageVal').val(); localStorage.setItem(k, v); writeLine(k, v); }); ! $('#content').on('click', function (e) { localStorage.removeItem((e.target). data('value')); $(e.target).closest('tr').remove(); writeStorageLength(); });
99. Offline Application
100. Offline Application • Dateien werden nur einmalig vom Server geholt • Manifestdatei enthält die Konfiguration
101. Offline Application CACHE MANIFEST index.html ! js/articles.js js/customers.js js/init.js js/jquery.js js/orders.js ! css/bootstrap.css?v=1 ! NETWORK: orders offline.manifest
102. Offline Application <html manifest="offline.manifest">
103. Creating Application Cache with manifest http:// localhost:8080/offline.manifest Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 7) http:// localhost:8080/js/customers.js Application Cache Progress event (1 of 7) http:// localhost:8080/css/bootstrap.css?v=1 Application Cache Progress event (2 of 7) http:// localhost:8080/js/jquery.js Application Cache Progress event (3 of 7) http:// localhost:8080/js/articles.js Application Cache Progress event (4 of 7) http:// localhost:8080/index.html Application Cache Progress event (5 of 7) http:// localhost:8080/js/init.js Application Cache Progress event (6 of 7) http:// localhost:8080/js/orders.js Application Cache Progress event (7 of 7) Application Cache Cached event
104. HTML5 Demos:
 github.com/thorsten/html5demos
106. CSS LEVEL 3 • In der Entwicklung seit 2000 • Modularer Aufbau • Bekannte Module • Selectors Level 3 • Media Queries
107. Browser Prefixes • -moz- • -ms- / -mso- • -kthml- • -o- • -webkit- • n/a
108. Browser Prefixes .round-corners { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -khtml-border-radius: 12px; }
109. Opacity Opacity Opacity Opacity
110. OPACITY .my-opacity { opacity: 0.8; -ms-filter: "alpha(opacity=80)"; filter:alpha(opacity=80); }
111. GRADIENTEN
112. Gradienten background: linear-gradient(135deg, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
113. Anyone?
114. Gradienten filter: progid: DXImageTransform.Microsoft.gradient(
 startColorstr='#4c4c4c', endColorstr='#131313',
 GradientType=1
 );
115. Border Radius
116. Border Radius .curved { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
117. Box Shadow
118. Box Shadow .shadow { -webkit-box-shadow: 
 2px 2px 2px 2px rgba(0, 0, 0, 1); box-shadow: 
 2px 2px 2px 2px rgba(0, 0, 0, 1); }
119. Media Queries
120. Media Queries @media (min-width: 1200px) {
 ... } @media (min-width: 768px) and (max-width: 979px) { ... } @media (max-width: 767px) {
 ... } @media (max-width: 480px) {
 ... }
121. Selektoren Level 3 • a[src^="https"]
 Jedes <a> Element, dessen src-Attribut mit https beginnt • a[src$=".pdf"]
 Jedes <a> Element, dessen src-Attribut mit .pdf endet • a[src*="jsdays"]
 Jedes <a> Element, dessen src-Attribut mit jsdays beinhaltet
122. Selektoren Level 3 • p:nth-child(2n)
 Jedes 2. <p> Element seines Elternelements • :root
 Das Rootelement eines Dokuments • :empty
 Jedes Element ohne Kindelemente
123. Selektoren Level 3 • input:enabled
 Jedes aktive <input> Element • input:disabled
 Jedes nicht aktive <input> Element • input:checked
 Jedes „ge-checkte“ <input> Element (Checkbox)
125. Grundlagen und fortgeschrittene Themen • Modulloader • Frameworks • ECMAScript 5
126. Modulloader • Keine <script>-Tags zum Laden • Abhängigkeiten auflösen • AMD Modules (Asynchronous Module Definition)
127. Modulloader • define: Wenn man ein Modul erstellen möchte, auf das weitere Module aufbauen • require: Wenn man Dinge laden und verwenden möchte
128. Modulloader define(
 “name”, 
 [deps...], 
 function (deps) {
 ...
 return x;
 });
129. Modulloader require(
 [deps...], 
 function (deps) {
 ...
 });
130. Frameworks
132. ECMAScript 5
133. ECMAScript 5 • http://www.ecma-international.org/publications/files/ ECMA-ST/Ecma-262.pdf • JSON (parse, stringify) • Object.* • Strict Mode
134. JSLINT „JSLint will hurt your feelings“
135. JSLINT • „The JavaScript Quality Tool“ • http://www.jslint.com/ • Integriert in • CLI • IDE
136. “use strict”
137. Strict Mode - Mehr Fehler • Keine versehentlichen globals (ReferenceError) • Schärfere Regeln bei Zuweisungen • Non-writable, getter-only, neue Properties bei non-extensible Objekten • Kein Löschen von nicht löschbaren Eigenschaften (prototype) • Eindeutige Propertynamen • Eindeutige Namen für Argumente (function (a, a, b)...) • Keine Oktalnotation (z.B. 012 - SyntaxError)
138. Strict Mode
     Einfachere Benutzung • “with” ist verboten • (var x = 1; with (obj) { x};) • Keine neuen Variablen mit “eval” • eval(“var x”); • Keine Variablen löschen • var x = 123; delete x;
139. Strict Mode
     Eval & Arguments • eval und arguments können nicht mehr mit anderen Werten belegt oder an einen Kontext gebunden werden • arguments kann nicht mehr durch Aliases verändert werden • function func(arg) { var arg = 15; return [arg, arguments[0]]}; • arguments.callee existiert nicht mehr - TypeError
140. Strict Mode
     Sicherheit • Kein Zugriff mehr auf das globale Objekt aus Funktionen • function f() { return this; } - undefined • Kein Zugriff auf func.arguments und func.caller von außerhalb • Kein Zugriff auf Variablen in einer Funktion von außerhalb
141. Strict Mode • Reservierte Wörter: implements, interface, let, package, private, protected, public, static, und yield • Keine Funktionsdefinition in Bedingungen und Schleifen
142. Object.* • Erweiterbarkeit • Object.preventExtensions(obj) • Object.isExtensible(obj)
143. Object.* • Obj.create(proto, props) • Object.keys(obj) • Object.getOwnPropertyNames(obj) • Object.getOwnPropertyDescriptor(obj, prop) • Object.defineProperty(obj, prop, desc)
144. Object.* • Object.seal(obj)/Object.isSealed(obj) • Keine Änderungen mehr an Eigenschaften • Object.freeze(obj)/Object.isFrozen(obj) • Keine Schreibzugriffe mehr auf Eigenschaften + seal
145. Object.* • Object.defineProperty • set: magic setter function • get: magic getter function • value: default value • configurable: can be deleted • enumerable: can be iterated • writable: can be changed
147. Chat
148. Realtime Chat • express.js • Handlebars Template Engine • Socket.IO • jQuery • Bootstrap 3
149. github.com/thorsten/chat-js
150. package.json { "name": "chat.js", "version": "1.0.0", "dependencies": { "express": "~3.4.8", "express-hbs": "~0.7.9", "socket.io": "~0.9.x" }, "repository": { "type": "git", "url": "git://github.com/thorsten/chat-js.git" } }
151. $ npm install $ bower install $ grunt
153. socket.io var http = require('http'); var server = http.createServer(app); server.listen(8080); var io = require('socket.io').listen(server); ! io.sockets.on('connection', function (socket) { ! socket.on('msg', function(message) { console.log(message); }); ! });
154. script(src="http://localhost:3000/socket.io/ socket.io.js") var socket = io.connect('http://localhost:3000'); ! $('#chat').on('submit', function (e) { e.preventDefault(); var value = $('#message').val(); $('#message').val(''); $('#message').focus(); $('#messages').append(value + '<br />'); ! socket.emit('msg', value); return false; });
155. „App Insights“
157. Bootstrap • Scaffolding (Grid, Layout, Responsive) • Base CSS (Buttons, Forms, Tables) • Components (Navigation, Alerts, Pagination) • JavaScript (Modal, Tooltip)
158. Bootstrap <script src="/public/js/bootstrap.js"> <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.min.css">
159. Bootstrap <div class="well"> <form id="chat"> <input id="message" type="text"> <input type="submit" value="Send" class="btn btn-primary"> </form> </div>
160. Dynamic Stylesheet Language
161. LESS • Variablen • Nested Rules • Mixins
162. LESS: Variablen @background: #FFFFE0; ! #messages { background-color: @background; }
163. LESS: Nested Rules #head { background-color: @dark; height:25px; div { color: @light; background-color: @dark; &:hover { background-color: @light; color: @dark; } } }
164. .rounded-corners (@radius: 10px;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } ! #info { .rounded-corners(5px); width: 250px; margin: 10px; padding-left: 5px; background-color: lightgreen; } LESS - Mixins
165. Login
167. Chat
170. CANVAS
174. Little Helpers
175. Browser DevTools
176. chrome://flags Experimental Developer Tools experiments
177. Live editieren und speichern
178. Performance-Messung
179. Performance-Messung • Übersicht des Speicherverbrauchs • Hilft bei Suche nach Performanceproblemen • Layout oder Skripte • Ziel: 60 Frames pro Sekunde :-)
180. Memory und DOM Leaks
181. Memory und DOM Leaks • JavaScript CPU Profiling • Heap Snapshot für • JavaScript Objekte • DOM Knoten • Suche nach potentiellen Memory und DOM Leaks
182. Mobile Testing
183. Mobile Testing • User Agent • Verschiedene Endgeräte • Android • iOS • Windows Phone • Simulation von Touch Events • Ändern der Geolocation und des Accelerometers
186. POLYFILLS
187. POLYFILLS https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
189. yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
190. Frameworks
191. Frameworks • Bootstrap • Ratchet v2 • Foundation v3 • Foundation v4 • Skeleton • 960.gs • http://responsive.vermilion.com/compare.php
193. Mozilla Developer Network
195. FRAGEN?
196. Kontakt Thorsten Rinne! thorsten@yatego.com ! Yatego GmbH Kobellstr. 15 80336 München Deutschland ! @ThorstenRinne ! https://github.com/thorsten Sebastian Springer! sebastian.springer@mayflower.de ! Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland ! @basti_springer ! https://github.com/sspringer82