Single-Page-Web-Apps

JavaScript im Einsatz: Webseiten erstellen mit AngularJS, Meteor und jQuery Mobile

Heiko Spindler

• Verlag: Franzis Verlag
• Jahr: 2014
• ISBN:
  9783645222297
• Thema: Informatik
• Thema: Programmierung in JavaScript

Single-Page-Web-Apps sind eine neue Art, Webanwendungen zu bauen. Im Gegensatz zu klassischen Webseiten führen Single-Page-Web-Apps keinen Seitenwechsel mehr durch die Oberfläche wird über dynamischen Austausch der HTML-Elemente auf einer einzigen Seite mit JavaScript verändert. Die Implementierung erfolgt mit den Technologien HTML5, CSS3 und JavaScript. Die HTML-Seiten werden zum größten Teil dynamisch im Browser erzeugt. Die Daten werden meist über JSON oder XML mit einem Backend ausgetauscht. Eine Single-Page-Web-App ist über eine URL im Browser universell erreichbar. Eine Installation ist nicht notwendig. Im Unternehmensumfeld reduziert diese Eigenschaft enorm die Kosten für Installation und Verteilung. Viele Benutzer wollen Dienste auf unterschiedlichen Geräten nutzen. Der Zugriff muss vom heimischen PC genauso gut funktionieren wie vom Tablet oder Smartphone aus. Eine separate Entwicklung für jede Zielplattform ist teuer. Das Web wird die übergreifende Plattform für alle Betriebssysteme und Gerätearten. Dank HTML und JavaScript laufen Single-Page-Web-Apps auf allen wichtigen mobilen Betriebssystemen wie Android, Windows Phone und iOS. Offline-Fähigkeiten Mit den neuen Fähigkeiten von HTML5, wie dem LocalStorage, gibt es zum ersten Mal eine Möglichkeit, effiziente Cache-Strategien und Offline-Fähigkeiten zu etablieren. Es ist sehr leicht, mit den verwendeten Technologien zu starten als Entwicklungsumgebung reicht ein guter Texteditor aus. Zum Ausführen reicht ein Browser, der mit den entsprechenden Plug-ins sogar Debugging bereitstellt. Alle diese Komponenten sind für den Einsteiger kostenlos verfügbar.

1

Einleitung

1.1Das Web als Plattform

In den letzten Jahren hat sich das Internet als die umfassende Kommunikationsplattform etabliert und bildet ebenfalls die Basis für den Erfolg mobiler Geräte. Es entstehen ständig neue Technologien. Ganze Branchen müssen sich in dieser »schönen neuen Welt« umorientieren und tragfähige Geschäftsmodelle finden. Die Software-Entwicklung im Zentrum dieser Veränderung muss neue Trends erkennen und die eigenen Kompetenzen immer wieder an diese Entwicklungen anpassen. Die Dynamik, die sich manchmal aus kleinen Neuerungen ergibt, ist erstaunlich. Ein neuer Begriff am Horizont ist das Paradigma von Single-Page-Web-Applikationen (SPWA): eine neue Art, Web-Anwendungen zu bauen.

1.2Was ist eine Single-Page-Web-Applikation?

Eine Single-Page-Web-Applikation ist eine Web-Anwendung, die keinen Seitenwechsel (Refresh) durchführt, sondern die Oberfläche über dynamischen Austausch der HTML-Elemente mit JavaScript ändert.

Bei Aktionen in der Anwendung entfällt das kurze Flackern, das sonst die Anfrage beim Webserver und beim Neuaufbau begleitet. Das scheint auf den ersten Blick nicht besonders spektakulär. Einem Benutzer fällt diese kurze Wartezeit vom Drücken eines Bestell-Knopfes bis zum Aufbau des Warenkorbes auf einer Shopping-Seite aber eventuell unangenehm auf.

Schon eine Verzögerung von mehr als zwei Sekunden wird oft als störend empfunden. Bei herkömmlichen Webseiten wird die gesamte Seite (HTML-Code, Bilder, Stylesheet und Scriptdateien) übertragen. Natürlich strengen sich die modernen Browser an und merken sich Elemente, die sich nicht geändert haben. Zumindest der HTML-Code einer Seite muss neu geladen werden. Diese Übertragung erfordert eine gewisse Zeit: Verbindungsaufbau, Übertragung und Darstellung summieren sich schnell zu Sekunden.

Was eine SPWA auszeichnet, in Kürze:

]Die Implementierung erfolgt mit den Technologien HTML5, CSS 3 und JavaScript.

]Die HTML-Seiten werden zum größten Teil dynamisch im Browser erzeugt.

]Der Datenaustausch mit einem Backend erfolgt meist in Form von JSON oder XML.

]Die Webseite verhält sich mehr wie eine Applikation.

]Es gibt keinen Reload oder Seitenwechsel.

]Der aktuelle Zustand der Applikation wird im Browser gehalten.

]Neben den klassischen Eingabe-Elementen bieten diese Applikationen meist erweiterte, aktivere Benutzeroberflächen an.

Interessant ist, dass HTML, JavaScript und CSS nicht neu sind, sondern schon lange verfügbar. JavaScript erhält einen deutlich höheren Stellenwert als bisher.

1.2.1Die Vorteile von Single-Page-Web-Applikationen

Welche Vorteile entstehen aus diesem neuen Ansatz? Eines der Hauptziele vieler Anbieter ist es, Applikationen mit mehr Logik als bisher zu erstellen:

]Integration verschiedener Informationsquellen im Client

]Automatische Berechnungen und frühzeitige Validierung von Benutzereingaben

]Flexible Anpassung auf individuelle Benutzerwünsche und Vorlieben

]Mehr Interaktivität und Dynamik bei der Bedienung

]Aktive und automatische Benachrichtigung beim Auftreten von Ereignissen oder Änderungen an Daten

Bessere Verteilung

Eine SPWA ist über eine URL im Browser universell erreichbar. Eine Installation ist nicht notwendig. Für den Privatgebrauch ist das nur ein nettes Feature. Im Unternehmensumfeld reduziert diese Eigenschaft die Kosten für Installation und Verteilung. Damit einher geht auch die Möglichkeit, leicht mehrere Versionen parallel zu betreiben. Leicht können neue Funktionen während einer Testphase ausprobiert werden. Eine andere URL für die neue Version ist schnell per E-Mail kommuniziert.

Die einheitliche Plattform

Eine heutige Applikation soll möglichst universell verfügbar sein. Viele Benutzer wollen Dienste auf unterschiedlichen Geräten nutzen. Der Zugriff muss vom heimischen PC genauso gut funktionieren wie vom Tablet oder Smartphone aus. Eine separate Entwicklung für jede Zielplattform ist teuer. Das Web wird die übergreifende Plattform für alle Betriebssysteme und Gerätearten.

Laut einer Studie von Cisco Systems (bit.ly/19jj1Sw) waren schon 2010 über 12,5 Milliarden Geräte mit dem Internet verbunden. Der größte Teil ist mit Browsern und JavaScript ausgestattet. Wenn man als Anbieter eine große Zielgruppe erreichen möchte, muss man auf diese Technologien setzen.

Einige Smartphone-Hersteller entwickeln neue mobile Betriebssysteme, die auf eine reine HTML-Oberfläche setzen. Alle Apps sind damit formal Web-Anwendungen. Vertreter dieser Gattung sind Tizen von Samsung und Firefox OS, hinter dem die Mozilla-Organisation steht. Offensichtlich sind das nicht nur Experimente, erste Geräte sind auf dem Markt verfügbar.

Reduzierung der Technologien

Die oben beschriebene Reduzierung auf die am meisten verbreiteten Technologien hat weitere positive Aspekte auf Seiten der Software-Entwicklung: weniger Know-how muss für die Entwicklung und Wartung bereit gehalten werden. Sicherlich muss in die effiziente Entwicklung mit dem neuen Paradigma einmalig investiert werden, langfristig reduziert es erheblich die Kosten.

Integration über REST-Schnittstellen

SPWA bieten sich gut als Integrationspunkt an. Eine Backend-Komponente kann leicht per REST-Service angebunden werden. Als Datenformat haben sich JSON (JavaScript Object Notation) und XML durchgesetzt. Der Client kann unterschiedliche Datenquellen zusammenführen und in der Applikation integrieren und präsentieren.

Offline-Fähigkeiten

Mit den neuen Fähigkeiten von HTML5 wie dem LocalStorage gibt es zum ersten Mal eine wirkliche Möglichkeit, effiziente Cache-Strategien und Offline-Fähigkeiten zu etablieren.

Geringe Einstiegshürden: Start Easy

Es ist sehr leicht, mit den beschriebenen Technologien zu starten. Als Entwicklungsumgebung reicht ein guter Texteditor aus. Manche bieten sogar Syntax-Hervorhebung für HTML und JavaScript an. Zum Ausführen reicht ein Browser, der mit den entsprechenden Plug-ins sogar Debugging bereitstellt. Alle diese Komponenten sind für den Einsteiger kostenlos verfügbar. Kostenpflichtige Entwicklungsumgebungen bieten eventuell mehr Komfort und einige Arbeitserleichterungen, sind aber keine Voraussetzung.

Das Grundwissen über HTML und JavaScript ist bei vielen Entwicklern und Designern vorhanden. Man muss sicherlich tiefer in die Details eintauchen, wenn man komplexe Anwendungen entwickeln möchte.

1.3Ein Blick zurück in die Historie

Die Ursprünge von HTML reichen zurück bis zum Ende des letzten Jahrhunderts. So gesehen handelt es sich um keine neue Technologie. Der ursprüngliche Fokus bei der Entstehung war, statische Inhalte in Form von wissenschaftlichen Texten und Bildern zu veröffentlichen. Über die Verlinkung sollten thematisch ähnliche Quellen leicht erreichbar sein.

Bild 1.1: Zeitliche Einordnung der Entstehung einiger grundlegenden Technologien für Web-Applikationen.

Das Erstellen von Applikationen war nicht das Ziel. Dieser Umstand drückt sich auch in dem zustandslosen http-Protokoll aus. Jede Anfrage ist isoliert und eine Applikation muss sich selbst um den logischen Zusammenhang kümmern, meist mit Hilfe von Session-Kennzeichen oder Cookies.

Eine Lösungsstrategie für den Bau von Applikationen hieß: Halte alle Informationen auf dem Server und behandle den Browser wie eine Darstellungseinheit für statische HTML-Inhalte. Die eigentliche Applikation läuft auf dem Server. Er verwaltet den Zustand und reagiert auf Benutzeraktionen. Als Ergebnis erhält der Benutzer eine neu generierte HTML-Seite.

Tipp: Evolution of the Web

Eine ansprechende und interaktive Darstellung der Historie bietet die Seite »Evolution of the Web« unter der Adresse www.evolutionoftheweb.com. Die Seite dokumentiert ebenfalls alle gängigen Browser, die zeitliche Abfolge der Versionen und die implementierten Standards.

Diese Architektur funktioniert weiterhin sehr gut. Viele professionelle Angebote sind damit erfolgreich am Markt. Eigentlich wollen die Nutzer aber lieber mit einer Webapplikation arbeiten, die sich mehr wie eine native, installierte Anwendung anfühlt. Diese Programme zeichnen sich durch eine wesentlich aktivere und intuitivere Art der Benutzung aus. Eine Aktion führt schneller zur gewünschten Reaktion.

Aus diesen Forderungen entwickelten sich Plug-ins, die eine proprietäre Technologie im Browser bereitstellten. Die bekanntesten Vertreter sind Java Applets, Flash/Shockwave und Silverlight. Diese bieten mehr Freiheit und ermöglichen aktivere Applikationen. Insbesondere Spiele und Multimedia-Applikationen wurden mit diesen Softwaretechnologien implementiert.

Die Nachteile der heterogenen Welt traten in den letzten Jahren immer stärker in den Vordergrund: Die Plug-ins sind nicht auf allen Plattformen verfügbar. Ständig müssen neuen Versionen installiert werden. In manchen Fällen stellten die Erweiterungen sogar Sicherheitsrisiken dar.

Seit 2005 wirbelte ein neuer Begriff viel Staub auf: AJAX (Asynchronous JavaScript and XML). Mit Hilfe von dynamischen und asynchronen Anfragen bringt AJAX mehr Dynamik in den Browser. Die HTML-Seite wird weiterhin auf dem Server erzeugt und der größte Teil bleibt statisch. Kleine Bereiche werden je nach Benutzeraktionen nachgeladen oder »on-the-fly« ausgetauscht. Partial Page Rendering (PPR) ist eines der Schlagworte.

Typische Beispiele sind Vorschlagslisten, die sich abhängig von der Eingabe anpassen und Vorschläge automatisch vervollständigen. In einigen populären Frameworks sind AJAX-Komponenten heute häufig zu finden. Frameworks wie JSF (Java Server Faces) gelingt damit der Spagat: Dynamik im Client zu bieten, ohne das Programmierparadigma grundlegend zu ändern. Für manche Aufgabenstellungen ist das ein akzeptabler Weg.

Aus diesen ersten Anfängen haben sich die aktuellen mächtigen Frameworks, allen voran jQuery, entwickelt. Ohne diese Hilfe bei der Manipulation des DOM-Baums einer HTML-Seite verzweifelt man schnell an den Unterschieden gängiger Browser und ihren verschiedenen Versionen.

Vor diesem Hintergru...

Inhaltsverzeichnis

• Deckblatt
• Inhaltsverzeichnis
• 1. Einleitung
• 2. JavaScript für Entwickler
• 3. Single-Page-Web-Apps erstellen
• 4. Von der DB bis ins Web mit Meteor
• 5. Mobile Single-Page-Web-Apps
• 6. Anhang
• Stichwortverzeichnis