12. Januar 2015

Single-Page-Applications und AngularJS

AngularJS large

Als Internetagentur ist es unser Ziel unser eigenes Know-How kontinuierlich zu verbessern um dem Kunden stets die neuesten und besten Technologien zur Verfügung stellen zu können. In unserer heutigen Schnelllebigkeit manifestieren sich mit beeindruckender Häufigkeit neue Trends im Internet und damit auch immer neue Technologien bzw. Frameworks, die sich an spezielle Trends anpassen. Viele Trends überleben den Test der Zeit nicht und verschwinden beinahe so schnell wie sie entstanden sind, und nehmen dabei nicht selten diverse Technologien mit in die Versenkung (Weiss man heute eigenlich noch was MooTools ist?). Für uns als Webagentur ist es daher wichtig hauptsächlich auf Web-Frameworks zu vertrauen, die auch weiterhin zuverlässig genutzt werden können.

Immer häufiger trifft man heute im Internet auf sogenannte Single-Page-Applications ("Einzelseiten-Webanwendung"), welche nicht wie gewohnt aus mehreren, sondern aus nur einer einzigen HTML-Seite bestehen. Diese Seite wird dynamisch mit Daten aus dem Back-End versorgt und im Browser angepasst. Der Vorteil liegt auf der Hand: Die Seite muss nicht bei jedem Klick neu geladen werden. Somit werden Anfragen an den Server nach Daten nur auf diejenigen Daten beschränkt, die in diesem Moment benötigt werden. Während eine solche Webapplikation auch auf herkömmliche Art und Weise entwickelt werden kann, liegt es dennoch nahe hier ein speziell für diese Art von Applikation entwickeltes Framework zu verwenden. Eines der Frameworks, die dafür entwickelt wurden, ist AngularJS von Google.

 

Warum AngularJS?

Die Entwicklung einer Single-Page-Application erfordert die ständige manipulation des User-Interfaces einer Seite, da Daten dynamisch geladen werden und die Seite nicht jedes mal neu aufgebaut werden soll. Ohne das passende Framework ist die Entwicklung solcher Webapplikationen unnötig aufwändig, schwer zu testen und zu warten, und vor allem sehr Fehleranfällig. AngularJS ist eines der Front-End Frameworks, die genau bei diesen Problemen ansetzen.

Ein wunderbares Beispiel bei dem Angular hilft die Seite immer aktuell zu halten ist das "Data Binding". Um ganz exakt zu sein muss man eigentlich sagen "Two-Way Data Binding". Viele Template Sprachen wie z.B. Twig verbinden die gelieferten Daten mit dem Template und bilden die "View". Nach dem Verbinden oder "Merge" werden diese Daten allerdings nicht weiter überwacht. In einer Single-Page-Applikation ist es allerdings notwendig, diese Daten immer aktuell zu halten, wenn diese z.B. durch ein Eingabefeld manipuliert werden. Solch ein Funktionalität mit reinem JavaScript oder sogar jQuery zu programmieren ist möglich, jedoch mit steigender Komplexität einer Webanwendung auch immer schwieriger zu testen oder zu warten.

Angular überwacht die Daten auch nach dem Einfügen in ein Template. Im Code muss dazu lediglich das Eingabefeld mit der "Directive"

ng-model="mein-text"

versehen werden. Ab diesem Moment kann überall auf der Seite die eben definierte Variable verwendet werden. Sollte man dann z.B. in einer Überschrift

{{ mein-text }}

verwenden, wird diese Überschrift immer den momentanen Wert des Eingabefeldes darstellen. Hier ein live Beispiel von Mattias Holmlund: Hello World

Eine "Directive", wie sie oben bereits erwähnt wurde, ist der Weg den AngularJS nutzt um reines HTML zu erweitern. "Directives" können dabei wie oben gezeigt als Attribut, oder aber auch z.B. als eigener HTML-Tag verwendet werden. Es ist somit also möglich z.B. einen solchen Tag im Code zu verwenden: <mein-ganz-eigener-super-tag></mein-ganz-eigener-super-tag>. Ein solcher Tag ist natürlich auch aussagekräftiger als viele Standard-Tags wie z.B. <div>. Diesen individuellen "Directives" können dann eigene Verhaltensmuster zugewiesen werden, deren Definitionen auch extern gespeichert werden können und somit die "Single-Page" übersichtilcher machen.

AngularJS bietet viele weitere Funktionalitäten wie z.B. "Form-Validation", die allerdings den Rahmen und Intention dieses Beitrages sprengen würden. Eine sehr ausführlich Dokumentation des Framework findet man in der AngularJS Documentation

 

Warum nicht AngularJS?

Obwohl AngularJS direkt von Google kommt und ebenfalls eine große Community hat, die damit für Qualität und Weiterentwicklung garantiert, gibt es einige Aspekte an Angular die nicht optimal sind.

Als Webagentur, die sich sowohl mit Webdesign als auch Webentwicklung beschäftigt, ist Performance für uns grundsätzlich ein sehr wichtiges Thema. Wie sich der fachkundige Leser wahrscheinlich schon denken kann, ist das "Two-Way Data Binding" nicht gerade ressourcensparend. Man muss sich nur vorstellen wenn eine Variable nicht nur an einer Stelle, sondern an mehreren Stellen verwendet wird und nicht einfach nur um Texte darzustellen, sondern sogar um eine ganze Liste von Daten zu filtern. All das passiert beim Ändern eines Wertes und kann eine enorme Kettenreaktion hervorrufen, die extrem viel Leistung vom System verlangt. Ein Beispiel bei dem der Wert eines Eingabefeldes als Filter für Daten verwendet wird hier von Curran Kelleher: http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot26/.

Über diesen doch recht offensichtlichen Nachteil von Angular hinaus gibt es durchaus noch weitere "Fallen" in die man treten kann. Viele dieser Fallen sind nicht sehr offensichtlich und können nur mit entsprechendem Wissen erkannt und vermieden werden. Für den interessierten Leser hier ein Beitrag von Lars Eidnes zum Thema "AngularJS: The Bad Parts".

 

Schlussfolgerung

Wir als Webagentur in Bern bemühen uns kontinuierlich das beste Framework für die vom Kunden angestrebte Applikation zu verwenden. Bereits seit einiger Zeit ist für die Entwicklung von Webapplikationen bei uns Symfony2 das Framework für Back-End-Lösungen. Twig, Bootstrap und jQuery benutzen wir für das Front-End. Single-Page-Applications stellen aber grundsätzlich andere Forderungen an die Entwicklung des Front-Ends. AngularJS ist ein Framework das diese Forderungen erfüllen kann. Es ist jedoch wichtig für jedes Projekt individuell zu erkennen, ob Angular, mit seinen speziellen Eigenschaften, die richtige Wahl ist. Ebenfalls wichtig ist es, korrekt einzuschätzen ob ein Projekt tatsächlich für eine Single-Page-Applikation geeignet ist.

Wir hier in Bern beraten Sie gerne zum Thema und helfen Ihnen dabei, Ihre Webapplikation so schnell und effizient wie mögilch zu realisieren.





Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2