Voor de meeste programmeertalen zijn er vele standaarden ontwikkeld waaraan een ontwikkelaar zich dient te houden. Javascript is echter een vrijere taal waar minder strict wordt gelet op deze standaarden. Toch zijn er een aantal redelijk eenvoudige stappen die te nemen zijn om betere code te schrijven. Den Odell heeft deze best practices voor Javascript in zeven categorieën onderverdeeld. De door Odell beschreven categorie ‘catch’ valt mijn inziens onder ‘code well’, daarmee houd ik zes categorieën over.
- Document well
- Code well
- Analyse
- Testing
- Measure
- Automate
Document well
Het belang van goede documentatie is net als in elke andere taal ook in javascript aanwezig. Er zijn meerdere redenen om code goed te documenteren. Het helpt de ontwikkelaar na te denken over wat een stuk code precies doet en wat de code van een collega doet. Daarnaast is het voor een nieuwe collega makkelijker om in het project te komen, daarover later meer.
Een veel gemaakte fout is om letterlijk de code te documenteren, het is handiger om te kijken naar hoe bepaalde code gebruikt dient te worden. Zorg er dan ook voor dat de documentatie goed gestructureerd is. Er zijn een aantal standaarden om dit te doen zoals JSDoc en YUIDoc. Deze zijn eenvoudig te gebruiken maar schrijven niet voor hoe grote blokken commentaar opmaakt dienen te worden. Gebruik bijvoorbeeld markdown om de opmaak gelijk te houden tussen de ontwikkelaars.
Nadat al deze documentatie is geschreven is het eenvoudig om er een site van te genereren, zo is het niet nodig dat iemand in de code kijkt om te zien wat een bepaald stuk code doet en hoe dit gebruikt dient te worden. Dit genereren gebeurd natuurlijk automatisch, hier kom ik bij automate op terug.
Code well
Wat is goede code? Dat is een lastige vraag, wellicht voor een andere blog, laten we voor nu even de omschrijving consistente code gebruiken. Er zijn een aantal manieren om er voor te zorgen dat binnen een project de code consistent blijft. Een van de beste manieren is door ‘coding guidelines’ op te stellen en er voor te zorgen dat een ieders code automatisch wordt opgemaakt volgens deze specificaties.
Maak zo veel mogelijk gebruik van standaarden. Voor JavaScript betekend dat maak gebruik van de EMCAScript standaard. Dit kan worden geforceerd door bovenaan een bestand use strict te zetten.
'use strict'; |
Bij JavaScript is het altijd gemakkelijk om code zo te schrijven dat variabelen overal gebruikt kunnen worden. Maar dit is gevaarlijk, het is beter om er voor te zorgen dat code ge-sandboxed is. Wanneer requirejs wordt gebruikt is alles binnen de require functie in een sandbox. Indien dit niet wordt gebruikt is het nuttig om de code alsnog zelf te sandboxen. Een extra voordeel is dat de code er sneller van wordt aangezien de variabelen die worden gebruikt lokaal zijn geworden in plaats van globaal.
(function ($) { ...}($)); |
Maak gebruik van bestaande of nieuwe design patterns. Een pattern wat in de front-end wereld veel gebruikt wordt is het MVC (Model View Controller) pattern. Deze is vrij populair omdat de business logica, design informatie en data strict gescheiden blijven.
JavaScript is onverbiddelijk, veel fouten worden pas gevonden zodra de code wordt uitgevoerd. Wanneer er een fout op treedt zal de rest van de code niet worden uitgevoerd. Zorg er dus voor dat alle kritieke plekken zijn afgevangen door bijvoorbeeld een try catch.
try { ...} catch (err) {// doe iets met de fout en zorg dat deze niet nog eens voor gaat komen} |
Analyse
Het belang van evaluatie is in veel projecten goed gewaarborgd, echter gaat dit vaak enkel over de samenwerking en niet over de code. Om de kwaliteit van code te verhogen is het goed om peer reviews te houden. Doordat men elkaars code bespreekt worden fouten ontdekt en ontstaan nieuwe inzichten. Het uiteindelijke product wordt hier veel beter door.
Daarnaast is het goed om te conformeren aan een standaard als JSLint of JSHint. JSHint staat iets meer toe als JSLint maar beiden forceren de ontwikkelaar om de kwaliteit van de code hoog te houden. Deze tools letten op consistentie en voorkomt slordigheden in de code welke in bijvoorbeeld Java of C# door de compiler zouden worden gevonden.
Test
Naast het produceren van goede code is het ook noodzakelijk ervoor te zorgen dat deze code het blijft doen wanneer iemand iets toevoegt. Hiervoor zijn unit- en integration tests uitgevonden.
expect(resultaat).toBe(gewensteUitkomst); |
Unit tests zorgen ervoor dat eenmaal geschreven code een bepaald resultaat heeft. Een unit test beschrijft functionaliteit, niet alleen de gewenste functionaliteit maar ook de ongewenste functionaliteit. Let erop dat cases die net op de grens zijn ook worden getest. Wanneer bijvoorbeeld een datum wordt getest die niet later mag zijn dan de huidige tijd, probeer dan zowel de huidige tijd als een milliseconde later te testen.
Een veelgebruikt unit test platform is Jasmine, deze wordt als webpagina uitgevoerd in een browser en daarmee kunnen verschillende browsers worden getest. Het testen in verschillende browsers kan ook worden uitbesteed door code te uploaden naar Sauce Labs, BrowserStack or CodeSwarm.
Naast het testen van functionaliteit is het goed om de integratie van deze functionaliteit te testen in de website. Hiervoor kan bijvoorbeeld Selenium worden gebruikt. Selenium draait in de browser en doorloopt de stappen die een gebruiker ook zou doorlopen. Zo kan worden bekeken of de code in het geheel blijft werken.
Measure
Veel grote, maar ook kleine, bedrijven willen best investeren in kwaliteit maar dit moet dan wel worden aangetoond. Daarom is het van belang alles wat is gedaan om de kwaliteit zo hoog mogelijk te krijgen te meten. Er zijn verschillende dingen meetbaar:
- Code coverage – Hoe dekkend zijn de test die zijn gemaakt, wordt alle code getest?
- Complexiteit – Hoe ingewikkeld is de code.
- Test statistics – Hoe vaak worden de tests dan wel niet succesvol uitgevoerd.
- Code compliance – Wordt er gebruik gemaakt van JsHint of JsLint en voldoet de code daar ook aan?
Naast het rapport voor de managers is dit ook voor developers interessant. Het geeft namelijk inzicht in wat er nog verbeterd kan worden.
Automate
Het beste is natuurlijk tot het laatst bewaard. Dit is namelijk dat bijna alles wat hier genoemd staat automatisch kan. Hier zijn een aantal middelen voor zoals Grunt. In Grunt kunnen, door eenvoudige configuratie geheel in JavaScript, taken worden ingesteld zodat code analyse, unit tests worden uitgevoerd zodra een bestand wordt opgeslagen. Ook kan een taak worden gemaakt die er voor zorgt dat de documentatie site wordt gegenereerd. Afhankelijk van de gebruikte editor kan dit ook daarin worden ingesteld maar door middel van Grunt is het voor elke ontwikkelaar gelijk geregeld.
Javascript best practices: Besluit
Door het toepassen van deze zes javascript best practices wordt de kwaliteit van de JavaScript code hoger en blijft de code beter onderhoudbaar. Zie ook de presentatie van Den Odell
Dit bericht is eerder verschenen op Now Digital (http://nowdigital.nl/javascript-best-practice/)