Vor- und Nachteile der Erstellung einer einseitigen Webanwendung [geschlossen]


52

Ich nähere mich dem Ende einer Prototyping- / Proof-of-Concept-Phase für ein Nebenprojekt, an dem ich arbeite, und versuche, einige größere Entscheidungen für das Anwendungsdesign zu treffen. Die App ist ein Projektmanagementsystem, das stärker auf den agilen Entwicklungsprozess zugeschnitten ist. Eine der Entscheidungen, die ich treffen muss, ist, ob ich mich für eine herkömmliche mehrseitige Anwendung oder eine einseitige Anwendung entscheide.

Derzeit ist mein Prototyp ein traditionelles mehrseitiges Setup. Ich habe jedoch backbone.js untersucht, um meinen Javascript-Code (jQuery) zu bereinigen und strukturieren. Es sieht so aus, als ob backbone.js in mehrseitigen Anwendungen verwendet werden kann, während es in einseitigen Anwendungen mehr zur Geltung kommt. Ich versuche, eine Liste mit Vor- und Nachteilen für die Verwendung eines Ansatzes für das Design von Einzelseitenanwendungen zu erstellen. Bisher habe ich:

Vorteile

  • Alle Daten müssen über eine API verfügbar sein - dies ist ein großer Vorteil für meinen Anwendungsfall, da ich ohnehin eine API für meine Anwendung haben möchte. Derzeit werden ca. 60-70% meiner Aufrufe zum Abrufen / Aktualisieren von Daten über eine REST-API ausgeführt. Wenn ich nur eine Seite anwende, kann ich meine REST-API besser testen, da sie von der Anwendung selbst verwendet wird. Dies bedeutet auch, dass die API selbst wächst, wenn die Anwendung wächst, da dies von der Anwendung verwendet wird. Die API muss nicht als Add-On für die Anwendung verwaltet werden.

  • Reaktivere Anwendung - Da alle nach der ersten Seite geladenen Daten auf ein Minimum beschränkt und in einem kompakten Format (wie JSON) übertragen werden, sollten Datenanforderungen im Allgemeinen schneller sein und der Server wird etwas weniger verarbeiten.

Nachteile

  • Vervielfältigung von Code - zum Beispiel Modellcode. Ich werde Modelle sowohl auf der Serverseite (in diesem Fall PHP) als auch auf der Clientseite in Javascript erstellen müssen.
  • Geschäftslogik in Javascript - Ich kann keine konkreten Beispiele dafür nennen, warum dies schlecht wäre, aber es fühlt sich für mich einfach nicht richtig an, Geschäftslogik in Javascript zu haben, die jeder lesen kann.
  • JavaScript-Speicherlecks - Da die Seite nie neu geladen wird, können JavaScript-Speicherlecks auftreten, und ich würde nicht einmal wissen, wo ich mit dem Debuggen beginnen soll.

Es gibt auch andere Dinge, die Art von zweischneidigen Schwertern sind. Beispielsweise können bei Einseitenanwendungen die für jede Anforderung verarbeiteten Daten viel geringer sein, da die Anwendung nach den Mindestdaten fragt, die für die jeweilige Anforderung erforderlich sind. Dies bedeutet jedoch auch, dass möglicherweise eine viel kleinere Anforderung erforderlich ist der Server. Ich bin mir nicht sicher, ob das gut oder schlecht ist.

Was sind einige der Vor- und Nachteile von Webanwendungen für einzelne Seiten, die ich berücksichtigen sollte, wenn ich mich für ein Projekt entscheide?


Basecamp , die neue Version von basecamphq, leistet mit dem Single-Page-Setup IMO gute Arbeit.
Hakan Deryal

Mit dem Heap-Inspector von Chrome
Joeri Sebrechts 24.04.12

obligatorisch xkcd.com/1309
Pieter B

Antworten:


17

Der größte Nachteil ist, dass der Client JavaScript aktiviert und leistungsfähig genug sein muss, um eine angemessene Menge davon ausführen zu können. Es ist auch schwieriger, Zugänglichkeitsprobleme oder andere Probleme zu lösen, die sich auf das Parsen statischen HTML stützen (obwohl etwas, das Ihre spezifische API kennt, wahrscheinlich besser als HTML-Scraping sein kann). Schließlich ist es einfacher, signifikante Speicherlecks zu haben.

Was das Duplizieren von Code oder das Platzieren von Geschäftslogik auf dem Client angeht, bin ich mir nicht sicher, wie viel davon zu tun ist. Wenn das Modell auf dem Client ein View-Modell ist (ein Modell, das mit der Welt übereinstimmt, wie die Benutzeroberfläche es sieht, kein Geschäftsmodell), kann sich die Logik, die dem ViewModel bis zum Geschäftsmodell entspricht, auf dem Client befinden Server oder ein bisschen von beidem. Es hängt davon ab, wie Sie es empfinden, wenn Ihre API eine clientspezifische Fassade enthält, und ob der Client UI-Eingaben in API-Aufrufe übersetzt.

Vielleicht möchten Sie auch knockout.js anschauen. Ich kann nicht sagen, ob es besser ist als das Backbone, aber es passt vielleicht besser zu Ihrem Projekt.


Ja, ich vermute, dass der Großteil der Code-Duplizierung in der Datenvalidierung liegt, was in Ordnung ist. Ich bin in Ordnung mit der Voraussetzung, dass Javascript aktiviert ist, da ich nicht über die Barrierefreiheit für dieses Projekt (wie Screenreader und was nicht) informiert bin. Das Problem mit den JavaScript-Speicherlecks, das mir ein Anliegen war, wird durch den in den Kommentaren zu meiner Frage angegebenen Link wirklich negiert (Chrome ist sowieso mein primärer Entwicklungsbrowser).
Ryanzec

7

Nachteile, die ich bei Webanwendungen mit nur einer Seite häufig sehe:

  • Da es nicht möglich ist, einen Link zu einem bestimmten Teil der Website zu erstellen, gibt es oft nur einen Einstiegspunkt.
  • Deaktivierte Vor- und Zurück-Tasten.
  • Die Verwendung von Tabs ist begrenzt oder nicht vorhanden.

(besonders mobil :)

  • Das Laden dauert sehr lange.
  • Funktioniert überhaupt nicht.
  • Eine Seite kann nicht neu geladen werden. Ein plötzlicher Netzwerkverlust führt Sie zurück zum Anfang der Site.

All dies kann man umgehen, aber nach allem, was ich gesehen habe, tun es die meisten Sitebuilder nicht.


9
1,2 und 6 sind im Grunde genommen nur Symphome desselben Problems. Dass der Ersteller die History-API / Hash-Verknüpfung nicht verwendet.
Martin Hansen

11
Diese Antwort ist veraltet. Die meisten Frameworks für Einzelseitenanwendungen haben eine Möglichkeit, mit den oben genannten Problemen umzugehen
Luis,

@Luis, während die Technologie da ist, wird sie zu oft nicht verwendet.
Pieter B

5

Es gibt einen wichtigen Client, auf dem kein Javascript ausgeführt wird: den Google-Crawler (Stand 2012) . (Bing läuft auch nicht mit JS, nehme ich an.)

Sie müssen eine angemessene Nicht-AJAX-Version jeder zu indizierenden Seite oder Links zu einer zu indizierenden Seite bereitstellen.

Wenn Ihre Site klein ist, können Sie sehr einfache Versionen der wenigen Seiten nur zum Indizieren von Bots bereitstellen.

Wenn der größte Teil des Inhalts der Website nur für registrierte Benutzer bestimmt ist oder aus anderen Gründen nicht indiziert werden muss, können Sie den gesamten nicht indizierten Bereich als einseitige App mit eigener Suche, Blackjack usw. erstellen.

Ist dies nicht der Fall, ist es wahrscheinlich besser, von Anfang an eine mehrseitige Site zu entwickeln und nur AJAX-Aktualisierungen bereitzustellen, bei denen der "allgemeine Zweck" der Seite nicht geändert wird.


4
Googlebot liest und führt jetzt sogar etwas Javascript aus. Siehe googlewebmastercentral.blogspot.com/2011/11/…
jfrankcarr

2
Für diese spezielle Frage ist es eine Projektmanagement-App. Wahrscheinlich keine SEO-taugliche Seite.
Jordanien

SEO ist für die meisten Seiten kein großes Problem, obwohl es nett wäre, einzelne Probleme zu SEOen, da es so konfiguriert werden kann, dass anonymer Zugriff darauf möglich ist (so dass ein Benutzer, wenn er ein Problem mit dem Produkt googelt, dies auch kann) finden Sie das Problem im Tracker).
Ryanzec

1
Update 2015: Google führt JS
rinogo

3

-Duplizierung von Code - Zum Beispiel Modellcode. Ich werde Modelle sowohl auf der Serverseite (PHP im Fall) als auch auf der Serverseite in Javascript erstellen müssen.

Sie befinden sich in der PHP-Welt, aber in der .NET-Welt gibt es Strategien zur Codegenerierung, um automatisch JavaScript-WCF-Proxys zu erstellen. Sehen Sie hier

Ich weiß nicht, welche Optionen verfügbar sein könnten, um Ihre Remote-Objekte nicht selbst in JavaScript in einer PHP-Anwendung erstellen zu müssen, aber dies ist eine Option für diejenigen, die Anwendungen mit nur einer Seite in .NET schreiben.


0

Die Wahl muss nicht die eine oder andere sein. JWt ist zum Beispiel ein Web-Toolkit, das die perfekte Illusion einer mehrseitigen Webseite umsetzt, es ist jedoch eine einzelne Seite. Darüber hinaus erkennt es Google Bots und Browser, die kein Javascript haben (probieren Sie es aus), und wechselt zum traditionellen mehrseitigen Modell, wenn es diese erkennt.

Zusamenfassend:

  • keine Notwendigkeit, eine API zu schreiben (aber Sie können es trotzdem, wenn Sie wollen)
  • reaktionsschnelle Anwendung: Jeder Benutzer-Klick benötigt höchstens einen Server-Roundtrip (plus Abrufen von Bildern)
  • Keine Vervielfältigung von Code
  • keine Geschäftslogik clientseitig
  • minimale Komplexität clientseitig
  • Such-Bots können es indizieren

1
JWt ist ein Java-Toolkit. Die Frage ist über PHP.
Joeri Sebrechts
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.