View
4
Download
0
Category
Preview:
Citation preview
GUI Migration mit Angular JSGUI Migration mit Angular JSGUI Migration mit Angular JSGUI Migration mit Angular JS20. SI-SE Fachtagung 2015
Next Generation Web & Mobile UIs8. Mai 2015, HSR Hochschule für Technik, Rapperswil
Seite 1
Member of the
Solution Network Group
8. Mai 2015, HSR Hochschule für Technik, Rapperswil
Andres Koch, akoch@objeng.ch, @objeng
Remo Koch, rkoch@objeng.ch, @remo_koch
Object Engineering GmbH
die.software-modernisierer.ch
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
AgendaAgendaAgendaAgenda
•Einführung und Motivation
– Hintergrund typischer Legacy-Applikationen
– Migrations-Varianten und Methoden
•Praxis-Beispiel und Migrations-Vorgehen
Seite 2
•Praxis-Beispiel und Migrations-Vorgehen
– Umsetzung mit Angular JS
– Entscheid für Angular JS und gewähltes Modell
– Aufbau
– Erfahrungen und Pitfalls
•Schlussbetrachtung
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
VorstellungVorstellungVorstellungVorstellung
Büro für Software-Engineering Uitikon (ZH)gegründet 1995Spezialisiert auf Software-ModernisierungParser-Bau und Metadaten-System
Wir lieben es zu modernisieren,
Seite 3Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Einige Projekte mit Modernisierungs-Aspekt
Series/1 Ablösung �Unix � CORBA (Telecom PTT)Ablösung ORBIX � http/REST + JMS (Swisscom AG)Fat-Client GUI durch Web-UI (Visual C++ MFC � JavaScript (Angular JS) (Swisscom AG)Ablösung einer speziellen Logistik-Anwendung (COBOL) (BERTSCHI AG)
Wir lieben es zu modernisieren,Wo andere aufgeben, packen wir an.
Applikations-Lebenszyklus + Risko
Management AttentionManagement AttentionManagement AttentionManagement Attention
BugBugBugBug----RateRateRateRate
RiskRiskRiskRisk
rel. Quantitätrel. Quantitätrel. Quantitätrel. Quantität
Seite 4Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
BugBugBugBug----RateRateRateRate
rel. Zeitrel. Zeitrel. Zeitrel. ZeitRelRelRelRel V1.0 V1.0 V1.0 V1.0 RelRelRelRel >V2 + 5 J +10 J>V2 + 5 J +10 J>V2 + 5 J +10 J>V2 + 5 J +10 J
„unter CIO-Radar“ „D-Day“
Eigenschaften von GUIsEigenschaften von GUIsEigenschaften von GUIsEigenschaften von GUIs
•Typisch hoher Entwicklungs-Aufwand
•Hohe Diversität (viele Felder, viele Control-Elemente)
•Oft hohe Individualität
•Wenig oder schwindende Systematik
Seite 5
•Wenig oder schwindende Systematik
•Über die Zeit viele verdeckte Ausnahmen und Anomalien
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
MigrierungsMigrierungsMigrierungsMigrierungs----VariantenVariantenVariantenVarianten
•„Alles neu macht der Mai“ � Neuerstellung ist aufwändig und dauert bis zum nächsten Mai und länger.
•Manuelle Migration hohe Kosten und Zeitbedarf
•Automatische Migration � 100% nicht realistisch und aufwändig
Seite 6
•Automatische Migration � 100% nicht realistisch und aufwändig
�Bleibt noch:
• Halbautomatisch nach gutem alten 80/20 Paretto-Prinzip
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
VorgehensVorgehensVorgehensVorgehens----ModellModellModellModell
Seite 7Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Praxis-Fall
• Ursprünglich 3270-Applikation aus den 1980-Jahren
• GUI-fizierung 1997
• Visual C++ (MFC)
Seite 8
• 135 Masken, ~10‘000 Felder
• 3-sprachig
• Spezialitäten, teils applikatorische Funktionen
• Verschiedene Entwickler
• Patchwork mit der Zeit
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Am Anfang steht die ZielAm Anfang steht die ZielAm Anfang steht die ZielAm Anfang steht die Ziel----ArchitekturArchitekturArchitekturArchitektur
Seite 9Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Metadatengewinnung aus GUIMetadatengewinnung aus GUIMetadatengewinnung aus GUIMetadatengewinnung aus GUI
•Felder-Spezifikationen im Code
•Screen-Beschreibungs-Daten in Ressource-Dateien
•GUI-Bibliotheks-Funktions-Aufrufe
•Code-Segmente die auf Spezialitäten hinweisen
Seite 10
•Code-Segmente die auf Spezialitäten hinweisen
•Jegliche anderen Quelle
� Man kann immer verwendbare Daten finden und herausfiltern
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
MetadatenMetadatenMetadatenMetadaten----ModellModellModellModell
Quelle 1
Quelle 2
Seite 11Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Quelle 1
Quelle 3
Warum Warum Warum Warum AngularJSAngularJSAngularJSAngularJS????
•Proof of Concept: 1. Quartal 2013
•Frisch in den Fokus der Tech-Blogging-Welt geraten (siehe http://goo.gl/AuPjj2)
•Sehr intuitiv damit zu arbeiten
Seite 12
•Sehr intuitiv damit zu arbeiten
•Schien optimal für Formular-Handling
•Wurde als die Super-Lösung für SPA's betrachtet
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
"Projektstimmung""Projektstimmung""Projektstimmung""Projektstimmung"
Seite 13Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Quelle:www.bennadel.com
Anforderungen an die WebAnforderungen an die WebAnforderungen an die WebAnforderungen an die Web----ApplikationApplikationApplikationApplikation
•Kein Lock-In: Wechsel auf neuere UI-Technologien soll mit geringem Aufwand möglich sein
•Performance: Muss mindestens so schnell sein wie der alte FatFatFatFat-Client
•Konsistenz: Gleiches Input-Handling für den User
Seite 14
•Konsistenz: Gleiches Input-Handling für den User� keine Umschulung nötig
• Wartbarkeit: Neue Anforderungen müssen einfach möglich sein
•Wiederverwendbarkeit: GUI-Framework soll in anderen Applikation wieder verwendet werden können
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Umsetzung: Umsetzung: Umsetzung: Umsetzung:
MaskengenerierungMaskengenerierungMaskengenerierungMaskengenerierung
•Import und Bereinigung der Legacy-Daten
•Generierung von mehrsprachigen, spezifischen Masken-Templates in HTML
•Verhinderung eines "Lock-In" Effekts, damit für andere
Seite 15
•Verhinderung eines "Lock-In" Effekts, damit für andere Technologien/Formular-Frameworks entsprechend andere Templates generiert werden können
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
MaskenbeispielMaskenbeispielMaskenbeispielMaskenbeispiel
<tui-mask ng-controller="A2100 as a2100">
Seite 16Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
<tui-mask-content>
<tui-box title="Abfragen Kunden">
<input type="text" ng-model="model.id9116.data" required>
</tui-box>
</tui-mask-content>
</tui-mask>
FrameworkFrameworkFrameworkFramework----AufbauAufbauAufbauAufbau
Seite 17Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
ApplikationsApplikationsApplikationsApplikations----Flow (Flow (Flow (Flow (simplifiedsimplifiedsimplifiedsimplified))))
Seite 18Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Typische MaskeTypische MaskeTypische MaskeTypische Maske
Seite 19Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
PitfallPitfallPitfallPitfall 1: Software Engineering?1: Software Engineering?1: Software Engineering?1: Software Engineering?
•Unerfahrene Frontend-Entwickler verlieren schnell den Überblick
•Frontend-Patterns sind nicht allen bekannt
•Entwickler denken von JavaScript als inferiore Sprache und verhalten sich plötzlich auch so
Seite 20
sich plötzlich auch so
•Angular bringt gewisse Strukturen mit (Controller, Directives, Services) und inzwischen haben sich gute Best Practices etabliert.
•Man darf trotzdem nicht vergessen ausserhalb von Angular zu denken!
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
PitfallPitfallPitfallPitfall 1: Software1: Software1: Software1: Software----Engineering! Engineering! Engineering! Engineering!
•JavaScript zu lernen lohnt sich.
•Angular-Experten können auch JavaScript.
•Es ist immer noch Software-Engineering!
•Modularisierung der Komponenten. Patterns verwenden.
Seite 21
•Modularisierung der Komponenten. Patterns verwenden.
•Architektur designen und planen!
•UML existiert nicht nur für das Backend!
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your frenemyfrenemyfrenemyfrenemy
•Kommunikation zwischen View und Model funktioniert über 2-Way-Databinding
•Dirty checking von Modell-Aenderungen (Observer-Pattern)
Seite 22Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
$scope.$watch('model.value', function changeListener (newValue) {
console.log('I have changed', newValue);
// ... do something else with changed value ...
});
Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your frenemyfrenemyfrenemyfrenemy (2)(2)(2)(2)
Seite 23Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg Quelle: docs.angularjs.org
Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your Pitfall 2: $watch is your frenemyfrenemyfrenemyfrenemy (3)(3)(3)(3)
Seite 24Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
1.1.1.1. Version: Version: Version: Version: ~~~~3600 3600 3600 3600 WatchersWatchersWatchersWatchers, $, $, $, $digestdigestdigestdigest cyclecyclecyclecycle bis zu 4sbis zu 4sbis zu 4sbis zu 4s
2.2.2.2. Version: Version: Version: Version: ~ ~ ~ ~ 93 93 93 93 WatchersWatchersWatchersWatchers, $, $, $, $digestdigestdigestdigest cyclecyclecyclecycle ~ ~ ~ ~ 10ms10ms10ms10ms
PitfallPitfallPitfallPitfall 3 : Analyse3 : Analyse3 : Analyse3 : Analyse
•Zu Beginn zu generelle Generierung verwendet
•Resultiert in komplexe directives anstatt spezifischere Generierung mit Logikseparierung
•Reusability � 0
Seite 25
•Reusability � 0
•Zusammenhänge wurden erst mit der Zeit und Erfahrung verstanden � höhere Komplexität
•Erfahrung in Version 2 eingebracht
•Mit jeder Version könnte man noch mehr optimieren
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Fazit zur Wahl Fazit zur Wahl Fazit zur Wahl Fazit zur Wahl AngularJSAngularJSAngularJSAngularJS
•Framework hilft einem unerfahrenen Entwickler, um das gewünschte zu erreichen
•Kann komplex werden, wenn man die Key-Konzepte nicht versteht
•Applikation kann (besonders in älteren Browsern) langsam werden
Seite 26
•Applikation kann (besonders in älteren Browsern) langsam werden wenn alles "The Angular Way" gemacht wird
•Zu viel Logik im Applikations-Framework ist nicht gut
•Separierung in eigene directives und vom Generator anhängen lassen
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Aber …Aber …Aber …Aber …
•AngularJS ist ein unglaublich starkes Framework wenn richtig eingesetzt
•Trotzdem nicht das Non-Plus-Ultra Framework
•Extrem viele Alternativen auf dem Markt: Backbone, Knockout, Ember,
React/Om, Riot, Mithril, Ampersand, Aurelia, ...
Seite 27
React/Om, Riot, Mithril, Ampersand, Aurelia, ...
•Stärken und Schwächen müssen jeweils mit Projektanforderungen abgeglichen werden
•Man darf sich nicht nur auf Angular beschränken
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Schlussbetrachtung: AufwandSchlussbetrachtung: AufwandSchlussbetrachtung: AufwandSchlussbetrachtung: Aufwand
TätigkeitTätigkeitTätigkeitTätigkeit Aufwand Aufwand Aufwand Aufwand [h][h][h][h]
AuwandAuwandAuwandAuwand/ / / / Maske [h]Maske [h]Maske [h]Maske [h]
Parser-/Generatorbau, Meta-Modell, Tool-Einführung 556 4.2
GUI-Framework (Java Script) 770 5.8
Maskenvalidierung (Kosmetik, manuelle Ergänzungen) 570 4.3
Seite 28
Maskenvalidierung (Kosmetik, manuelle Ergänzungen) 570 4.3
Architektur, Anpassung Service-Funktionen,Installation, Integration, Test, etc.
660 --
Total 2560 14.3
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
• Realisierung in 8 Monaten (plus 6 Wochen Machbarkeitsstudie)• Effektive Umsetzung 50% des geschätzten Aufwandes für eine rein manuelle Umsetzung.
• Schnittpunkt Aufwand/Ertrag bei 50 Masken• Es wurde einiges an Mehrwert generiert (Deployment, State of the Art u.a.)
Schlussbetrachtung: FettnäpfchenSchlussbetrachtung: FettnäpfchenSchlussbetrachtung: FettnäpfchenSchlussbetrachtung: Fettnäpfchen
•Umsetzung, wie so oft unterschätzt oder überschätzt
•Mut und Ideen sind gefragt
•Methode lässt sich wiederholen und ausbauen
•Aufgepasst bei Terminalserver-Plattformen in Bezug auf Performance
Seite 29
•Aufgepasst bei Terminalserver-Plattformen in Bezug auf Performance
•Bau von UIs nach wie vor (zu) aufwendig
•Ist Produktivität bei Benutzeroberflächen nie ein Thema?
•Zu oft: Frontend- grösser als Backend-Entwicklungsaufwand
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Besten Dank für Ihre Aufmerksamkeit!
Fragen?
Seite 30
Fragen?
Artikel Objekt Spektrum:http://www.objeng.ch/document/whitepapers/
TeilautomMigrationGUI_RThurner-AKoch-RKoch_ObjectSpektrum2014-06.pdf
Copyright 2015 by Object Engineering GmbH, CH-8142 Uitikon-Waldegg
Recommended