AngularJS & Ionic Framework

In den Anfängen des World Wide Webs dienten Webseiten zur simplen Präsentation von Informationen und Produkten. Dafür war die Erstellung auf Basis statischer Inhalte ausreichend. Über die Jahre haben diese Seiten jedoch neue Formen angenommen, denn Funktion und Bedienbarkeit wurden durch neue Trends und Standards bestimmt. Ein wichtiger Meilenstein dieser Entwicklung war das Web 2.0. Es entstanden Blogs, Foren, Wikis und soziale Netzwerke, um den Gedanken- und Wissensaustausch zwischen Menschen zu fördern. Die angebotenen Informationen konnten nicht mehr nur abgerufen, sondern diskutiert, bewertet und selbst bearbeitet werden. In diesem Stadium befindet sich das WWW auch heute noch. Dazu kommt die Anforderung, immer neue Geräte-Klassen zu bedienen. Das Spektrum umfasst neben Desktop-Rechnern und Laptops auch Wearables, Smartphones und Smart TVs.

Die Ergebnisse einer Produktsuche bieten heute nicht nur einen Link zur entsprechenden Webseite, sondern zeigen in den meisten Fällen auch direkt Bewertungen anderer Käufer an. In fast allen Online-Shops hat der Nutzer mittlerweile die Möglichkeit, gekaufte Produkte zu bewerten oder Fragen zu stellen. Dabei geht der Trend zu interaktiven Anwendungen bestehend aus dynamisch erzeugten Inhalten. Die zukünftige Entwicklung des Webs dreht sich vor allem um künstliche Intelligenz, Big Data und Data Mining. Dabei sollen Computer in der Lage sein, aus den riesigen und für den Menschen unüberschaubaren Datenmengen des Internets die relevanten und wichtigen Informationen herauszufiltern, um sie dem Nutzer zu präsentieren. Computer und Programme müssen selbst entscheiden, was wichtig ist und was nicht. So könnte eine Suchanfrage in Zukunft statt einem Link zu Wikipedia-Artikeln direkt die Antwort anzeigen.

Um im heutigen WWW eine hohe Interaktivität und Benutzerfreundlichkeit bieten zu können, braucht es Technologien, die genau das abbilden können. Hier spielt vor allem JavaScript eine große Rolle. Diese Programmiersprache wird schon seit vielen Jahren genutzt, um dynamische Anpassungen an Inhalten vorzunehmen und auf Nutzerinteraktionen direkt reagieren zu können. Zur Vereinfachung der JavaScript-Programmierung entstanden zahlreiche Frameworks. Zu den bekanntesten Frameworks in diesem Bereich zählt jQuery. Bei der Verwendung solcher JavaScript-Bibliotheken werden oft nur Teile einer Webseite dynamisch. Der Internetauftritt besteht meist weiterhin aus einzelnen Unterseiten, die aufgerufen und vom Browser neu geladen werden. Darauf folgte die Idee, alle Inhalte über eine einzige Seite zugänglich zu machen. Das bedeutet, dass die gesamte Interaktion auf einer Seite im Browser erfolgt. Es finden keine Seitenwechsel statt, an die der Anwender bisher gewohnt war. Dieses Konzept ist als Single-Page Application (kurz SPA, zu Deutsch Einzelseiten-Anwendung) bekannt. Für den Entwickler bedeutet das eine noch höhere Komplexität der Programmierung. Viele Probleme müssen gelöst werden. Zwei Schwerpunkte sind die Navigation auf der Seite sowie die Reaktion auf Benutzereingaben. Das Thema der Navigation ist äußerst wichtig, da die vom Browser angebotene Funktion, um vor oder zurück zu navigieren, keine Anwendung findet. Trotzdem muss sich der Anwender auf der Webseite, wie in einer normalen Anwendung auch, zwischen bestimmten Ansichten hin und her bewegen können.

An diesen Problempunkten setzt AngularJS an und bietet Entwicklern ein starkes Werkzeug, um sich auf die Programmierung der Funktionen der SPA konzentrieren zu können. Probleme wie Navigation und flexibles Reagieren auf Nutzereingaben sind bereits gelöst. Zusätzlich erhält der Entwickler eine Vielzahl an Hilfsmitteln, die das Erstellen einer SPA vereinfachen. Zusammengefasst ist AngularJS also ein JavaScript-Framework zur Erstellung von Single-Page Applications, welches sich immer größerer Popularität und einer stetig wachsenden Community erfreut. Mit AngularJS lassen sich moderne Webanwendung mit gängigen Technologien, wie JavaScript, HTML und CSS, umsetzen.

Wie bei vielen neuen Technologien steht auch bei AngularJS ein großer Konzern hinter der Idee. In diesem Falle ist das Framework in den Hallen von Google entstanden. Jedoch war zunächst nicht die Erarbeitung eines Single-Page-Application-Frameworks beabsichtigt.

Der Entwickler Misko Hevery wollte sich neben seiner Haupttätigkeit bei Google auch im Bereich JavaScript weiterbilden und startete dazu mit der Entwicklung einer eigenen Bibliothek im Jahr 2009. Ziel des Frameworks war es, Webdesignern die Erstellung von komplexen Webseiten zu vereinfachen, indem das normale HTML-Markup um eigene Komponenten erweitert wird. Außerdem sollten oft benutzte und verschachtelte DOM-Strukturen wiederverwendbar gemacht werden. Im Browser werden die Markup-Erweiterungen dann zur Ausführungszeit mithilfe von JavaScript automatisch in ihre Ursprungsstruktur umgewandelt. Dadurch ist die Umsetzung der Code-Wiederverwendbarkeit auch in HTML möglich.

Bild 4.1 AngularJS Logo 2009 (links)1 und heute (rechts)

Den Durchbruch schaffte AngularJS zuerst Google intern. Misko Hevery kam in das Projekt Google Feedback. Wie der Name vermuten lässt, wurde dieses Produkt für das Anbringen von Anregungen und Kritik entworfen. Zum Zeitpunkt von Heverys Einstieg lief das Projekt nicht zufriedenstellend. Daraufhin schlug er vor, das komplette Produkt mit seinem Framework neu zu schreiben. Nach etwas Überzeugungsarbeit erhielt er schließlich die Erlaubnis und nach nur drei Wochen Entwicklung war Hevery fertig. Sein Ergebnis überzeugte auf ganzer Linie. In dieser kurzen Zeit schrieb er das Projekt um und reduzierte so die 17.000 Codezeilen auf nur circa 1.500. Danach wurde das Framework auch außerhalb von Google interessant. Immer mehr Funktionen wurden gewünscht und implementiert. So entstand aus einer simplen Idee ein mächtiges Werkzeug zur Erstellung von Single-Page Applications, dessen Beliebtheit immer weiter wächst.

Neben AngularJS existieren noch andere Single-Page-Application-Frameworks, die sich in der Fachwelt ebenfalls hoher Beliebtheit erfreuen. Beispiele dafür sind Backbone.js, Ember.js oder Knockout.js, deren Quellcode auch frei verfügbar ist. Alle drei bringen ähnliche Funktionalitäten mit, reichen aber nicht an den Umfang von AngularJS heran. Trotzdem steht außer Frage, dass sich mit allen auf ihre Art und Weise sehr gut SPAs entwickeln lassen. Daher wird an diesem Punkt darauf verzichtet, einzelne Funktionen miteinander zu vergleichen oder gar fehlende herauszuarbeiten. Stattdessen werden die Beliebtheit und Entwicklung der einzelnen Frameworks betrachtet.

Anhand des frei verfügbaren Quellcodes und der Verwendung der Git-Versionierungs-Plattform GitHub können die Programmieraktivitäten leicht verfolgt und miteinander verglichen werden.

Tabelle 4.1 Vergleich der Entwicklungsaktivitäten von SPA-Frameworks

Stand 1. Juni 2015

AngularJS

Backbone.js

Ember.js

Knockout.js

Seit

3. Januar 2013

26. September 2013

24. April 2011

4. Juli 2010

Commits (gesamt)

6779

3017

9808

1375

Commits (April & Mai 2015)

ca. 134

ca. 65

ca. 392

ca. 53

Releases

139

22

119

35

Contributors

1243

258

494

56

Tabelle 4.1 vergleicht die Entwicklungsaktivitäten seit der Entstehung der einzelnen Repositories auf GitHub. Dabei werden die Code-Änderungen (Commits) gesamt und in den Monaten April und Mai im Jahr 2015, die bis dahin veröffentlichten Versionen (Releases) und die Anzahl an Personen, die bereits an den Projekten beteiligt gewesen sind (Contributors), miteinander verglichen. Seit Januar 2013 wurden am AngularJS Projekt 6779 Änderungen eingestellt, was nur noch von den 9808 von Ember.js übertroffen wird, wobei Ember.js schon deutlich länger existiert. Die anderen beiden Frameworks sind dagegen weit abgeschlagen, obwohl sie im Falle von Knockout.js schon deutlich länger auf GitHub verfügbar sind. Bei der Betrachtung der Commits im April und Mai stechen AngularJS und vor allem Ember.js deutlich hervor. Bei den Commits zählen jedoch jegliche Quelltextänderungen dazu. Als Beispiel könnte eine neue Funktion des Frameworks in einem Commit, aber auch über mehrere hinweg eingebaut worden sein. Am Ende entsteht in den meisten Fällen, wenn ein gewisser Entwicklungsstand erreicht wurde, eine neue Version. Diese werden bei GitHub als Releases geführt. Dort liegen wieder Ember.js mit 119 und AngularJS mit 139 an der Spitze. Ein ähnliches Bild zeigt sich beim Gegenüberstellen der Mitwirkenden an den Projekten. Nur führt hier mit einem enormen Abstand AngularJS mit fast 750 Entwicklern mehr als Ember.js, das immer noch auf beachtliche 494 kommt. Die Mitentwickler an einem Projekt sagen natürlich nicht nur etwas über die...