Frontend User Group
Mit AngularJS Projekte schnell an die Wand fahren
Mit AngularJS Projekte schnell an die Wand fahren
Themen
- Hohes Maß an Automatisierung
- Testbarer Code
- Modularisierung
- Strikte Trennung von Repräsentations- und Business-Logik
Allgemeins zu Angular
- Model View Whatever Pattern
- Dependeny Injection
- Databinding
- Expressive Html
- Kein Konzept für Models
- Tipp: Module featureorientiert ablegen
- Scaffolding: Angularseed
Herausforderungen in Enterprise-JavaScript-Projekten
- kein Compiler
- keine „natürliche“ Strukturierung
- Loser Zusammenhang der Dateien
- Dynamische Typisierung
- Kein „Klassen“-Konzept
- Asynchronität
- Client-seitige Ausführung
Problem: unzureichende Automatisierung
- Trennung FE-Abhängigkeiten in Bower (dadurch wird zb. Angular nur einmal runterladen, wenn es von mehreren libs benötigt wird)
- npm scripts
- JSHint (besser als JSLint); alternativ ESLint
- Zusätzlich Html validieren
Von Anfang an Unit-Tests
- Noch besser: TDD oder Test-first
- Testbarkeit ist wichtige Metrik für Qualität
- In Angular: „Nur ein testbarer Controller kann ein guter Controller sein“
- Testbare Html-Komponenten brauchen Ids
- Frontend-Code lässt sich auch testen (Direktiven und Controller)
- Strikte Trennung von View und Logik
- Controller darf nicht vom DOM abhängen
Von Anfang an Unit-Tests
- Schnelles Testfeedback (kl. 5s)
- Gui-Tests: Page Object Pattern
- Jasmine: leichterer Einstieg als bei Mocha
- jasmine-jquery
Problem: ng-controller statt Direktiven
- Zu viel Logik in Controller ist schlecht
- komplizierte Scope-Abhängigkeiten
- schwer verständlicher Code
- duplizierter Code
- Ähnliche oder duplizierte Controller
Domänenspezifische Sprache mit Direktiven
- Direktiven sind DAS Feature von AngularJS
- eine Direktive ist in sich abgeschlossen, bestehend aus
- HTML Template
- Controller
- Styling
- siehe auch ReactJS, wo Komponenten sehr modular aufgebaut sind
- Angular 2 ist sehr stark von React beeinflusst
(Noch) besserer Code durch
TypeScript
- Typisierung (Typdeklarationen, Klassen, Interfaces)
- Compile-Errors
- kommt mit vielen zukünftigen EcmaScript-Features
- Serverseitiges DTO (z.B. in Java geschrieben) kann als TS-DTO generiert werden
JQuery considered harmful
- im Zusammenhang mit Frameworks wie Angular ist JQuery gefährlich, weil man sehr einfach globale Dom-Änderungen machen kann