Waarom leidt Front-end first tot een beter eindresultaat?

Joost

Geschreven door Joost Saanen op 28-7-2016
4 minuten leestijd

Front-end first is een ontwikkelmethodiek of filosofie waarbij men bij het ontwikkelen van een (web)applicatie zich, zoals de naam al doet vermoeden, concentreert op de front-end.

Alvorens te spreken over front-end first is het goed om eerst eens te kijken wat we hedendaags verstaan onder de begrippen front-end en backend.

Onderstaande afbeelding geeft weer hoe front- en back-end tegenwoordig wordt gezien.

front-end first filosofie

Front-end

Met front-end bedoelen we het deel waar interactie met gebruikers plaatsvindt. Dit kunnen zowel beheerders als gebruikers zijn van een systeem. Let op: wanneer je iemand hoort zeggen: “als beheerder log je in op de back-end van de applicatie”, dan wordt hier een ander soort back-end bedoeld. In dat geval gaat het over het afgeschermde deel van een applicatie. Daar waar alleen beheerders toegang hebben. Ook zo’n beheergedeelte heeft een front-end!

In deze context is back-end de onzichtbare techniek achter de front-end.

Wanneer er vroeger werd gesproken over front-end, dacht je vaak aan de voorkant van een applicatie. In het geval van websites of webapplicaties bedoelde men vaak HTML / CSS (of Photoshop). Je dacht dan meteen aan een webdesigner. Tegenwoordig is alleen kennis van HTML / CSS niet meer voldoende en wordt er een vele grotere skillset verwacht. Je spreekt dan over een (front-end) developer. HTML / CSS is hier slechts een onderdeel van. Wat moet je dan nog meer kunnen? Denk aan de beheersing van JavaScript-frameworks als Ember.js, Backbone.js maar ook Facebook’s React. We schreven hier al eens eerder een blogpost over.

Back-end

De back-end is het deel wat zich in de achtergrond afspeelt. Hier vinden de belangrijkste processen plaats. De back-end verzorgt de data waar de gebruiker om heeft gevraagd. Een back-end bestaat doorgaans uit een aantal onderdelen: server, applicatie, database en koppelingen naar andere systemen.

Om beter het verschil of de combinatie van de twee te duiden, geef ik een voorbeeld:
Neem een webshop waar je een boek kunt bestellen. Alles wat je als gebruiker ziet is de front-end. Wanneer je een bestelling plaatst worden alle gegevens via de interface verstuurd naar de back-end. Deze valideert de gegevens waarna de data wordt opgeslagen in een database (je kunt ook alleen in de front-end valideren, maar dan gaat het snel mis). Vanuit de back-end wordt er een mail gestuurd naar de gebruiker. Tevens wordt er een bericht gestuurd naar de front-end van de webshop dat de bestelling gelukt is.

De front-end communiceert via een interface met de back-end. Via deze interface (of API) vindt de communicatie plaats en is de taal die gesproken wordt vastgelegd. Denk hierbij aan talen als JSON of XML, maar ook afspraken als hoeveel decimalen mag een getal bevatten.

En front-end first dan?

We kijken eerst even naar het ontwikkelproces van webapplicaties een aantal jaren geleden. In die tijd lag de focus bij het ontwikkelen sterk op de back-end. De front-end — de schil van de applicatie — was hier een onderdeel van. De back-end en front-end waren destijds zo met elkaar verweven, dat de interface-laag minder duidelijk was. Back-end en front-end werden beide tegelijkertijd ontwikkeld. Hierbij ging in de beginperiode van een project ook al veel tijd naar het ontwikkelen van technische back-end logica, terwijl de grootste risico’s vaak in de front-end kant zitten (‘Wat is het gedrag van de applicatie’).

Bij de filosofie van front-end first is de gebruikerservaring één van de belangrijkste aspecten. Er wordt eerst een versie gebouwd waarbij een werkende front-end wordt opgeleverd. Je krijgt hier meer dan een prototype, omdat de applicatie al écht werkt. Wanneer een back-end onbreekt, wordt hier vaak gebruik gemaakt van dummy data. Deze bestaat uit uitsluitend een front-end. Hierdoor kan de user experience al in een vroeg stadium worden getoetst, zonder dat een implementatie van de back-end nodig is. Op basis van de uitkomsten kan de front-end worden bijgesteld. Wanneer het prototype slaagt, kan men starten met het ontwikkelen van de back-end. Of er kan parallel aan de back-end ontwikkeld worden. Doordat de iteratieve werkwijze kan en snelle oplevering van prototypes, is front-end first uitermate geschikt in een omgeving waar de Agile Scrum methodiek wordt toegepast.

Ook de interface biedt een belangrijk voordeel. Omdat de gesproken taal in de interface is vastgelegd, maakt het niet zoveel meer uit in welke techniek de front-end of back-end is ontwikkeld. Zolang de interface de berichten begrijpt kunnen beide aan elkaar worden gekoppeld. Is je huidige leverancier gespecialiseerd in complexe back-ends met specifieke business logica, dan kun je het ontwikkelen van de front-end ook door een andere expert of bedrijf laten ontwikkelen. Dit past bij de trend dat er aparte front-end frameworks (Ember.js, Angular.js, Backbone.js, React, etc.) en back-end frameworks (Node.js, Ruby on Rails) worden gebruikt.

Geïnteresseerd geraakt?

Kabisa is gespecialiseerd in de ontwikkeling van maatwerksoftware. Bij de development van een webapplicatie hebben wij al vele malen succesvol gebruik gemaakt van de front-end first aanpak. Ben je geïnteresseerd geraakt of heb je zelf ervaring met deze manier van werken? Neem dan contact met ons op of laat een bericht achter in de comments.

Joost

Joost Saanen

Gepassioneerde all-rounder met brede interesses; van serverbeheer en cloudhosting tot (UI)design en (web)development. Hardloopt en schrijft het liefst tegelijk.