Kontakt

Vielen Dank für Ihre Anfrage

Wir haben Ihre Nachricht erhalten und werden uns schnellstmöglich auf dem von Ihnen gewählten Kontaktweg melden.

Wir realisieren geschäftskritische Applikationen mit Angular seit 2014

Die ATMINA Solutions GmbH ist spezialisiert auf die Entwicklung von Webapplikationen. Bereits seit Firmengründung ist AngularJS und TypeScript fester Bestandteil unseres Technologie-Stack. Seit dem Release im Jahr 2016 ist auch Angular mit dabei.

“Mit diesem Hintergrund heben wir Projekte erfolgreich in die neue Angular Welt oder beraten Sie und ihr Software-Team bei der Umstellung.”

Wir verfolgen einen Hybrid-Ansatz, wie er auch vom Angular Team vorgeschlagen wird. Ihr Vorteil: weder müssen Sie einen Versionszweig einfrieren, noch Aufwand für neue Features doppelt investieren. Sie entscheiden, wie viele Ressourcen sie auf die Migration verwenden und entwickeln neue Features bereits im neuen Framework während bestehendes weiter genutzt wird.

  • Die Entwicklung von AngularJS wurde bereits eingestellt, lediglich eine Long-Term-Support-Phase (LTS) läuft noch bis zum 30. Juni 2021. In dieser werden noch kleine Updates zum Schließen von Sicherheitslücken und zum Beheben von größeren Fehlern geliefert. Nach Ablauf dieser Phase ist AngularJS eingestellt.
  • Neue Bibliotheken, wie z.B. angular-formly, werden nur noch für Angular entwickelt und gepflegt. Um von Neuerungen zu profitieren ist eine Migration notwendig.
  • Es ist absehbar, dass Features der neuen Browser-Generationen im alten AngularJS Umfeld nicht mehr nutzbar sein werden.
  • Alle Verbesserungen (z.B. hinsichtlich Performance) fließen ausschließlich in das neue Angular: beispielsweise die neue Rendering Engine (Ivy Compiler).
  • Eine Umstellung großer Projekte auf TypeScript bringt massive Qualitätsverbesserung mit sich
  • Rückwärts-Kompatibilität ist gegeben. Angular unterstützt alle Internet Explorer bis IE 9.

Vorgehen

Die Konzepte in Angular sind ähnlich. Funktionierende Architekturen müssen nicht komplett neu gedacht werden. Eine kleinschrittige Bottom-Up Migration - bei der zunächst die Blätter des Komponenten-Baums umgezogen werden - ist möglich und erfolgt im Parallelbetrieb. Sie veröffentlichen weiterhin Releases ihrer Software, die Migration erfolgt parallel und transparent für den Anwender. Neue Features werden direkt in Angular umgesetzt.

Damit gestaltet sich die Migration auch für Entwickler transparent, weil AngularJS und Angular Komponenten auf gleiche Art und Weise verwendet werden können.

Bestehendes Javascript kann ohne Hürden in die Typescript Welt übernommen werden und später um Typen ergänzt werden. Ein Vorteil ist, dass der Transpiler schon in diesem Stadium gewisse Fehlerklassen erkennt.

Spätestens jetzt benötigt ihr Projekt einen Build-Prozess. Ein existierender Prozess kann einfach erweitert werden. Dies birgt viel Potential für Verbesserung:

  • Weniger ausgelieferte Assets
  • Größe der Anwendung reduzieren
  • Ladegeschwindigkeit verbessern

Nach erfolgter Migration muss nur noch das Routing umgestellt werden. D.h. die Kontrolle über die angezeigten Inhalte geht vollständig auf Angular über. Dann werden die AngularJS Referenzen aus dem Projekt entfernt.

TypeScript Vorteile

  • Typsystem: Erkennung von Fehlern schon zur Transpile/Compile-Zeit
  • Einfachere Dokumentation, da IDEs das Typsystem für Vorschläge und Hinweise nutzen können
  • Gemeinsames Typsystem zwischen Backend und Frontend möglich (wir nutzen hier immer Codegenerierung oder Shared-Code)
  • Weniger Unit Test Code, da nur die Möglichkeiten für korrekte Typen getestet werden können. Inkorrekte Typen werden vom Transpiler verhindert. Die Testoberfläche wird kleiner.
  • Einfachere und konsistente Kommunikation zwischen den Entwicklern, da das Typsystem implizite Dokumentation liefert, die nicht manuell (wie z.B. bei JSDoc) gepflegt werden muss.

Fallbeispiel

Seit Juli 2018 migrieren wir eine Geschäftsapplikation aus dem Gesundheitsumfeld Schrittweise zu Angular.

  • Migration im laufenden Betrieb, es sind 5 Versionen im Parallelbetrieb erschienen
  • 114.200 LOC (Lines of Code)
  • 389 Komponenten, aufgeteilt auf 16 primäre Module

Wie bei jeder Migration verfolgen wir zunächst den Leitfaden des Angular Projekts. Den Schritt TypeScript Migration konnten wir überspringen, da unsere AngularJS Projekte bereits auf Typescript basieren.

Den Buildprozess haben wir auf das neue angular-cli umgezogen, da es dem Standard im Angular Projekt entspricht.

Im Verlauf der Umstellung haben wir festgestellt, dass die Performance der Anwendung negativ beeinflusst wurde: das Handling von Events (z.B. Click) dauert unverhältnismäßig lange. Die Ursache fand sich im Zusammenwirken der beiden unterschiedlichen Change-Detection Prozesse: jeder Event-Listener der in AngularJS definiert wurde hat, nach seiner Ausführung, eine Change-Detection in Angular ausgelöst.
Eine manuelle Anpassung bei globalen Event-Listenern bzw. solchen die auf Komponenten definiert sind und oft ausgelöst werden, war notwendig: sie werden außerhalb der ngZone ausgeführt, dann wird manuell festgestellt, ob das Event relevant ist und ggf. eine Change-Detection ausgelöst. So konnten wir unserem Ziel von 60 FPS (Frames per Second) wieder ausreichend nah kommen.

Begleitend zur Umstellung haben wir Angular Storybook eingeführt. Es erlaubt uns, die neuen Angular Komponenten im Team sichtbar zu machen und deren Verwendung zu dokumentieren.

Simon Niechzial, Leiter der Entwicklung

Sprechen Sie direkt mit einem erfahrenen Entwickler.

Simon Niechzial, MSc. studierte Informatik mit Schwerpunkt Softwareentwicklung, ist Gesellschafter und Leiter des Bereichs Webanwendung.

Vielen Dank für Ihre Anfrage

Wir haben Ihre Nachricht erhalten und werden uns schnellstmöglich auf dem von Ihnen gewählten Kontaktweg melden.

Kontaktieren Sie uns