Single Web

Auf der anderen Seite läuft eine Web-Anwendung auf jeder Plattform, die einen Internet-Browser hat und muss nicht installiert oder aktualisiert werden. Wenn man sich etwas Mühe mit Responsive Layout gibt, funktioniert eine solche Anwendung sogar auf einem mobilen Gerät. Die klassische Web-Anwendung Gucken wir uns dazu die folgende Darstellung einer klassischen Web-Anwendung an. Der Anwendungszustand, die Geschäftslogik und der UI-Teil, der die Anwendung in HTML transformiert, ist auf dem Server.

Der Browser macht lediglich Anfragen über HTTP und bekommt HTML-Seiten geliefert, die er nur noch darstellen muss. Jede Interaktion erfordert also einen Request zum Server, gefolgt von der Response mit der neuen Darstellung: Server Grenzen der klassischen Web-Anwendung Dieser Ansatz ist erfreulich einfach, kommt aber immer mehr an seine Grenzen, je interaktiver die Anwendung wird.

Stellen Sie sich z. Oder einen interaktiven Editor für Text, wie diesen. Eine derartige Anwendung wäre zwar technisch denkbar, würde aber nicht zu einer guten Benutzer-Erfahrung führen. Die Anwendung wäre langsam, würde flackern und wäre generell von der Latenz von Server und Netz abhängig. Gängige Muster nutzen für derartige Anwendungen daher eher punktuelle JavaScript-Logik, z. The step is repeated for subsequent page views.

In traditional server-side HTML programming, concepts such as controller and model interact within a server process to produce new HTML views. In the AngularJS framework, the controller and model states are maintained within the client browser. Therefore, new pages are capable of being generated without any interaction with a server. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.

It features simpler data binding than Angular, Ember or ReactJS, [6] and uses the Distributed Data Protocol [7] and a publish—subscribe pattern to automatically propagate data changes to clients in real-time without requiring the developer to write any synchronization code. Full stack reactivity ensures that all layers, from the database to the templates, update themselves automatically when necessary. Ecosystem packages such as Server Side Rendering [8] address the problem of Search Engine Optimization.

Aurelia is a JavaScript client framework for mobile, desktop and web. It is similar to AngularJS , but is newer, more standards-compliant, and utilizes a modular approach. Aurelia was written with next-generation ECMAScript. With its cli and webpack we can easily create SPAs. Ajax[ edit ] The most prominent technique currently being used is Ajax. Popular libraries like jQuery , which normalize Ajax behavior across browsers from different manufacturers, have further popularized the Ajax technique.

Websockets[ edit ] WebSockets are a bidirectional stateful real-time client-server communication technology part of the HTML5 specification, superior to Ajax in terms of performance [9] and simplicity. Server-sent events[ edit ] Server-sent events SSEs is a technique whereby servers can initiate data transmission to browser clients. Beim Navigieren ersetzt die neue die alte Seite im Browser. Dieser Vorgang nennt sich page reload und ist sehr zeit- und rechenaufwendig.

Bei Single-Page-Applications handelt es sich jedoch um eine webbasierte Anwendung, die rein technisch gesehen auf nur einer Seite stattfindet. Alle Inhalte werden über AJAX Asynchronous JavaScript and XML nachgeladen. Dies sorgt dafür, dass Benutzerinteraktionen im Hintergrund ausgeführt werden. In Single-Page-Applications sind bedingt durch Frameworks wie AngularJS sämtliche page reloads nicht mehr notwendig.

Die Schnittstelle bei Single-Page-Application wird zwischen Frontend und Backend definiert. Alle relevanten Daten einer Webanwendung werden im Backend gespeichert und verarbeitet. Hierzu werden weiterhin klassische Programmiersprachen wie PHP, Node. Ebenfalls kommen klassische Datenbanken wie beispielsweise MySQL oder MongoDB zum Einsatz.

Das Frontend arbeitet hingegen mittels HTML und CSS. Zusätzlich wird auf JavaScript und damit gekoppelte JavaScript-Frameworks gesetzt. Nachdem das Frontend durch JavaScript eine Anfrage an das Backend sendet, werden Daten im. Diese werden mittels JavaScript an die entsprechende Stelle gesetzt. Bei der Erstellung von Single-Page-Apps kann des Weiteren auf einen Pool an verschiedenen Frameworks, wie beispielsweise Ember.

Vorteile von Single-Page-Applications Single-Page-Applications haben viele Vorteile. Ein Vorteil ist die verbesserte User Experience. SPA benötigen keine lokal installierten Plug-Ins. Somit kann von überall auf die Applikation zugegriffen werden. Das erhöht auch die Reichweite der Anwendung.


Single Page-Anwendungen – Vorteile von Web und Desktop kombiniert

Einen Kommentar hinzufügen

Ihre E-Mail wird nicht veröffentlicht. erforderliche Felder sind markiert *