Frontend- vs. Backend-Entwicklung: Wo soll ich mit meiner Web-App anfangen?

Frontend- vs. Backend-Entwicklung: Wo soll ich mit meiner Web-App anfangen?

- • SEO

Die ewige Rivalität zwischen Frontend und Backend gehört zu den Dingen, die auf den ersten Blick albern erscheinen, aber wenn man über die Auswirkungen auf unsere Projekte nachdenkt - vor allem, wenn man alleine oder in einem kleinen Team arbeitet - wird es zu einem echten und notwendigen Gespräch.

Für diesen Artikel haben wir mit dem CTO der SaaS Group , Zoltán Bettenbuk, und den leitenden Software-Ingenieuren Pétér Bástyi und Bálint Balky gesprochen, die zusammen mehr als 30 Jahre Erfahrung in der Entwicklung von Web-Apps und im Team-Management haben.

7 Gründe, das Front-End Ihrer Webanwendung zuerst zu programmieren

Frontend- vs. Backend-Entwicklung

Vor unserem Gespräch dachten wir, dass dies ein engerer Wettbewerb zwischen diesen Ansätzen sein würde. Etwas wurde jedoch sofort klar: Bei den meisten Projekten hat es mehrere Vorteile, mit dem Frontend der App zu beginnen, was beim Backend nicht möglich ist.

Diese Art von Argumentation tauchte überall in unserem Gespräch auf. Damit Sie es besser nachvollziehen können, möchten wir Ihnen zehn Gründenennen , warum Sie das Frontend Ihrer Webanwendung zuerst schreiben sollten:

1. Einfachere und schnellere Einholung von Feedback

Für den Erfolg Ihres Projekts ist es entscheidend, ein klares Feedback von Ihrem Kunden zu erhalten und sicherzustellen, dass Sie den richtigen Weg einschlagen.

"Mein Ansatz ist der agile Ansatz, d. h. ich möchte so früh wie möglich so viel Feedback wie möglich erhalten. Deshalb beginne ich damit, Mockups mit begrenzter oder gar keiner Funktionalität zu erstellen, durch die sich der Kunde klicken kann, um ein erstes Gefühl dafür zu bekommen, wie die App aussehen wird", so Zoltán.

Mit anderen Worten: Wenn man mit der Frontend- und nicht mit der Backend-Entwicklung beginnt, ist das ein zugänglicherer Ansatz, da man dem Kunden zeigen kann, wie die App aussieht, und er in der Lage ist, Einblicke zu geben. Entweder gefällt es ihnen oder nicht.

2. Ihr Team oder Kunde kann eine klare Vision teilen

Zu diesem Punkt sagte uns Pétér Folgendes:

"Ich denke, das Wichtigste ist, sich auf die Vision zu konzentrieren, und die Vision muss vom ersten Tag an für alle klar sein. Und im Allgemeinen denke ich, dass die Visionen klarer sind, wenn man zuerst das Aussehen und das Gefühl hat".

Es ist besser, alle Beteiligten frühzeitig auf die gleiche Seite zu bringen, um zu vermeiden, dass Zeit und Geld verschwendet werden, wenn einer oder mehrere Beteiligte mit den Ergebnissen nicht zufrieden sind, weil sie ein anderes Bild oder andere Erwartungen hatten.

3. Änderungen sind schneller zu implementieren

Kunden werden Sie um Änderungen bitten; das ist ein Teil des Prozesses, den man nicht ignorieren kann. Nehmen wir jedoch an, dass dem Kunden (oder den Testgruppen) etwas an der Benutzeroberfläche oder an der Benutzerschnittstelle nicht gefällt. In diesem Fall können Sie schnell iterieren, ohne sich Gedanken über Ihre Datenbank oder Ähnliches zu machen, was diesen Teil des Prozesses weniger frustrierend und einfacher zu handhaben macht.

4. Sie können sich auf eine Sache zur gleichen Zeit konzentrieren

Der Wechsel zwischen Frontend- und Backend-Entwicklung kann ermüdend und in manchen Fällen ablenkend sein.

Bei der Arbeit am Frontend kann man sich jeweils auf einen Teil der Anwendung konzentrieren. Laut Zoltán "kann dies mit aktuellen Mockup-Tools (...) oder mit der Implementierung der Benutzeroberfläche mit nur gespiegelten Daten oder einem gefälschten Backend erfolgen".

Wenn Sie jedoch mit dem Backend beginnen, müssen Sie bestimmte Teile der Benutzeroberfläche implementieren, um sicherzustellen, dass alles ordnungsgemäß funktioniert, was Sie dazu zwingt, immer wieder die Denkweise zu wechseln.

5. Der Endnutzer steht an erster Stelle

Am Ende des Tages ist das Wichtigste für Ihre Webanwendung, die Schmerzpunkte der Nutzer effizient und ansprechend anzusprechen.

Wenn sich die Benutzer bei der Nutzung Ihrer Webanwendung nicht wohlfühlen oder sie einfach nicht verstehen, müssen Sie zurück ans Zeichenbrett gehen.

Laut Mike Ritchie - Full-Stack-Entwickler:

"Das Benutzererlebnis ist von höchster Bedeutung und der Teil der Benutzeroberfläche, an dem die Beteiligten tatsächlich interessiert sind. Deshalb stelle ich sicher, dass die Interaktionen alle Erwartungen erfüllen und für das mentale Modell des Nutzers optimiert sind.

6. Frontend-Entwicklung kann Backend-Entscheidungen leiten

Auf eine ähnliche Frage antwortete Allen Cheung (Director of Engineering bei Affirm):

"Meiner Meinung nach lässt sich ein großartiges Produkt am besten entwickeln, indem man sich zunächst Gedanken über die Anwendungsfälle und die Nutzer macht und ein Problem entwickelt. All das ist von Natur aus benutzerorientiert und Front-End-Arbeit; was man zu tun versucht, wird besser die Art von Back-End-Systemen leiten, die man zur Unterstützung der Front-End-Operationen aufbauen muss.

Außerdem haben Sie die Zustimmung des Kunden und können sicher sein, dass Sie genau das bauen, was benötigt und gewünscht wird.

7. Entwicklung macht mehr Spaß

Den Fortschritt Ihrer Arbeit zu sehen und Feedback von Ihrem Kunden zu erhalten, ist sehr befriedigend. Und wenn Sie mit der Entwicklung des Backends beginnen, haben Sie eine schöne Benutzeroberfläche, die Sie während der Programmierung sehen können, anstatt nur eine hässliche Bootstrap-Vorlage.

Wann sollten Sie mit dem Backend beginnen?

Wie Sie sehen, ist es für Sie und Ihr Projekt in mehrfacher Hinsicht von Vorteil, wenn Sie Ihre Anwendung vom Frontend aus starten. Aber natürlich ist nichts in Stein gemeißelt. Es gibt ein paar Fälle, in denen Sie zuerst mit der Arbeit am Backend beginnen sollten:

Sie müssen die Geschäftslogik testen

In unserem Gespräch erinnerte sich Zoltán an einen Moment, in dem er zuerst mit dem Backend beginnen musste:

"Ja, es gab ein Projekt, bei dem ich nicht zuerst mit dem Schreiben der UI/Mockups begonnen habe, aber das lag einfach daran, dass es ein großes Fragezeichen gab, ob die Geschäftslogik machbar war oder nicht. Also habe ich damit begonnen, den Teil des Backends zu implementieren, der riskant war."

Diese Flexibilität ist auch bei der Planung Ihrer App wichtig. Denn wenn Sie mit der Arbeit an einer Benutzeroberfläche beginnen, ohne zu wissen, ob eine Integration später möglich sein wird, riskieren Sie, Ihre gesamte Arbeit zu vergeuden.

Doch dann fügt Zoltán hinzu:

"(...) sobald ich einen POC hatte, der bewies, dass es machbar ist, ging ich zurück in die UI/Mockup-Phase, und das Ganze begann von vorne, wie ein normales Projekt."

Sie arbeiten an einer datengesteuerten App

Bei datengesteuerten Anwendungen bestimmt das Backend, wie sich die Anwendung verhält, so dass es weniger Interaktionen gibt, um die man sich kümmern muss.

In diesen Fällen sind eine gut strukturierte Datenbank und eine effiziente API entscheidend für den Erfolg der Software. Sie sollten also zuerst das Backend erstellen und dann an der Benutzeroberfläche arbeiten, die die von Ihnen entwickelte Logik umgibt.

Der Feature-First-Ansatz

Ein weiterer Ansatz, über den sich viele Entwickler einig sind, besteht darin, an beiden Enden gleichzeitig zu arbeiten.

"Ich bin vielleicht etwas voreingenommen, die Frontend- und Backend-Entwicklung gleichzeitig zu machen, so dass ich nicht so viele Mocks und Scheinlösungen für niedrig hängende Früchte auf der Backend-Seite verwenden würde."

Pétér Bástyi

Dies ist besonders nützlich, wenn Sie mit einem Team arbeiten.

"In meinen früheren Jobs war ich nur für die Backend-Entwicklung zuständig, während andere Teams für die Benutzeroberfläche verantwortlich waren. Wir haben normalerweise parallel gearbeitet, mit allen Vor- und Nachteilen. Wir hatten schon in der Anfangsphase voll funktionsfähige Funktionen.

Bálint Balky

Der Feature-First-Ansatz (bekannt als Feature Driven Development oder FDD) ist ein agiles Framework, das den Arbeitsablauf um bestimmte Funktionen herum organisiert. Das Team entwickelt also die notwendigen Komponenten (sowohl Backend als auch Frontend), damit ein bestimmtes Feature funktioniert.

Diese Features sind jedoch nicht unbedingt Produktfeatures, sondern haben eher etwas mit User Stories zu tun.

Anstatt die gesamte Benutzeroberfläche oder das Backend zu erstellen, arbeiten Sie schrittweise an Ihrer Webanwendung.

Allerdings weist Bálint auch darauf hin, dass diese Arbeitsweise einen großen Nachteil mit sich bringt:

"(...) auf der anderen Seite sahen wir nicht das ganze Bild, so dass wir später oft das Backend 'patchen' mussten, um kommende Benutzeranfragen zu unterstützen. Das führte fast immer zu einer... sagen wir mal... 'nicht sehr gut organisierten' Codebasis".

Seiner Erfahrung nach "ist es am besten, über Ressourcen zu verfügen, um parallel an Backend und Frontend zu arbeiten, sich aber anfangs mehr auf das Frontend zu konzentrieren und nur grundlegende Backend-Funktionen zu implementieren".

Basecamp's Ansatz, realistisch zu werden

Bei unseren Recherchen für diesen Artikel sind wir auf einen spannenden Ansatz gestoßen, der von den Gründern von Basecamp entwickelt wurde: das "Getting Real"-System.

Bei dieser Art, Software zu entwickeln, geht es darum, alles wegzulassen, was für die Software nicht unbedingt notwendig ist, sich auf den Kern der Benutzererfahrung zu konzentrieren und den Rest von dort aus aufzubauen.

Was uns am meisten interessiert, ist, dass es sich im Grunde um eine formalisiertere Version von "write the frontend first" handelt.

Quora-Benutzer und Senior Software Engineer Abdallah Yashir fasst diesen Ansatz sehr gut zusammen:

Schritt 1: 

  • Beginnen Sie damit, Modelle Ihrer Idee auf Papier zu entwerfen.
  • Iterieren Sie, bis die Anwendung für Sie einfach und leicht zu implementieren ist.
  • Konzentrieren Sie sich auf Ihr Epizentrum, die eine Sache, ohne die Ihre Idee nicht funktionieren wird
  • Alles andere entfernen
  • Entwerfen Sie die Wireframes mit einem Tool wie Figma oder auf einem Blatt Papier
  • Verwenden Sie es als Bezugspunkt
  • Sie können diese Zeichnungen potenziellen Nutzern vorführen und ihre Nützlichkeit beurteilen
  • Iterieren Sie Ihre Entwürfe

Schritt 2

  • Umsetzung der Entwürfe in einfachem HTML und CSS
  • Diese Aufgabe sollte einfach und in weniger als zwei Wochen erledigt sein
  • Stellen Sie die Anwendung auf einem Live-Server wie Heroku, Amazon AWS oder einem günstigen VPS auf Digital Ocean oder Vultr bereit.
  • Validieren Sie Ihre Idee mit potenziellen Nutzern
  • Gehen Sie erst dann zum nächsten Schritt über, wenn Sie ein solides Feedback erhalten haben.
  • Ändern Sie Ihre Designs und HTML-Codes

Schritt 3

  • Sobald Sie genügend nützliches Feedback erhalten haben, können Sie den schwierigen Teil, d. h. die Programmierung, in Angriff nehmen
  • Dieser Teil ist der schwierigste, zeitaufwändigste und wichtigste Teil Ihrer Idee
  • Sie können sich zunächst auf grundlegende CRUD-Aktivitäten konzentrieren, bevor Sie dann UX-Verbesserungen hinzufügen

Bei der Planung und Entwicklung neuer Ideen müssen Sie stets die Interessengruppen und Nutzer im Auge behalten, denn ohne deren Input werden Sie nicht ans Ziel kommen.

Da Tools für Menschen und nicht nur für Entwickler entwickelt werden, bietet Ihnen die frühe Arbeit am Frontend alle Werkzeuge und Möglichkeiten, die Bedürfnisse Ihrer Nutzer zu testen, bevor Sie sich auf ein Backend festlegen, das Sie wahrscheinlich später noch ändern müssen.