Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Modernisierung von Legacy Applikationen auf HTML5

Thorsten Rinne
October 07, 2015
93

Modernisierung von Legacy Applikationen auf HTML5

Thorsten Rinne

October 07, 2015
Tweet

Transcript

  1. Sebastian • Sebastian Springer • aus München • arbeite bei

    Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant, Trainer, Autor
  2. Thorsten • Thorsten Rinne • aus München • arbeite bei

    MaibornWolff GmbH • https://github.com/thorsten • @ThorstenRinne • Senior IT Architect
  3. Was erzählen wir euch? Grundlagen (HTML5 & Co.) und warum

    wir überhaupt modernisieren wollen. Werkzeuge und Strategien HTML5 JS APIs ECMAScript 6
  4. • Dynamische Inhalte • Mehrere Benutzer • Häufig Logik im

    Frontend und Backend • Mehrere Zielplattformen (Desktop, Mobile, etc.) Webapplikationen
  5. Warum? • Das müsste man doch mal schön machen •

    Ich hab da kein gutes Gefühl • Jetzt weiss ich, wie es besser geht • Das ist zäh und anstrengend und macht überhaupt keinen Spaß so zu entwickeln
  6. zukunftssicher bleiben Die technische Entwicklung bleibt nicht stehen Je länger

    man wartet, desto größer wird die zu überbrückende Lücke und das kostet dann noch mehr Geld. Eine Applikation lebt schließlich nicht nur für ein Jahr.
  7. langfristig Zeit sparen Mit neuen Technologien können Probleme schneller/besser/ einfacher

    gelöst werden …und damit auch Geld sparen Langfristig werden Workarounds überflüssig.
  8. Legacy Worauf bauen wir auf? Wir starten häufig nicht auf

    der grünen Wiese, sondern müssen mit bestehendem Quellcode arbeiten. Der bestehende Quellcode wird nicht verworfen, weil schon viel Wissen (und Geld) darin steckt.
  9. Gewachsene Strukturen Es wurden Features nicht sauber integriert Es musste

    schnell gehen, man wusste nicht, wie es am besten gemacht werden soll und danach wurde nicht aufgeräumt.
  10. Veraltet Alte Versionen von Bibliotheken Direkte Modifikationen und eigene Patches

    in den Bibliotheken machen ein Update unmöglich. Der Sprung auf eine neue Version lohnt sich im Moment nicht. Also wird gewartet und irgendwann ist der Sprung zu groß.
  11. NIH Komplette Eigenentwicklung ohne Frameworks, obwohl es bereits Implementierungen gibt,

    die genau die gestellte Aufgabe schon erledigen. Bibliotheken bringen Sicherheitsupdates und Modernisierungen mit.
  12. Inkonsistenz Man sieht dem Code genau an wann er von

    welchem Entwickler geschrieben wurde. Struktur, Workflows, Konzepte und Benennung unterscheiden sich.
  13. Schritt für Schritt Modernisierung • Die Weiterentwicklung bleibt nicht stehen

    • Bugfixes ins bestehende System können integriert werden • Sicherheitsupdates können angewendet werden
  14. Basis schaffen Unabhängig vom bestehenden System
 
 Neues Seitenlayout
 


    Applikationsstruktur definieren Benötigte Bibliotheken/Frameworks integrieren
  15. Performance-Messung • Übersicht des Speicherverbrauchs • Hilft bei Suche nach

    Performanceproblemen • Layout oder Skripte • Ziel: 60 Frames pro Sekunde :-)
  16. Memory und DOM Leaks • JavaScript CPU Profiling • Heap

    Snapshot für • JavaScript Objekte • DOM Knoten • Suche nach potentiellen Memory und DOM Leaks
  17. Mobile Testing • User Agent • Verschiedene Endgeräte • Android

    • iOS • Windows Phone • Simulation von Touch Events • Ändern der Geolocation und des Accelerometers
  18. Dependency Management • Wer hat sein jQuery ins Repository committed?

    • Probleme: • Abhängigkeiten müssen manuell aufgelöst werden • Versionsupdates werden gerne vergessen • Dokumentation verteilt • Versionen möglicherweise unbekannt
  19. Bower Package Manager für das Web • Installieren und Entfernen

    von Paketen • Keine Abhängigkeiten • keine sudo Rechte nötig • Schnell installiert:
 
 $ npm install bower -g
  20. Pakete installieren $ bower install <package> $ bower install <package>#<version>

    $ bower install <name>=<package>#<version> $ bower install
  21. Paket-Quellen • Registrierte Bower-Pakete wie z.B. jQuery • Git-Repositories •

    Lokale Ordner • URLs mit .zip/.tar.gz Dateien • Werden normal nach bower_components installiert
  22. Konfiguration bower.json {
 "name": „maibornwolff.de",
 "version": "2.0.0",
 "dependencies": {
 "jquery":

    "2.1.1",
 "bootstrap": "3.3.5",
 "modernizr": "3.0.0"
 },
 "devDependencies": {
 "jasmine": "~2.3.4", },
 "resolutions": {
 "jquery": "2.1.1"
 }
 }
  23. <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript"

    src="modernizr.js"></script>
 <script>
 if (Modernizr.video) {
 console.log('video supported');
 } else {
 console.log('video not supported');
 }
 </script>
 </head>
 <body>
 
 </body>
 </html>
  24. <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript"

    src="modernizr.js"></script>
 <script>
 Modernizr.load({
 test: Modernizr.geolocation,
 yep: 'geoYes.js',
 nope: 'geoNo.js'
 });
 </script>
 </head>
 <body>
 
 </body>
 </html>
  25. Polyfills Code-Baustein, der in älteren Browsern eine neuere, von diesen

    nicht unterstützte Funktion mittels eines Workarounds nachrüsten soll. wikipedia.org
  26. Unbekannte Tags Was machen ältere Browser aus unbekannten Tags? In

    den meisten Fällen werden unbekannte Tags als div oder span gerendert. Kann aber zu undefiniertem Verhalten kommen.
  27. HTML5SHIV Führt createElement durch, patcht createElement und createDocumentFragment, wendet grundlegende

    Styles an. <!--[if lt IE 9]>
 <script src="html5shiv.js"></script>
 <![endif]--> Kann mit Modernizr ausgeliefert werden:
  28. Neue Typen • Durchwachsene Unterstützung • Sehr sinnvoll für mobile

    (wegen Tastatur-Layout) • Aussehen nicht standardisiert • Fallback: input type=“text”
  29. Neue Attribute • Erweitern die Möglichkeiten von Formularen • Validierung

    und Formularsteuerung • Unbekannte Attribute werden ignoriert
  30. Form Polyfill • Basiert auf jQuery • Liefert zahlreiche Polyfills

    z.B. Forms, Promises, etc. • Stylingmöglichkeiten, benutzerdefinierte Fehlermeldungen http://afarkas.github.io/webshim/demos
  31. Drag and Drop Support ist über alle Browser recht gut.

    Die API ist eher „gewöhnungsbedürftig“. Alternative: jquery-ui DnD
  32. Video/Audio • Gutes Beispiel mit integriertem Fallback • Controls sind

    vollständig kontrollierbar • Video kann mittels JavaScript gesteuert werden
  33. Web Sockets • Bidirektionale Kommunikation zwischen Client und Server •

    Der Server kann einem Client aktiv Nachrichten schicken • Eigenständiges Protokoll auf gleicher Ebene wie HTTP • Sichere Variante wss://
  34. Web Sockets var socket = new WebSocket("ws://localhost", "myApp");
 
 socket.onopen

    = function () {
 socket.send("Hello Server");
 };
 
 socket.onmessage = function (event) {
 console.log(event.data);
 };
  35. Socket.io • Polyfill für Websocket • Fallbackmechanismen auf long polling,

    flash sockets, … • Broadcasting, Datenhaltung pro Verbindung, …
  36. Socket.io <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 


    <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io();
 
 socket.emit("Hello Server");
 
 socket.on('msg', function(msg){
 console.log(msg);
 });
 </script>
 </head>
 <body>
 
 </body>
 </html>
  37. Storage • Local Storage - zeitlich unbegrenzt • Session Storage

    - nur für eine Browser-Session • IndexedDB • Web SQL
  38. Offline Application • Dateien werden nur einmalig vom Server geholt

    • Manifestdatei enthält die Konfiguration
  39. 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
  40. Bibliotheken Stellen etablierte Lösungsansätze zur Verfügung. Erspart Schreibarbeit und hilft

    beim Umgang mit Inkompatibilitäten von Browsern. Beispiele: - lodash: Hilfsfunktionen wie find, map, reduce, etc. - jquery: DOM-Manipulation, Ajax, etc.
  41. Frameworks Frameworks bieten Struktur und Konventionen. Der Einsatz führt zu

    einer verbesserten Wartbarkeit und Erweiterbarkeit. AngularJS BackboneJS Knockout ExtJS React
  42. Welches Framework • Aufgabenstellung beachten - kann das Framework die

    Anforderungen erfüllen • Maintenance - wird das Framework weiterentwickelt? Wer steht hinter dem Framework • Lizenzmodell - Open Source oder Lizenzgebühren • Dokumentation - gibt es Ressourcen, um das Framework zu erlernen • Erfahrung - gibt es Entwickler im Team die wissen wie mit dem Framework gearbeitet wird?
  43. Einführung • Parallelbetrieb • Schrittweise Einführung • Neue Features werden

    in der neuen Struktur entwickelt • Alte Struktur entfernen
  44. Klassen • Strukturen in JavaScript • Stellen Funktionen zu einem

    bestimmten Thema zur Verfügung • Vererbung in JavaScript leicht gemacht • Wrapper um Prototypen • Können lose Ansammlungen von Funktionen verhindern • Benötigt aktuell noch einen Transpiler
  45. class Person extends User {
 constructor (name, age) {
 super(name);


    this.age = age;
 }
 
 getAge() {
 return this.age;
 }
 
 setAge(value) {
 this.age = age;
 }
 
 static createUser(name, age) {
 return new Person(name, age);
 }
 }
  46. Promises • Handle für Asynchrone Funktionen • Können zur Flusssteuerung

    verwendet werden • Abbildung logischer AND und OR Verknüpfungen • Erlauben Registrierung mehrerer Callbacks auf eine asynchrone Operation • Polyfill: https://github.com/tildeio/rsvp.js/
  47. function myAsyncFunction() {
 return new Promise(function(resolve, reject) {
 setTimeout(function() {


    resolve('Hello World');
 }, 1000);
 });
 }
 
 var promise = myAsyncFunction();
 promise.then(success, failure);
 
 function success(data) {
 console.log(data);
 }
 
 function failure(data) {
 console.log(data);
 }
  48. ES6 Modulsystem var privateVariable = 'This is a private Value';

    export var publicVariable = 'This is a public Value'; export function getPrivateVariable() { return privateVariable; }
  49. Kontakt Thorsten Rinne [email protected] MaibornWolff GmbH Theresienhöhe 13 München @ThorstenRinne

    https://github.com/thorsten Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 München @basti_springer https://github.com/sspringer82