AngularJS — Single-Page-Anwendungen im Enterprise-Umfeld

Unsere Enterprise-Anwendungen hatten eine Gemeinsamkeit: servergerenderte JSP-Seiten, jQuery-Spaghetti und quälend langsame Benutzeroberflächen. Als Google AngularJS vorstellte, sahen wir eine Chance, das zu ändern.

Warum AngularJS¶

AngularJS überzeugte uns mit Two-Way Data Binding, Dependency Injection (ein Konzept aus Java), Direktiven für wiederverwendbare Komponenten und Googles Unterstützung. Angular ist „opinionated” — es gibt vor, wie man die Anwendung strukturiert. Für ein Enterprise-Team, das Konsistenz über Projekte hinweg braucht, ist das ein Vorteil.

Erstes Projekt: Internes Dashboard¶

angular.module('dashboard', ['ngRoute', 'ngResource'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/projects', {
        templateUrl: 'views/projects.html',
        controller: 'ProjectsCtrl'
      })
      .when('/projects/:id', {
        templateUrl: 'views/project-detail.html',
        controller: 'ProjectDetailCtrl'
      });
  });

Two-Way Binding: Magie und Fluch¶

Ändere das Model, die View aktualisiert sich. Magie am ersten Tag. Das Problem kommt bei mehr als 2000 Watchern — Dirty Checking verlangsamt den Digest-Zyklus. Lösungen: One-Time Bindings, track by in ng-repeat.

Architektur und Testing¶

Wir teilten die Anwendung in Module nach Business-Domänen auf. Dependency Injection macht das Testen einfach — Karma, Jasmine, Protractor. Für Java-Entwickler, die Spring gewohnt sind, ist DI ein natürliches Konzept.

Herausforderungen¶

SEO: SPA generiert HTML auf dem Client — eine leere Seite für Suchmaschinen. Lernkurve: Scopes, Digest-Zyklus, Transclusion — eine steile Kurve. Angular 2.0: Die Ankündigung eines kompletten Rewrites beunruhigt uns.

SPA ist die Zukunft der Enterprise-UI¶

Trotz der Herausforderungen sind wir überzeugt, dass Single-Page-Anwendungen die richtige Richtung sind. Die Benutzererfahrung ist unvergleichlich besser. AngularJS ist nicht perfekt, aber derzeit die beste Wahl für Teams, die aus der Java-Welt kommen.