Komponenten basierte Architektur als Lösung für die SPA Entwicklung

Eine Alternative zu SPA Frameworks

Mit dem Siegeszug dessen, was man das mobile Internet nennt, haben sich auch viele klassische Programmierparadigmen verschoben. Webanwendungen müssen heute auf einem Smartphone genauso attraktiv aussehen und eine einfache Bedienbarkeit bieten, wie auf einem klassischen Desktop-System. Hinzu kommt die immer weiter verschwimmende Grenze zwischen Websites, Online-Services und Apps, die nach einem einheitlichen Ansatz verlangt. Eine Möglichkeit zur Realisierung solcher Webapps sind Single-Page-Webanwendungen. Services wie Google Mail und Twitter haben hier Pionierarbeit geleistet und setzen bis heute Maßstäbe, indem Sie die Möglichkeiten solcher Single-Page-Webanwendungen immer weiter ausloten. Für gewöhnlich werden solche Webanwendungen mit Hilfe von Frameworks wie AngularJS, ReactJS oder VueJS realisiert. Heute wollen wir Ihnen aber einen alternativen Entwicklungsansatz vorstellen: die Komponenten basierte Architektur.

Was ist eine Single-Page-Webanwendung?

Single Page Web Applications (dt: Einzelseiten-Webanwendung - kurz: SPA) sind ein Ansatz in der Webseiten-Programmierung, der darauf abzielt, Nutzern von Mobilgeräten eine ähnliche User experience zu verschaffen, wie Nutzern eines Desktop-Systems. Im Gegensatz zu einer klassischen Webanwendung mit Menüs und Unterseiten besteht eine Single Page Applications aus einem einzigen Html-Dokument, dessen Inhalte dynamisch nachgeladen werden. Hieraus ergeben sich einige Vorteile, die für die Umsetzung eines Webprojektes als SPA entscheidend sein können.

Durch das dynamische Nachladen wird die Kommunikation zwischen Server und Client reduziert, was die Geschwindigkeit steigert und gleichzeitig die Performance der Seite steigert. Darüber hinaus werden SPAs gern als offlinefreundlich bezeichnet. Dies liegt darin begründet, dass die komplette Präsentationsschicht bei einer Single-Page-Anwendung auf dem Client stattfindet. Der Server dient nur noch als reine Datenquelle. Bei eventuellen Verbindungsstörungen oder temporären Serverengpässen wird die SPA einfach weiter aus dem Client-Cache ausgeführt.

Wegen seiner recht einfachen technischen Umsetzung eignen sich SPAs für eine ganze Reihe unterschiedlicher Anwendungen:

• Web-Apps - bei denen eine konsistente User Experience wichtig ist
• Begrenzte Projekte - zum Beispiel Landing Pages
• Projekte mit hoher Interaktivität - wie etwa Spiele
• Offline-Szenarien - Services, die nur eine kleine Menge Daten im Cache benötigen
• Projekte mit hohen Nutzerzahlen - Twitter macht vor, wie es geht

Was leisten SPA Frameworks?

Single-Page-Webapplikationen werden in der Regel mithilfe eines Web Application Frameworks programmiert, das dabei hilft, wiederkehrende Tasks zu vereinfachen oder Code wieder zu verwenden. Solche Frameworks, wie etwa AngularJS, ReactJS oder VueJS sind spezialisierte und schlanke Werkzeuge, die dabei helfen, die mit ihnen realisierten Projekte klein und schnell zu halten. Oftmals übernimmt das Framework auch die Anzeige der Website über eine eingebaute Template Engine.

Wo liegen die Grenzen von SPA Frameworks?

Die Erstellung einer Single-Page-Webapplikation ist bestechend einfach und bei einem gut dokumentierten Framework in kurzer Zeit erledigt. Wird eine SPA jedoch mit der Zeit größer, sollen neue Funktionen implementiert oder das grundlegende Design geändert werden, so wandeln sich die großen Vorteile eines Frameworks schnell in entscheidende Nachteile. Gerade AngularJS scheint es an Struktur und brauchbarer Dokumentation zu fehlen, sodass eine Änderung in einem kleinen Teilbereich mitunter ungeahnte Folgen nach sich ziehen kann. Was eben noch für eine Top-Performance sorgte und Geschwindigkeit garantierte, wird jetzt zu einem Dschungel an Abhängigkeiten im Code, in denen man sich all zu schnell verstrickt. AngularJS lässt Programmieren eine Menge Freiheiten, damit aber auch großen Raum für Unsicherheiten und Interpretationen. Das ist nicht unbedingt die beste Idee, wenn man ein Projekt nach einiger Zeit wieder aufnehmen möchte.

Mit einem wachsenden Projekt laufen diese Unsicherheiten schnell Gefahr, zu einem riesigen Problem zu werden, das Entwicklungszeit und damit unnötig Geld kostet. Mit einem etwas anderen Ansatz lassen sich viele dieser Probleme vermeiden.

Komponenten basierte Architektur als Alternative

Die Komponenten basierte Architektur ist die Übertragung eines eigentlich schon recht alten Programmierparadigmas auf die Webentwicklung. Bei einer Komponenten basierten Architektur werden einzelne Programmbausteine vollkommen unabhängig voneinander entwickelt und lassen sich später wie Bausteine zu etwas Neuem und Größeren zusammenfügen. Anstelle von Templates stehen Komponenten im Mittelpunkt, von denen jede über ein eigenes und unabhängiges CSS oder Javascript verfügt. An die Stelle eines undurchdringlichen Dschungels an Abhängigkeiten und mehrfach verwendeten CSS-Dateien ohne gute Dokumentation treten jetzt individuelle aber standardisierte Komponenten, die beliebig miteinander kombiniert werden können. Dieses alternative Programmierparadigma mag zwar zu Beginn eines Projektes die Anlaufphase ein wenig in die Länge ziehen, da die Komponenten erst fertiggestellt werden müssen, jedoch bringt es einige unbestreitbare Vorteile mit sich, die sich im späteren Projektverlauf auszahlen.

Die Vorteile einer Komponenten basierten Architektur

Die modulare Entwicklung einzelner Softwarekomponenten bringt einige Vorteile mit sich, die sich bei der Entwicklung von Single-Page-Webanwendungen auszahlen und sie zum Mittel der Wahl machen:

Komponenten sind unabhängig voneinander und bringen ihr eigenes CSS oder JavaScript mit. Das erleichtert Wartungsaufwand und Weiterentwicklung einzelner Komponenten spürbar und senkt die Fehleranfälligkeit. Eine neu entwickelte Komponente wird erst in das System eingebaut, wenn sie auf Herz und Nieren geprüft ist. Sollten sich doch Fehler eingeschlichen haben, so reißen diese nicht das komplette System in den Abgrund, sondern betreffen nur eine spezifische Komponente, die dann einfach wieder durch ihre funktionierende Vorgängerversion ausgetauscht wird.

Komponenten sind zustandslos. Sie empfangen Daten, verarbeiten sie und geben sie so wieder aus, wie es von ihnen verlangt wird. Komponenten können diese Daten manipulieren, nehmen aber niemals selbst einen Zustand ein. Sollte für irgendetwas eine API nötig sein, so passiert das außerhalb der Komponente.

Komponenten sorgen für Ordnung. Selbst wenn ein Projekt ungeahnte Ausmaße annimmt, sorgt eine Komponenten basierte Architektur jederzeit für eine leicht verständliche und gut dokumentierte Grundordnung, die Wartungsarbeiten immens erleichtert. Unterschätzen Sie niemals diese Ordnung, und sei Ihr Projekt auch noch so klein. Sollte es wachsen, werden Sie froh um die Ordnung sein, die Ihnen eine Komponenten basierte Architektur bietet.

Fazit

Bei der Entwicklung von Single-Page-Webanwendungen ist Komponenten basierte Architektur eine lohnende Alternative zur herkömmlichen Entwicklung über Frameworks. Jede Funktion wird als separate Komponente entwickelt und ins System eingefügt. so sorgen Sie für Ordnung und mindern den Wartungsaufwand, selbst wenn Ihr ehemals kleines Projekt riesig zu werden verspricht. Komponenten basierte Programmierung ist ein gut erprobtes Programmierparadigma, das sich bestens auf die Webentwicklung anwenden lässt. Probieren Sie es einfach aus. Es lohnt sich!

Sie haben weitere Fragen zum Thema? Sprechen Sie uns an! mindtwo in Bonn berät Sie gerne.