Ein Trend bei der Webseitengestaltung geht zur Darstellung der Inhalte auf einer einzigen Seite. Menüs werden dabei durch Scrolling ersetzt. Für Entwickler heißt es hier Umdenken um solche Single Page Web Apps auch erstellen zu können. Frameworks wie AngularJS, Meteor und jQuery Mobile unterstützen dabei. Wie, zeigen praxisnahe Beispiele. Quelle: Verlagstext
/ AUS DEM INHALT: / / /
Inhaltsverzeichnis:
1 Einleitung 11
1.1 Das Web als Plattform 11
1.2 Was ist eine Single-Page-Web-Applikation? 11
1.2.1 Die Vorteile von Single-Page-Web-Applikationen 12
1.3 Ein Blick zurück in die Historie 14
1.4 Warum erst jetzt? 16
1.5 Für welche Applikationen sind SPWA geeignet? 17
1.6 Nachteile von Single-Page-Applikationen 18
1.7 Was sind die Herausforderungen? 18
1.7.1 JavaScript: Gehasst und geliebt? 20
1.7.2 Interne Strukturen von Applikationen 22
1.8 Architektur-Modell 22
1.9 Ein erstes Beispiel 24
1.9.1 "Hello World" mit AngularJS 24
2 JavaScript für Entwickler 27
2.1 Einleitung 27
2.2 Dynamisches Web mit JavaScript 27
2.3 Missverständnisse bei JavaScript 29
2.3.1 JavaScript kennt keine Datentypen 29
2.3.2 Die Funktion evalO ist böse 31
2.3.3 Verwirrungen mit Vergleichen: == oder ===? 32
2.3.4 Objektorientierte Programmierung 33
2.3.5 JavaScript ist in jedem Browser unterschiedlich 42
2.3.6 JavaScript kennt nur globale Variablen 42
2.4 Funktionen: First-Class Citizens 43
2.4.1 Definieren von Funktionen 43
2.4.2 Immediately Invoked Function Expression (IIFE) 45
2.4.3 Funktionen und Parameter 46
2.5 Einfacher Leben mit JavaScript 47
2.5.1 Konventionen 47
2.5.2 Behandlung von Fehlern und Ausnahmen 48
2.5.3 Guter Stil mit dem Strict Mode 50
2.6 JSON - JavaScript Object Notation 53
2.6.1 JSON im Detail 53
2.6.2 Parsen und Ausgaben von JSON 55
2.7 Gerüstet für die Zukunft: EcmaScript 6 56
3 Single-Page-Web-Apps erstellen 59
3.1 Applikationen mit JavaScript - erste Schritte 59
3.2 Handarbeit oder Framework? 60
3.3 AngularJS: der Superheld an deiner Seite 61
3.4 Planung: Link-Verwaltung 69
3.4.1 Schritt 1: Tabellen-Ansicht 70
3.4.2 Schritt 2: Strukturen schaffen 74
3.4.3 Schritt 3: Detailansicht für Links 77
3.4.4 Schritt 4: Anlegen, Ändern, Kopieren und Löschen 80
3.4.5 Schritt 5: Filtern, aber richtig 87
3.4.6 Schritt 6: Sortieren mit mehr Komfort 93
3.4.7 Schritt 7: Daten im LocalStorage des Browsers 95
3.4.8 Schritt 8: Kommunikation mit dem Server per REST 104
3.5 Web-Anwendungen im Unternehmensumfeld 113
3.5.1 Fachliche Anforderungen 113
3.5.2 Herausforderungen 114
3.5.3 AngularJS-UI Bootstrap 115
3.5.4 Google Charts 120
3.5.5 Umsetzen der Anforderungen 123
3.5.6 Fazit zum zweiten AngularJS-Beispiel 143
3.6 Spiele mit AngularJS entwickeln 143
3.6.1 SVG-Grundlagen 144
3.6.2 Eine Sudoku-App mit AngularJS und SVG 147
3.6.3 Die Umsetzung der Sudoku-App 149
4 Von der DB bis ins Web mit Meteor 173
4.1 Das Meteor-Framework 173
4.2 Die sieben Prinzipien 174
4.3 Starten mit Meteor 175
4.3.1 Installation und erste Schritte 175
4.3.2 Mehr Struktur in umfangreicheren Projekten 180
4.4 Beispiel: Chat-Applikation 181
4.4.1 Schritt 1: Start und Setup 181
4.4.2 Schritt 2: Erste Erweiterungen des Chats 185
4.4.3 Schritt 3: Ein erstes Login 188
4.4.4 Schritt 4: Externe Login-Provider 194
4.5 Ausflug: Persistenz mit MongoDB 198
4.6 Beispiel: Kollektives Whiteboard 202
4.6.1 Publish/Subscribe 202
4.6.2 Remote Procedure Calls 203
4.6.3 Die Anforderungen des Whiteboards 204
4.6.4 Die Umsetzung 205
Inhaltsverzeichnis ©
4.6.5 Wir erweitern das Whiteboard 223
4.6.6 Deployment & Packaging 230
4.7 Abschließende Anmerkungen zu Meteor 230
4.7.1 Meteor-Erweiterungen: Atmosphere 231
4.7.2 Bewertung von Meteor 233
5 Mobile Single-Page-Web-Apps 235
5.1 Mobile Anwendungen werden zum Standard 235
5.1.1 Einleitung zu jQuery Mobile 236
5.2 Eine mobile Zitate-Datenbank mit jQuery Mobile 253
5.2.1 Schritt 1: Backend und Anbindung 257
5.2.2 Schritt 2: Grundgerüst und zufällige Zitate 260
5.2.3 Schritt 3: Vorschläge für Autoren und Stichworte 264
5.2.4 Schritt 4: Ergebnisliste 268
5.2.5 Schritt 5: Feinarbeiten und Erweiterungen 269
5.3 Fazit zu jQuery Mobile 279
5.4 Testen von mobilen Applikationen 280
5.5 Zur nativen App mit PhoneGap 281
6 Anhang 285
Stichwortverzeichnis 287