Single-Page-Web-Apps E-Book

Heiko Spindler

• Herausgeber: Franzis Verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch

Veröffentlichungsjahr: 2014

Beschreibung

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.

Leseprobe

Vorwort

Für wen ist das Buch gedacht?

Das Buch richtet sich an alle, die Interesse an einer neuen Art von Web-Entwicklung haben und den Nutzern mehr Dynamik bieten wollen. Um sinnvolle Single-Page-Web-Applikationen (SPWA) zu bauen, werden wir das Rad nicht neu erfinden. Die Zeiten, in denen man alles von Hand machen musste, sind für die Web-Entwicklung zum Glück vorbei. Der Hauptfokus des Buches liegt auf der Auswahl und dem Einsatz der richtigen Frameworks, für die Implementierung von SPWA. Dabei steht die Pragmatik und Einfachheit im Vordergrund. Gleichzeitig gibt das Buch mit vielen Beispielen Hilfestellung für die Entwicklung von unternehmenskritischen Applikationen mit JavaScript.

Erste Grundkenntnisse im Umgang mit HTML5, CSS 3 und einer Programmiersprache sind sehr sinnvoll und werden vorausgesetzt. Erfahrungen in der Entwicklung von JavaScript sind hilfreich, aber kein Muss.

Wie ist das Buch aufgebaut?

Das Buch gliedert sich in vier Hauptteile:

1Einleitung in das Thema:

Die Einleitung führt in das Thema ein und erklärt die grundlegenden Konzepte und Herausforderungen beim Erstellen von Web-Applikationen.

2JavaScript für Entwickler:

Das zweite Kapitel enthält eine Einführung in die professionelle Programmierung mit JavaScript. Dabei werden vor allem die Unterschiede zu verbreiteten Programmiersprachen, wie zum Beispiel Java, aufgezeigt. Hilfreich sind erste Erfahrungen in der Programmierung.

3Single-Page-Web-Apps erstellen:

Der Hauptteil zeigt Schritt für Schritt, wie dynamische Web-Applikationen mit AngularJS erstellt werden. Jedes Beispiel hebt dabei einzelne Aspekte hervor. Besonderes Augenmerk liegt auf dem effizienten Einsatz und Zusammenspiel von aktuellen Frameworks. Zusätzlich vermittelt der Abschnitt viele Tipps und Tricks für die tägliche Arbeit.

4Von der DB bis ins Web mit Meteor:

Die Programmiersprache JavaScript eignet sich auch für die Implementierung von Server-Komponenten. Meteor stellt ein durchdachtes Applikationsframework bereit, das mit herausragenden Eigenschaften überrascht: Datenänderungen werden automatisch an alle Clients verteilt. Weil viele Funktionen und Module vorgefertigt sind, kann man sich sich ganz auf das Wesentliche konzentrieren. Mehrere nachvollziehbare Beispiele erklären den Einstieg in die Entwicklung mit Meteor.

5Mobile Single-Page-Web-Apps:

Mobile Geräte stellen einen immer größeren Markt im Web dar, wobei die teilweise großen Unterschiede, zum Beispiel bei den Displays oder der Bedienung, besondere Anforderungen stellen. Das fünfte Kapitel zeigt, wie sich spezielle Web-Applikationen für diese Geräteklasse mit jQuery-Mobile erstellen lassen.

Downloads zum Buch

Alle im Buch erwähnten Quellcodes finden Sie auf www.buch.cd zum Download.

Ich bedanke mich bei meiner Familie für die Unterstützung. Ein besonderer Dank geht an Niko Köbler.

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.