Alfresco + Angular JS

Tips & Tricks zur Implementierung von eigenen Alfresco Clients in Form von JavaScript Single Page Apps anhand des Praxisbeispiels:
fme File Exchange Platform

Alfresco Meet The Experts Hamburg 20.11.2013 Jan Pfitzner (fme AG) / @alfrescian

Die Herausforderung:
Dateiaustausch mit Externen leichtgemacht - simple+smart

  • Einfache Registrierung
  • Intuitive Erstellung von File-Collections
  • automatische & reichhaltige Mailbenachrichtigungen
  • Simpler & direkter lesender + schreibender Zugriff auf 'My File Collections'
  • Aktivitäten-Log (Wer hat Wann Was gemacht)
  • Fokussierte moderne, responsive Web UI

Die Alternativen

Alfresco Share:

  • zu komplex & schwergewichtig für die Aufgabe
  • Upgradefähigkeit?
  • Sicheres Deaktivieren von ungewollten Funktionen?

jQuery:

  • Bis zu 10 verschiedene Views?
  • Wiederverwendbare Komponenten?
  • Test-Driven-Development?
  • Separation Of Concerns (Model-View-Controller)?

AngularJS:

  • MVC / MVW
  • Databinding
  • native HTML Templates
  • Wiederverwendbare Komponenten (Direktiven)
  • Testable
  • Router für Single Page App mit x Views

Unser Weg

Verwendung von SURF - Warum?:

  • CSRF-Filter & Co
  • Alfresco-Proxy Servlet
  • Alfresco Login (<authenticate>user</authenticate>)
  • templatable index.html - bspw. Menü je nach Benutzer-Privilges

Twitter Bootstrap - Warum?:

  • Mächtiges + Flexibles HTML/CSS/JS Frontend-Framework
  • Gute Integration mit Angular (Angular UI Bootstrap)
  • Erfahrung bei den Entwicklern vorhanden

und einiges mehr:

  • blueimp jQuery File Upload
  • modernizr
  • moment.js
  • angular-l10n
  • ...

Lessons Learned:

AngularJS die richtige Wahl:

  • JA! aber:
    • das JS-Ecosystem ist groß und rasant
    • die Lernkurve steil (aber die Community ist groß)
    • man muss die JS-Welt akzeptieren (oder guckt sich CoffeeScript, Dart & Co an)
  • Der kontinuierliche & schnelle Ausbau der Lösung zeigt die Flexibilität durch SoC, DI, MVW...

Kenne deine Werkzeuge:

  • karma, jasmine, phantomJS...
  • Server-Restart? das muss anders gehen...
  • Yeoman.io =
    • Yo: CLI tool for Scaffolding Webapps
    • Grunt: JS taskrunner - build, test & preview
    • Bower: Package Manager for the web
  • Chrome Developer Tools + Live Preview/Remote Debugging

Was würde ich anders machen?

Alfresco + AngularJS 'Hello World'

Alfresco CMIS Browser