Grundlagen der Entwicklung von Web-Apps

Grundlagen der Entwicklung von Web-Apps

5ca293c48862620cf1a5a1f09b1bc9ec?s=128

Thorsten Rinne

March 07, 2013
Tweet

Transcript

  1. GRUNDLAGEN DER ENTWICKLUNG VON WEB-APPS Sebastian Springer / Thorsten Rinne

    VO RM ITTAG
  2. SEBASTIAN SPRINGER Team Lead @ Mayflower 30 Jahre

  3. THORSTEN RINNE Senior Developer / Scrum Master @ Yatego 35

    Jahre
  4. WER SEID IHR?

  5. WAS BRAUCHT IHR?

  6. BROWSER

  7. TEXT EDITOR

  8. EINE KLEINE EINFÜHRUNG

  9. VS.

  10. None
  11. None
  12. None
  13. DAS SOLL UNS NICHT INTERESSIEREN!

  14. IST DIE ZUKUNFT!

  15. BEISPIELE?

  16. MOBILE WEB APPS

  17. WINDOWS 8 APPS

  18. GNOME APPS

  19. UBUNTU APPS

  20. FIREFOX OS APPS

  21. DEIN BROWSER :-)

  22. AKTUELLE BROWSER • Google Chrome 25 • Firefox 19 •

    Safari 6 • Opera 12.5 13? • Internet Explorer 10
  23. <zukunft>

  24. None
  25. ARTIKELVERWALTUNGS APP

  26. • HTML5 • CSS3 • JavaScript • node.js mit express.js

    • SQLite 3 ARTIKELVERWALTUNGS APP
  27. NODE + SQLITE3 • OS X $ brew install node

    $ brew install sqlite3 • Linux $ apt-get install nodejs $ apt-get install sqlite3 • Windows Bitte Binaries laden!
  28. CODE $ git clone https://github.com/sspringer82/html5workshop.git

  29. NODE MODULE $ npm install sqlite3 $ npm install express

    $ npm install ws $ npm install less
  30. EXPRESS.JS • node.js basiertes Web Framework • Inspiriert von Sinatra

    (Ruby), analog zu Silex (PHP) • asynchron • http://expressjs.com/
  31. EXPRESS.JS var express = require('express'), app = new express(); app.get('/',

    function(req, res){ res.send('Hello, Munich!'); }); app.listen(8080);
  32. STARTEN DER APP $ node server.js

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

  34. Demo Web App

  35. FRAGEN? HILFE?

  36. None
  37. STRUKTUR • HTML (Templates) • CSS • JavaScript (Libraries und

    eigener Code) • LESS/SASS • Tests (lassen wir mal aussen vor) • Medien wie Bilder, Fonts, Audio, Video, usw
  38. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hallo, München</title> </head> <body>

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

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

    <h1>Hallo, München</h1> </body> </html> <head>
  41. <!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">
  42. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hallo, München</title> </head> <body>

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

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

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

    <h1>Hallo, München</h1> </body> </html> </html>
  46. None
  47. <header> <nav> <footer> <aside> <section> <article> <header> <footer>

  48. Demo Web App

  49. None
  50. Demo Web App

  51. data-*

  52. Demo Web App

  53. CONTENTEDITABLE

  54. Demo Web App

  55. <progress>

  56. Demo Web App

  57. None
  58. JSLINT

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

    in • CLI • IDE
  60. “USE STRICT”

  61. 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)
  62. 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;
  63. 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;
  64. 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
  65. 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
  66. STRICT MODE • Reservierte Wörter: implements, interface, let, package, private,

    protected, public, static, und yield • Keine Funktionsdefinition in Bedingungen und Schleifen
  67. Demo Web App

  68. FRAGEN?

  69. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München

    Deutschland @basti_springer https://github.com/sspringer82 Thorsten Rinne thorsten@yatego.com Yatego GmbH Kobellstr. 15 80336 München Deutschland @ThorstenRinne https://github.com/thorsten