Vergleich von 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
  • 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

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.