Frontend Migration

[tourn]

Ansprechperson: Andi

AngularDart v1 ist unmaintained und schlecht dokumentiert. Es soll eine Auffrischung der Technologie für das Dime Frontend evaluiert werden. Die verschiedenen Varianten sollen evaluiert und der zeitliche Aufwand geschätzt werden.

Kandidaten:

AngularDart v4

Motivation

Die Sprache bleibt dieselbe, aber die Frameworkversion wird auf die aktuelle und weiterentwickelte Version upgegradet. Somit profitiert man von den aktuellen neuen Dokumentationen und neuen Features, die entwickelt werden. Bestehender Code und Projektstruktur können weitgehend wiederverwertet werden.

Evaluation

Die Hammock Library musste angepasst werden, funktioniert aber jetzt soweit. Login, ServiceOverview, ServiceEdit funktionieren soweit. Die Struktur von Code und Templates konnte fast 1:1 übernommen werden.

Code auf Branch https://github.com/stiftungswo/Dime/tree/angulardart-4-evaluation

Voraussichtlicher Zeitaufwand: 4 Wochen

Pro / Contra Zusammenfassung

Pro

• gleiche Sprache
• gleiches Framework
• bessere Dokumentation für Basics
• wir profitieren von aktuellen Neuerungen in der Dart / Angular / AngularDart Welt

Contra

• einige Features müssen nachgebaut werden (Http Service, Template Filter)
• Dokumentation für fortgeschrittene Features lässt noch viel zu wünschen übrig

Typescript Angular

Motivation

Die Technologie bleibt ähnlich, aber anstatt der Dart Version wird die standard Typescript Version des Frameworks verwendet, das eine grössere Community und somit mehr Support und Zukunftssicherheit bietet.

React/Inferno

Motivation

Der Vorteil hierbei wäre eine Vereinigung der Frontend Technologien, die in der Stiftung SWO entwickelt werden, da iZivi momentan mit Inferno läuft. Die Einstiegshürde für neue Zivis würde somit verringert.

Pro / Contra Zusammenfassung

Pro

• gleiche Sprache / Framework wie im iZivi
• hervorragende Dokumentation
• viele moderne Tools / Libraries

Contra

• Umstieg auf "neue" Sprache
• Umstieg auf neues Framework
• grosse Teile der Applikation müssen neu gebaut werden (Hammock ersatz)
• da react nur einen kleinen Aufgabenbereich hat, müssen viele Libraries selbst geschrieben / von der Community genommen werden

[paulsonnenschein]

Migration auf AngularDart 4 ist von Andi abgesegnet worden, allerdings sollen wir noch analysieren ob es sich lohnt auf AngularDart 5 zu warten / migrieren.

AngularDart 5 soll demnächst releast werden, wartet allerdings auf den stable Release on Dart SDK 2 (Dart 2).

Der Release von Dart 2 wurde angekündigt aber es existieren noch keine Downloads / Tags / Dokumentationen auf der Offiziellen Homepage etc...

Mit Sicherheit könnte man also zu AngularDart auf Dart 1.* migrieren und dabei folgendes im Auge behalten um auf dem besten Weg zu sein AngularDart 5 und Dart 2 benutzen zu können:

• dartdevc benutzen; dadurch "Strong Mode" kompatibel sein
• die Tips zum Benutzen von dartdevc im Ausblick auf Dart 2 befolgen: Dart 2 dartdevc
• die Changelogs von angular, angular_router und angular_forms berücksichtigen:
  • AngularDart 5 Docs
  • angular changelog
  • angular router changelog
  • angular forms changelog
  • dart webdev guides changelog
  • diff of changes from the old to the new docs

Wir könnten aber darauf warten das alle tools / libraries offiziell mit Dart 2 / AngularDart 5 support releast sind.
Allerdings is es auch gut möglich, das dies während der Migration passiert und wir so schon anfangen können.

[tourn]

Längerfristig wären weitere Schritte denkbar

Refactor

• [x] Common Components extrahieren (wie zB. dime-button) und durchgehend verwenden
• [x] Ordnerstruktur und Namen standardisieren #112
• [x] Libraries mit part/part of auflösen #104
• [x] Dime-Direktiven als dimeDirectives gliedern und so importieren
• [x] todo / fixmes beheben
• [x] Sentry wieder aktivieren

Usability

• [x] Formularvalidierung mit visuellem Feedback #106
• Formulare vereinheitlichen, sodass alle Änderungen erst mit dem Speichern Button persistiert werden (im Gegensatz zu einigen Delete Buttons, die aktuell sofort feuern) (maybe later)
• Neue Entities erst persistieren, wenn das (valide) Editformular abgeschickt wird, und nicht wie aktuell zuerst mal eine leere Entity erstellen. (dito)
• [x] Datepicker einbauen (material?)
• [x] Navigationselemente mit einem einzigen Kind direkt klickbar machen

Infrastructure

• [ ] Component Tests?
• [ ] E2E Tests?

Unter Umständen kann der Wechsel von Bootstrap/AdminLTE auf Angular Components gewisse dieser Schritte vereinfachen. Hierbei könnten nur die Input Elemente, oder auch das ganze AdminLTE Layout ersetzt werden.