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

Made with Slides.com