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

Modernisierung von Legacy Applikationen auf HTML5

Thorsten Rinne
October 07, 2015
89

Modernisierung von Legacy Applikationen auf HTML5

Thorsten Rinne

October 07, 2015
Tweet

Transcript

  1. Sebastian Springer / Thorsten Rinne
    Modernisierung von Legacy
    Applikationen auf HTML5

    View full-size slide

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

    View full-size slide

  3. Thorsten
    • Thorsten Rinne
    • aus München
    • arbeite bei MaibornWolff GmbH
    • https://github.com/thorsten
    • @ThorstenRinne
    • Senior IT Architect

    View full-size slide

  4. Was erzählen wir euch?
    Grundlagen (HTML5 & Co.) und warum wir überhaupt
    modernisieren wollen.
    Werkzeuge und Strategien
    HTML5 JS APIs
    ECMAScript 6

    View full-size slide

  5. Webapplikationen?
    also: worüber sprechen wir denn überhaupt?

    View full-size slide

  6. Keine rein statischen
    Webseiten

    View full-size slide

  7. • Dynamische Inhalte
    • Mehrere Benutzer
    • Häufig Logik im Frontend und Backend
    • Mehrere Zielplattformen (Desktop, Mobile, etc.)
    Webapplikationen

    View full-size slide

  8. Singlepage
    Keine Seitenreloads
    Navigation innerhalb der Applikation
    Bidirektionale Kommunikation

    View full-size slide

  9. Entwickler?
    …die mit Bestandscode arbeiten “müssen”?

    View full-size slide

  10. Warum
    Modernisierung?

    View full-size slide

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

    View full-size slide

  12. Achtung: Modernisierung
    kostet Geld

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Neue Features werden
    möglich
    Durch den Einsatz neuer Technologien werden bestimmte
    Features erst möglich.

    View full-size slide

  16. …und
    Den Entwicklern eine interessante Arbeitsumgebung bieten ;)

    View full-size slide

  17. Wer macht das denn von euch schon?

    View full-size slide

  18. HTML5 Web App

    View full-size slide

  19. HTML5
    Neue Tags und Attribute zur besseren Strukturierung





    View full-size slide

  20. CSS3
    neue Selektoren
    Animationen
    Gradienten, Runde Ecken, Schatten
    Berechnungen
    Webfonts

    View full-size slide

  21. JavaScript
    ECMAScript 6 + HTML5 JS APIs
    Klassen
    Promises
    Module
    Websocket
    LocalStorage

    View full-size slide

  22. Was bekommt man
    damit?

    View full-size slide

  23. Semantik
    Sprechender Aufbau der Struktur einer Applikation.
    Die Lesbarkeit der Struktur wird erheblich verbessert.

    View full-size slide

  24. Datenhaltung
    Der Client kann seine Daten selbst vorhalten
    Caching
    Offline-Unterstützung

    View full-size slide

  25. Bessere Mobile
    Unterstützung
    Offline Application Support
    Formulare
    Geolocation
    Audio/Video

    View full-size slide

  26. Häufig verwendete Features werden nativ und damit
    schneller und komfortabler nutzbar.

    View full-size slide

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

    View full-size slide

  28. Warum ist Legacy
    Code so schlimm?

    View full-size slide

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

    View full-size slide

  30. 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ß.

    View full-size slide

  31. NIH
    Komplette Eigenentwicklung ohne Frameworks, obwohl es
    bereits Implementierungen gibt, die genau die gestellte
    Aufgabe schon erledigen.
    Bibliotheken bringen Sicherheitsupdates und
    Modernisierungen mit.

    View full-size slide

  32. Inkonsistenz
    Man sieht dem Code genau an wann er von welchem
    Entwickler geschrieben wurde.
    Struktur, Workflows, Konzepte und Benennung unterscheiden
    sich.

    View full-size slide

  33. Daraus ergeben sich
    gewisse Probleme

    View full-size slide

  34. Implementierung neuer Features und Bugfixes werden immer
    teurer

    View full-size slide

  35. Neue Technologien
    werden nicht integriert

    View full-size slide

  36. Die Lösung:
    Modernisierung
    Wir machen ab jetzt alles besser!

    View full-size slide

  37. Kein kompletter Rewrite, das Risiko ist zu hoch.

    View full-size slide

  38. Das berühmteste, gescheiterte
    Rewrite-Projekt

    View full-size slide

  39. Schritt für Schritt
    Modernisierung
    • Die Weiterentwicklung bleibt nicht stehen
    • Bugfixes ins bestehende System können integriert
    werden
    • Sicherheitsupdates können angewendet werden

    View full-size slide

  40. Strategie
    Basis schaffen
    Module identifizieren
    Modul für Modul modernisieren

    View full-size slide

  41. Basis schaffen
    Unabhängig vom bestehenden System


    Neues Seitenlayout


    Applikationsstruktur definieren
    Benötigte Bibliotheken/Frameworks integrieren

    View full-size slide

  42. Module identifizieren
    In sich geschlossene Features identifizieren
    Migrationspfad festlegen
    Auf Risiken achten
    Priorisieren

    View full-size slide

  43. Module identifizieren

    View full-size slide

  44. Modul für Modul
    modernisieren

    View full-size slide

  45. Die wichtigsten Fragen:
    Welche Features werden benötigt?
    und:
    Welche Browser müssen unterstützt werden?

    View full-size slide

  46. html5please.com

    View full-size slide

  47. css3please.com

    View full-size slide

  48. ES6 - compat table
    http://kangax.github.io/compat-table/es6/

    View full-size slide

  49. Mozilla Developer Network

    View full-size slide

  50. Browser DevTools

    View full-size slide

  51. chrome://flags
    Experimental Developer Tools experiments

    View full-size slide

  52. Performance-Messung

    View full-size slide

  53. Performance-Messung
    • Übersicht des Speicherverbrauchs
    • Hilft bei Suche nach Performanceproblemen
    • Layout oder Skripte
    • Ziel: 60 Frames pro Sekunde :-)

    View full-size slide

  54. Memory und DOM Leaks

    View full-size slide

  55. Memory und DOM Leaks
    • JavaScript CPU Profiling
    • Heap Snapshot für
    • JavaScript Objekte
    • DOM Knoten
    • Suche nach potentiellen Memory und DOM Leaks

    View full-size slide

  56. Mobile Testing

    View full-size slide

  57. Mobile Testing
    • User Agent
    • Verschiedene Endgeräte
    • Android
    • iOS
    • Windows Phone
    • Simulation von Touch Events
    • Ändern der Geolocation und des Accelerometers

    View full-size slide

  58. Dependency
    Management

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Pakete installieren
    $ bower install
    $ bower install #
    $ bower install =#
    $ bower install

    View full-size slide

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

    View full-size slide

  63. Pakete suchen
    $ bower search

    View full-size slide

  64. Pakete verwenden
    
<br/>

    View full-size slide

  65. Pakete löschen
    $ bower remove

    View full-size slide

  66. Konfiguration .bowerrc
    {
    "directory": "./components"
    }

    View full-size slide

  67. 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"

    }

    }

    View full-size slide

  68. Modernizr
    JavaScript-Bibliothek, die auf das Vorhandensein von
    Features prüft.
    http://modernizr.com/

    View full-size slide







  69. 
<br/>if (Modernizr.video) {
<br/>console.log('video supported');
<br/>} else {
<br/>console.log('video not supported');
<br/>}
<br/>






    View full-size slide







  70. 
<br/>Modernizr.load({
<br/>test: Modernizr.geolocation,
<br/>yep: 'geoYes.js',
<br/>nope: 'geoNo.js'
<br/>});
<br/>






    View full-size slide

  71. Polyfills
    Code-Baustein, der in älteren Browsern eine neuere, von
    diesen nicht unterstützte Funktion mittels eines Workarounds
    nachrüsten soll.
    wikipedia.org

    View full-size slide

  72. Polyfills
    https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
    Browser-Polyfills

    View full-size slide

  73. ES6 to ES5 Transpiler

    View full-size slide

  74. Babel
    https://babeljs.io

    View full-size slide

  75. $ npm install --global babel
    $ babel script.js > app.js

    View full-size slide

  76. HTML5 einzusetzen ist nicht wirklich problematisch, da die
    Browser Fallback-Mechanismen bieten.

    View full-size slide

  77. DOCTYPE
    Welche Version von HTML soll verwendet werden?
    Damit der Browser das HTML korrekt rendert

    View full-size slide

  78. Früher
    Heute


    View full-size slide

  79. Was macht der HTML5 Doctype bei älteren Browsern?

    View full-size slide

  80. schei? encoding

    Sorgt für die korrekte Zeichenkodierung

    View full-size slide

  81. HTML5 bringt mehr
    Semantik
    Semantische Elemente gibt es aber schon länger.

    View full-size slide

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

    View full-size slide

  83. Elemente bekannt machen
    
<br/>document.createElement('header');
<br/>

    
<br/>header {
<br/>display: block;
<br/>}
<br/>

    View full-size slide

  84. HTML5SHIV
    https://github.com/aFarkas/html5shiv

    View full-size slide

  85. HTML5SHIV
    Führt createElement durch, patcht createElement und
    createDocumentFragment, wendet grundlegende Styles an.

    Kann mit Modernizr ausgeliefert werden:

    View full-size slide

  86. Neue Typen
    • Durchwachsene Unterstützung
    • Sehr sinnvoll für mobile (wegen Tastatur-Layout)
    • Aussehen nicht standardisiert
    • Fallback: input type=“text”

    View full-size slide

  87. Neue Attribute
    • Erweitern die Möglichkeiten von Formularen
    • Validierung und Formularsteuerung
    • Unbekannte Attribute werden ignoriert

    View full-size slide

  88. Umgang mit
    Fehlermeldungen
    Zusätzliche Informationen über das title-Attribut.

    View full-size slide

  89. Form Polyfill
    • Basiert auf jQuery
    • Liefert zahlreiche Polyfills z.B. Forms, Promises,
    etc.
    • Stylingmöglichkeiten, benutzerdefinierte
    Fehlermeldungen
    http://afarkas.github.io/webshim/demos

    View full-size slide

  90. HTML5 JavaScript
    APIs

    View full-size slide

  91. Drag and Drop

    View full-size slide

  92. Drag and Drop
    Support ist über alle Browser recht gut. Die API ist eher
    „gewöhnungsbedürftig“.
    Alternative: jquery-ui DnD

    View full-size slide

  93. Video/Audio
    • Gutes Beispiel mit integriertem Fallback
    • Controls sind vollständig kontrollierbar
    • Video kann mittels JavaScript gesteuert werden

    View full-size slide

  94. 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://

    View full-size slide

  95. Web Sockets
    var socket = new WebSocket("ws://localhost", "myApp");


    socket.onopen = function () {

    socket.send("Hello Server");

    };


    socket.onmessage = function (event) {

    console.log(event.data);

    };

    View full-size slide

  96. Socket.io
    • Polyfill für Websocket
    • Fallbackmechanismen auf long polling, flash
    sockets, …
    • Broadcasting, Datenhaltung pro Verbindung, …

    View full-size slide

  97. Socket.io







    
<br/>var socket = io();
<br/>
<br/>socket.emit("Hello Server");
<br/>
<br/>socket.on('msg', function(msg){
<br/>console.log(msg);
<br/>});
<br/>






    View full-size slide

  98. Storage
    • Local Storage - zeitlich unbegrenzt
    • Session Storage - nur für eine Browser-Session
    • IndexedDB
    • Web SQL

    View full-size slide

  99. Offline Application

    View full-size slide

  100. Offline Application
    • Dateien werden nur einmalig vom Server geholt
    • Manifestdatei enthält die Konfiguration

    View full-size slide

  101. Offline Application
    CACHE MANIFEST
    index.html
    js/articles.js
    js/customers.js
    js/init.js
    js/jquery.js
    js/orders.js
    css/bootstrap.css?v=1
    NETWORK:
    orders
    offline.manifest

    View full-size slide

  102. Offline Application

    View full-size slide

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

    View full-size slide

  104. ECMAScript 6 / 2015

    View full-size slide

  105. Array find
    Wie kann ES6 Code aussehen - ein ganz einfaches Beispiel

    View full-size slide

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

    View full-size slide

  107. Frameworks
    Frameworks bieten Struktur und Konventionen. Der Einsatz
    führt zu einer verbesserten Wartbarkeit und Erweiterbarkeit.
    AngularJS
    BackboneJS
    Knockout
    ExtJS
    React

    View full-size slide

  108. Welches Framework?

    View full-size slide

  109. 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?

    View full-size slide

  110. Einführung
    • Parallelbetrieb
    • Schrittweise Einführung
    • Neue Features werden in der neuen Struktur
    entwickelt
    • Alte Struktur entfernen

    View full-size slide

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

    View full-size slide

  112. 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);

    }

    }

    View full-size slide

  113. 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/

    View full-size slide

  114. 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);

    }

    View full-size slide

  115. Modulsystem
    • Dateien laden
    • Abhängigkeiten auflösen
    • Strukturierung einer Applikation

    View full-size slide

  116. ES6 Modulsystem
    var privateVariable = 'This is a private
    Value';
    export var publicVariable = 'This is a public
    Value';
    export function getPrivateVariable() {
    return privateVariable;
    }

    View full-size slide

  117. ES6 Modulsystem
    import {publicVariable, getPrivateVariable}
    from 'module';
    console.log(publicVariable);
    console.log(getPrivateVariable());

    View full-size slide

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

    View full-size slide

  119. Vielen Dank!

    View full-size slide