GUI Migration mit Angular JS · GUI Migration mit Angular JS 20. SI-SE Fachtagung 2015 Next Generation Web & Mobile UIs 8. Mai 2015, HSR Hochschule für Technik, Rapperswil Seite

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, [email protected], @objeng

Remo Koch, [email protected], @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


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


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


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


VorgehensVorgehensVorgehensVorgehens----ModellModellModellModell


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


Am Anfang steht die ZielAm Anfang steht die ZielAm Anfang steht die ZielAm Anfang steht die Ziel----ArchitekturArchitekturArchitekturArchitektur


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


MetadatenMetadatenMetadatenMetadaten----ModellModellModellModell

Quelle 1

Quelle 2


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


"Projektstimmung""Projektstimmung""Projektstimmung""Projektstimmung"


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


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


MaskenbeispielMaskenbeispielMaskenbeispielMaskenbeispiel

<tui-mask ng-controller="A2100 as a2100">


<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


ApplikationsApplikationsApplikationsApplikations----Flow (Flow (Flow (Flow (simplifiedsimplifiedsimplifiedsimplified))))


Typische MaskeTypische MaskeTypische MaskeTypische Maske


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!


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!


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)


$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)


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


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


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


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


• 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


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


Documents

GUI Migration mit Angular JS · GUI Migration mit Angular JS 20. SI-SE Fachtagung 2015 Next Generation Web & Mobile UIs 8. Mai 2015, HSR Hochschule für Technik, Rapperswil Seite