MPA und SPA aus der Sicht der Produktivität

Nachdem ich über viele Jahre klassische Multiple-Page-Webapplikationen (MPA) geschrieben habe, bin ich nun zum Single-Page-Webapplikationen (SPA) übergegangen. Die Applikationen bestehen also nicht mehr aus einzelnen unabhängigen HTML-Seiten, sondern aus nur einer Seite mit einer relativ großen Javascript-Applikation. Diese lädt Inhalte und Daten nach und zeigt sie dynamisch an.

Die Hauptgründe für meinen Wechsel lagen in der Notwendigkeit eines mobilen Clients, die Möglichkeit die Oberfläche leichter interaktiver zu gestalten und letztendlich folge ich damit dem aktuellen Trend. Als clientseitiges Framework hat mich Vue.js überzeugt.

Die beiden Muster MPA und SPA sind schon oft miteinander verglichen worden (z.B. Single-page application vs. multiple-page application) und es gibt auf beiden Seiten Vor- und Nachteile. In diesem Artikel möchte ich beide Ansätze bezüglich der Produktivität vergleichen und das auf eine sehr pragmatische Art und Weise.

Beispielaufgabe

Ich habe eine größere Business-Application, in der ich ein neues Feature umsetzen möchte:

Projekt erstellen (Titel und Beschreibung)
Projekte auflisten
Projektdetails anzeigen
Projekt bearbeiten
Projekt löschen

Diese einfache Funktionalität habe ich mit beiden Ansätzen implementiert.

Technologiestack

Für Interessierte habe ich hier mal die verwendeten Technologien aufgelistet:

MPA
- Server (Grails)
  - Domain-Klasse für Datenbankanbindung
  - Service-Klasse für Datenmanipulation
  - Controller zur Datenaufbereitung
  - GSP zum HTML-Rendering
- Client
  - Jquery als Hilfsbibiliothek
  - DataTables zur Auflistung der Projekte
  - Bootstrap als HTML-Framework
SPA
- Server
  - Domain-Klasse für Datenbankanbindung (wird für MPA und SPA verwendet)
  - Service-Klasse für Datenmanipulation (wird für MPA und SPA verwendet)
  - Controller-Klasse für REST-API
- Client
  - Vue.js als Javascript-Framework
  - Vuex für die Datenhaltung
  - Vue Router für Seitendefinition
  - Vuetify als View-Framework

Ergebnis

Um die Produktivität vergleichen zu können ziehe ich einfach die Menge des Quellcodes heran, d.h. wieviel Quellcode ich schreiben musste, um die Aufgabe zu lösen. Das Ergebnis zeigt die folgende Tabelle:

	MPA with Grails	SPA with vuejs
Lines of code (with boilerplate)	250	441
Characters of code (with boilerplate)	7705	12779
New files	6	7
Additional updated files	1	5

Man sieht, dass der SPA-Ansatz fast doppelt soviel Quellcode erfordert. Und das bestätigt auch meinen subjektiven Eindruck, die Umsetzung mit SPA erfordert einfach mehr Zeit.

Trotz des Ergebnis werde ich beim SPA-Ansatz bleiben, die Vorteile überwiegen einfach und die Frameworks, wie Vue.js, React oder Angular, entwickeln sich in einer rasanten Geschwindigkeit.

Einschränkung

Das Ergebnis lässt sich natürlich nicht verallgemeinern. Ich habe hier meine spezielle Business-Application untersucht. Man kann sicherlich durch Generatoren, Factory-Klassen oder weiteren Komponenten die Anzahl der Codezeilen verringern.

Desweiteren wurde außer Acht gelassen:

Testklassen
Kommentare
Anteil von Boilerplate-Code, der einfach durch Kopieren oder durch die IDE erzeugt wird

Und es ist klar, dass die Anzahl der Codezeilen nicht das einzige Maß für die Produktivität ist. Folgende Punkte sind weitere Faktoren für die Produktivität:

IDE-Unterstützung (Code-Verfolgung, Fehleranalyse)
Qualität der Framework-Dokumentationen
Wie schnell man Antworten auf Fragen erhält, durch Websuche oder Fragen in Foren

MPA Quellcode

Den hinzugefügten Quellcode für die MPA-Lösung gibt es hier als Gist.

SPA Quellcode

Den hinzugefügten Quellcode für die SPA-Lösung gibt es hier als Gist.

Keywords

MPASPAJavascriptVue.js

ArticleMPA und SPA aus der Sicht der Produktivität