JavaScript: het stukje van je site dat in de browser werkt

Wat is JavaScript?

Denk aan een restaurant. De keuken is de server: daar wordt het eten klaargemaakt. Bij ons gebeurt dat in Python, de taal waarin we bijna al ons werk schrijven. Daarover gaat onze pagina over Python-ontwikkeling. De server zoekt de gegevens op, rekent, en maakt de pagina klaar. Dan gaat het bord naar de tafel.

De tafel is de browser van je bezoeker. Daar gebeurt ook nog wat: de bediening schenkt bij, je pakt zelf het zout. Dat is JavaScript. Het werkt pas als de pagina al bij de bezoeker is. Het kan iets laten bewegen, iets uitrekenen terwijl je typt, of een klein stukje nieuwe informatie bij de server ophalen zonder dat de hele pagina opnieuw laadt.

Het verschil in het kort:

Dat laatste is belangrijk. Alles wat geheim moet blijven of moet kloppen, zoals een prijs, een betaling of een controle, doet de server. De browser is van de bezoeker. Wat daar gebeurt, kun je niet blind vertrouwen.

Waar wij het voor gebruiken

Een paar echte voorbeelden uit ons eigen werk.

Broercollective.com, deze site. De pagina's maakt de server in Python. Daarna doet één eigen script, gewone JavaScript zonder framework, het speelse deel. Een framework is een groot bouwpakket van anderen; dat gebruiken we hier niet. Op de voorpagina vallen tekeningetjes uit stipjes uit elkaar en vormen ze de B van ons logo. Klik je op de foto van Mart, dan spat hij uiteen in stipjes en komt hij weer terug. Stukken van de pagina schuiven zacht in beeld als je scrolt. En klik je op een blog of een dienst, dan vouwt de kaart open tot de volgende pagina. Dat laatste doet de browser zelf, met een nieuwe techniek. Een browser die dat nog niet kent, opent de pagina gewoon.

De calculators op deze site. Bij de prijzen kies je een pakket en vink je extra's aan. De bon rekent meteen mee. De bedragen komen van de server, het rekenen gebeurt in je browser. Er is ook een kleine rekenmodule: hoeveel bestellingen per dag, hoeveel minuten per bestelling, en je ziet hoeveel uur per maand dat kost.

PandInfo. Op PandInfo zoek je een adres op een kaart. Die kaart is Leaflet, een bekend script van anderen. In het rapport staat een grafiek met verkoopprijzen, gemaakt met Chart.js, ook een bekend script. Voor de oude kaarten van het Kadaster is er nog een rekenscript nodig, proj4, want die kaarten gebruiken een Nederlandse manier van tekenen. Die scripts staan, samen met een vierde (Proj4Leaflet, dat proj4 en Leaflet laat samenwerken), als vaste kopie op onze eigen server, met een vast versienummer. Er zit ook een eigen stukje in: vul een andere oppervlakte in, en je ziet meteen wat de schatting dan wordt. De grafieken in de pdf en de kleine lijntjes op de voorpagina tekent de server in Python. Daar is geen JavaScript voor nodig.

Nummerbordcheck.nl. Op Nummerbordcheck.nl typ je een kenteken. Terwijl je typt, zet een klein script de streepjes op de goede plek. De check zelf doet de server. De laatste kentekens die je zocht, hooguit vijf, onthoudt het script alleen in je eigen browser. Die gaan niet naar onze server. Leuke feitjes over het voertuig worden los opgehaald, omdat de RDW soms traag telt. Zo staat het rapport er al, en komen de feitjes erbij.

Lichthoek. In de webshop Lichthoek helpt JavaScript bij filteren, bij het vegen door productfoto's en bij het aftellen tot de besteltijd van vandaag. Bij het afrekenen vul je je postcode en huisnummer in. Het script vraagt de winkel om de straat en de plaats, en de winkel vraagt dat op bij de BAG, het officiële adressenbestand. Hoe zo'n vraag tussen twee systemen werkt, lees je bij API's.

Voorraadsysteem.com. Ook in ons voorraadsysteem zit wat JavaScript. Bijvoorbeeld een laadbalk bovenaan als een scherm even nodig heeft, en een klein labeltje als je met de muis over een grafiekje gaat.

Waarom we er zuinig mee zijn

JavaScript is handig, maar elke regel moet de telefoon van je bezoeker laden en uitvoeren. En elk script van een ander is iemand die je moet vertrouwen. Daarom houden we ons aan een paar regels.

• Waar het kan, werkt de site ook zonder script. Laadt een script niet, of staat het uit, dan staat de inhoud er gewoon. PandInfo is een uitzondering: daar zijn de kaart en het rapport juist het script. Bij Nummerbordcheck.nl gaat het kenteken naar de server, ook zonder script. Ook Lichthoek werkt zonder JavaScript. Op deze site zie je dan de prijzen als gewone tekst; de calculator en een paar bewegende onderdelen verdwijnen, en op een smal scherm wordt het menu een gewone rij links.
• Snel op de telefoon. Geen groot bouwpakket, maar kleine eigen scripts. De kaart van PandInfo start pas als hij in beeld komt. Het rekenscript voor de oude kaarten laadt pas als iemand die kaart kiest. De bewegende B op de voorpagina pauzeert als hij uit beeld is of als je een ander tabblad opent.
• Minder beweging als je dat wilt. Heb je in je telefoon of computer "minder beweging" aangezet, dan staat de B op onze voorpagina stil en bewegen de stukken van de pagina niet.
• Geen npm. npm is de grootste verzamelplaats van bouwstenen voor JavaScript. In onze sites gebruiken we het niet. Waarom, lees je in bouwstenen van anderen.
• Geen scripts van andere bedrijven zonder akkoord. Lettertypes en scripts komen van onze eigen server. Moet het echt, dan vragen we eerst. Zo staat op PandInfo het vakje "Ik ben geen robot" van Google, tegen robots die massaal adressen opvragen. Dat was een keuze van je broer. Het script van Google laadt pas als iemand in het adresveld klikt of typt.

Zo bouwen we het

1. Eerst de server. We bouwen de pagina zo dat hij zonder script werkt. De inhoud, de prijzen en de formulieren komen van de server.
2. Dan het script erbij. Pas daarna komt JavaScript, voor wat het echt prettiger maakt. We schrijven het meestal zelf, klein en overzichtelijk. Voor een kaart of een grafiek gebruiken we een bekend script, als vaste kopie op onze eigen server.
3. Testen. We bouwen met hulp van AI. Elke wijziging gaat eerst door onze tests. Daarna leest een aparte AI-hulp alles nog eens na, en live gaat het pas na het akkoord van je broer. Bij de animatie op de voorpagina kunnen we in de tests elk moment stilzetten en er een schermafdruk van maken.
4. Live en in de gaten houden. Het draait op onze eigen server, binnen de EU. We houden in de gaten of alles draait, en grijpen in als het nodig is.

Wat jij ervan merkt

Voor je bezoekers voelt een site met een beetje JavaScript vlot aan. Een menu klapt open, een kaart schuift mee, een bedrag rekent mee terwijl je klikt. Werkt het script een keer niet, dan staat de inhoud er nog, en kan je bezoeker verder.

Voor jou als ondernemer is het belangrijkste wat je niet merkt. Je site laadt geen scripts van bedrijven die je niet kent. Er is geen groot bouwpakket van anderen dat steeds bijgewerkt moet worden. En wat een klant in je site of systeem zet, delen we niet met de AI-hulp waarmee we bouwen.

Wat het kost

JavaScript is geen losse dienst. Het hoort bij een site, een scherm of een systeem dat we voor je maken. Wil je er iets bij, zoals een calculator, een kaart of een grafiek? Dan is dat een onderdeel op maat: vanaf € 650.

Moet het blijven draaien, dan zit het in een van onze pakketten. Kleine broer, vanaf € 19 per maand plus eenmalig bouwen vanaf € 495, is voor één koppeling of één automatisering. Grote broer, vanaf € 68 per maand en zonder opstartkosten, is je eigen omgeving. Alle bedragen zijn exclusief btw. Je krijgt altijd eerst een offerte. Alles op een rij staat bij de prijzen.

Wat we eerder bouwden

• PandInfo. Een kaart om een adres te zoeken, een grafiek met verkoopprijzen en een rapport als pdf. Leaflet, proj4 en Chart.js staan als vaste kopie op onze eigen server.
• Nummerbordcheck.nl. Een kentekencheck die ook zonder script werkt. Het script maakt het typen netter en onthoudt je laatste zoekopdrachten alleen in je eigen browser.
• Lichthoek. Een webshop die ook zonder JavaScript werkt, met filters, foto's om doorheen te vegen en een adres dat zich aanvult bij het afrekenen.