Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real Time Web Applications mit HTML5 und JavaScript - Part 1

Real Time Web Applications mit HTML5 und JavaScript - Part 1

Thorsten Rinne

June 02, 2013
Tweet

More Decks by Thorsten Rinne

Other Decks in Technology

Transcript

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

    View full-size slide

  2. SEBASTIAN SPRINGER
    Senior Developer @ Mayflower
    30 Jahre

    View full-size slide

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

    View full-size slide

  4. WER SEID IHR?

    View full-size slide

  5. WAS BRAUCHT IHR?

    View full-size slide

  6. EINE KLEINE EINFÜHRUNG

    View full-size slide

  7. DAS SOLL UNS NICHT
    INTERESSIEREN!

    View full-size slide

  8. IST DIE ZUKUNFT!

    View full-size slide

  9. MOBILE WEB APPS

    View full-size slide

  10. WINDOWS 8 APPS

    View full-size slide

  11. FIREFOX OS APPS

    View full-size slide

  12. DEIN BROWSER :-)

    View full-size slide

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

    View full-size slide

  14. ARTIKELVERWALTUNGS APP

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. STARTEN DER APP
    $ node server.js

    View full-size slide

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

    View full-size slide

  23. FRAGEN? HILFE?

    View full-size slide

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

    View full-size slide





  25. Hallo, München


    Hallo, München



    View full-size slide





  26. Hallo, München


    Hallo, München



    View full-size slide





  27. Hallo, München


    Hallo, München



    View full-size slide





  28. Hallo, München


    Hallo, München



    View full-size slide





  29. Hallo, München


    Hallo, München



    View full-size slide





  30. Hallo, München


    Hallo, München



    View full-size slide





  31. Hallo, München


    Hallo, München



    View full-size slide





  32. Hallo, München


    Hallo, München


    View full-size slide

  33. CONTENTEDITABLE

    View full-size slide

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

    View full-size slide

  35. “USE STRICT”

    View full-size slide

  36. 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)

    View full-size slide

  37. 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;

    View full-size slide

  38. 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;

    View full-size slide

  39. 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

    View full-size slide

  40. 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

    View full-size slide

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

    View full-size slide

  42. 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

    View full-size slide