Uitdagingen front-end web development

Front-end web development is het deel van de applicatie waar de gebruiker interactie mee heeft. In het geval van een website: het zichtbare deel van de applicatie. HTML, CSS en JavaScript zijn de meest voorkomende talen die gebruikt worden voor websites of webapplicaties. Front-end web development kent een aantal uitdagingen, waaronder het correct tonen van de website in verschillende browsers. Daarnaast wil je natuurlijk dat de site en webpagina’s snel laden voor de bezoeker.

Front-end development frameworks.png


De gebruiker staat op nummer één

Het waardevolle aan de specialisatie van front-end web development: dat de developer een hoop veranderingen aan het uiterlijk van de website kan aanbrengen om het de gebruiker makkelijker te maken. Daarmee kan de Front-End Developer daadwerkelijk verschil maken. Tegelijkertijd brengt dit voor de developer ook uitdagingen met zich mee. Een interface die voor de gebruiker prettig aanvoelt, een duidelijke navigatie en een website die vlug laadt creëer je natuurlijk niet vanzelf! In deze blog geeft Swen daarom praktische tips hoe je met deze uitdagingen aan de slag gaat.

 

Zorg dat de website werkt in iedere browser

De code voor front-end web development lijkt eenvoudig, maar door de verscheidenheid aan browsers vormt dit toch een uitdaging. Zorg ervoor dat de website in iedere browser werkt. Iedere webbrowser implementeert de standaarden namelijk net iets anders; in de ene browser kan een webpagina er perfect uitzien en in de andere browser kan de site een complete mislukking zijn. Het is dus van belang om alle gangbare browsers te blijven testen. Testing en debugging komt hierbij om de hoek kijken. Daarnaast is het mogelijk dat je in sommige gevallen een melding krijgt van een bug, waarbij je in  eerste instantie de bug niet kan reproduceren. Vervolgens switcht je terug naar de Microsoft browser Edge en dat je ineens wel allerlei problemen tegen komt.

Front-end+development+tools.jpg

Deze problemen zijn deels te ondervangen door de styling basic te houden en voor een beperkt aantal extra styling opties te kiezen. Deze specificaties zijn namelijk binnen de HTML en CSS standaarden goed gedefinieerd en werken op vrijwel alle browsers correct. Daarnaast is het belangrijk om voordat je naar buiten treedt alle browsers te testen, zodat je zeker weet dat het daadwerkelijk werkt. In sommige gevallen kom je er achter dat je wat extra code moet schrijven specifiek voor één browser, maar dat komt niet heel veel voor.

Doe er alles aan om de snelheid van de website te behouden

Een trage website zorgt voor een hoop irritatie bij de bezoeker. Je wilt natuurlijk niet dat de gebruiker je website vroegtijdig verlaat door een zeer vertraagde laadtijd van webpagina’s.

Een belangrijke trend op front-end web development gebied hierin: applicaties sneller maken door  niet meer naar full page loads te gaan. Full page load: wanneer een gebruiker naar een ander deel van de site gaat (door bijvoorbeeld op een menu item te klikken) en vervolgens de volledige HTML, CSS en JavaScript opnieuw ingeladen wordt. Tegenwoordig willen websites er steeds meer naartoe dat je alleen de content verandert die ook daadwerkelijk belangrijk is om te wijzigen. Op deze manier hoef je veel minder informatie op te halen en hoeft de browser niet de volledige site opnieuw te renderen. Met als positief gevolg: de pagina wordt een stuk sneller, waarbij je niet meer een paar minuten tegen een wit scherm aankijkt.     

Drie tips voor website performance                                            

In deze paragraaf vind je nog drie praktische en direct toepasbare tips om je website te versnellen en de user experience te verbeteren:

  1. Beperk het aantal requests op een pagina. Het is voor je code structuur overzichtelijk indien je de JavaScript in bestanden opdeelt. De structuur is hierdoor in een oogopslag helder. In productie leidt deze werkwijze wel tot een veel tragere website. Daarom de tip om alle Javascript in één bestand te zetten. Hierdoor neemt is de hoeveelheid data veel kleiner. Dit beperkt de laadtijd van een pagina. Wanneer je JavaScript samenvoegt het advies om deze te verkleinen met een minification compressor. 

  2. Gebruik foto’s en video’s met mate: beeldmateriaal op webpagina’s leidt tot het trager laden van de webpagina. Plaats daarom op de site alleen thumbnails van lage resolutie. Hierdoor laden afbeeldingen sneller. Maak de foto klikbaar, zodat deze in hoge resolutie in een apart venster verschijnen. Dit scheelt aanzienlijk in de hoeveelheid data naar de browser.

  3. Laad alleen de informatie die wijzigt: gebruik een volledige pagina refresh als dat echt nodig is. En kies de elementen uit de DOM (Document Object Model) die veranderen en plaats daar de nieuwe inhoud in.

 

Laad alleen applicaties die echt voor de server zijn

Tot slot delen we nog een belangrijke tip die je een hoop tijd en ruimte zal besparen: werk met Docker. Dit helpt je om sites lokaal te ontwikkelen. Met Docker kun je eenvoudig images maken en deze online zetten. Eerder werden er vaak virtuele machines gebruikt, dit is echter niet praktisch gezien de hoeveelheid overhead die ontstaat bij het gebruik van virtuele machines. Bij Docker worden alleen de applicaties en onderdelen geladen die écht nodig zijn.

 

Wil je ook een snellere website of nagaan of jouw website echt in alle browsers goed werkt? Deze blog heeft je dan tips en inzichten gegeven, hoe je zelf met front-end web development aan de slag kunt. Nog vragen? Neem contact met ons op.