Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

SEBASTIAN SPRINGER Senior Developer @ Mayflower 30 Jahre

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

WER SEID IHR?

Slide 5

Slide 5 text

WAS BRAUCHT IHR?

Slide 6

Slide 6 text

BROWSER

Slide 7

Slide 7 text

TEXT EDITOR

Slide 8

Slide 8 text

EINE KLEINE EINFÜHRUNG

Slide 9

Slide 9 text

VS.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

DAS SOLL UNS NICHT INTERESSIEREN!

Slide 14

Slide 14 text

IST DIE ZUKUNFT!

Slide 15

Slide 15 text

BEISPIELE?

Slide 16

Slide 16 text

MOBILE WEB APPS

Slide 17

Slide 17 text

WINDOWS 8 APPS

Slide 18

Slide 18 text

GNOME APPS

Slide 19

Slide 19 text

UBUNTU APPS

Slide 20

Slide 20 text

FIREFOX OS APPS

Slide 21

Slide 21 text

DEIN BROWSER :-)

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ARTIKELVERWALTUNGS APP

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

STARTEN DER APP $ node server.js

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Demo Web App

Slide 35

Slide 35 text

FRAGEN? HILFE?

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Hallo, München

Hallo, München

Slide 39

Slide 39 text

Hallo, München

Hallo, München

Slide 40

Slide 40 text

Hallo, München

Hallo, München

Slide 41

Slide 41 text

Hallo, München

Hallo, München

Slide 42

Slide 42 text

Hallo, München

Hallo, München

Slide 43

Slide 43 text

Hallo, München

Hallo, München

Slide 44

Slide 44 text

Hallo, München

Hallo, München

Slide 45

Slide 45 text

Hallo, München

Hallo, München

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Demo Web App

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Demo Web App

Slide 51

Slide 51 text

data-*

Slide 52

Slide 52 text

Demo Web App

Slide 53

Slide 53 text

CONTENTEDITABLE

Slide 54

Slide 54 text

Demo Web App

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Demo Web App

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

JSLINT

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

“USE STRICT”

Slide 61

Slide 61 text

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)

Slide 62

Slide 62 text

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;

Slide 63

Slide 63 text

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;

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Demo Web App

Slide 68

Slide 68 text

FRAGEN?

Slide 69

Slide 69 text

KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower 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