{"id":4046,"date":"2021-08-24T12:17:00","date_gmt":"2021-08-24T10:17:00","guid":{"rendered":"https:\/\/www.sortlist.de\/blog\/?p=4046"},"modified":"2023-01-02T11:45:56","modified_gmt":"2023-01-02T10:45:56","slug":"single-page-applications-web-apps-aus-einem-html-dokument","status":"publish","type":"post","link":"https:\/\/www.sortlist.de\/blog\/single-page-applications-web-apps-aus-einem-html-dokument\/","title":{"rendered":"Daher sollten Sie Single Page Applications nutzen!"},"content":{"rendered":"\n

„Server \u00fcberlastet, bitte versuchen sie es zu einem <\/mdspan>sp\u00e4teren Zeitpunkt noch einmal.“<\/mdspan><\/p>\n\n\n\n

Diese Meldung kennen wir alle. Sto\u00dfen wir auf eine solche Meldung, versuchen wir es auf einem anderen Webportal oder \u00fcber andere Wege. Das Optimieren von Webseiten und ganz speziell deren Ladezeit wird f\u00fcr Firmen immer wichtiger, um Nutzende oder Kund:innen auf der eigenen Website zu halten<\/strong>.<\/mdspan><\/p>\n\n\n\n

Durch die stark steigende Nutzung von mobilen Ger\u00e4ten und das st\u00e4ndige „online sein“, wird es notwendig, die Performance der Webseiten laufend anzupassen und zu verbessern. Laden Webanwendungen zu langsam, springen Nutzer ab. Mit Single Page Applications (kurz: SPA) wird die Ladezeit verk\u00fcrzt<\/strong>, da die einzelnen Seiten nicht mehr vollst\u00e4ndig vom Server geladen werden, sondern ein dynamisches Laden erfolgt.<\/mdspan><\/p>\n\n\n\n

Was ist eine Single Page Application?<\/h2>\n\n\n\n

Als Single Page Webanwendung bezeichnet man Web Anwendungen, welche aus lediglich einem HTML-Dokument bestehen<\/strong>. Ihre Inhalte werden dynamisch nachgeladen.<\/p>\n\n\n\n

Das urspr\u00fcngliche Modell der Benutzung des Internets besteht darin, dass der Zugriff auf Webseiten \u00fcber einen HTML<\/a>-Link funktioniert, welcher pro Suche von einem Webserver abgefragt wird. Bei jedem Click auf einer Website wird also ein neues HTML-Dokument geladen<\/strong>. Das per Click aufgerufene neue Formular ersetzt im Browser das alte. Dieser rechen- und zeitaufw\u00e4ndige Prozess wird als „page reload“ bezeichnet.<\/p>\n\n\n\n

Mit der Anwendung von Single Page Applications, welche von hochfrequentierten Sites wie z.B. Google Maps, Gmail oder Netflix<\/strong> verwendet werden, ver\u00e4ndert sich dieser Prozess jedoch. Alle Informationen werden jetzt auf einer einzigen Seite, anstatt auf unterschiedlichen Seiten, geladen. Die Single Page Application (SPA) ist eine App oder Anwendung, welche vorab im Browser geladen wird<\/strong>.<\/p>\n\n\n\n

Statt immerzu die vollst\u00e4ndige Website zu laden, wird nun nur noch der f\u00fcr den Nutzenden relevante Content dazu geladen. So entsteht beim Wechsel zwischen den Navigationsbereichen eine dynamische User Experience. Da die Anwendung aus technischer Sicht so nur noch auf einer Seite<\/strong> stattfindet, spricht man von einer Single Page Anwendung.<\/p>\n\n\n\n

M\u00f6glichkeiten des Einsatzes von Single Page Applications<\/h2>\n\n\n\n

Webseiten, die eine nahtlose, schnelle User Experience bieten wollen, haben die Single Page Application f\u00fcr sich entdeckt. <\/p>\n\n\n\n

Besonders soziale Netzwerke wie Facebook<\/a> und Twitter<\/a> demonstrieren eindrucksvoll wie SPAs Nutzer:innen anziehen. Damit User:innen eine einheitliche Experience haben, egal welches Endger\u00e4t sie nutzen, werden SPAs \u00fcber plattform\u00fcbergreifende Frameworks f\u00fcr die mobile Nutzung \u00fcbertragen und somit f\u00fcr auch f\u00fcr Apps benutzt. Diese Funktionen sind allerdings auch kostenintensiv.<\/p>\n\n\n\n

Ausschlaggebend bei der Entscheidung ist meist der Umfang der Web App<\/strong>. Ebay oder Amazon nutzen zum Beispiel eine Multi Page App. Sollen aber eher die Server entlastet und dennoch eine dynamische Experience geboten werden, sind Single Page Applications geeignet, da sie den Hauptteil des Workloads auf den Client Browser verschieben und somit die Server der Unternehmen entlasten. Beispielhaft zu nennen w\u00e4re hier der Facebook Feed, bei dem lediglich die neuen Posts aktualisiert werden. <\/mdspan><\/p>\n\n\n\n

Die vorherrschenden Gebiete des Einsatzes sind folgende:<\/p>\n\n\n\n

Gro\u00dfe Benutzerzahlen<\/h3>\n\n\n\n

Die hochfrequentierten Online-Auftritte von Facebook, Google oder Twitter sind die Paradebeispiele f\u00fcr SAPs<\/strong>. Alle Vertreter sind im B2C-Markt und haben das Ziel, die eigene Serverlast zu reduzieren. Zugleich soll die Anwendung optimal skalierbar sein. Die ausschlie\u00dflich clientseitige Verwaltung entlastet die Infrastruktur der Unternehmen<\/strong> und erlaubt eine Dezentralisierung des Anwendungsservers.<\/p>\n\n\n\n

Kleine Projekte<\/h3>\n\n\n\n

Bei Onlineauftritten von Unternehmen oder Product-Landing-Pages<\/strong> macht eine Single Page Webanwendung Sinn. Die Menge der Gesch\u00e4ftslogik ist begrenzt, der besondere Fokus liegt auf der Pr\u00e4sentation. SPAs erlauben hier eine hohe Interaktivit\u00e4t<\/strong> und die Umsetzung einer benutzerfreundlichen Bedienoberfl\u00e4che.<\/p>\n\n\n\n

Hohe Interaktivit\u00e4t<\/h3>\n\n\n\n

Computerspiele sind hochgradig interaktiv und erfordern kurze Reaktionszeiten. In der Vergangenheit konnten hier als Plug-in unterst\u00fctzte SPAs mit Adobe Flash oder Microsoft Silverlight punkten, aber auch andere Anbieter erobern den Markt. Die JavaScript-basierte Anwendung bietet den Vorteil, dass Webstandards genutzt werden, welche auch auf mobilen Endger\u00e4ten verf\u00fcgbar sind. So k\u00f6nnen mehrere Zielgruppen gleichzeitig adressiert<\/strong> werden.<\/p>\n\n\n\n

Vorteile von Single Page Applications<\/h2>\n\n\n\n

Beschleunigte User Experience<\/h3>\n\n\n\n

Die aufgerufenen Informationen k\u00f6nnen viel schneller geladen werden, da beim Click auf den Navigationslink nicht mehr die Antwort des Servers abgewartet werden muss<\/strong>. Die f\u00fcr die Website ben\u00f6tigte Struktur ist bereits \u00fcber die SPA auf dem Browser geladen. Der Content einer Website wird somit nicht komplett auf einmal geladen, sondern erscheint nach und nach, je nach Scroll-Fortschritt.<\/p>\n\n\n\n

Durch den so entstehenden verminderten Kommunikationsaufwand mit dem Webserver werden die Seite und die Webanwendung schneller<\/strong>. User:innen haben folglich nie das Gef\u00fchl, dass die Webseite hakt oder sie auf den Aufbau der Seite warten m\u00fcssen. Das liegt am konstanten Interface der Anwendung, die Inhalte dynamisch nachl\u00e4dt. Die SPA wird demzufolge gern eingesetzt, wenn Websites an einer hohen Off-Rate leiden.<\/p>\n\n\n\n

Verminderte Serverressourcen<\/h3>\n\n\n\n

Im Browser wird die Single Page Webanwendung einmalig geladen. Sendet ein:e User:in eine Anfrage, antwortet der Server in einem Format wie JSON. Somit wird nicht bei jeder Anfrage die gesamte HTML-Struktur der Seite neu geladen<\/strong>, Serverressourcen und Bandbreiten k\u00f6nnen geschont werden.  Aus diesem Grund benutzen stark frequentierte Websites SPAs, weil sie mit dieser Technologie ihre eigene Zuverl\u00e4ssigkeit und Effizienz sicherstellen k\u00f6nnen.<\/p>\n\n\n\n

Einfachere Fehlerbehebung<\/h3>\n\n\n\n

Single Page Applications verwenden JavaScript Frameworks<\/strong>, welche \u00fcber integrierte Tools zur Fehlerbehebung verf\u00fcgen. Sie geben Entwicklern Aufschluss dar\u00fcber, wie Elemente auf der Seite dargestellt werden, wie Daten abgefragt und serverseitig zwischengespeichert werden. Entsprechend m\u00fcssen Fehlerquellen nicht mehr im Code des Servers gesucht werden, die Pr\u00fcfung des JavaScript-Codes des Browsers gen\u00fcgt<\/strong>.<\/p>\n\n\n\n

Erleichterte Umstellung auf Webanwendungen<\/h3>\n\n\n\n

Durch Single Page Applications wird der gesamte Content auf einmal zug\u00e4nglich gemacht<\/strong>. Dies erleichtert das Scrollen, was besonders bei der Anwendung auf mobilen Endger\u00e4ten sinnvoll ist. Im Zuge der Umstellung auf mobile Apps kann also ein Gro\u00dfteil des vorhandenen Contents einfach \u00fcbertragen werden.<\/p>\n\n\n\n

SPAs verwendet man zunehmend auch bei der Entwicklung fortschrittlicher Web-Apps, die Funktionen wie Push-Benachrichtigungen, lokales Caching und Offline-Zugriff bieten. SPAs sind unabh\u00e4ngig von lokal installierten Plug-ins, wodurch von \u00fcberall auf die Webanwendung zugegriffen werden kann. Die Reichweite der App wird dadurch erh\u00f6ht<\/strong>.<\/p>\n\n\n\n

Nachteile von Single Page Applications<\/h2>\n\n\n\n

Verz\u00f6gerte Ladezeiten zu Beginn<\/h3>\n\n\n\n

Da die komplette SPA auf einmal geladen wird, ist es m\u00f6glich, dass die Ladezeit<\/strong><\/a> im Gegensatz zu einer herk\u00f6mmlichen Webseite etwas l\u00e4nger ist<\/strong>, abh\u00e4ngig von der Komplexit\u00e4t des dahinter liegenden JavaScript-Codes, welcher die App ausf\u00fchrt. <\/p>\n\n\n\n

Probleme mit SEO<\/h3>\n\n\n\n

Das Web gleicht einer Bibliothek mit st\u00e4ndig wachsendem Inhalt, aber ohne Inhaltsverzeichnis. Sogenannte Web-Crawler suchen nach \u00f6ffentlichen Websites und folgen den hinterlegten eindeutigen Links. Da die Inhalte bei SPAs \u00fcber JavaScript nachgeladen werden und nicht \u00fcber einzelne URLs, ist es f\u00fcr Suchmaschinen schwerer, Single Page Applications zu durchsuchen<\/strong>.<\/p>\n\n\n\n

Wie wir gelernt haben, besteht auf Client-Seite eine SPA aus nur einer einzelnen HTML-Seite, welche \u00fcber AJAX Kommandos mit dem Server kommuniziert. Das Dilemma der SPAs konnte schlie\u00dflich durch Google und das JavaScript Framework AngularJS gel\u00f6st werden, welches eine bessere Durchsuchbarkeit f\u00fcr Single Page Applications<\/strong> bietet.<\/p>\n\n\n\n

Sicherheitsprobleme<\/h3>\n\n\n\n

Clientseitige<\/strong> JavaScript Anwendungen sind anf\u00e4llig f\u00fcr Hacker-Angriffe<\/strong>. Sch\u00e4dliche Skripts k\u00f6nnen in webbasierte Apps geschleust werden. Ohne die entsprechenden Sicherheitsvorkehrungen k\u00f6nnen hier unter Umst\u00e4nden sensible Daten eines Websitebetreibers \u00f6ffentlich zug\u00e4nglich<\/strong> gemacht werden.<\/p>\n\n\n\n

Erste Schritte der Implementierung<\/h2>\n\n\n\n

Es gibt drei Eckpfeiler die f\u00fcr eine hochwertige Single Page App Entwicklung<\/strong> unerl\u00e4sslich sind: Team, Werkzeuge und Zeit. <\/p>\n\n\n\n

Werkzeuge <\/h3>\n\n\n\n

Wie oben erw\u00e4hnt, sind JavaScript und seine Frameworks ein Muss<\/strong>. Das Entwicklungsteam kann entweder reines JS verwenden, es mit der React JS-Entwicklung kombinieren oder andere JS-Frameworks wie Angular.js oder Vue ausprobieren. Jedes Anwendungsframework f\u00fcr einzelne Seiten hat seine eigenen Besonderheiten, Vor- und Nachteile. Bei den Back End Technologien<\/strong> kann man frei w\u00e4hlen. Node.js ist eine gro\u00dfartige Option f\u00fcr die SPA-Backend-Entwicklung, aber auch PHP und seine Frameworks funktionieren gut.<\/p>\n\n\n\n

Nun fehlt noch eine geeignete Datenbank<\/strong>. Die beste Option ist die, mit der man selbst oder das Engineering-Team vertraut ist. MySQL<\/a> oder MongoDB sind m\u00f6glicherweise am besten geeignet.<\/p>\n\n\n\n

Team<\/h3>\n\n\n\n

Bevor man \u00fcberhaupt \u00fcber eine Single Page Anwendungsarchitektur nachdenkt, sollte in erster Linie sichergestellt sein, dass das Entwicklungsteam mit JavaScript vertraut<\/strong> ist. <\/p>\n\n\n\n

Zum Team sollten geh\u00f6ren:<\/p>\n\n\n\n