JavaScript voor Joomla

1. De basis

1.1 Wat is JavaScript?

JavaScript is een programmeertaal die draait in de webbrowser, op de eigen computer of telefoon van de bezoeker. Dit is het belangrijkste verschil met PHP: PHP draait op de server en bouwt de HTML, terwijl JavaScript draait nadat die HTML is aangekomen, aan de clientkant. De twee draaien nooit op dezelfde plek op hetzelfde moment.

Wanneer iemand een Joomla-pagina opent, stuurt de server kant-en-klare HTML, CSS en een set JavaScript-bestanden. De browser tekent de pagina en draait daarna de JavaScript. Vanaf dat moment kan JavaScript de pagina aanpassen zonder de server opnieuw iets te vragen: het kan elementen tonen en verbergen, een formulier valideren, of op de achtergrond een klein stukje nieuwe data ophalen.

1.2 Serverkant versus clientkant

Het helpt om de twee helften van een Joomla-verzoek goed uit elkaar te houden:

Die laatste regel is belangrijk voor beveiliging: iedereen kan de JavaScript die je verstuurt lezen en aanpassen. Een controle in JavaScript is dus een gemak voor de gebruiker, nooit een echte verdediging. De server moet alles opnieuw controleren.

1.3 Waar Joomla JavaScript gebruikt

Je hoeft geen regel JavaScript te schrijven om er profijt van te hebben. Joomla 6 gebruikt het al door de hele interface heen:

• Het beheermenu, de tabbladen en de modale dialoogvensters.
• De mediabeheerder, die uploadt en voorbeelden toont zonder paginaherlading.
• De editor (TinyMCE of CodeMirror), die een grote JavaScript-toepassing is.
• Formuliervelden zoals de tagkiezer, de kalender en kleurkiezers.
• Begeleide rondleidingen, de voortgangsbalk van Joomla Update en het Systeemdashboard.

Dit alles komt met Joomla mee en wordt door het project onderhouden. Jouw taak, als je je eigen JavaScript toevoegt, is om in te haken op datzelfde systeem in plaats van ertegen te vechten.

3. Hoe de browser Joomla's JavaScript laadt

3.1 Scripts onderaan, eenmaal geladen

Wanneer Joomla een pagina rendert, verzamelt het alle JavaScript waar de pagina, de modules en de plugins om vroegen, verwijdert dubbele, sorteert ze op afhankelijkheid en schrijft de <script>-tags in de HTML. Je voegt nooit hetzelfde bestand twee keer toe; Joomla regelt dat voor je.

3.2 defer, async en module

Modern Joomla markeert zijn scripts zo dat ze het tekenen van de pagina niet blokkeren. Drie attributen sturen dit:

Joomla's script-renderer begrijpt al deze. Het punt voor jou is dat je geen gewone <script> bovenaan een template moet plakken; laat Joomla die toevoegen met de juiste attributen, zodat het de eerste weergave niet vertraagt.

3.3 ES-modules en de import map

Joomla 6 gebruikt ES-modules: moderne JavaScript verdeeld over bestanden die uit elkaar importeren, dezelfde standaard die je browser van nature gebruikt. Om de ene module de andere te laten vinden via een korte naam in plaats van een lang pad, schrijft Joomla een import map in de pagina:

<script type="importmap">
{
  "imports": {
    "editor-api": "/media/system/js/editors/editor-api.min.js",
    "editor-decorator": "/media/system/js/editors/editor-decorator.min.js"
  }
}
</script>

Een asset gemarkeerd met "importmap": true in Joomla's assetlijst wordt automatisch aan deze map toegevoegd. Voor heel oude browsers levert Joomla een kleine shim (es-module-shims), zodat dezelfde code blijft werken. Je bouwt de import map niet met de hand; je markeert een asset en Joomla genereert hem.

5. Het Joomla JavaScript-object

Joomla levert een klein kern-JavaScript-bestand, media/system/js/core.js, dat bijna elke beheerpagina laadt. Het definieert een globaal Joomla-object met helpers die je eigen scripts kunnen gebruiken. Een handvol ervan kennen scheelt veel werk.

5.1 Joomla.getOptions: data uit PHP lezen

Joomla.getOptions leest configuratie die PHP in de pagina heeft gezet (zie sectie 6). Het is de nette manier om een instelling, een ID of een URL van de server naar je script door te geven:

// PHP zette opties onder de sleutel 'com_myextension'
const opts = Joomla.getOptions('com_myextension', {});
console.log(opts.apiUrl);

5.2 Joomla.request: veilig met de server praten

Joomla.request is een kleine omhulling rond de verzoekafhandeling van de browser die automatisch Joomla's beveiligingstoken toevoegt. Het is de eenvoudigste manier om de server vanuit je script aan te roepen:

Joomla.request({
  url: 'index.php?option=com_ajax&plugin=hello&format=json',
  method: 'GET',
  onSuccess: (response) => {
    const data = JSON.parse(response);
    console.log(data.data);
  },
});

Je kunt ook de eigen fetch van de browser direct gebruiken; beide zijn prima. Voor aanroepen die data lezen, werkt allebei. Voor aanroepen die data wijzigen, moet je het beveiligingstoken toevoegen, wat de volgende helper levert.

5.3 Joomla.Text: vertalen in JavaScript

Teksten die je vanuit JavaScript toont, moeten ook vertaalbaar blijven. Joomla spiegelt zijn taalsysteem naar de browser. In PHP markeer je een tekst voor de front-end met Text::script('MY_KEY'), en in JavaScript lees je de vertaling terug:

// In PHP, voordat de pagina rendert:
// \Joomla\CMS\Language\Text::script('COM_MYEXTENSION_SAVED');

// In JavaScript:
alert(Joomla.Text._('COM_MYEXTENSION_SAVED'));

5.4 De handigste helpers

Om deze in je eigen script te gebruiken, geef je core op als afhankelijkheid (of roep je $wa->useScript('core') aan), zodat het Joomla-object bestaat voordat je code draait.

5.5 Luisteren naar gebeurtenissen

Het meeste van je JavaScript reageert op iets wat de gebruiker doet: een klik, een wijziging, een toetsaanslag. De moderne manier om te reageren is addEventListener. Vermijd de oude gewoonte om onclick rechtstreeks in de HTML te schrijven, want dat mengt gedrag door je opmaak en een Content Security Policy (sectie 12) zal het blokkeren.

// Goed: gedrag staat in het script, niet in de HTML.
document.querySelector('#save')
  .addEventListener('click', (event) => {
    event.preventDefault();
    // doe het werk
  });

Als je veel soortgelijke elementen hebt, zoals elke rij in een lange lijst, hang dan niet aan elk een listener. Hang een enkele listener aan het bovenliggende element en controleer waarop geklikt is. Dit patroon heet event delegation, en het blijft snel, ook als de lijst groeit of er later rijen worden toegevoegd:

document.querySelector('#list')
  .addEventListener('click', (event) => {
    const button = event.target.closest('.delete');
    if (button) {
      // handel het verwijderen voor deze rij af
    }
  });

Een listener op het bovenliggende element doet het werk van honderden op de kinderen, en blijft werken voor rijen die je script toevoegt nadat de pagina is geladen.

7. Web Components: Joomla's eigen elementen

In plaats van een zwaar framework bouwt Joomla herbruikbare interface-onderdelen als Web Components: eigen HTML-elementen die door de browserstandaard zijn gedefinieerd. Je gebruikt ze als gewone tags, en de browser draait de JavaScript erachter.

7.1 Hoe een Web Component eruitziet

Joomla levert er meerdere als eigen elementen in media/vendor/joomla-custom-elements/, zoals de melding en het tabblad. In je HTML lezen ze als gewone tags:

<joomla-alert type="warning" dismiss="true">
  Sla je werk op voordat je weggaat.
</joomla-alert>

De browser ziet <joomla-alert>, laadt de bijbehorende JavaScript, en het element wordt een werkende, sluitbare melding. Er is geen jQuery en geen framework bij betrokken.

7.2 Waarom Joomla hiervoor koos

Web Components zijn onderdeel van de browser zelf, dus ze blijven werken terwijl browsers updaten en ze klinken Joomla niet vast aan een JavaScript-framework dat ooit kan verdwijnen. Ze zijn op zichzelf staand, herbruikbaar over templates heen, en laden alleen wanneer de bijbehorende tag op de pagina voorkomt. Voor jou als ontwikkelaar betekent het een stabiele, op standaarden gebaseerde set bouwstenen in plaats van een bewegend doel.

7.3 De meegeleverde bibliotheken

Naast zijn eigen componenten levert Joomla een zorgvuldig gekozen set externe JavaScript-bibliotheken mee in media/vendor/, alleen geladen wanneer nodig:

Omdat deze gedeeld zijn, kunnen twee extensies die allebei een datumkiezer of een grafiek nodig hebben dezelfde meegeleverde kopie gebruiken in plaats van elk hun eigen mee te leveren.

7.4 Bootstrap 5 komt met Joomla mee

Een meegeleverde bibliotheek verdient een eigen vermelding: Joomla levert Bootstrap 5, en niet alleen de CSS. Ook het JavaScript-gedrag zit erbij, opgesplitst in benoemde assets zodat je alleen het stuk laadt dat je nodig hebt:

Een modaal venster, een dropdown of een accordeon heeft dus geen extra download en geen ander framework nodig, alleen een enkele useScript-aanroep:

$wa->useScript('bootstrap.modal');

7.5 Je eigen bibliotheek toevoegen

Joomla levert niet elke bibliotheek mee. Als je Chart.js voor een grafiek nodig hebt, SortableJS voor slepen-en-neerzetten, of een klein framework zoals Alpine.js of Vue, voeg het dan op dezelfde manier toe als elke andere asset: registreer het in je joomla.asset.json (of met registerAndUseScript) en laat de Web Asset Manager het laden. Plak geen vaste <script src="/..."> in je template; registreer de bibliotheek zodat Joomla de volgorde, de versie en de duplicaten ervan net als al het andere regelt.

9. JavaScript bouwen en compileren

De JavaScript die Joomla levert, is niet dezelfde als de JavaScript die de ontwikkelaars schrijven. De bron is modern en verdeeld over veel bestanden; de versie die naar browsers gaat, is geminificeerd en gebundeld. Dit weten helpt je begrijpen wat je in media/ ziet.

9.1 Bron versus gebouwde bestanden

Joomla's kern-JavaScript-bron staat in een build/-map en wordt gecompileerd naar de media/-map. Je ziet paren bestanden:

core.js        de leesbare bron (voor debuggen)
core.min.js    de geminificeerde versie (kleiner, voor productie)
core.min.js.gz vooraf gecomprimeerd voor snellere levering

Joomla laadt op een live site de .min.js-versie en kan de leesbare .js laden wanneer Debug-modus aanstaat, zodat je de echte code kunt lezen tijdens het oplossen van problemen.

9.2 De bouwtools

Het compileren van deze bestanden gebruikt Node.js en npm, de standaard JavaScript-tooling, met een bouwscript in het project. Je hebt dit alleen nodig als je de kern ontwikkelt of een extensie met een eigen bouwstap. Voor een normale site staan de gebouwde bestanden al klaar en draai je nooit een build.

9.3 Voor eigen code heb je zelden een build nodig

Voor je eigen kleine scripts heb je helemaal geen bouwpijplijn nodig. Schrijf een gewoon, modern .js-bestand, registreer het bij de Web Asset Manager, en Joomla serveert het. Pak een bouwstap (bundelen, transpileren) pas wanneer je code groot genoeg wordt om het nodig te hebben, niet voor een paar regels interactiviteit.

11. Prestaties: houd JavaScript snel

JavaScript is krachtig, maar elk script dat de browser downloadt, ontleedt en draait, kost tijd. Op een telefoon met een zwakke verbinding is zware JavaScript een van de grootste redenen dat een site traag aanvoelt.

11.1 Laad minder, en laad het laat

• Gebruik defer (de standaard van de Web Asset Manager) zodat scripts de eerste weergave niet blokkeren.
• Schakel een asset alleen in op de pagina's die hem nodig hebben, niet site-breed uit gewoonte.
• Let op extensies die elk hun eigen kopie van jQuery of een grafiekbibliotheek laden; deel in plaats daarvan de meegeleverde versie.

11.2 Combineren en minificeren

Joomla kan hier op twee niveaus geholpen worden. De gebouwde kernbestanden zijn al geminificeerd. Voor de rest kan een goede cache- of optimalisatie-extensie meerdere kleine scripts combineren tot een verzoek en ze minificeren. Minder, kleinere bestanden betekenen minder heen-en-weer en snellere pagina's, vooral op HTTP/1.1-hosts.

11.3 Debounce en cache verzoeken

Wanneer je script de server aanroept terwijl de gebruiker typt (een live zoekopdracht bijvoorbeeld), stuur dan niet bij elke toetsaanslag een verzoek. Debounce de invoer: wacht tot de gebruiker pauzeert, en stuur dan een verzoek. En cache resultaten die zelden veranderen, zoals een lijst met landen, zodat je de server niet twee keer om hetzelfde antwoord vraagt.

11.4 Meten, niet gokken

Gebruik de ontwikkelaarstools van de browser (de tabbladen Network en Performance) om te zien welke scripts laden en hoe lang ze duren. Een tool zoals Lighthouse wijst direct op weergave-blokkerende of te grote JavaScript. Optimaliseer wat de meting laat zien, niet wat je aanneemt.

13. SEO en metadata

JavaScript en zoekresultaten komen op twee plekken samen: snelheid en zichtbaarheid van inhoud. Beide kunnen helpen of schaden, afhankelijk van hoe je scripts gebruikt.

• Weergave-blokkerende scripts vertragen de eerste weergave en schaden de Core Web Vitals. Stel je JavaScript uit (defer) zodat de pagina tekent voordat de scripts draaien.
• Zware JavaScript verhoogt de tijd voordat een pagina bruikbaar wordt. Kleinere, minder scripts geven betere scores.
• Inhoud die alleen door JavaScript wordt gebouwd wordt niet door elke crawler betrouwbaar gezien. Belangrijke tekst hoort in de HTML te staan die Joomla stuurt, met JavaScript die haar verrijkt, niet aanmaakt.
• Progressive enhancement is het veilige patroon: de pagina werkt zonder JavaScript, en scripts voegen daarbovenop gemak toe. Zoekmachines en gebruikers met scripts uit zien nog steeds de kerninhoud.

Kort gezegd: behandel JavaScript als een verrijkingslaag voor SEO. Laat Joomla en PHP de inhoud en de structuur leveren; laat JavaScript het mooier maken, snel en zonder te blokkeren.

15. Best practices

Als je maar een paar dingen uit dit artikel onthoudt, onthoud dan deze:

• Gebruik de Web Asset Manager voor elk script en elke stijl; geef afhankelijkheden op in plaats van de volgorde te gokken.
• Schrijf gewone, moderne JavaScript; pak jQuery of een framework alleen wanneer het echt moet.
• Geef data van PHP naar JavaScript door met addScriptOptions en lees die met Joomla.getOptions.
• Gebruik Joomla.Text::script en Joomla.Text._() zodat scriptberichten vertaalbaar blijven.
• Stel scripts uit (defer), laad ze alleen waar nodig, en deel meegeleverde bibliotheken om pagina's snel te houden.
• Stuur en verifieer een CSRF-token voor alles wat data wijzigt; houd leesacties op GET.
• Vertrouw de client nooit: valideer en autoriseer elk verzoek opnieuw op de server.
• Bescherm tegen XSS: escape bij uitvoer, geef de voorkeur aan textContent, en overweeg een Content Security Policy.
• Bewerk nooit kernbestanden; voeg JavaScript toe via templates, overrides, plugins of je eigen extensie.
• Houd inhoud in de HTML en laat JavaScript haar verrijken, zodat SEO en gebruikers zonder script veilig zijn.

17. Samenvatting

JavaScript is de helft van Joomla die in de browser draait. PHP bouwt de pagina op de server; JavaScript maakt haar interactief zodra ze aankomt. Joomla 6 pakt het modern en op standaarden gebaseerd aan:

• Gewone JavaScript: de kern liet MooTools vallen en maakte jQuery optioneel; nieuwe code gebruikt de eigen mogelijkheden van de browser.
• De Web Asset Manager: de juiste manier om scripts en stijlen toe te voegen, met benoemde assets en opgegeven afhankelijkheden, zodat niets twee keer of in de verkeerde volgorde laadt.
• Het Joomla-object: helpers zoals getOptions, request en Text verbinden je script met Joomla's data, beveiligingstoken en vertalingen.
• Web Components en ES-modules: herbruikbare, op standaarden gebaseerde bouwstenen in plaats van een zwaar framework.
• Beveiliging en snelheid: vertrouw de client nooit, escape uitvoer, stuur tokens bij schrijfacties, en stel scripts uit zodat pagina's snel blijven.

De meeste JavaScript-problemen op een Joomla-site zijn geen diepe codeerfouten. Het zijn scripts die op de verkeerde manier zijn toegevoegd, een bibliotheek die meerdere keren is geladen, data die onveilig in een pagina is geprint, of een controle die op de client wordt vertrouwd terwijl die op de server had moeten draaien. Elk ervan is snel op te lossen zodra je weet hoe Joomla verwacht dat JavaScript wordt geladen en beveiligd.

Als je site traag aanvoelt, "is not defined"-fouten geeft, of je interactiviteit zoals live zoeken of opslaan-zonder-herladen op de juiste manier wilt toevoegen, dan zitten de oorzaak en de oplossing meestal in hoe de JavaScript wordt geladen en hoe die met de server praat. Dat is precies het soort front-end- en Joomla-integratiewerk waar ik bij help, zodat een site jarenlang snel, veilig en makkelijk te onderhouden blijft.