De vraag naar front-end ontwikkelaars is drastisch gestegen in de afgelopen jaren, simpelweg omdat er teveel mensen zijn die een website willen, maar niet genoeg vaardige mensen zijn die de website zelf kunnen creëren.
Maar wat is front-end ontwikkeling precies en waarom zouden we er onze aandacht aan moeten besteden?
Wat is front-end ontwikkeling?
Wanneer iemand het heeft over “front-end ontwikkeling” bedoelen ze meestal front-end web of app ontwikkeling, die zich voornamelijk focust op het deel van de website/applicatie dat gebruikers te zien krijgen (ook bekend als de cliëntzijde).
Een front-end web ontwikkelaar transformeert de backend code in een grafische interface die gebruikers kunnen zien en gebruiken en waar ze mee kunnen interacteren zonder dat ze de backend architectuur van de applicatie breken.
Voor een gedetailleerdere omschrijving, bekijk onze ultieme gids over front-end ontwikkeling talen en hoe die van elkaar verschillen.
Hoe populair is front-end ontwikkeling?
Zoals ik al zei, is front-end de afgelopen jaren wereldwijd steeds populairder geworden.
Echter, om de impact en het belang van front-end echter echt te kunnen begrijpen moeten we kijken naar de populairste individuele talen en frameworks en die behandelen als elementen in de enorme set waar front-end software ontwikkeling uit bestaat.
JavaScript blijft ook groeien
Ondanks dat het een relatief oude scripttaal is, wordt JavaScript constant geüpgraded (en aangepast), met nieuwe, sneller en betrouwbaardere frameworks die alsmaar uit het JavaScript paradigma voortkomen met een snelheid die momenteel bijna niemand meer bij kan houden.
Verbluffend genoeg is JavaScript al negen jaar op een rij de meest gebruikte programmeertaal. Let wel op de programmeren voor de meeste ontwikkelaars wordt gezien als web programmering en andersom.
Angular, React.js, en Vue.js zijn de 3
JavaScript heeft ook zeen redelijk aantal frameworks om uit te kiezen. Zwaargewichten zoals Angluar, Vue.js en React.js zijn een aantal van de frameworks die het meest gevraagd worden door ontwikkelaars wereldwijd.
Uit de ultieme JavaScript trifecta blijkt dat React.js de eerste plaats heeft overgenomen door de harten en geesten te winnen van ontwikkelingsteams bij WhatsApp, BBC, Pinterest, en andere miljardenbedrijven.
De “D'Artagnan van JavaScript”, Vue 3, is ook hard aan het werk om een van de top drie plekken te bemachtigen. Of het ze zal lukken zullen we nog moeten zien.
Typescript is de toekomst
Je kunt het natuurlijk niet over JavaScript hebben zonder het te hebben over Typescript: het is nu net als pindakaas en hagelslag. Sinds het in 2012 gelanceerd is, is Typescript de nummer een taal waar ontwikkelaars het liefst mee willen werken, als ze er niet al mee aan het werk zijn.
Volgens dezelfde enquête heeft Typescript de zevende plek op de lijst van populairste talen onder alle respondenten en heeft het de vijfde plek op de lijst van populairste talen onder professionele ontwikkelaars. In dat licht heeft het een redelijk groot deel van de populariteit verdiend, 30.19% en 36.42% van 83.052 en 58.031 respondenten respectievelijk.
Svelte begint populairder te worden
Eindelijk begint een op componenten gebaseerd JS framework genaamd Svelte ook steeds bekender en populairder te worden.
Code die gegenereerd wordt in Svelte kan de DOM manipuleren, zo verbeterd het de prestatie op alle vlakken en zorgt het ervoor dat JavaScript zelfs nog populairder wordt onder professionele front-end engineers.
Let goed op of je Svelte ontwikkelaars tegen komt, als je deze nieuw opkomende front-end trends niet al in de gaten houdt.
Waar kun je front-end ontwikkelaars van hoge kwaliteit vinden
Hier zijn een aantal van de betrouwbaarste plekken waar je een freelance front-end ontwikkelaar kunt vinden en in kunt huren:
- Hired: Een betrouwbare website om front-end, backend en full-stack ontwikkelaars te vinden
- Upwork: Freelance talent met verschillende achtergronden en ervaring
- Dice: Een toegewijd tech bord met meer dan 3M professionele op het platform
- Gun.io: Een erg unieke en bijzondere bron om ontwikkelaars te vinden voor jouw projecten
- Proxify: Dat zijn wij! We bieden elite, geselecteerde en vooraf gescreende professionele ontwikkelaars beschikbaar binnen slechts enkele dagen
- X-team: Biedt ontwikkelaars op aanvraag om een scala aan verschillende projecten te voltooien
Andere online bronnen waar je ontwikkelaars van kwaliteit kunt vinden omvatten StackOverflow, GitHub, Reddit (met wat doorzettingsvermogen), en zelfs tools zoals Ahrefs en SEMrush (uitvoeren van sleutelwoorden onderzoek, iets als “vind front-end ontwikkelaars in de buurt”) als je vaardig genoeg bent in SEO.
Hoe je front-end ontwikkelaars interviewt
Lang gelden zouden de verplichtingen en verantwoordelijkheden van front-end ontwikkelaars en ongeveer zo uit hebben gezien: in staat zijn om statisch ontwerp te vertalen naar functionele websites of apps met het gebruik van HTML/CSS, JavaScript, en andere tools en frameworks.
Vandaag is die definitie echter duidelijk veel breder, dit leidt voor sommigen tot wanhoop maar de meesten zijn er erg blij mee. De moderne verplichtingen, verantwoordelijkheden en verwachtingen van een hedendaagse vaardige front-end ontwikkelaar zijn als volgt:
- Websites en web applicaties bouwen, onderhouden en debuggen terwijl ze web ontwerp beste parktijken volgen
- Ontwerpen en applicatie blauwdrukken transformeren naar code met het gebruik van HTML5, CSS3, JavaScript, en zijn vele frameworks en libraries (React.js, Angular, Vue.js)
- Samenwerken met backend ontwikkelaars om te helpen de gebruikersinterface elementen te integreren met de databases en APIs
- Bekend zijn met de search engine optimization (SEO) op locatie, en het vermogen om de prestatie en snelheid van een website/app te optimaliseren
- Code van hoge kwaliteit schrijven, dit dienovereenkomstig documenten en routine checks uit voeren en testen om een soepele flow van operaties binnen in de website/applicatie te garanderen
- De motivatie hebben om hun bestaande vaardigheden set constant te verbeteren en dienovereenkomstig nieuwe vaardigheden te leren
Interviewvragen + hun verwachtte antwoorden
Voor Juniors
- Welke vaardigheden moet een front-end ontwikkelaar hebben?
Verwachte antwoord: Een front-end ontwikkelaar moet HTML, CSS en JavaScript kennen. Ze moeten ook bekend zijn met responsief ontwerp en web ontwikkeling beste praktijken.
- Definieer HTML meta tags.
Verwachte antwoord: Meta tags zijn HTML elementen die informatie bevatten over de pagina, waaronder de naam, omschrijving, sleutelwoorden, auteur en meer. Ze worden vaak gebruikt door zoekmachines om ze te helpen vast te stellen hoe ze jouw site categoriseren.
- Omschrijf de voordelen van REST web diensten?
Verwachte antwoord: REST staat voor Representational State Transfer. Het is een architecturale stijl voor het bouwen van Web diensten over HTTP. REST web diensten maken het makkelijker voor cliënten om toegang te krijgen tot data over meerdere platformen en apparaten (bijvoorbeeld: mobile telefoons).
- Wat is een Grid systeem in CSS?
Verwachte antwoord: Een grid systeem is een set van tools voor het creëren van opmaken met het gebruik van CSS. Het wordt vaak gebruikt om een consistente opmaak te creëren die hergebruikt kan worden over meerdere pagina’s, maar het kan ook gebruikt worden om een enkele pagina er beter uit te laten zien.
- Leg gebruiker gecentreerd ontwerp uit?
Verwachte antwoord: Een gebruiker gecentreerd ontwerp focust op de behoeftes en verlangens van jouw gebruikers, in plaats van dat het gewoon probeert om jouw product er goed uit te laten zien. Gebruiker gecentreerd ontwerp helpt jou om te begrijpen wat jouw gebruikers willen en wat ze nodig hebben zodat ze jouw product effectiever kunnen gebruiker en er beter van kunnen genieten.
- Wanneer en waarom zou ik gebruik moeten maken van een Webpack?
Verwachte antwoord: Webpack is een open source module bundellaar voor JavaScript applicaties. Het bundelt al jouw bestanden samen in een bestand genaamd "bundel." Dit betekent dat in plaats van dat je elk individuele bestand apart moet laden (zoals CSS, HTML en JavaScript), WebPack ze in een bestand bundelt dat snel en efficiënt laadt zodat jouw website sneller laadt!
Je zou Webpack moeten gebruiken wanneer je meerdere JavaScript bestanden samen wilt bundelen in een bestand, en ze allemaal tegelijk in de browser wilt laden.
- Noem drie manieren om pagina laadtijd te verminderen
Verwachte antwoord:
-
Houd het aantal van HTTP aanvragen beperkt door meerdere bestanden in een bestand te combineren.
-
Verminder de grootte van elke asset door afbeeldingen te comprimeren en HTML, CSS, en JavaScript bestanden te verkleinen.
-
Minimaliseer de afstand tussen de server en de eindgebruiker door gebruik te maken van een CDN (Content Delivery Network).
Voor ervaren ontwikkelaars
- Wat is stringify?
Verwachte antwoord: Stringify is een online tool die jou helpt om vlakke tekst te converteren naar rijke snippets in HTML en JSON formats. Het werkt op vlakke tekst documenten, extraheert metadata daarvan en converteert ze in JSON of HTML code met opmaak en stijl informatie. Er zijn vele ontwikkelaars die Stringify gebruiken om rijke snippets te creëren voor hun webpagina’s en websites zodat Google beter kan begrijpen waar hun website over gaat en het hoger kan rangschikken in de zoekresultaten pagina’s.
- Noem alle elementen van het CSS Box Model.
Verwachte antwoord: Het Box Model bestaat uit vier elementen: marge, padding, rand en inhoud breedte. Deze kome allemaal samen om een box rondom de inhoud op het scherm te creëren.
- In een afbeelding tag, wat is het voordeel van de srcset attribuut?
Verwachte antwoord: De srcset attribuut maakt het mogelijk om meerdere afbeeldingen te specificeren die afhankelijk van het apparaat en de scherm grootte geladen kunnen worden. Dit maakt het mogelijk om gebruikers een betere ervaring te leveren wanneer ze jouw site bezoeken op mobiele apparaten.
- Leg het verschil tussen Git Pull en Git Fetch uit
Verwachte antwoord: Git Pull en Git Fetch zijn twee verschillende commando’s die beide nieuwe code ophalen van een opslagplaats op afstand en deze samenvoegen in jouw lokaal werkende kopie. Git Pull haalt nieuwe code op van een opslagplaats op afstand en voegt het samen in jouw lokaal werkende kopie, en stopt dan. Git Fetch lijkt op Git Pull, maar het stopt niet na het samenvoegen; in plaats daarvan gaat het verder met extra commando’s die je hebt geven (zoals git check-out).
- Wat is Semantische HTML? Hoe werkt het?
Verwachte antwoord: Semantische HTML is wanneer je HTML tags gebruikt die relevant zijn voor de inhoud op jouw website, zoals paragrafen voor tekst en lijsten voor lijsten. Semantische HTML helpt zoekmachines om te begrijpen waar jouw website over gaat zodat ze betere resultaten kunnen leveren voor gebruikers die op het web browsen met die zoekmachines.
- Definieer de Anonymous functie in JS?
Verwachte antwoord: De anonymous functie in JavaScript wordt gebruikt wanneer je een functienaam niet expliciet wilt definiëren maar in zijn plaats wat code uit wilt voeren.
Top technische vaardigheden die front-end ontwikkelaars zouden moeten hebben
Een kleine kanttekening is dat sommige bedrijven een bachelor diploma in informatica of een gerelateerd veld vereisen om voor een baan te kunnen solliciteren als een ontwikkelaar (in welke vorm dan ook). Sommige bedrijven vereisten niets anders dan ruwe codeervaardigheden en probleemoplossende vermogens, maar iets van een ontwikkelaar gerelateerde certificatie hebben is altijd een pluspunt.
Hier zijn een aantal van de belangrijkste kwalificaties die verwacht worden van een vakkundige front-end ontwikkelaar:
- Meerdere jaren ervaring (2+) moderne, snelle en verantwoordelijke websites ontwikkelen met HTML, CSS, en JavaScript
- Diepgaande kennis van de populairste JavaScript frameworks zoals React.js, Angular en Vue.js
- Uitstekend begrip en veel ervaring met het werken met JavaScript libraries zoals Bootstrap en jQuery
- Goed begrip van SEO beginselen en op locatie praktijken
- Uitstekende vaardigheden met semantische HTML5 elementen, WAI-ARIA en microformaten
- Geweldige vaardigheid met CSS preprocessors (Sass, Less, of Stylus)
- Veel ervaring met testen en compatibiliteit met meerdere browser
Ik wilde ook wat misconcepties over de front-end ontwikkeling dienst (en front-end ontwikkeling in het algemeen) ophelderen, dus ik heb het Proxify netwerk gevraagd om een paar vragen te beantwoorden, en dat deden de graag.
Mijn eerste vraag was meer een ijsbreker dan iets anders, maar het helpt wel om de toon het gesprek te bepalen:
- Wat is het voornaamste verschil tussen een front-end en backend ontwikkelaar?
Armen Nersisyan, een HTML, CSS, en JavaScript expert had al snel een antwoord klaar:
“Front-end ontwikkelaars zijn mensen die werken aan op de gebruiker gerichte details, of in andere woorden aan alles dat wij zien (clientzijde) zoals applicatiekleuren, animaties en nog veel meer. Dit allemaal wordt gedaan door front-end ontwikkelaars. Backend ontwikkelaars werken juist aan dingen die niet zichtbaar zijn voor de gebruiker zoals authenticatie, werken met databases en meer van dat soort dingen.”
Armen Nersisyan
Een andere ontwikkelaar, onderdeel van het elite Proxify team van ontwikkelaars deelde ook zijn kijk erop. Ardit Maloku heeft veel ervaring met verschillende front-end en backend projecten, met de meeste nadruk op PHP, Laravel, en JavaScript als favoriete talen:
“Front-end ontwikkeling is een programma dat focust op de visuele elementen van een website of app waar een gebruiker mee zal interacteren. Backend ontwikkeling focust daarentegen op de kant van een website die gebruikers niet kunnen zien.”
Ardit Maloku
Mijn tweede vraag was meer gericht op managers, cliënten en andere collega’s die niet per se een tech achtergrond hebben.
- Wat is het ding dat non-tech mensen het meest door de war halen als het gaat om front-end ontwikkelaars?
Armen gaf een duidelijk antwoord:
“Front-end ontwikkeling wordt vaak verward met UI ontwikkeling, en soms denken mensen dat front-end ontwikkelaars enkel een schilderij maken. Maar vandaag de dag, naast UI en schilderen, zijn er ook een heleboel logistieke delen die juist door front-end ontwikkelaars voltooid moeten worden.”
Ardit bedacht een goede analogie:
“Iedereen houdt van auto’s, of in ieder geval een aantal van ons houden ervan, haha. Als we kijken naar websites zoals we kijken naar auto’s kunnen we zien dat ze allemaal dingen gemeen hebben. Dus, het front-end is zoals het interieur & het exterieur van een auto terwijl de backend de motor ervan is. De gebruiker op de website is de bestuurder van de auto, dus de bestuurder moet nog steeds de pedalen indrukken om met de auto te kunnen rijden. Dat is wat front-end doet voor de website, het zorgt dat de motor (backend) draait en opereert vanuit het perspectief van de eindgebruiker.”
Verder zei hij: “Dat gezegd hebbende zorgt dat de front-end interacteert met de eindgebruiker; het creëert geautomatiseerde acties die het gemakkelijker maken voor de persoon die de website gebruikt. Oh, en voordat we het vergeten, front-end ontwikkeling is verantwoordelijk voor hoe de website (of webpagina) eruit zal komen te zien.”
Mijn derde en laatste vraag was als volgt:
- Waar zijn front-end ontwikkelaars voornamelijk verantwoordelijk voor in het ontwikkelingsproces van een (web) applicatie?
Armen’s laatste antwoord was kort en toepasselijk:
“De twee voornaamste dingen waar front-end ontwikkelaars verantwoordelijk voor zijn, zijn UI/UX en pagina snelheid prestatie.”
Ardit concludeerde in het kort:
“Front-end ontwikkelaars zouden verantwoordelijk moeten zijn voor het bouwen van pixel-perfecte websites, het op de hoogte houden van gebruikers met alles dat gebeurt op de website en het geven van hun mening over hoe ze de gebruikerservaring kunnen verbeteren.”
Hoe je de technische vaardigheden en het oog voor detail van een front-end ontwikkelaar kunt testen
Er zijn een aantal technische vragen die je front-end ontwikkelaars kunt stellen om te verzekeren dat ze vaardige en betrouwbare ontwikkelaars zijn. Hier zijn er een aantal.
(1) Hoe verzeker je dat jouw website of applicatie toegankelijk en gebruiksvriendelijk is, en dat het voldoet aan alle nieuwste web ontwikkeling standaarden en beste parktijken?
Verwachte antwoord: “Ik zorg er altijd voor dat ik mijn websites en apps test op alle grootste browsers, apparaten en configuraties om te verzekeren dat de gebruikerservaring op elke browser aan de standaarden voldoet. Ik schakel de hulp van schermlezers en andere oplossingen in om ervoor te zorgen dat mijn applicaties toegankelijk zijn voor alle gebruikers. Ik blijf op de hoogte van alle web ontwikkeling beste praktijken en gebruik de nieuwste taalversies om de ruimte voor fouten in mijn code tot een minimaal te beperken tot er uiteindelijk geen ruimte overblijft voor fouten. Ik gebruikt test aangedreven ontwikkeling vaak en regelmatig.”
(2) Wat zijn jouw favoriete (en/of meest gebruikte) HTML eigenschappen, en hoe heb je ze gebruikt tijdens jouw projecten?
Verwachte antwoord: “Ik waardeer zeer hoe HTML5 omgaat met multimedia ondersteuning in tegenstelling tot zijn voorgaande iteraties. Ik gebruik deze functie vaak om een interessante, visueel aantrekkelijke en responsief ontwerp te maken dat audio en video elementen gebruikt als een cruciaal onderdeel van de overkoepelende website ervaring. Het staat me toe om vrij te bouwen zonder dat ik me druk hoef te maken over bugs tijdens de laadtijd of het tegenkomen van conflicten met andere elementen op de webpagina.”
(3) Hoe pas je jouw CSS aan zodat andere ontwikkelaars gemakkelijk met jouw code kunnen werken?
Verwachte antwoord: “Ik orden mijn stijlbladen in secties en koppel elke sectie meet een overeenkomend component op de site. Plus, elke sectie heeft opmerkingen dus wanneer andere ontwikkelaars aan de code werken kunnen ze die gemakkelijk veranderen, eraan toevoegen, of het schalen.”
(4) Wat zijn jouw favoriete bronnen zodat je jouw front-end ontwikkeling en ontwerp kunt aanpassen aan de nieuwste trends?
Verwachte antwoord: Ik doe regelmatig mee aan discussie op de StackOverflow forums. Deze middelen helpen mij ontzettend om over de nieuwste trends in front-end ontwikkeling en ontwerp te leren en deze toe te passen.
(5) Wat is een CSS float? Kun je wat voorbeelden geven over hoe je het gebruikt hebt?
Verwachte antwoord: "De CSS float eigenschap zet een element aan de rechter of linkerkant van zijn container, hiermee kunnen inlining elementen (en tekst) er om eromheen geplaatst worden zonder dat het conflicten creëert met andere elementen op de pagina. Ik gebruik floats vaak wanneer ik werk aan een pagina die dynamisch van grootte veranderd gebaseerd op de resolutie van het apparaat van de gebruiker.”
Waarom zou jee front-end ontwikkelaar in moeten huren?
Er is nog zoveel meer in front-end ontwikkeling dan enkel HTML, CSS, of JavaScript code. Front-end engineers kunnen helpen om efficiënte oplossingen te leveren voor de volgende uitdagingen:
Website toegankelijkheid: Toegankelijkheid uitdagingen is iets waar front-end ontwikkelaars in getraind zijn en waarvan ze weten hoe ze het op moeten lossen. Het is relatief makkelijk om een website te creëren waar de meeste gebruikers toegang tot hebben. Maar, het creëren van een website die toegankelijk is voor alle gebruikers, ongeacht hun omstandigheden is een ander verhaal. Front-end ontwikkelaars zijn de beste mensen voor deze taak, ze zijn direct verantwoordelijk voor het schrijven van de delen van de website waar gebruikers toegang tot hebben en waar ze mee interacteren, in elke denkbare capaciteit.
Website prestatie: Volgens website prestatie expert Steve Souders, is 80% tot 90% van de gebruiker responsetijd toegewezen aan de front-end. Dit betekent dat slechts 10-20% van de prestatie van de website afhankelijk is van de backend (serverzijde). Als de web prestatie langzaam en onbetrouwbaar is, zullen gebruikers snel van de site af gaan en andere alternatieven proberen. Het is daarom cruciaal om een goede web prestatie te hebben, gekoppeld met uitmuntende UI (gebruikerservaring), die onvermijdelijk zal leiden tot meer verkeer, en uiteindelijk tot meer inkomsten op de lange termijn.
Web ontwerp: Een front-end ontwikkelaar van goede kwaliteit is “hybride” tussen een software engineer en een interface ontwerper. Ze moeten in staat zijn op een ruw grafisch ontwerp patroon te maken en dit te vertalen naar een visuele rijke HTML ervaring die toegankelijkheid, betrouwbare web prestatie, gemakkelijk onderhoud, compatibiliteit met meerdere apparaten en responsief web ontwerp biedt.
Wat is frontend-ontwikkeling?
Front-end ontwikkeling is het proces van het creëren van websites, grafische interfaces voor web apps, of van hele web apps die worden uitgevoerd in web browsers.