Single Page Ap­pli­ca­ti­ons – De­fi­ni­ti­on, Funk­ti­ons­wei­se und Nutzen

In­ter­ak­ti­ve Websites sind heute keine Sel­ten­heit mehr, sondern gehören zum täglichen Umgang mit dem Internet einfach dazu. Während in der Ver­gan­gen­heit häufig so­ge­nann­te Multi Page Ap­pli­ca­ti­ons genutzt wurden, die aus vielen ver­schie­de­nen einzelnen Webseiten bzw. HTML-Do­ku­men­ten bestehen, setzen sich Single Page Ap­pli­ca­ti­ons aus nur einer einzigen Webseite zusammen.

Eine Single-Page-Web­an­wen­dung ist eine sehr moderne Mög­lich­keit, dy­na­mi­sche Websites zu erzeugen. Das Erstellen von sta­ti­schen Websites ist heut­zu­ta­ge mithilfe von Static-Side-Ge­ne­ra­to­ren kein Problem mehr. Doch nach wie vor sind für eine solche Website mehrere HTML-Dokumente nötig.

Dy­na­mi­sche Web­an­wen­dun­gen bieten eine Reihe von In­ter­ak­ti­ons­mög­lich­kei­ten. Bei Single Page Ap­plia­ti­ons wird der Content der Web­ap­pli­ka­ti­on aber lediglich ein einziges Mal geladen, denn eine Single-Page-Web­an­wen­dung besteht (wie der Name schon sagt) nur aus einer einzigen Webseite. Das bedeutet, dass es nur ein einziges HTML-Dokument gibt, welches bei In­ter­ak­tio­nen des Nutzers durch in­te­grier­ten Ja­va­Script-Code ständig ma­ni­pu­liert wird, um bei­spiels­wei­se das Design der Website zu verändern. Auf diese Weise muss die Website nicht ständig neu geladen werden, da sie direkt im Browser arbeitet.

Bei Single Page Ap­pli­ca­ti­ons stellt der Server nur noch die initiale Webseite, bestehend aus einem HTML-Dokument, zur Verfügung. In diesem Dokument befindet sich neben dem grund­le­gen­den Aufbau der Website und dem Design, das mit CSS fest­ge­legt wird, auch ein so­ge­nann­tes DOM-Element. Dieses ist besonders wichtig für die Funk­ti­ons­wei­se von Single Page Ap­pli­ca­ti­ons: Es handelt sich um das Document Object Model, in dem der gesamte Code steht, der die Funk­tio­na­li­tät der Website si­cher­stellt. Dieser ist in der Pro­gram­mier­spra­che Ja­va­Script verfasst.

Bei einer Nut­zer­inter­ak­ti­on werden im Hin­ter­grund und für den Nutzer un­sicht­bar Daten im JSON- oder XML-Format geladen. Diese werden dann au­to­ma­tisch in das DOM der geladenen Webseite eingefügt. Auf diese Weise wird die gesamte Prä­sen­ta­ti­ons­lo­gik der Web­an­wen­dung direkt auf Seiten des Clients, nämlich im Browser, aus­ge­führt. Der Server liefert lediglich Daten, nicht aber ganze Webseiten.

Ein Beispiel für eine populäre Single Page Ap­pli­ca­ti­on ist das soziale Netzwerk Twitter. Wenn der Nutzer die Seite im Browser über die URL aufruft, schickt der Browser als Client eine Request an den Server. Die Website wird geladen und für den Nutzer be­reit­ge­stellt. In­ter­agiert dieser nun mit Twitter – bei­spiels­wei­se, um ein Profil auf­zu­ru­fen –, wird lediglich der ent­spre­chen­de Ja­va­Script-Code aus­ge­führt und der Umweg über den Server entfällt. So wird der Content der Website nur schritt­wei­se nach­ge­la­den. Daher ist die Ser­ver­last bei Single-Page-Web­an­wen­dun­gen eher gering.

Eine Single-Page-Web­an­wen­dung eignet sich vor allem dann, wenn die Ser­ver­last reduziert werden soll. Dies kann nicht nur bei großen Websites wie Facebook oder Twitter, sondern bereits bei kleineren On­line­shops sinnvoll sein. Immer, wenn Nutzer häufig mit der Website in­ter­agie­ren sollen, sind kurze Lauf­zei­ten besonders wichtig. Daher bietet es sich an, bei­spiels­wei­se Com­pu­ter­spie­le, die im Web­brow­ser aus­ge­führt werden, als Single Page Ap­pli­ca­ti­on zu pro­gram­mie­ren. Web­an­wen­dun­gen, die auf mobilen End­ge­rä­ten als App verfügbar sein sollen, sollten im besten Fall als Single Page Ap­pli­ca­ti­on gestaltet werden. So ist es möglich, dasselbe Backend für Mobile App und Website zu nutzen, was den Pro­gram­mier­auf­wand senkt.

Der wohl of­fen­sicht­lichs­te Vorteil von Single Page Ap­pli­ca­ti­ons ist die geringe Re­ak­ti­ons­zeit. Da nur noch Daten und nicht mehr gesamte Webseiten vom Server an­ge­for­dert müssen, laden dy­na­mi­sche Single Page Ap­pli­ca­ti­ons we­sent­lich schneller. Eng damit verbunden ist die Tatsache, dass Single-Page-Web­an­wen­dun­gen im Vergleich zu Multi Page Ap­pli­ca­ti­ons weniger Res­sour­cen benötigen. Auch die Feh­ler­be­he­bung ist bei Single Page Ap­pli­ca­ti­ons ein Pluspunkt: Ent­wick­ler können sich beim Debugging auf den Ja­va­Script-Code fo­kus­sie­ren und müssen sich nicht mit ser­ver­sei­ti­gem Code aus­ein­an­der­set­zen. Zu­sätz­lich verfügen die meisten Ja­va­Script-Frame­works über Tools zur Feh­ler­be­he­bung. Auch der Umstieg auf Mobile Apps ist wie bereits erwähnt angenehm einfach.

Doch auch Single Page Ap­pli­ca­ti­ons können an ihre Grenzen stoßen. Ins­be­son­de­re im Bereich der Such­ma­schi­nen­op­ti­mie­rung erzielen Web­an­wen­dun­gen, die lediglich auf einer einzelnen Webseite beruhen, schlech­te­re Er­geb­nis­se. Dies liegt daran, dass es für die Such­ma­schi­nen erheblich schwie­ri­ger ist, Ja­va­Script-Code zu durch­su­chen. Die Er­stel­lung von Single Page Ap­pli­ca­ti­ons lohnt darüber hinaus nur dann, wenn auch wirklich dy­na­mi­scher Content dar­ge­stellt werden soll. Single-Page-Web­an­wen­dun­gen sind im Vergleich zu sta­ti­schen Websites in ihrer Er­stel­lung nämlich we­sent­lich kost­spie­li­ger.

Es gibt ver­schie­de­ne Frame­works, die verwendet werden können, um eine Single-Page-Web­an­wen­dung zu im­ple­men­tie­ren. Sie sind sozusagen das Pendant zu ver­schie­de­nen Static-Side-Ge­ne­ra­to­ren in der Ent­wick­lung sta­ti­scher Websites. Ja­va­Script-Frame­works er­leich­tern den Ent­wick­lern die Pro­gram­mie­rung dy­na­mi­scher Single Page Ap­pli­ca­ti­ons, indem vor­pro­gram­mier­te Inhalte be­reit­ge­stellt werden. Auch das Debugging wird durch Nutzung von Frame­works er­leich­tert. Die po­pu­lärs­ten Frame­works, die für die Web­ent­wick­lung mit Ja­va­Script ein­ge­setzt werden, sind React, Angular und Vue.

React

React ist ein Ja­va­Script-Web­frame­work, das ur­sprüng­lich von Facebook ins Leben gerufen wurde. Seit 2013 ist das Framework als Open Source verfügbar. React bietet eine Ja­va­Script-Bi­blio­thek, mit der es möglich ist, sowohl in­ter­ak­ti­ve Be­nut­zer­ober­flä­chen als auch wie­der­ver­wend­ba­re Software-Kom­po­nen­ten zu erstellen. Da es sich bei React nicht um ein kom­plet­tes Frontend-Framework handelt, ist es al­ler­dings nicht möglich, allein mit diesem Tool voll­wer­ti­ge und funk­ti­ons­fä­hi­ge Single Page Ap­pli­ca­ti­ons zu erstellen.

Angular

Angular ist ein Ja­va­Script-Framework von Google. Das 2016 er­schie­ne­ne Open-Source-Framework setzt nicht nur auf die Ent­wick­lung von Single Page Ap­pli­ca­ti­ons, sondern auch auf Cross-Plattform-Ent­wick­lung. Nicht zuletzt deshalb ist das Framework platt­form­un­ab­hän­gig gestaltet. Angular un­ter­stützt neben Ja­va­Script auch die von Microsoft ent­wi­ckel­te Pro­gram­mier­spra­che Ty­pe­Script, sodass auch fort­ge­schrit­te­ne Pro­gram­mier­kon­zep­te ver­wirk­licht werden können. Aufgrund seines Umfangs und seiner Kom­ple­xi­tät eignet sich das Framework vor allem für Groß­un­ter­neh­men.

Vue

Vue hat es sich zum Ziel gesetzt, die Vorteile der beiden Frame­works Angular und React zu vereinen. Das 2016 in der zweiten Version her­aus­ge­brach­te cli­ent­sei­ti­ge Open-Source-Framework gilt nicht zuletzt aufgrund seiner Kom­pa­ti­bi­li­tät mit anderen Frame­works für Single Page Ap­pli­ca­ti­ons als sehr ein­stiegs­freund­lich. Vor­aus­ge­setzt werden lediglich Kennt­nis­se von HTML und Ja­va­Script. Außerdem weist das Framework mit weniger als 100 KB be­nö­tig­tem Spei­cher­platz eine sehr geringe Größe auf. Vue kann zudem mit ver­schie­de­nen Bi­blio­the­ken kom­bi­niert werden, wodurch Ent­wick­lern viel Fle­xi­bi­li­tät geboten wird.

Die Nutzung von Ver­sio­nen­kon­troll­sys­te­men wie GitHub bietet eine Reihe von Vorteilen. Ins­be­son­de­re die Arbeit im Ent­wick­ler­team sowie das Managen ver­schie­de­ner Code­ver­sio­nen werden enorm er­leich­tert. Der Code einer Single-Page-Web­an­wen­dung lässt sich leicht in einem GitHub-Re­po­si­to­ry be­reit­stel­len. Nachdem Sie Ihren Code in GitHub ein­ge­pflegt haben, ist es ein Leichtes, mit einem Server rea­li­täts­ge­treue Livetests bereits während des Ent­wick­lungs­pro­zes­ses aus­zu­füh­ren.

In nur wenigen Schritten können Sie Ihr Web­pro­jekt bei Deploy Now von IONOS be­reit­stel­len.

1. Stellen Sie zunächst eine Ver­bin­dung Ihres GitHub-Accounts mit IONOS Deploy Now her.
2. Beginnen Sie im Anschluss ein neues Projekt.
3. Im­por­tie­ren Sie das GitHub-Re­po­si­to­ry, in dem sich Ihre Single Page Ap­pli­ca­ti­on befindet.
4. Jetzt können Sie Ver­än­de­run­gen an Ihrer Website live unter der Vorschau-URL von IONOS Deploy Now im Blick behalten.