Share
Einseitige Webanwendungen - oder SPAs, wie sie allgemein genannt werden - werden schnell zum De-facto-Standard für die Entwicklung von Webanwendungen. Die Tatsache, dass ein Großteil der App auf einer einzigen Webseite ausgeführt wird, macht sie sehr interessant und attraktiv, und das beschleunigte Wachstum der Browserfunktionen führt uns näher an den Tag, an dem alle Apps vollständig im Browser ausgeführt werden.
Technisch gesehen sind die meisten Webseiten bereits SPAs; Es ist die Komplexität einer Seite, die a unterscheidet Website von einem Web-App. Meiner Meinung nach wird eine Seite zur App, wenn Sie Workflows, CRUD-Vorgänge und Zustandsverwaltung für bestimmte Aufgaben integrieren. Sie arbeiten mit einem SPA, wenn jede dieser Aufgaben auf derselben Seite stattfindet (natürlich AJAX für die Client / Server-Kommunikation)..
Beginnen wir mit diesem gemeinsamen Verständnis und tauchen wir ein in einige der wichtigsten Dinge, die beim Bau von SPAs zu berücksichtigen sind.
Bevor Sie eine neue App erstellen, sollten Sie zahlreiche Punkte beachten. Zu allem Überfluss kann die ausgedehnte Webentwicklungslandschaft zu Beginn einschüchtern. Ich habe mich in diesen verunsichernden Schuhen befunden, aber glücklicherweise haben die letzten Jahre zu einem Konsens über die Tools und Techniken geführt, die die Anwendungsentwicklungserfahrung so angenehm und produktiv wie möglich machen.
Die meisten Apps bestehen sowohl aus clientseitigen als auch aus serverseitigen Komponenten. Obwohl sich dieser Artikel hauptsächlich auf den clientseitigen Teil einer App konzentriert, gebe ich am Ende dieses Artikels einige serverseitige Zeiger an.
Es gibt eine bunte Mischung von Technologien auf der Clientseite sowie mehrere Bibliotheken und Verfahren, die eine produktive App-Entwicklungserfahrung ermöglichen. Dies kann unter Verwendung der folgenden Wortwolke zusammengefasst werden.
Ich werde in den folgenden Abschnitten auf jeden der oben genannten Punkte eingehen.
Es gibt eine Fülle von Rahmenbedingungen zur Auswahl. Hier ist nur eine Handvoll der beliebtesten:
Die Auswahl eines Frameworks ist eine der wichtigsten Entscheidungen, die Sie für Ihre App treffen. Sicherlich möchten Sie den besten Rahmen für Ihr Team und Ihre App auswählen. Jedes der oben genannten Frameworks enthält das MVC-Entwurfsmuster (in irgendeiner Form). Daher werden sie häufig als MVC-Frameworks bezeichnet. Wenn wir diese Frameworks auf einer Skala von Komplexität, Lernkurve und Feature-Set ordnen müssten, von links nach rechts, es könnte aussehen:
Obwohl sie sich in ihrer Implementierung und ihrem Entwicklungsstand nicht unterscheiden, bieten alle oben genannten Frameworks einige allgemeine Abstraktionen, z.
Ein Blick auf die letzten fünf Jahre hat zu einem explosionsartigen Wachstum bei Bibliotheken, Tools und Praktiken geführt.
Fortgeschrittene Frameworks wie CanJS, BatmanJS, EmberJS und AngularJS erweitern diese grundlegenden Funktionen, indem sie das automatische Binden von Daten und clientseitige Vorlagen unterstützen. Die Vorlagen sind datengebunden und halten die Ansicht mit den Änderungen am Modell synchron. Wenn Sie sich für ein erweitertes Framework entscheiden, werden Sie sicherlich viele sofort einsatzbereite Funktionen erhalten, aber es erwartet auch, dass Sie Ihre App auf eine bestimmte Art und Weise erstellen.
Von allen zuvor aufgeführten Frameworks ist Meteor das einzige Full-Stack-Framework. Es bietet Tools nicht nur für die clientseitige Entwicklung, sondern auch eine serverseitige Komponente über NodeJS und eine durchgängige Modellsynchronisierung über MongoDB. Dies bedeutet, dass beim Speichern eines Modells auf dem Client dieses automatisch in MongoDB beibehalten wird. Dies ist eine fantastische Option, wenn Sie ein Node-Backend ausführen und MongoDB für die Persistenz verwenden.
Basierend auf der Komplexität Ihrer App sollten Sie das Framework auswählen, das Sie am produktivsten macht. Es wird sicherlich eine Lernkurve geben, aber dies ist eine einmalige Maut, die Sie für die Expressspurentwicklung zahlen. Stellen Sie sicher, dass Sie sich etwas Zeit nehmen, um diese Frameworks anhand eines repräsentativen Anwendungsfalls zu bewerten.
Hinweis: Wenn Sie mehr über diese Frameworks von ihren Erstellern erfahren möchten, hören Sie sich diese Videos von ThroneJS an.
Die beliebtesten JavaScript-basierten Schablonensysteme sind Unterstreichungsvorlagen und Handlebars.
Einige der fortschrittlichen Frameworks aus dem vorherigen Abschnitt bieten integrierte Templatesysteme.
Zum Beispiel hat EmberJS eine integrierte Unterstützung für Lenker. Sie müssen jedoch eine Templating Engine in Betracht ziehen, wenn Sie sich für ein Lean-Framework wie Backbone entscheiden. Unterstreichen ist ein hervorragender Ausgangspunkt, wenn Sie nur begrenzte Anforderungen an die Vorlage haben. Ansonsten funktioniert der Lenker gut für fortgeschrittenere Projekte. Es bietet auch viele integrierte Funktionen für ausdrucksstarkere Vorlagen.
Wenn Sie feststellen, dass Sie eine große Anzahl clientseitiger Vorlagen benötigen, können Sie Rechenzeit sparen, indem Sie die Vorlagen auf dem Server vorkompilieren. Durch die Vorkompilierung erhalten Sie einfache JavaScript-Funktionen, die Sie aufrufen, um die Ladezeit der Seite zu verbessern. Lenker unterstützen die Vorbereitung vor der Kompilierung, so dass es die Zeit und Mühe wert ist, sie vollständig zu erkunden.
ExpressJS-Benutzer können auf dem Client sogar die gleiche Templating Engine wie auf dem Server verwenden, wodurch Sie die Vorteile nutzen können, wenn Sie Ihre Vorlagen sowohl für den Client als auch für den Server freigeben.
Die Verwendung eines Präprozessors erfordert einen zusätzlichen Schritt in Ihrem Erstellungsprozess.
JavaScript-Code wird der Seite normalerweise über das Symbol hinzugefügt >
Accentsconagua