Mijn naam is Ridvan Duman (32 jaar jong) en ik ben vanaf 16-03-2020 werkzaam bij Webmen. In deze periode begon net corona toe te slaan en werd de vrijheid van iedereen beperkt. Ik was net begonnen bij mijn nieuwe werkgever en op dat moment ging er veel door mij heen. Hoe ga ik dit aanpakken? Hoe ga ik samenwerken met mijn nieuwe collega’s? Hoe bouw ik een band met ze op als ik überhaupt niet in dezelfde ruimte mag zijn als mijn collega’s? Deze vragen gingen rond in mijn hoofd, maar gelukkig werd ik goed ontvangen. De spullen die ik nodig had om thuis te werken, kreeg ik mee. Ook vond er elke dag een online meeting plaats, dit heeft mij enorm geholpen. Op deze manier kon ik toch een band opbouwen met mijn collega’s.

Samenwerking

Mettertijd en door enige samenwerking met verschillende collega’s begin je een band op te bouwen, waardoor je ook beter kunt samenwerken aan bijvoorbeeld projecten die heel ingewikkeld lijken in het begin.

Ik, als front-end ontwikkelaar, kreeg de kans om intensief samen te werken met een collega die back-end ontwikkelaar is.

De opdracht was om bepaalde onderdelen in de applicatie te bouwen met VueJS. Ik hoor je al denken: VueJS? Front-end? Back-end? Ik leg het je uit.

Back-end

Een back-end developer (ook wel back-end ontwikkelaar of back-end programmeur) is iemand die verantwoordelijk is voor de back-end (de achterkant) van een website, applicatie of programma.

De back-end van een toepassing is het gedeelte dat niet zichtbaar is voor de gebruiker. Vaak heeft dit de vorm van een dashboard, waarin beheerders bijvoorbeeld wijzigingen kunnen doorvoeren en nieuwe data kunnen toevoegen. Het back-end gedeelte van een toepassing ondersteunt de front-end (dat wat de gebruiker daadwerkelijk ziet) en zorgt er meestal voor dat de front-end kan communiceren met andere programma’s en applicaties. De back-end omgeving maakt gebruik van een inlogsysteem, vaak met verschillende (toegangs)rechten voor verschillende beheerders.

Front-end

Wat is een front-end developer? Een front-end developer (ook wel front-end programmeur of front-end ontwikkelaar) is iemand die verantwoordelijk is voor de technische kant van de front-end (de voorkant) van een applicatie, website of programma.

VueJS

VueJS is een raamwerk om de User Interface van een app of web app te bouwen. Meestal wordt het gebruikt voor Single Page Applications. Een Single Page Application (SPA), ook wel een Single Page Interface (SPI) genoemd, is een webapplicatie of website die past op een enkele webpagina met als doel een vlotte gebruikerservaring te bieden, die te vergelijken is met een computerprogramma dat op de computer van de gebruiker zelf draait.

Uitdaging

Als ik met VueJS aan het werk ging, was het meestal een hele applicatie die in VueJS geschreven moest worden. Hier zit ook mijn specialiteit om dat met VueJS te doen. Nu kwam de vraag bij een project of we ook alleen onderdelen van de web applicatie in VueJS konden bouwen. Ik had dit nog nooit eerder gedaan, maar wist wel dat VueJS zo flexibel is dat dit mogelijk zou moeten zijn. Ik was meteen enthousiast. Doordat het een nieuwe uitdaging is, wou ik er gelijk mee aan de slag!

Project

Er zijn een paar punten om over na te denken wanneer we een bepaald component(onderdeel) in VueJS gaan bouwen, namelijk:

  1. Wat voor component moet het zijn?
    Het component wat gebouwd moest worden, was een blok met reacties waar een gebruiker een reactie kan achterlaten bij een bericht of een reactie kan geven op een andere reactie in het bericht.

  2. Moet het component kunnen ‘praten’ met de backend?
    Het antwoord is: Ja. Omdat een gebruiker gegevens kan opslaan moet de component kunnen ‘praten’ met de backend want het wordt dan uiteindelijk opgeslagen in een database.

Praten met de back-end

Als een front-end applicatie connectie moet maken met de back-end gaat dat meestal via een API (Application Programming Interface). Een API is een verzameling definities op basis waarvan een computerprogramma kan praten/communiceren met een ander programma of onderdeel. Dit gebeurt in het algemeen door middel van een API-endpoint. Via een API-endpoint wordt de applicatie die vraagt om de data, gekoppeld aan de infrastructuur die de dienst levert.

In ons geval communiceert ons VueJS component, oftewel front-end, met onze back-end. Zo kunnen we data opslaan in de back-end.

Om ons VueJS Component goed te kunnen laten werken, hebben we dus een API-endpoint nodig die de data opslaat in de database.

Omdat we een bepaald onderdeel gaan bouwen in VueJS, hebben we ook het API-endpoint nodig die bij dat gedeelte van de applicatie hoort.

In een andere situatie waar je een hele applicatie bouwt in VueJS, kunnen we zo het API-Endpoint aanroepen om bijvoorbeeld een reactie te plaatsen.

Voorbeeld: http://www.api-endpoint.com/api/v1/post/2

We geven een reactie op een bericht vandaar de ‘/post’, vervolgens moeten we weten om welk bericht het gaat. Dit doen we door middel van een ID (Identificerend kenmerk) en dat is dan de ‘2’ in het API-Endpoint.

In ons VueJS onderdeel, hebben wij eigenlijk al gelijk toegang tot het API-Endpoint. Omdat het een onderdeel is van een grotere applicatie kunnen we het API-Endpoint van hierboven niet gebruiken.

Wat er moet gebeuren, is dat het VueJS onderdeel weet in welk deel van de applicatie hij zit, zodat we de juiste API-Endpoint kunnen opvragen. Omdat het in dezelfde applicatie zit, is het onnodig om het volledige domein te gebruiken voor de endpoint. Je wilt alleen gebruiken wat je nodig hebt. We weten dat het VueJS onderdeel in een bericht detailpagina zit dus het zou mooi zijn als we het API-Endpoint zoals dit kunnen gebruiken:

  • '/post/2'

We weten dat het om een bericht (post) gaat, vandaar de ‘/post’ en de ID is ‘2’. We hebben nu 2 als ID maar wat nou als een gebruiker een andere post aan klikt met een ander ID? Dan moeten we dit dus opvangen en de juiste API-Endpoint elke keer opvragen.

Mijn collega (back-end ontwikkelaar) heeft het API-Endpoint zo opgebouwd dat ik het kan uitlezen als een slug.

Slug

De slug is het gedeelte van een URL wat na de domeinnaam komt. Speciale karakters zoals ampersands (&) en vraagtekens worden weggehaald. Alle karakters worden omgezet naar kleine letters en spaties worden vervangen door middel van koppelstreepjes.

Voorbeeld: https://www.uwdomein.com/diensten

Wat dikgedrukt is, is de slug.

De back-end ontwikkelaar heeft dit gebouwd en het is nu aan mij als front-end ontwikkelaar om dit te implementeren. 

We gaan dit doen door middel van props welke beschikbaar zijn in VueJS.

Props

Props zijn een manier om data van buitenaf te kunnen ontvangen in ons component.

VueJS Component

We weten wat een VueJS Component is en we weten wat een API-Endpoint is. Hoe gaat dit er nu uitzien? Wat is de code voor dit component en hoe bouwen we het op?

Voorbeeld:

HTML
<template>
    <div>
        <div class="title_button_block">
            <h2>Reacties</h2>
            <div class="text-veld">
                <textarea v-model="userComment" class="textarea" placeholder="Typ hier je reactie."></textarea>
                <button @click="addComment">Reactie toevoegen</button>
            </div>
        </div>
        <div class="comments_block">
            <ul class="comments" v-for="comment in comments" :key="comment.id">
                <li>{{ comment.user.name }}</li>
                <li>{{ comment.user.comment }}</li>
            </ul>
        </div>
    </div>
</template>
js
<script>
export default {
    name: 'comments',
    props: ['usercomments', 'endpoint'],
    data() {
        return {
            postComments: [],
            userComment: ''
        }
    },
    computed: {
        comments() {
            this.postComments = this.usercomments
            return this.postComments;
        }
    },
    methods: {
        addComment() {
            // Controleer of de input niet leeg is.
            if (this.userComment === '') {
                // Toon hier een foutmelding en doe daarna niks.
                alert('veld is verplicht');
                return;
            }
            // Zet hier het blok zichtbaar zodat een gebruiker een reactie kan toevoegen.
            ApiService.postRequest(this.endpoint, {
                comment: this.userComment
            }).then(response => {
                this.comments.push(response.data)
                this.userComment = '';
            }).catch(error => {
                alert(error);
            })
        }
    }
}
</script>

Breakdown:

  1. button@click="addComment" Wanneer er op geklikt wordt, wordt er een reactie toegevoegd.

  2. >textarea.v-model="userComment" De waarde die de gebruiker intypt, slaan we op in een variabele die ‘userComment’ heet.

  3. ul.v-for="comment in comments" Dit is een VueJS methode om een lijst goed te kunnen weergeven.

  4. name: 'comments' Hiermee geven we de component een naam.

  5. props: ['usercomments', 'endpoint'] Dit zijn de props die we binnenkrijgen.

  6. data Hier definiëren we onze variabele die we nodig hebben.

  7. computed: comments() Hiermee halen we de comments naar binnen en wijzen we ze toe aan een nieuwe variabele. Dit is een best-practice van VueJS, want we willen niet de data veranderen wat vanuit de prop komt, maar het eerst opslaan in een nieuwe variabele voordat we er wat mee kunnen doen.

  8. methods: addComment() Met deze functie controleer ik eerst of de gebruiker wel iets heeft ingevoerd, zo niet dat laat ik een error message zien. Als de gebruiker wel wat heeft ingevoerd, wordt er een functie aangeroepen die tegen de back-end praat en tevens de informatie opslaat.

Zoals je kunt zien ontvangen we 2 props van buitenaf in dit component, namelijk: 'usercomments' en 'endpoint'.

We gebruiken ‘usercomments’ om de bestaande reacties te tonen en we gebruiken ‘endpoint’ om nieuwe reacties toe te kunnen voegen.

Component gebruiken

Als we dit VueJS component gebruiken moeten we het eerst inladen en de applicatie laten weten hoe we het gaan noemen. 

Voorbeeld:

js
import Vue from 'vue';
import CommentBlockComponent from "./CommentBlockComponent";
new Vue({
        el: '#commentblock,
        components: {
            'comment-block': CommentBlockComponent
        },
    })
...

Breakdown:

  1. import Vue from 'vue' Hiermee importeren we VueJS.

  2. import CommentBlockComponent Hiermee importeren we onze component.

  3. Je ziet dat ik 'comment-block' voor CommentBlockComponent heb gezet, daarmee geef ik de component een alias waar ik het mee kan aanroepen.

  4. new Vue(... Hiermee laden we VueJS in en registreren we ons component.

Op dit moment zijn we zover om het component te gebruiken in de applicatie.

Voorbeeld:

html
<div id="commentblock">
	<comment-block endpoint="{{ url('post_comment', {slug: post.slug}) }}" usercomments="{{ comments }}" ></comment-block>
</div>

Breakdown:

  1. div.id="commentblock" Met dit ID roepen we het VueJS component op om het hierin te laden.

  2. <comment-block></comment-block> Dit is de alias die ik heb gegeven aan het component. comment-block.endpoint={{ url('post_comment', {slug: post.slug}) }} Dit is de manier hoe ik het API-Endpoint als slug binnen krijg, als prop binnen het component.

  3. comment-block.usercomments Dit is de prop waar ik alle reacties bij het desbetreffende bericht binnen krijg.

Ik ga voortaan in de beginfase van een project nauwkeurig kijken of ik de hele applicatie in VueJS ga bouwen of dat ik alleen onderdelen in VueJS ga bouwen.

Het was een leuke uitdaging en met wat onderzoek en doorzettingsvermogen lukt het altijd!

Ik ben erg positief over VueJS omdat ik er makkelijk mee kan werken en het heeft veel mogelijkheden. Van een normale website bouwen, naar een app voor op je smartphone, er is genoeg keuze!

Ik vond het erg interessant om te werken op een andere manier, wat ik niet gewend was en dat wou ik graag met jullie delen. Ik hoop dat jullie net zo enthousiast zijn geworden als ik.