Moderne Web-Apps mit HTML5 und JavaScript

THORSTEN RINNE Team Lead Engineering 36 Jahre

WER BIN ICH? • Sebastian Springer • https://github.com/sspringer82 • @basti_springer

Wer seid ihr?

AGENDA • HTML5 JavaScript APIs • CSS3 Neuerungen • ECMAScript
5 Features • Beispielapplikation

VORAUSSETZUNG

SERVERSEITE

https://github.com/sspringer82/chat

STRUKTUR • HTML (Templates) • CSS • LESS/SASS Quellen •
JavaScript (Libraries und eigener Code) • Tests • Medien wie Bilder, Fonts, Audio, Video usw.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hallo, Berlin</title> </head> <body>
<h1>Hallo, Berlin</h1> </body> </html> <!DOCTYPE html>

<h1>Hallo, Berlin</h1> </body> </html> <html>

<h1>Hallo, Berlin</h1> </body> </html> <head>

<h1>Hallo, Berlin</h1> </body> </html> <meta charset="utf-8">

<h1>Hallo, Berlin</h1> </body> </html> <title></title>

<h1>Hallo, Berlin</h1> </body> </html> </head>

<h1>Hallo, Berlin</h1> </body> </html> <body></body>

<h1>Hallo, Berlin</h1> </body> </html> </html>

JAVASCRIPT API • FullScreen API • Forms • Webworkers •
Geolocation • Storage • Ofﬂine Application

FULL SCREEN

FULL SCREEN var elem = $('#content')[0]; if (elem.requestFullscreen) { elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } go FullScreen

FULL SCREEN if(document.cancelFullScreen) { document.cancelFullScreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } cancel FullScreen

FULL SCREEN • Bitte mit Vorsicht verwenden • Styling für
z.B. Hintergrund: • -webkit-full-screen • -moz-full-screen

ELEMENTE

PROGRESS var interval = setInterval(function () { var progress =
$('progress'); if (progress.val() < progress.attr('max')) { progress.val(progress.val() + 1); } else { clearInterval(interval); } }, 10);

METER $('meter').val(100); Keine Progress-Bar! Zur Anzeige von Werten in einem
bestimmten Wertebereich

DATALIST <input list="kanzler"> <datalist id="kanzler"> <option>Angela Merkel</option> <option>Gerhard Schröder</option> ...
</datalist>

OUTPUT $('#output').on('input', function () { var nr1 = parseInt($('#nr1').val()); var
nr2 = parseInt($('#nr2').val()); $('output').val(nr1 + nr2); }); Element zur Ausgabe von Berechnungen

<input type=″...

INPUT TYPES • Viele Aufgaben, die bisher mit JavaScript erledigt
wurden, funktionieren jetzt mit HTML5 nativ • Können kaum angepasst werden

INPUT TYPES • tel • search • url • email
• date • month • week • time • number • range • color

HINWEIS datetime und datetime-local sind deprecated!

ATTRIBUTE

ATTRIBUTE • autofocus • placeholder • form • required •
autocomplete • pattern • novalidate • formaction • formenctype • formmethod • formnovalidate • formtarget

WEBWORKER

WEBWORKER • Workerthreads im Browser • Rechenintensive Prozesse auslagern •
Zugriff auf: navigator, location, XMLHttpRequest,... • Kein Zugriff auf: DOM, window, document, parent

WEBWORKER var worker = new Worker('/js/webworker.js'); worker.onmessage = function (msg)
{ $('#result').html(msg.data); };

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(); } }

WEBSOCKETS

WEBSOCKETS • Bidirektionale Kommunikation zwischen Client und Server • Protokoll
auf TCP-Basis • Eventbasiert • Sichere Variante wss://

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

WEBSOCKETS 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); }); });

WEBSOCKETS

GEOLOCATION

GEOLOCATION • Aktuelle Position des Clients • WLAN-Position • GPS-Position

GEOLOCATION var geolocation = navigator.geolocation; geolocation.getCurrentPosition(function (pos) { var posString
= 'Lat: ' + pos.coords.latitude + ' Long: ' + pos.coords.longitude; $('#position').html(posString); });

GEOLOCATION

BEISPIEL

GEOLOCATION

<!DOCTYPE html> <html> <head> </head> <link href="https://developers.google.com/maps/documentation/ javascript/examples/default.css" rel="stylesheet"> <script
src="https://maps.googleapis.com/maps/api/ js?v=3.exp&sensor=false" /> <script src="/js/geolocation2.js" /> <body> <div id="map-canvas"></div> </body> </html>

STORAGE

STORAGE • Local Storage - zeitlich unbegrenzt • Session Storage
- nur für eine Browser-Session • IndexedDB • Web SQL

<div> Items in Storage: <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>

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

OFFLINE APPLICATION

OFFLINE APPLICATION • Dateien werden nur einmalig vom Server geholt
• Manifestdatei enthält die Konﬁguration

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 ofﬂine.manifest

OFFLINE APPLICATION <html manifest="offline.manifest">

OFFLINE APPLICATION 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

CSS LEVEL 3 • In der Entwicklung seit 2000 •
Modularer Aufbau • Bekannte Module • Selectors Level 3 • Media Queries

BROWSER PREFIXES • -moz- • -ms- / -mso- • -kthml-
• -o- • -webkit- • n/a

BROWSER PREFIXES .round-corners { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
-o-border-radius: 12px; -khtml-border-radius: 12px; }

Opacity Opacity Opacity Opacity Opacity

OPACITY .my-opacity { opacity: 0.8; -ms-filter: "alpha(opacity=80)"; filter:alpha(opacity=80); }

GRADIENTEN

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%);

ANYONE?

GRADIENTEN filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );

BORDER RADIUS

BORDER RADIUS .curved { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px;
border-radius: 20px; }

BOX SHADOW

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

MEDIA QUERIES

MEDIA QUERIES @media (min-width: 1200px) { ... } @media (min-width:
768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... }

SELECTORS LEVEL3 • 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

SELECTORS LEVEL3 • p:nth-child(2n) Jedes 2. <p> Element seines Elternelements
• :root Das Rootelement eines Dokuments • :empty Jedes Element ohne Kindelemente

SELECTORS LEVEL3 • input:enabled Jedes aktive <input> Element • input:disabled
Jedes nicht aktive <input> Element • input:checked Jedes „ge-checkte“ <input> Element (Checkbox)

GRUNDLAGEN UND FORTGESCHRITTENE THEMEN • Frameworks • ECMAScript 5 •
Object.* • JSLint

FRAMEWORKS

ECMASCRIPT 5

ECMASCRIPT 5 • http://www.ecma-international.org/publications/ﬁles/ECMA-ST/ Ecma-262.pdf • JSON (parse, stringify) •
Object.* • strict mode

OBJECT.*

OBJECT.* • Erweiterbarkeit • Object.preventExtensions(obj) • Object.isExtensible(obj)

OBJECT.* • Obj.create(proto, props) • Object.keys(obj) • Object.getOwnPropertyNames(obj) • Object.getOwnPropertyDescriptor(obj,
prop) • Object.deﬁneProperty(obj, prop, desc)

OBJECT.* • Object.seal(obj)/Object.isSealed(obj) • Keine Änderungen mehr an Eigenschaften •
Object.freeze(obj)/Object.isFrozen(obj) • Keine Schreibzugriffe mehr auf Eigenschaften + seal

OBJECT.* • Object.deﬁneProperty • set: magic setter function • get:
magic getter function • value: default value • conﬁgurable: can be deleted • enumerable: can be iterated • writable: can be changed

JSLINT JSLint will hurt your feelings

JSLINT • „The JavaScript Quality Tool“ • http://www.jslint.com/ • Integriert
in • CLI • IDE

“USE STRICT”

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)

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;

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

STRICT MODE SICHERHEIT • Kein Zugriff mehr auf das globale
Objekt aus Funktionen • function f() { return this; } - undeﬁned • Kein Zugriff auf func.arguments und func.caller von außerhalb • Kein Zugriff auf Variablen in einer Funktion von außerhalb

STRICT MODE • Reservierte Wörter: implements, interface, let, package, private,
protected, public, static, und yield • Keine Funktionsdeﬁnition in Bedingungen und Schleifen

REALTIME CHAT

SERVERSEITE

PACKAGE.JSON { "dependencies": { "express": ">=3.4.x", "jade": ">=0.35.x", "socket.io": ">=0.9.x"
} }

NPM INSTALL

INDEX.JS

var express = require('express'); var app = express(); app.get('/', function
(req, res) { res.send('Hello World'); }); app.listen(8080);

EXPRESS

AUFBAU HTTP-Modul Webserver, Request, Response Connect Middleware Express Routing

ROUTING app.<method>(url, [callback...], callback) function (req, res, next) { ...
next(); } get post put delete ...

MIDDLEWARE app.use([path], function) function (req, res, next) { ... next();
}

MIDDLEWARE var dir = __dirname + ‘/images’ app.use(‘/images’, express.static(dir)); express.logger()
Access Log auf der Konsole express.bodyParser() Zugriff auf req.body express.cookieParser() Cookies in Node.js express.cookieSession({secret: 'mySecret'}) Cookiebasierte Session req.session

JADE - TEMPLATE ENGINE • Shortcuts - Attribute, Klassen, IDs
• Platzhalter • Mixins • Includes • Extends

JADE - EINBINDUNG app.set('views', __dirname + '/app/views'); app.set('view engine', 'jade');

SOCKET.IO

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

script(src="http://localhost:8080/ socket.io/socket.io.js") var socket = io.connect('http://localhost: 8080'); $('#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; });

BOWER • Package Manager • npm install -g bower

BOWER • bower search <package> • bower install <package>[#<version>] •
--save -> Installation + bower.json • bower update • bower uninstall <package> • bower list • bower lookup <package>

BOWER INSTALL • bower install jquery#1.7.0 • bower install git://github.com/pivotal/jasmin.git
• bower install http://backbonejs.org/backbone.min.js •

BOWER.JSON • name • version • dependencies • main •
devdependencies • resolutions

BOWER.JSON { "name": "Realtime Chat Application", "version": "0.1.0", "dependencies": {
"jquery": "latest" } }

GRUNT • npm install -g grunt-cli • npm install grunt
• Plugins • Gruntﬁle.js

BOOTSTRAP

BOOTSTRAP • Scaffolding (Grid, Layout, Responsive) • Base CSS (Buttons,
Forms, Tables) • Components (Navigation, Alerts, Pagination) • JavaScript (Modal, Tooltip)

BOOTSTRAP <script src="/public/js/bootstrap.js"> <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css"
href="/public/css/bootstrap- theme.min.css">

BOOTSTRAP <div class="well"> <form id="chat"> <input id="message" type="text"> <input type="submit"
value="Send" class="btn btn-primary"> </form> </div>

LESS Dynamic Stylesheet Language

LESS • Variablen • Nested Rules • Mixins

LESS - VARIABLEN @background: #FFFFE0; #messages { background-color: @background; }

LESS - NESTED RULES #head { background-color: @dark; height:25px; div
{ color: @light; background-color: @dark; &:hover { background-color: @light; color: @dark; } } }

LESS - MIXINS .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; }

USER LISTE

DISTANZ geolocation

HISTORY localstorage

LITTLE HELPERS

POLYFILLS

POLYFILLS https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyﬁlls

yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js',
'wrapper.js'] });

FRAMEWORKS

FRAMEWORKS • Bootstrap • Foundation v3 • Foundation v4 •
Skeleton • 960.gs • http://responsive.vermilion.com/compare.php

MOZILLA DEVELOPER NETWORK

FRAGEN?

KONTAKT Sebastian Springer sebastian.springer@mayﬂower.de Mayﬂower GmbH Mannhardtstr. 6 80538 München
Deutschland @basti_springer https://github.com/sspringer82 Thorsten Rinne [email protected] Yatego GmbH Kobellstr. 15 80336 München Deutschland @ThorstenRinne https://github.com/thorsten

Moderne Web-Apps mit HTML5 und JavaScript

Moderne Web-Apps mit HTML5 und JavaScript

More Decks by Thorsten Rinne

Other Decks in Technology

Featured

Transcript