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

Das
War`s