Modernisierung von Legacy Applikationen auf HTML5

Transcript

1. Sebastian Springer / Thorsten Rinne Modernisierung von Legacy Applikationen auf HTML5
2. Sebastian • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant, Trainer, Autor
3. Thorsten • Thorsten Rinne • aus München • arbeite bei MaibornWolff GmbH • https://github.com/thorsten • @ThorstenRinne • Senior IT Architect
4. Was erzählen wir euch? Grundlagen (HTML5 & Co.) und warum wir überhaupt modernisieren wollen. Werkzeuge und Strategien HTML5 JS APIs ECMAScript 6
5. Webapplikationen? also: worüber sprechen wir denn überhaupt?
6. Keine rein statischen Webseiten
7. • Dynamische Inhalte • Mehrere Benutzer • Häufig Logik im Frontend und Backend • Mehrere Zielplattformen (Desktop, Mobile, etc.) Webapplikationen
9. Singlepage Keine Seitenreloads Navigation innerhalb der Applikation Bidirektionale Kommunikation
10. Entwickler? …die mit Bestandscode arbeiten “müssen”?
11. Warum Modernisierung?
12. 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
13. Achtung: Modernisierung kostet Geld
14. 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.
15. 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.
16. Neue Features werden möglich Durch den Einsatz neuer Technologien werden bestimmte Features erst möglich.
17. …und Den Entwicklern eine interessante Arbeitsumgebung bieten ;)
18. Wer macht das denn von euch schon?
19. HTML5 Web App
20. HTML5 Neue Tags und Attribute zur besseren Strukturierung <section> <nav> <header> <footer> …
21. CSS3 neue Selektoren Animationen Gradienten, Runde Ecken, Schatten Berechnungen Webfonts
22. JavaScript ECMAScript 6 + HTML5 JS APIs Klassen Promises Module Websocket LocalStorage
23. Was bekommt man damit?
24. Semantik Sprechender Aufbau der Struktur einer Applikation. Die Lesbarkeit der Struktur wird erheblich verbessert.
25. Datenhaltung Der Client kann seine Daten selbst vorhalten Caching Offline-Unterstützung
26. Bessere Mobile Unterstützung Offline Application Support Formulare Geolocation Audio/Video
27. Häufig verwendete Features werden nativ und damit schneller und komfortabler nutzbar.
28. Legacy?
29. 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.
30. Warum ist Legacy Code so schlimm?
31. 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.
32. 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ß.
33. NIH Komplette Eigenentwicklung ohne Frameworks, obwohl es bereits Implementierungen gibt, die genau die gestellte Aufgabe schon erledigen. Bibliotheken bringen Sicherheitsupdates und Modernisierungen mit.
34. Inkonsistenz Man sieht dem Code genau an wann er von welchem Entwickler geschrieben wurde. Struktur, Workflows, Konzepte und Benennung unterscheiden sich.
35. Daraus ergeben sich gewisse Probleme
36. Implementierung neuer Features und Bugfixes werden immer teurer
37. Neue Technologien werden nicht integriert
38. Die Lösung: Modernisierung Wir machen ab jetzt alles besser!
39. Kein kompletter Rewrite, das Risiko ist zu hoch.
40. Das berühmteste, gescheiterte Rewrite-Projekt
41. Schritt für Schritt Modernisierung • Die Weiterentwicklung bleibt nicht stehen • Bugfixes ins bestehende System können integriert werden • Sicherheitsupdates können angewendet werden
42. Strategie Basis schaffen Module identifizieren Modul für Modul modernisieren
43. Basis schaffen Unabhängig vom bestehenden System
 
 Neues Seitenlayout
 
 Applikationsstruktur definieren Benötigte Bibliotheken/Frameworks integrieren
44. Module identifizieren In sich geschlossene Features identifizieren Migrationspfad festlegen Auf Risiken achten Priorisieren
45. Module identifizieren
46. Modul für Modul modernisieren
47. Die wichtigsten Fragen: Welche Features werden benötigt? und: Welche Browser müssen unterstützt werden?
48. caniuse.com
49. html5please.com
50. css3please.com
51. ES6 - compat table http://kangax.github.io/compat-table/es6/
52. Mozilla Developer Network
54. Werkzeuge
55. Browser DevTools
56. chrome://flags Experimental Developer Tools experiments
57. Performance-Messung
58. Performance-Messung • Übersicht des Speicherverbrauchs • Hilft bei Suche nach Performanceproblemen • Layout oder Skripte • Ziel: 60 Frames pro Sekunde :-)
59. Memory und DOM Leaks
60. Memory und DOM Leaks • JavaScript CPU Profiling • Heap Snapshot für • JavaScript Objekte • DOM Knoten • Suche nach potentiellen Memory und DOM Leaks
61. Mobile Testing
62. Mobile Testing • User Agent • Verschiedene Endgeräte • Android • iOS • Windows Phone • Simulation von Touch Events • Ändern der Geolocation und des Accelerometers
63. Dependency Management
64. 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
65. 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
66. Pakete installieren $ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version> $ bower install
67. 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
68. Pakete suchen $ bower search <package>
69. Pakete verwenden <script src=„/bower_components/jqueryjquery.min.js">
 </script>
70. Pakete löschen $ bower remove <package>
71. Konfiguration .bowerrc { "directory": "./components" }
72. 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"
 }
 }
73. Modernizr JavaScript-Bibliothek, die auf das Vorhandensein von Features prüft. http://modernizr.com/
75. <!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>
76. <!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>
77. Polyfills Code-Baustein, der in älteren Browsern eine neuere, von diesen nicht unterstützte Funktion mittels eines Workarounds nachrüsten soll. wikipedia.org
78. Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- Browser-Polyfills
79. ES6 to ES5 Transpiler
80. Babel https://babeljs.io
81. $ npm install --global babel $ babel script.js > app.js
83. HTML5 einzusetzen ist nicht wirklich problematisch, da die Browser Fallback-Mechanismen bieten.
84. DOCTYPE Welche Version von HTML soll verwendet werden? Damit der Browser das HTML korrekt rendert
85. Früher Heute <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ loose.dtd"> <!DOCTYPE html>
86. Was macht der HTML5 Doctype bei älteren Browsern?
87. schei? encoding <meta charset="UTF-8"> Sorgt für die korrekte Zeichenkodierung
88. Struktur
89. HTML5 bringt mehr Semantik Semantische Elemente gibt es aber schon länger.
90. 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.
91. Elemente bekannt machen <script>
 document.createElement('header');
 </script>
 <style>
 header {
 display: block;
 }
 </style>
92. HTML5SHIV https://github.com/aFarkas/html5shiv
93. 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:
94. Formulare
95. Neue Typen • Durchwachsene Unterstützung • Sehr sinnvoll für mobile (wegen Tastatur-Layout) • Aussehen nicht standardisiert • Fallback: input type=“text”
97. Styling
98. Neue Attribute • Erweitern die Möglichkeiten von Formularen • Validierung und Formularsteuerung • Unbekannte Attribute werden ignoriert
99. Umgang mit Fehlermeldungen Zusätzliche Informationen über das title-Attribut.
100. Form Polyfill • Basiert auf jQuery • Liefert zahlreiche Polyfills z.B. Forms, Promises, etc. • Stylingmöglichkeiten, benutzerdefinierte Fehlermeldungen http://afarkas.github.io/webshim/demos
101. Beispiel
102. HTML5 JavaScript APIs
103. Drag and Drop
104. Drag and Drop Support ist über alle Browser recht gut. Die API ist eher „gewöhnungsbedürftig“. Alternative: jquery-ui DnD
105. Video/Audio
106. Video/Audio • Gutes Beispiel mit integriertem Fallback • Controls sind vollständig kontrollierbar • Video kann mittels JavaScript gesteuert werden
107. Web Sockets
108. 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://
109. Web Sockets
110. Web Sockets var socket = new WebSocket("ws://localhost", "myApp");
 
 socket.onopen = function () {
 socket.send("Hello Server");
 };
 
 socket.onmessage = function (event) {
 console.log(event.data);
 };
112. Socket.io • Polyfill für Websocket • Fallbackmechanismen auf long polling, flash sockets, … • Broadcasting, Datenhaltung pro Verbindung, …
113. 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>
114. Storage
115. Storage • Local Storage - zeitlich unbegrenzt • Session Storage - nur für eine Browser-Session • IndexedDB • Web SQL
116. Offline Application
117. Offline Application • Dateien werden nur einmalig vom Server geholt • Manifestdatei enthält die Konfiguration
118. 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
119. Offline Application <html manifest="offline.manifest">
120. 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
121. ECMAScript 6 / 2015
122. Array find Wie kann ES6 Code aussehen - ein ganz einfaches Beispiel
123. 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.
124. Frameworks Frameworks bieten Struktur und Konventionen. Der Einsatz führt zu einer verbesserten Wartbarkeit und Erweiterbarkeit. AngularJS BackboneJS Knockout ExtJS React
125. Welches Framework?
126. 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?
127. Einführung • Parallelbetrieb • Schrittweise Einführung • Neue Features werden in der neuen Struktur entwickelt • Alte Struktur entfernen
128. Klassen
129. 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
130. 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);
 }
 }
131. Promises
132. 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/
133. 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);
 }
134. Modulsystem
135. Modulsystem • Dateien laden • Abhängigkeiten auflösen • Strukturierung einer Applikation
136. ES6 Modulsystem var privateVariable = 'This is a private Value'; export var publicVariable = 'This is a public Value'; export function getPrivateVariable() { return privateVariable; }
137. ES6 Modulsystem import {publicVariable, getPrivateVariable} from 'module'; console.log(publicVariable); console.log(getPrivateVariable());
138. FRAGEN?
139. Kontakt Thorsten Rinne thorsten.rinne@maibornwolff.de 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
140. Vielen Dank!