Real Time Web Applications mit HTML5 und JavaScript - Part 1

REAL TIME WEB APPLICATIONS MIT HTML5 UND JAVASCRIPT Sebastian Springer
/ Thorsten Rinne VO RM ITTAG

SEBASTIAN SPRINGER Senior Developer @ Mayﬂower 30 Jahre

THORSTEN RINNE Senior Developer / Scrum Master / Team-Opa @
Yatego 36 Jahre

WER SEID IHR?

WAS BRAUCHT IHR?

BROWSER

TEXT EDITOR

EINE KLEINE EINFÜHRUNG

DAS SOLL UNS NICHT INTERESSIEREN!

IST DIE ZUKUNFT!

BEISPIELE?

MOBILE WEB APPS

WINDOWS 8 APPS

GNOME APPS

UBUNTU APPS

FIREFOX OS APPS

DEIN BROWSER :-)

AKTUELLE BROWSER • Google Chrome 27 • Firefox 21 •
Safari 6 • Opera 12.5 „next“ 15? • Internet Explorer 10

ARTIKELVERWALTUNGS APP

• HTML5 • CSS3 • JavaScript • node.js 0.8 /
0.10 mit express.js • SQLite 3 ARTIKELVERWALTUNGS APP

NODE + SQLITE3 • OS X $ brew install node
$ brew install sqlite3 • Linux $ apt-get install nodejs $ apt-get install sqlite3 • Windows Bitte Binaries laden!

CODE $ git clone https://github.com/sspringer82/html5workshop.git

NODE MODULE $ npm install sqlite3 $ npm install express
$ npm install websocket $ npm install less -g

EXPRESS.JS • node.js basiertes Web Framework • Inspiriert von Sinatra
(Ruby), analog zu Silex (PHP) • asynchron • http://expressjs.com/

EXPRESS.JS var express = require('express'), app = new express(); app.get('/',
function(req, res){ res.send('Hello, Munich!'); }); app.listen(8080);

STARTEN DER APP $ node server.js

IM BROWSER http://localhost:8080/index.html

Demo Web App

FRAGEN? HILFE?

STRUKTUR • HTML (Templates) • CSS • JavaScript (Libraries und
eigener Code) • LESS/SASS • Tests (lassen wir mal aussen vor) • Medien wie Bilder, Fonts, Audio, Video, usw

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

<h1>Hallo, München</h1> </body> </html> <html>

<h1>Hallo, München</h1> </body> </html> <head>

<h1>Hallo, München</h1> </body> </html> <meta charset="utf-8">

<h1>Hallo, München</h1> </body> </html> <title></title>

<h1>Hallo, München</h1> </body> </html> </head>

<h1>Hallo, München</h1> </body> </html> <body></body>

<h1>Hallo, München</h1> </body> </html> </html>

Demo Web App

data-*

Demo Web App

CONTENTEDITABLE

Demo Web App

Demo Web App

JSLINT

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

Demo Web App

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

Real Time Web Applications mit HTML5 und JavaScript - Part 1

Real Time Web Applications mit HTML5 und JavaScript - Part 1

More Decks by Thorsten Rinne

Other Decks in Technology

Featured

Transcript