Een workflow voor het ontwikkelen van JavaScript

Als je zelf JavaScript wilt gaan ontwikkelen, pak je dat het beste zo gestructureerd mogelijk aan. Dat wil zeggen:

• Deel het probleem op in kleine stukjes, zodat steeds duidelijk is wat er moet gebeuren.
• Analyseer de uitvoer (het resultaat), de bewerkingen en de invoerdata, voor elk stukje apart:
  
  1. Wat heb ik bereikt als het script gereed is?
  2. Welke (reken-)acties (transacties) zijn nodig om het resultaat te behalen?
  3. Welke data heb ik tot mijn beschikking en waar haal ik die gegevens vandaan?
• Een eenvoudig voorbeeld: Tel twee getallen a en b bij elkaar op.
1. Wat is bereikt: De som van a en b is bekend
2. De transactie: Bereken a + b
3. Invoerdata: Dit lijkt lastiger dan het is. Gewoonlijk haal je dit soort gegevens uit een formulier of uit een database. Soms is het de uitkomst van een ander rekenproces.
• Schrijf de code en plaats deze in een webdocument.
• Test de code, debug en corrigeer waar nodig.

Feitelijk is dit alles, maar toepassing in de praktijk heeft iets meer voeten in de aarde. Daar wordt hier wat dieper op in gegaan. Het leunt zwaar op Windows en Android. Met andere operating systems heb ik geen ervaring als het gaat om website- ontwikkeling.

Voor het ontwikkelen van JavaScript code gebruik je het beste een volwaardige PC met Windows, MacOS of Linux, omdat —in de huidige stand van de techniek— het debuggen van de code daarmee het beste gaat.

Voor het maken van de code is een goede code-editor belangrijk, maar met iets als Windows-kladblok gaat het ook. Een, voor mij, belangrijke eigenschap van een code-editor is syntax highlighting, zie hiernaast. Taal-specifieke opdrachten worden weergegeven in andere kleuren dan de broodtekst van het script. Dat helpt bij het ordelijk houden van je code en het zoeken naar fouten. Voor webontwikkeling aan de client-side is dat vooral bij HTML-tags, CSS-regels en JavaScript-opdrachten interessant.
Voor grotere websites is het handig als je per website een project kunt maken, waarin alle relevante bestanden bij elkaar worden gehouden. Dat spaart veel zoekwerk. Ook auto-completion is handig. Daarbij wordt een sluithaakje of -accolade geplaatst als je een openingshaakje of -accolade typt. Bij HTML worden sluit-tags geplaatst. Niet alle gratis programma's hebben dat.
 
Op internet is veel van dit soort software te vinden, van gratis tot duur. Een kleine greep uit het gratis aanbod voor Windows:
•   openElement
•   Brackets
 
Persoonlijk ben ik een fan van RJ-TextEd. Een uitgebreide editor met syntax highlighting en auto-completion voor meerdere, op webontwikkeling gerichte talen. Naast HTML, CSS en JavaScript zijn er o.a. PHP, Python, ASP(X), VB-script, VB.Net en C#. Het pakket beschikt ook over een projectmanager, een filemanager, (S)FTP en spellingscontrole. Het wordt actief onderhouden.

Om je code te publiceren is een FTP-client onmisbaar. Die zijn op internet ook ruimschoots voorhanden. Een veel gebruikte is FileZilla. Dit programma is er voor Windows, MacOS en Linux.
Ikzelf gebruik de FTP-client die is ingebouwd in de bestandsbeheerder Total Commander.

Om de code te testen is een browser nodig met ontwikkeltools, waarvan het (JavaScript-)console en de (source-level) debugger de belangrijkste zijn. Alle grote browsers die onder Windows, MacOS of Linux draaien, hebben er een aan boord. Je start de debugger met F12 of een toetscombinatie zoals SHIFT+CONTROL+I of iets dergelijks. Vaak moeten de ontwikkeltools beschikbaar worden gemaakt via de instellingen.
Als er geen debugger beschikbaar is kun je het gedrag van het rekenproces monitoren door meldingen naar het console te schrijven met console.log(). Als er ook geen console is, kun je window.alert() inzetten.

Voor bepaalde taken heb je een lokale webserver nodig, omdat het direct vanuit het Operating System aanroepen van een .html-bestand niet altijd mogeijk is. Voor mezelf heb er een gebouwd met node.js, maar op internet zijn er wel webservers te vinden die lokaal kunnen werken, zoals:

•   XAMPP. Deze webserver wordt gemaakt door Apachefriends en is beschikbaar voor Windows, MacOS en Linux. XAMPP is goed te configureren als lokale webserver.
•   WAMP. Dit is een uitgeklede kloon van XAMPP, die alleen op Windows draait. WAMP is alleen lokale webserver. Het is minder uitgebreid dan XAMPP maar ook eenvoudiger te configureren.
•   Abyss X1. Dit is een product van Aprelium en is beschikbaar voor Windows, MacOS en Linux.. Deze (gratis) webserver is eenvoudig op te sluiten in de PC (als localhost). De (betaalde) X2-versie heeft meer mogelijkheden. De configuratie loopt via een apart console en is niet ingewikkeld. Er is een uitgebreide help-functie.
Server-side scripttalen als PHP en Python moeten apart worden gedownload maar kunnen eenvoudig worden ingeplugd via het console. De Windows versie heeft ASP.NET (.aspx) standaard aan boord.
•   IIS. Ofwel Internet Information Services. Dit is een onderdeel van Windows, dat wel eerst geïnstalleerd moet worden (via Configuratiescherm => Programma's en Onderdelen => Windows-onderdelen in- of uitschakelen).
•   "Home made" ofwel zelf geschreven, bijvoorbeeld met node.js. Zie daarvoor het item Eenvoudige lokale webserver met node.js.

Voor mobiele apparaten bestaat ook software waarmee je webontwikkeling op code-niveau kunt doen. Met gratis software kom je echter niet ver, je zult moeten betalen om het goed werkbaar te maken. De software is in verhouding niet duur, maar de mogelijkheden zijn beperkt. Voor de diverse taken heb je aparte apps nodig, alle te vinden in de Google Play Store.
 
Voor gebruik met Android noem ik:
•   QEdit. Editor. Voor HTML-bestanden is er een preview mode, die werkt met de Android-browser. Beschikt niet over autocompletion, wel over syntax-highlighting. Heeft een beperkt ontwikkelscherm met console, element-inspecteren, bronnen netwerk en info (Eruda), maar helaas geen JavaScript-debugger. Deze app wordt onderhouden.
•   anWriter. Editor. Voor HTML-bestanden is er een preview mode met een JavaScript console. Heeft (niet automatsche) tag-completion en syntax-highlighting. Deze app wordt niet meer onderhouden en is daardoor aan het verouderen.
•   Bestandsbeheer. De met het apparaat meegeleverde app volstaat. Als je wat meer wilt zou je kunnen kijken naar Filemanager+.
•   Turbo Client. FTP-Client voor FTP en SFTP. Bevat ook een eenvoudige editor (mét syntax-highlighting), die ik inzet voor het uitvoeren van kleine correcties aan mijn websites vanaf mijn mobiele telefoon.
•   NiM WebServer. Kan worden geconfigureerd als lokale webserver. De gratis versie ondersteunt alleen http:. De betaalde versie heeft ook https:// en PHP.