JavaScript/Anwendung und Praxis/Webanwendung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Als Single-page-Webanwendung (englisch Single-page Web Application, kurz SPA) wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht, dessen gesamter Code (HTML, CSS und JavaScript) beim Seitenaufruf geladen wird. Diese Art von Web-Architektur steht im Gegensatz zu klassischen Webanwendungen, welche aus mehreren, untereinander verlinkten HTML-Dokumenten bestehen.

Sie ähneln eher Apps: Beim Klicken eines Links werden Seiten nicht vollständig neu geladen, sondern die gewünschten Daten ohne weiteren HTTP-Request per AJAX über die REST-Schnittstelle abgefragt und anschließend dynamisch in das DOM eingefügt. Dies sorgt besonders auf mobilen Geräten, die oft immer noch unter Bandbreitenbegrenzungen leiden, dafür, dass auf Eingaben schnell reagiert wird.


Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

[Bearbeiten] Einsatz von Frameworks

Es gibt eine Vielzahl von Frameworks, die einem einen Teil der Arbeit abnehmen.

In den letzten Jahren ist besonders Angular in die Kritik geraten, da der Geschwindigkeitsvorteil von SPAs durch das Laden der umfangreichen Bibliothek wieder aufgehoben wurde. Mit einem Framework erstellte Webprojekte lassen sich zu einem späteren Zeitpunkt nur schwer auf eine neuere, oft nicht abwärtskompatible Version anpassen.

Peter-Paul Koch kritisiert Angular: „one could describe it as a front-end framework by non-front-enders for non-front-enders“[1]

[Bearbeiten] Suchbarkeit von Inhalten

Eigentlich widerspricht das Konzept der SPAs der Trennung von Inhalt, Präsentation und Verhalten, da der Inhalt innerhalb des Skripte verborgen und damit auch für Suchmaschinen nicht erreichbar ist.

Google durchsucht URLs, die Fragmentbezeichner enthalten, . Für andere Suchmaschinen bleibt der Inhalt unsichtbar.

Aus diesem Grund werden SPAs normalerweise nicht dort eingesetzt, wo eine Vielzahl von Inhalten für Suchmaschinen verfügbar sein soll. Anwendungsbereich sind eher in Bereichen zu finden, in denen private Daten hinter einem Authentifizierungssystem verborgen sind, bzw. Landung Pages, deren Unterseiten auch konventionell zu finden sind.

[Bearbeiten] Barrierefreiheit

Eine single page application kann durchaus barrierefrei sein – wenn sie denn richtig implementiert wird. Bspw. Bereiche mit aria-live gekennzeichnet werden, wo sich Inhalte dynamisch ändern. Es fließt auch zunehmend Wissen über Barrierefreiheit in solche Frameworks ein.

[Bearbeiten] Anwendungsbeispiel

ToDo (weitere ToDos)

Anwendungsbeispiel
  • mit WebSocket
  • mit Aria-Attributen wie aria-live
  • ohne Framework / mit Knockout

→ siehe Forumsbeitrag von Gunnar Bittersmann.

--Matthias Scharwies (Diskussion) 07:00, 27. Jul. 2016 (CEST)

[Bearbeiten] Navigation

Wenn Benutzer innerhalb einer SPA vor- und zurück navigieren wollen, nehmen Sie oft das Naheliegendste: den Back-Button in der Browserleiste. Allerdings landen Sie dann oft außerhalb der SPA. Abhilfe schafft hier eine Funktion, bei der jeder Status mit pushState eine Adresse bekommt, damit die Zurück-Navigation funktioniert und der Status verlinkt werden kann.

[Bearbeiten] Quellen

  1. Peter Paul Koch: The problem with Angular

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML