Sollten Sie ein JavaScript-MVC-Framework verwenden, um Ihre Webanwendung zu erstellen?

Dieser Artikel erklärt die Unterschiede zwischen serverseitigen Anwendungen und clientseitigen Anwendungen (Einzelseitenanwendungen), um den Lesern zu helfen zu verstehen, in welche Art ihr Projekt eingebaut werden sollte. Serverseitige Anwendungen werden mit Sprachen wie Ruby on Rails erstellt, während Single-Page-Anwendungen werden mit JavaScript unter Verwendung von Frameworks wie AngularJS, Ember.js und Backbone.js erstellt.

Die Textzusammenfassung wurde vom Codementor-Team verfasst und basiert auf den Office Hours, die von Craig McKeachie, dem Autor der, gehostet werden JavaScript-Framework-Leitfaden. Die Zusammenfassung kann vom Originalvideo abweichen, und wenn Sie Probleme sehen, teilen Sie uns dies bitte mit!


Codementor JS Frameworks Bürozeiten

Bevor wir uns ansehen, welche Arten von Projekten für serverseitige oder clientseitige Webanwendungen geeignet sind, wollen wir zunächst die Architektur beider Typen untersuchen.

Wie wir serverseitige Webanwendungen erstellen

So erstellen wir traditionell serverseitige Webanwendungen. Eine vereinfachte Erklärung dessen, was passiert, ist eine HTTP-Anforderung, die vom Browser des Benutzers an den Webserver gesendet wird, Sie erhalten Daten zurück zu Ihrem Webserver und sie werden dynamisch in eine HTML-Vorlage auf dem Server eingefügt. Das HTML geht dann zurück in den Client.

Wie wir clientseitige Webanwendungen erstellen (auch bekannt als Single Page Applications)


In einer clientseitigen Webanwendung stellen Sie dieselbe Anfrage an den Server, aber diesmal entführt JavaScript diese Anfrage nach einer neuen Seite. Irgendwann, entweder zu Beginn des Lebenszyklus der Anwendung oder wenn sich die Seite ändert, lädt das JavaScript eine HTML-Vorlage als statisches HTML zum Client herunter. Die Aufgabe des Servers besteht darin, statische Vorlagen und RESTful-APIs an den Browser zu senden und etwas JSON zurückzusenden.

Mit anderen Worten, wenn jemand Seiten in einer clientseitigen Anwendung wechselt oder auf eine Schaltfläche klickt, fängt JavaScript ab und bestimmt, welche Vorlage benötigt wird, ob eine XMLHttpRequest (XHR)-Anforderung gestellt werden soll, um diese Vorlage zu erhalten, und welche Daten in die Schablone. Dann macht JavaScript einen AJAX-Aufruf und eine XHR-Anfrage an den Server, um die Daten zurückzubekommen. Da die Templating-Engine auf den Client umgezogen ist, werden die Daten und die Vorlage im Browser des Clients zusammengestellt.

Es gibt viele Möglichkeiten, ein SPA zu machen. Sie können Häppchen von HTML zurücksenden, aber AngularJS, Ember.js und Backbone.js verfolgen alle denselben architektonischen Ansatz, um Daten und die Vorlage in JavaScript auf dem Client zu kombinieren.

Welche sollten Sie verwenden, um Ihre Webanwendung zu erstellen?

Wenn ich darüber nachdenke, ob ich eine serverseitige App machen soll, frage ich mich, ob SEO wichtig ist. Wenn SEO ein integraler Bestandteil der App ist, würde ich davor zurückschrecken, MV*-Frameworks zu verwenden. Das ist eine ziemlich gewagte Aussage, basiert aber darauf, dass die Google-Suchmaschine beim Crawlen von JavaScript keine gute Arbeit leistet, obwohl AngularJS von Google selbst stammt. Normalerweise müssten Sie einen Prozess einbauen, der PhantomJS oder eine Art JavaScript auf dem Server ausführt, um Ihre Seite statisch zu rendern und das zurückzusenden, wenn der Agent des Benutzers Google ist. So können Sie dies leicht vermasseln und wiederum Ihre SEO ruinieren.

Ich sage nicht, dass Sie MV* Frameworks nicht verwenden sollten, wenn Sie eine Warenkorbanwendung haben, da es vollkommen in Ordnung ist, beispielsweise AngularJS an der Kasse zu verwenden, um eine großartige Benutzererfahrung zu erzielen. Allerdings würde ich wirklich darüber nachdenken, bevor ich MV*-Frameworks zum Erstellen von Produktseiten verwende. SEO ist die gemeinsame Schwachstelle dieser JavaScript-Frameworks.

Es läuft alles darauf hinaus, ob Sie einen handgefertigten, fantastischen Holzstuhl benötigen, der ein Kunstwerk ist, oder ob Sie Stühle von IKEA benötigen. Wenn letzteres der Fall ist, sollten Sie erwägen, Ihre Web-App auf dem Server zu belassen. Wenn Sie diese handgefertigte Großartigkeit brauchen und jemand Sie dafür bezahlt, eine wirklich reaktionsschnelle App mit einer Erfahrung zu erstellen, die einer Desktop-Anwendung ähnelt, dann werden Sie mit einem MVC-Framework viel glücklicher sein.

Es gibt eine kleine Ausnahme bei Ember, obwohl es ein bisschen verwirrend ist. Sie haben eine neuere HTML- und Templating-Engine, HTMLbars, die schneller ist als das, was sie zuvor hatten, weil sie derzeit nicht stringbasiert ist. Das bedeutet, dass kein In-Memory-Phantom-Browser wie PhantomJS erforderlich ist, um Ihre Seiten auf dem Server darzustellen. Jedes Mal, wenn Sie Ihren Server konfigurieren, müssen Sie jedoch sicherstellen, dass Ihre SEO richtig ist, und es besteht die Möglichkeit, dass Sie am Ende alles vermasseln, was manche Leute nervös machen kann.

In gewisser Weise wird der SEO-Untergang von JavaScript-Frameworks in Ember verringert, da Sie immer noch die serverseitige Arbeit erledigen müssen, aber es ist nicht so viel Setup im Vergleich zu anderen Frameworks, die immer noch PhantomJS verwenden müssen. Darüber hinaus ist es als Entwickler ziemlich einfach, URLs zu vergessen, wenn Sie eine App erstellen, und zu vergessen, dass Leute manchmal auf bestimmte Seiten tief verlinken. Dies ist in Ember unmöglich zu vergessen, da die Route an erster Stelle steht – Sie müssen Ihr Routenobjekt immer zuerst deklarieren, wenn Sie an Ember-Apps arbeiten, was ein Grund dafür ist, dass es in Bezug auf die SEO-Kompatibilität gegenüber AngularJS stärker ist.

Wenn jemand bereits eine AngularJS-App erstellt hat und sie SEO-freundlicher machen möchte, gibt es eine Lösung?

Wie bereits erwähnt, sind SPA/JavaScript Frameworks und SEO nicht sehr kompatibel. Dies ist jedoch eine Software-as-a-Service (SaaS) bei prerender.io, die Ihre Seiten im Grunde auf ihrem Server vorab rendert, sodass Ihre Seite immer noch gerendert wird, wenn Webbots Sie crawlen. Dies ist der einfachste Weg, allgemeine SPA-Probleme zu lösen.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *