Van Front-End naar Back-End: Goboat!

Van Front-End naar Back-End: Goboat!

Een lange tijd geleden hebben wij een blog geschreven over de verschillen tussen front-end development en back-end development. De front-end is verantwoordelijk voor wat je ziet en de interactie die je hebt met het product. De back-end is verantwoordelijk voor de achterliggende techniek, zoals het verwerken van data en de communicatie met de database. Raak je nu al de draad kwijt? Geen paniek! Lees nog even rustig hier onze blog terughttps://www.sqits.nl/blog/sqits-frameworks. Wat we jullie vandaag gaan uitleggen is hoe deze twee samenwerken, in plaats van te vertellen waar ze in verschillen. Dit doen we aan de hand van een praktisch voorbeeld vanuit één van de projecten waar we op dit moment nog druk mee bezig zijn, maar stiekem al een beetje trots op zijn: Goboat.

Wat is GoBoat?

Goboat is een platform voor het huren en verhuren van boten. Het geeft gebruikers de mogelijkheid om hun boot te verhuren aan particulieren voor bijvoorbeeld een leuk middagje varen in Amsterdam. De huidige website is door een andere partij ontwikkeld door middel van het WordPress CMS. Helaas zorgt dit er nu voor dat het platform steeds moeilijker te onderhouden is en daardoor een stuk minder stabiel is. aan ons gevraagd om het platform opnieuw te ontwikkelen om er voor te zorgen dat er meer doorontwikkeling mogelijk is. Dit zal er uiteindelijk voor zorgen dat het makkelijker is om nieuwe functionaliteiten te implementeren. Natuurlijk gaat dit gepaard met de nodige front-end en back-end kunstjes!

De Technieken

Voor de back-end hebben wij natúúrlijk gekozen voor ons favoriete framework: Laravel! Waarom we daarvoor hebben gekozen, kun je trouwens gewoon teruglezen in deze blog. Kortweg biedt Laravel een vaste omgeving aan die ook veel hulp biedt tijdens het coderen.

Het bouwen van de front-end hebben wij gedaan door middel van Vue.js. Over Vue.js hebben wij nog niet heel veel verteld. Vue.js is een JavaScript framework dat goed samen kan werken met Laravel. Vue.js zit immers inbegrepen in een verse Laravel installatie waardoor je het dus gelijk kan gebruiken als je een nieuw project aanmaakt. Vue.js maakt het ook makkelijker om code te hergebruiken door middel van ‘componenten’. Als je een website zou verdelen in verschillende stukken zou je bijvoorbeeld kunnen spreken over componenten: de navigatie is een component, de sidebar is een component and so on. Naast het hergebruik kan dit je code ook overzichtelijker maken en daarom is dit dus een ideale manier om je code te onderhouden. Naast dit voordeel maakt Vue.js het ook makkelijker om interactie toe te passen. Vue.js is enorm interactief en reactief.

Maar hoe werken deze twee dan eigenlijk samen? Dit laten we graag zien aan de hand van een echt voorbeeld uit het nieuwe platform.

Voeg een boot toe aan je favorieten

Het kan voorkomen dat je wel eens eerder een boot hebt gehuurd en je hier erg over te spreken was. Deze wil je dan wellicht wat vaker huren. Deze boot kan je dan toevoegen aan je favorieten. Bij Goboat wordt er gebruik gemaakt van een hartje dat te vinden is bij elke boot. Op dit hartje kan geklikt worden om een boot toe te voegen aan jouw favorieten. Hiervoor moet je natuurlijk ingelogd zijn, omdat die favorieten boten aan jouw account worden gekoppeld.

De front-end is verantwoordelijk voor het vormgeven van het hartje. Daarnaast is het hartje verantwoordelijk voor de interactie die de gebruiker ondervindt met de website van Goboat. Ondertussen wordt er door de back-end opgehaald welke gebruiker jij bent en welke boten jij als favoriet hebt opgeslagen. Zo zie je direct je favorieten terug in het overzicht. Deze data wordt doorgegeven aan de front-end, zodat de front-end er voor kan zorgen dat het hartje gekleurd is als de boot is toegevoegd aan jouw favorieten of dat het hartje leeg is als een boot nog niet tot je favorieten behoort. De front-end ontvangt deze data en zorgt ervoor dat, wanneer een boot nog niet tot je favorieten behoort, het hartje nog niet blauw gekleurd is. Heb je een boot al toegevoegd als favoriet? Dan zie je dat duidelijk terug door middel van het blauw gekleurde hartje!

Wanneer je dan een boot wilt toevoegen klik je op het hartje. De front-end gaat vervolgens checken of de boot al favoriet is, wat dus al eerder is doorgegeven door de back-end. Zo ja, dan wordt deze boot van de lijst afgehaald. Zo niet, dan wordt er met de front-end een verzoek gestuurd naar de back-end om de boot toe te voegen als favoriet en wordt de boot in de database opgeslagen als favoriet. Tegelijkertijd wordt het hartje ook aangepast naar een vol hartje. En dit gebeurd allemaal zonder refresh, de front-end zorgt dat je meteen resultaat ziet van het toevoegen aan je favorieten!

Zo zie je dat de werking tussen front-end en back-end geen raketwetenschap is, maar we kunnen ons voorstellen dat je er toch nog vragen over hebt. Die vragen kun je ons natuurlijk mailen via info@sqits.nl, of je kunt ons een berichtje sturen via Facebook. Het nieuwe platform van Goboat is nog ontwikkeling maar over de lancering horen jullie snel meer!


Leuk artikel? Laat het andere weten!