Was bedeutet SPA Framework
Ein SPA-Framework alleine ist noch keine funktionsfähige Single-Page-Application, sondern nur eine Rahmenstruktur für den Softwareentwickler. Dabei ist der Web-Programmierer an das durch das Framework verwendete Entwurfsmuster und die Entwicklungsstrukturen gebunden, welche den Softwareentwicklungsprozess in eine mehr oder weniger gewünschte Richtung lenken.
Eine SPA fühlt sich für den Benutzer viel flotter an, denn anstatt auf die Client-Server- Kommunikation (siehe Kommunikation Seminare) zu warten und darauf zu warten, dass der Browser die Seite erneut rendert, können Sie jetzt sofortiges Feedback erhalten. Dies liegt in der Verantwortung des Anwendungsherstellers, aber Sie können Übergänge und jede Art von UX-Verbesserung haben, die sicherlich besser als der traditionelle Arbeitsablauf ist.
Zusätzlich zur schnelleren Bereitstellung der Erfahrung für den Benutzer verbraucht der Server weniger Ressourcen, da Sie sich auf die Bereitstellung einer effizienten API konzentrieren können, anstatt die Layouts serverseitig zu erstellen.
Daher ist es ideal, wenn Sie zusätzlich zur API auch eine mobile Anwendung erstellen, da Sie Ihren vorhandenen serverseitigen Code vollständig wiederverwenden können.
Single Page Applications lassen sich leicht in progressive Webanwendungen (siehe Webanwendungen Schulungen) umwandeln, wodurch Sie wiederum lokales Caching anbieten und Offline-Erfahrungen für Ihre Dienste unterstützen können (oder eine bessere Fehlermeldung, wenn Ihre Benutzer online sein müssen).
SPAs werden am besten verwendet, wenn keine Notwendigkeit für SEO (siehe SEO Training) (Suchmaschinenoptimierung) besteht. Zum Beispiel für Anwendungen, die hinter einem Login arbeiten. Wenn trotzdem SEO eine Rolle spielt, sollte ein entsprechendes SEO Seminar besuchen.
Suchmaschinen verbessern sich zwar jeden Tag, haben aber immer noch Probleme mit der Indizierung von Websites, die mit einem SPA-Ansatz statt mit den herkömmlichen server-gerenderten Seiten erstellt wurden. Dies ist bei Blogs der Fall. Wenn Sie sich auf Suchmaschinen verlassen wollen, machen Sie sich nicht einmal die Mühe, eine Anwendung für eine einzige Seite zu erstellen, ohne dass ein Server einen Teil davon ebenfalls gerendert hat.
SPAs sind nicht sehr SEO-freundlich
SEO kann ein entscheidender Faktor bei der Abwägung zwischen einseitigen und mehrseitigen Anwendungen sein. Einseitige Anwendungen werden mit JavaScript (mehr Infos JavaScript Schulungen) ausgeführt und laden Inhalte erst nach einer Interaktion durch den Benutzer. Wenn also ein Web-Crawler versucht, die Seite in der Suchmaschine zu indizieren, sieht sie wie eine leere Seite ohne Inhalt aus.
Darüber hinaus werden SPAs entwickelt, indem der gesamte Inhalt in einer Webseite zusammengefasst wird. Sie können also nicht verschiedene Teile Ihres Inhalts nach relevanten Schlüsselwörtern ordnen. Mit serverseitigem Rendering und intelligenten Praktiken der Suchmaschinenoptimierung können Sie diese Einschränkung jedoch überwinden.
SPAs erfordern zusätzlichen Aufwand, um Back- und Forward-Funktionen zu ermöglichen
Einer der größten Nachteile von SPAs ist, dass Benutzer nicht zum vorherigen Zustand der App zurückkehren können, wenn sie die Zurück-Taste drücken. Stattdessen bringt sie der Browser auf die vorherige Seite, weil er den Sprung des Besuchers zwischen verschiedenen Zuständen des SPA nicht speichern kann. Dies kann für die Benutzer langweilig werden.
Jedoch kann auch dieses Problem gelöst werden, indem SPA-Frameworks mit der HTML5 (mehr Infos HTML5 Seminare) History API ausgestattet werden. Mit dieser App können Entwickler über JavaScript auf die Browser-Navigationshistorie zugreifen.
SPAs sind nicht skalierbar
Dies ist genau der Grund, warum mehrseitige Apps (siehe Apps Seminare) in der Debatte über einseitige gegen mehrseitige Apps immer noch eine starke Position einnehmen. Single-page applications sind nicht leicht skalierbar. Wenn Sie einer bestehenden SPA weitere Inhalte oder Funktionen hinzufügen, erhöht dies die anfängliche Ladezeit der Anwendung erheblich und beeinträchtigt die Leistung der Anwendung.
Mobilfreundlich
Wenn man bedenkt, wie Websites einen großen Teil des Datenverkehrs von mobilen Geräten empfangen, muss jede Webanwendung eine mobilfreundliche Version haben. Single Page Applications mit nur einer Seite ermöglichen es Ihnen, den Backend-Code Ihrer Webanwendung für die Erstellung der mobilen Anwendung wiederzuverwenden.
Die von Ihnen verwendeten Frameworks für Single Page Applications können den Entwicklungsprozess für mobile Anwendungen noch einfacher und schneller machen. Da die UI in SPAs bereits in Form einer Anwendung gestaltet ist, müssen Sie außerdem nicht viele Anstrengungen unternehmen, um diese für mobile Geräte neu anzupassen.
Angular
ist eines der Open-Source-Front-End-Frameworks auf JavaScript-Basis, das bei der Erstellung von Single-Page-Applikationen auf der Client-Seite weit verbreitet ist. Es wurde von Google (siehe Google Schulung) entwickelt, und zu den beliebten Benutzern von Angular (siehe auch Angular Schulung) gehören Microsoft, Google und PayPal. Es ist in der Lage, den gesamten Inhalt direkt vom Server auf den Browser zu übertragen und alle Seiten gleichzeitig zu laden. Sobald sie geladen sind, wird die Seite nicht neu geladen, wenn auf einen Link geklickt wird; stattdessen werden die Abschnitte innerhalb der Seite sofort aktualisiert. Angular ermöglicht ein schnelleres Laden der Seiten, da der Server weniger belastet wird. Die bidirektionale Datenbindungsfunktion erspart das Schreiben zahlreicher Codes. Hier findet eine automatische Integration von Daten zwischen Modell- und Ansichtskomponenten statt. Außerdem arbeitet Angular mit der MVC-Architektur. Die Vorgängerversion AngularJS hatte so viele Mängel, dass man sich zu einer neuen Programmierung (mehr dazu Programmierung Schulungen) mit Typescript (siehe Typescript Seminar) entschlossen hat. Daher ist Angular nicht abwärtskompatibel mit AngularJS und umgekehrt nicht aufwärtskompatibel. Die jetzige Version 11 vom September 2020 ist durchaus empfehlenswert und wird bei den Angular Schulungen eingesetzt. Gegebenfalls wird in den Schulungen auch der Unterschied zwischen AngularJS und Angular behandelt.
React
ist eher eine Bibliothek als ein Framework, das zur Erstellung von User Interface (UI)-Anwendungen verwendet wird. Dieses JavaScript-Framework, das 2013 veröffentlicht wurde, ist sehr schnell gewachsen. Es ist eines der bevorzugten Frameworks, wenn es darum geht, den Benutzern eine hochleistungsfähige Unternehmensanwendung zur Verfügung zu stellen. React (siehe React Seminar) ist vergleichsweise flexibler als Angular, da die Entwickler mit eigenständigen Bibliotheken arbeiten müssen, was eine gute Antwortzeit ermöglicht. React wird meistens für die 'View'-Komponente in der MVC-Architektur verwendet, bei der die Benutzeroberfläche aktualisiert werden könnte, ohne zum Server zurückgehen zu müssen, um eine neue Ansicht zu erhalten. React wird häufig für die Erstellung von Widget-basierten Views verwendet und fördert einseitige Datenbindung in Kombination mit Flux-Controls. Eine React Schulung erleichtert die Anwendung von React bei der Eintwicklung komplexer Webseiten.
Vue
Vue ist der jüngste in der Arena, ohne die Unterstützung eines großen Unternehmens.
Es hat sich jedoch in den letzten Jahren sehr gut geschlagen, um als starker Konkurrent für Angular und React hervorzutreten. Dies spielt vielleicht eine Rolle, da sich viele chinesische Giganten wie Alibaba und Baidu für Vue als ihr primäres Front-End-JavaScript-Framework entschieden haben.
Es bleibt jedoch abzuwarten, wie es sich in Zukunft entwickelt, und es ist gerechtfertigt, vorsichtig damit umzugehen. Vue sollte Ihre Wahl sein, wenn Sie Einfachheit bevorzugen, aber auch Flexibilität mögen.
Wie Evan You zusammenfasste, ist Vue 3 schneller, kleiner, wartungsfreundlicher. Framework Änderungen können stressig sein. Aber wir sind davon überzeugt, dass die Änderungen in v3 einen großen Schritt vorwärts bedeuten werden, und Sie werden genug Zeit haben, sich anzupassen. Auch Vue hat mit der Version 3 einen inkomatiblen Schritt in die richtige Richtung unternommen. Wenn weiter mit einer älteren Version entwickelt wird, sollten die Inkompatibeln Features vermieden werden. Jede Vue Schulung sollte die Verson 3 berücksichtigen.
Meteor
ist ein freies, quelloffenes, Full-Stack-JavaScript-Framework, das mit Node.js (siehe auch Node.js Schulungen) erstellt wurde. Es ist schnell in der Erstellung reaktiver Anwendungen auf der Node.js-Plattform. Meteor arbeitet nach dem "Data on Wire"-Prinzip, d.h. die Daten werden vom Server anstelle von HTML (siehe auch HTML Training) verschickt und dem Client zur Verfügung gestellt. Wenn Meteor in Aktion ist, könnten verschiedene Anwendungen in einer Sprache, nämlich JavaScript, mit einer geringeren Anzahl von Codes erstellt werden.Es ermöglicht auch das Nachladen des Live-Browsers. Mit anderen Worten: Wenn am Front-End Änderungen vorgenommen werden, lädt dieses Framework standardmäßig Live-Seiten neu. Auf diese Weise kann das betreffende DOM-Element aktualisiert werden, ohne dass die ganze Seite neu geladen werden muss. Meteor.js ist während der Durchführung von Projekten recht einfach einzurichten und fördert auch eine höhere Skalierbarkeit. Der Meteor ist leider verglüht.
Eine SPA fühlt sich für den Benutzer viel flotter an, denn anstatt auf die Client-Server- Kommunikation (siehe Kommunikation Seminare) zu warten und darauf zu warten, dass der Browser die Seite erneut rendert, können Sie jetzt sofortiges Feedback erhalten. Dies liegt in der Verantwortung des Anwendungsherstellers, aber Sie können Übergänge und jede Art von UX-Verbesserung haben, die sicherlich besser als der traditionelle Arbeitsablauf ist.
Zusätzlich zur schnelleren Bereitstellung der Erfahrung für den Benutzer verbraucht der Server weniger Ressourcen, da Sie sich auf die Bereitstellung einer effizienten API konzentrieren können, anstatt die Layouts serverseitig zu erstellen.
Daher ist es ideal, wenn Sie zusätzlich zur API auch eine mobile Anwendung erstellen, da Sie Ihren vorhandenen serverseitigen Code vollständig wiederverwenden können.
Single Page Applications lassen sich leicht in progressive Webanwendungen (siehe Webanwendungen Schulungen) umwandeln, wodurch Sie wiederum lokales Caching anbieten und Offline-Erfahrungen für Ihre Dienste unterstützen können (oder eine bessere Fehlermeldung, wenn Ihre Benutzer online sein müssen).
SPAs werden am besten verwendet, wenn keine Notwendigkeit für SEO (siehe SEO Training) (Suchmaschinenoptimierung) besteht. Zum Beispiel für Anwendungen, die hinter einem Login arbeiten. Wenn trotzdem SEO eine Rolle spielt, sollte ein entsprechendes SEO Seminar besuchen.
Suchmaschinen verbessern sich zwar jeden Tag, haben aber immer noch Probleme mit der Indizierung von Websites, die mit einem SPA-Ansatz statt mit den herkömmlichen server-gerenderten Seiten erstellt wurden. Dies ist bei Blogs der Fall. Wenn Sie sich auf Suchmaschinen verlassen wollen, machen Sie sich nicht einmal die Mühe, eine Anwendung für eine einzige Seite zu erstellen, ohne dass ein Server einen Teil davon ebenfalls gerendert hat.
SPAs sind nicht sehr SEO-freundlich
SEO kann ein entscheidender Faktor bei der Abwägung zwischen einseitigen und mehrseitigen Anwendungen sein. Einseitige Anwendungen werden mit JavaScript (mehr Infos JavaScript Schulungen) ausgeführt und laden Inhalte erst nach einer Interaktion durch den Benutzer. Wenn also ein Web-Crawler versucht, die Seite in der Suchmaschine zu indizieren, sieht sie wie eine leere Seite ohne Inhalt aus.
Darüber hinaus werden SPAs entwickelt, indem der gesamte Inhalt in einer Webseite zusammengefasst wird. Sie können also nicht verschiedene Teile Ihres Inhalts nach relevanten Schlüsselwörtern ordnen. Mit serverseitigem Rendering und intelligenten Praktiken der Suchmaschinenoptimierung können Sie diese Einschränkung jedoch überwinden.
SPAs erfordern zusätzlichen Aufwand, um Back- und Forward-Funktionen zu ermöglichen
Einer der größten Nachteile von SPAs ist, dass Benutzer nicht zum vorherigen Zustand der App zurückkehren können, wenn sie die Zurück-Taste drücken. Stattdessen bringt sie der Browser auf die vorherige Seite, weil er den Sprung des Besuchers zwischen verschiedenen Zuständen des SPA nicht speichern kann. Dies kann für die Benutzer langweilig werden.
Jedoch kann auch dieses Problem gelöst werden, indem SPA-Frameworks mit der HTML5 (mehr Infos HTML5 Seminare) History API ausgestattet werden. Mit dieser App können Entwickler über JavaScript auf die Browser-Navigationshistorie zugreifen.
SPAs sind nicht skalierbar
Dies ist genau der Grund, warum mehrseitige Apps (siehe Apps Seminare) in der Debatte über einseitige gegen mehrseitige Apps immer noch eine starke Position einnehmen. Single-page applications sind nicht leicht skalierbar. Wenn Sie einer bestehenden SPA weitere Inhalte oder Funktionen hinzufügen, erhöht dies die anfängliche Ladezeit der Anwendung erheblich und beeinträchtigt die Leistung der Anwendung.
Mobilfreundlich
Wenn man bedenkt, wie Websites einen großen Teil des Datenverkehrs von mobilen Geräten empfangen, muss jede Webanwendung eine mobilfreundliche Version haben. Single Page Applications mit nur einer Seite ermöglichen es Ihnen, den Backend-Code Ihrer Webanwendung für die Erstellung der mobilen Anwendung wiederzuverwenden.
Die von Ihnen verwendeten Frameworks für Single Page Applications können den Entwicklungsprozess für mobile Anwendungen noch einfacher und schneller machen. Da die UI in SPAs bereits in Form einer Anwendung gestaltet ist, müssen Sie außerdem nicht viele Anstrengungen unternehmen, um diese für mobile Geräte neu anzupassen.
Angular
ist eines der Open-Source-Front-End-Frameworks auf JavaScript-Basis, das bei der Erstellung von Single-Page-Applikationen auf der Client-Seite weit verbreitet ist. Es wurde von Google (siehe Google Schulung) entwickelt, und zu den beliebten Benutzern von Angular (siehe auch Angular Schulung) gehören Microsoft, Google und PayPal. Es ist in der Lage, den gesamten Inhalt direkt vom Server auf den Browser zu übertragen und alle Seiten gleichzeitig zu laden. Sobald sie geladen sind, wird die Seite nicht neu geladen, wenn auf einen Link geklickt wird; stattdessen werden die Abschnitte innerhalb der Seite sofort aktualisiert. Angular ermöglicht ein schnelleres Laden der Seiten, da der Server weniger belastet wird. Die bidirektionale Datenbindungsfunktion erspart das Schreiben zahlreicher Codes. Hier findet eine automatische Integration von Daten zwischen Modell- und Ansichtskomponenten statt. Außerdem arbeitet Angular mit der MVC-Architektur. Die Vorgängerversion AngularJS hatte so viele Mängel, dass man sich zu einer neuen Programmierung (mehr dazu Programmierung Schulungen) mit Typescript (siehe Typescript Seminar) entschlossen hat. Daher ist Angular nicht abwärtskompatibel mit AngularJS und umgekehrt nicht aufwärtskompatibel. Die jetzige Version 11 vom September 2020 ist durchaus empfehlenswert und wird bei den Angular Schulungen eingesetzt. Gegebenfalls wird in den Schulungen auch der Unterschied zwischen AngularJS und Angular behandelt.
React
ist eher eine Bibliothek als ein Framework, das zur Erstellung von User Interface (UI)-Anwendungen verwendet wird. Dieses JavaScript-Framework, das 2013 veröffentlicht wurde, ist sehr schnell gewachsen. Es ist eines der bevorzugten Frameworks, wenn es darum geht, den Benutzern eine hochleistungsfähige Unternehmensanwendung zur Verfügung zu stellen. React (siehe React Seminar) ist vergleichsweise flexibler als Angular, da die Entwickler mit eigenständigen Bibliotheken arbeiten müssen, was eine gute Antwortzeit ermöglicht. React wird meistens für die 'View'-Komponente in der MVC-Architektur verwendet, bei der die Benutzeroberfläche aktualisiert werden könnte, ohne zum Server zurückgehen zu müssen, um eine neue Ansicht zu erhalten. React wird häufig für die Erstellung von Widget-basierten Views verwendet und fördert einseitige Datenbindung in Kombination mit Flux-Controls. Eine React Schulung erleichtert die Anwendung von React bei der Eintwicklung komplexer Webseiten.
Vue
Vue ist der jüngste in der Arena, ohne die Unterstützung eines großen Unternehmens.
Es hat sich jedoch in den letzten Jahren sehr gut geschlagen, um als starker Konkurrent für Angular und React hervorzutreten. Dies spielt vielleicht eine Rolle, da sich viele chinesische Giganten wie Alibaba und Baidu für Vue als ihr primäres Front-End-JavaScript-Framework entschieden haben.
Es bleibt jedoch abzuwarten, wie es sich in Zukunft entwickelt, und es ist gerechtfertigt, vorsichtig damit umzugehen. Vue sollte Ihre Wahl sein, wenn Sie Einfachheit bevorzugen, aber auch Flexibilität mögen.
Wie Evan You zusammenfasste, ist Vue 3 schneller, kleiner, wartungsfreundlicher. Framework Änderungen können stressig sein. Aber wir sind davon überzeugt, dass die Änderungen in v3 einen großen Schritt vorwärts bedeuten werden, und Sie werden genug Zeit haben, sich anzupassen. Auch Vue hat mit der Version 3 einen inkomatiblen Schritt in die richtige Richtung unternommen. Wenn weiter mit einer älteren Version entwickelt wird, sollten die Inkompatibeln Features vermieden werden. Jede Vue Schulung sollte die Verson 3 berücksichtigen.
Meteor
ist ein freies, quelloffenes, Full-Stack-JavaScript-Framework, das mit Node.js (siehe auch Node.js Schulungen) erstellt wurde. Es ist schnell in der Erstellung reaktiver Anwendungen auf der Node.js-Plattform. Meteor arbeitet nach dem "Data on Wire"-Prinzip, d.h. die Daten werden vom Server anstelle von HTML (siehe auch HTML Training) verschickt und dem Client zur Verfügung gestellt. Wenn Meteor in Aktion ist, könnten verschiedene Anwendungen in einer Sprache, nämlich JavaScript, mit einer geringeren Anzahl von Codes erstellt werden.Es ermöglicht auch das Nachladen des Live-Browsers. Mit anderen Worten: Wenn am Front-End Änderungen vorgenommen werden, lädt dieses Framework standardmäßig Live-Seiten neu. Auf diese Weise kann das betreffende DOM-Element aktualisiert werden, ohne dass die ganze Seite neu geladen werden muss. Meteor.js ist während der Durchführung von Projekten recht einfach einzurichten und fördert auch eine höhere Skalierbarkeit. Der Meteor ist leider verglüht.