jQuery 4.0.0 is uit: dit is er nieuw (en dit kan je upgrade breken)

Twintig jaar nadat John Resig jQuery in 2006 op BarCamp NYC introduceerde, is jQuery 4.0.0 nu officieel uit. Dit is de eerste grote versie-sprong in bijna tien jaar en hij komt met een duidelijke boodschap: minder legacy, meer moderne browser- en security-realiteit. Dat betekent ook dat er breaking changes in zitten-maar volgens het jQuery-team kunnen de meeste projecten met minimale aanpassingen over.

Belangrijk voor je upgrade-pad: er is een officiële upgrade guide en er staat een verse jQuery Migrate plugin release klaar om incompatibiliteiten te detecteren en (waar mogelijk) te overbruggen. Issues kun je melden via de jQuery issue tracker.

Wat is de insteek van jQuery 4.0.0?

De grote lijn: het team heeft eindelijk opruimwerk kunnen doen dat in patch- en minor-releases niet wenselijk is. Concreet gaat het om het wegknippen van legacy-code, het verwijderen van eerder gedepricieerde API’s, het schrappen van interne parameters die ooit per ongeluk “publiek” werden, en het stoppen met bepaalde “magic” gedragingen die te complex of te moeilijk te onderhouden waren.

Een leuke bijvangst: door het combineren van (1) het verwijderen van oude IE-ondersteuning en (2) het weghalen van deprecated API’s is de library meer dan 3k bytes kleiner (gzipped).

Breaking change #1: IE < 11 is niet meer ondersteund

jQuery 4.0 laat ondersteuning voor IE 10 en ouder vallen. Waarom niet meteen IE 11? Dat gebeurt gefaseerd: de volgende stap-het weghalen van IE 11-ondersteuning-staat gepland voor jQuery 5.0 (volgens de verwijzing in de release notes: pull request #5077). Voor nu is de winst vooral dat alle speciale paden voor IE<11 uit de code kunnen.

Daarnaast verdwijnen ook een paar andere “heel oude” browserdoelen uit de support matrix:

• Edge Legacy (de niet-Chromium Microsoft Edge)
• iOS-versies ouder dan de laatste 3
• Firefox-versies ouder dan de laatste 2 (met uitzondering van Firefox ESR)
• Android Browser

Volgens het jQuery-team hoef je hier meestal niets voor te doen. Maar als jouw product wél nog op deze browsers moet draaien, dan is het advies simpel: blijf op jQuery 3.x.

Security: Trusted Types en beter gedrag onder CSP

jQuery 4.0 voegt ondersteuning toe voor Trusted Types. Trusted Types is een browsermechanisme dat helpt om DOM XSS te voorkomen door te eisen dat “gevaarlijke” sinks (zoals innerHTML) alleen waarden accepteren die expliciet als veilig zijn aangemerkt-bijvoorbeeld via TrustedHTML. In jQuery 4.0 kun je HTML die verpakt is in TrustedHTML gebruiken als input voor jQuery-manipulatiemethodes, zonder dat je botst met de require-trusted-types-for directive in je Content Security Policy (CSP). Meer context: de release verwijst ook naar Trusted Types.

Daarnaast is er een praktische CSP-verbetering rondom script-loads via AJAX. Waar jQuery al in sommige gevallen <script>-tags gebruikte (om attributes zoals crossdomain te behouden), is dit nu breder doorgevoerd: de meeste asynchrone script requests gebruiken nu <script> tags om CSP-problemen door inline scripts te vermijden (zie PR #4763).

Er blijven uitzonderingen waar alsnog XHR wordt gebruikt voor async script requests. De release noemt expliciet het geval waarin je de "headers" optie meegeeft; in die situatie kun je beter scriptAttrs gebruiken in plaats van headers. In alle andere gevallen probeert jQuery nu “waar mogelijk” een <script>-tag te gebruiken.

De broncode is gemigreerd naar ES modules (en dat merk je in moderne tooling)

Een fundamentele modernisering is de migratie van de jQuery-broncode op de main branch van AMD naar ES modules. Historisch werd de source wel gepubliceerd (npm en GitHub), maar je kon die niet rechtstreeks importeren als modules zonder RequireJS, dat lang de build tool van keuze was.

In jQuery 4.0 is de packaging verschoven naar Rollup en worden de ES modules ook apart getest. Dat maakt jQuery beter compatibel met moderne bundlers en workflows, en ook direct bruikbaar in browsers via <script type=module>.

Deprecated API’s zijn verwijderd (vervang ze door native alternatieven)

In een major release hoort opruimen-en dat is precies wat er gebeurd is. Een reeks functies die al meerdere versies als deprecated gemarkeerd waren, is nu echt verwijderd. Dit waren ofwel interne helpers die ooit per ongeluk “publiek” werden, of helpers die inmiddels native equivalents hebben in alle ondersteunde browsers.

Dit zijn de verwijderde functies (zoals in de release opgesomd): jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps en jQuery.fx.interval.

Vervang ze door native varianten waar dat kan, bijvoorbeeld:

• Array.isArray() i.p.v. jQuery.isArray
• JSON.parse() i.p.v. jQuery.parseJSON
• String.prototype.trim() i.p.v. jQuery.trim
• Date.now() i.p.v. jQuery.now

Breaking change #2: interne Array-methodes zijn uit de jQuery prototype gehaald

De jQuery prototype had al lang een paar Array-methodes hangen die nooit echt jQuery-achtig aanvoelden en bedoeld waren voor intern gebruik: push, sort en splice. In jQuery 4.0 zijn deze methodes verwijderd van de prototype.

Als je ze toch gebruikte (bewust of onbewust), dan moet je overstappen op de echte Array-varianten. Het team geeft dit voorbeeld:

// Oud (jQuery 3.x werkte dit soms, maar het was nooit de bedoeling)
$elems.push(elem);

// Nieuw: gebruik de Array-methode expliciet
[].push.call($elems, elem);

// Oud (jQuery 3.x werkte dit soms, maar het was nooit de bedoeling)
$elems.push(elem);

// Nieuw: gebruik de Array-methode expliciet
[].push.call($elems, elem);

Breaking change #3: focus/blur event-volgorde volgt nu de W3C spec

Focus-events zijn berucht omdat browsers lang niet eensgezind waren over de volgorde van focusin, focusout, focus en blur. Inmiddels zijn de nieuwste versies van alle browsers die jQuery 4.0 ondersteunt naar dezelfde volgorde geconvergeerd-alleen is dat níet de volgorde die jQuery jaren geleden als “consistent” had gekozen.

Vanaf jQuery 4.0 overschrijft jQuery het native gedrag niet meer. Dat betekent: alle browsers behalve IE volgen nu de huidige W3C-specificatie, in deze volgorde:

1. blur
2. focusout
3. focus
4. focusin

Ter vergelijking: in vorige jQuery-versies was de volgorde: focusout, blur, focusin, focus. Een ironisch detail uit de release notes: de enige browser die de oude W3C spec (voordat die in 2023 werd aangepast) ooit volgde, was Internet Explorer.

Slim build: nóg kleiner, maar nu zonder Deferreds en Callbacks

De slim build is in jQuery 4.0.0 opnieuw afgeslankt: Deferreds en Callbacks zijn eruit gehaald. De slim build komt daarmee uit op ongeveer 19,5k bytes gzipped.

Deferreds ondersteunden al lang de Promises A+ standaard, en in de meeste moderne cases kun je dus overstappen op native Promises. Let op: jQuery noemt ook dat Deferreds extra features hebben die native Promises niet hebben, maar dat het merendeel van het gebruik prima migreert naar Promise-methodes.

Compatibiliteitskanttekening: native Promises zijn beschikbaar in alle browsers die jQuery ondersteunt, behalve IE11. Moet je IE11 nog ondersteunen, gebruik dan liever de main build of voeg een Promise polyfill toe.

Downloaden en installeren (CDN + npm)

jQuery 4.0.0 is beschikbaar via de officiële jQuery CDN en via npm. Derde partijen (andere CDNs) volgen doorgaans later; daar heeft het jQuery-team geen controle over.

• CDN (unminified): https://code.jquery.com/jquery-4.0.0.js
• CDN (minified): https://code.jquery.com/jquery-4.0.0.min.js

npm install jquery@4.0.0

npm install jquery@4.0.0

Slim build (zonder ajax, Deferreds en Callbacks)

De slim build is handig als je geen AJAX nodig hebt (of liever een gespecialiseerde fetch/HTTP-library gebruikt), animaties vooral met CSS/class toggles doet, en voor Promises gewoon native support gebruikt.

• CDN (slim, unminified): https://code.jquery.com/jquery-4.0.0.slim.js
• CDN (slim, minified): https://code.jquery.com/jquery-4.0.0.slim.min.js

Alle opties om jQuery te verkrijgen staan ook op de officiële downloadpagina: https://jquery.com/download/.

Praktisch upgraden: Migrate + upgrade guide

Omdat 4.0.0 bewust schoon schip maakt, is het verstandig om je upgrade te benaderen als een normale major migratie: eerst scannen, dan repareren, dan pas uitrollen. De twee “officiële” hulpmiddelen zijn:

• Upgrade guide: https://jquery.com/upgrade-guide/4.0/
• jQuery Migrate plugin: https://github.com/jquery/jquery-migrate/

Loop je tijdens het testen tegen regressies of edge cases aan, dan vraagt het team expliciet om dat te melden via: https://github.com/jquery/jquery/issues.

Changelog: waar je (als dev) vaak direct iets van merkt

De release notes bevatten een uitgebreide changelog; de volledige vergelijking staat hier: Full changelog: 4.0.0. Hieronder een aantal opvallende thema’s uit de lijst die in de praktijk vaak impact hebben:

Ajax: strakker, veiliger rondom scripts, en beter met binary/FormData

• Binary data (incl. FormData) wordt ondersteund, met ook processData: true mogelijk voor binary data.
• Array data wordt niet meer als binary behandeld.
• Scripts worden niet automatisch uitgevoerd tenzij een dataType is meegegeven (#4822, 025da4dd).
• CSP-gedoe rondom async script transport is aangepakt (#3969, 07a8e4a1).
• JSON→JSONP auto-promotion logica is gedropt (#1799, #3376).
• headers voor script transport wordt ondersteund, ook cross-domain (#5142).
• Scripts worden niet uitgevoerd bij onsuccesvolle HTTP responses (#4250).

Attributes & classes: kleine API-schoonmaak en edge cases gladgestreken

• .attr(name, false) verwijdert nu voor alle niet-ARIA attributes (#5388).
• Attributes worden niet meer ‘stringified’ in de setter (#4948).
• De toggleClass(boolean|undefined) signature is verwijderd (#3388).
• val() is gerefactord; IE-workarounds zijn geïsoleerd.
• Buiten IE wordt de type attr hook niet meer gezet.

CSS: minder magisch “px”, fixes rond tabellen en custom properties

• Afmetingen van table <col> elements zijn gefixt (#5628).
• Tests zijn bijgewerkt en draaien ook onder CSS Zoom (#5489).
• Negatieve margins worden meegenomen in offsetHeight(true)-achtige berekeningen (#3982).
• Whitespace handling voor CSS Custom Properties is aangescherpt (#4926, #5105).
• show, hide en toggle zitten nu ook in de jQuery slim build.
• Opacity CSS hook is verwijderd.
• jQuery voegt niet meer automatisch overal px toe, met een paar uitzonderingen (#2795).

Core/Selector: ESM, exports, en selector-opschoning

• $.parseHTML gebruikt nu DOMParser i.p.v. document.implementation.
• Exports zijn aangepast zodat bundlers beter werken met ESM én CommonJS (#5416).
• De root parameter van jQuery.fn.init is verwijderd.
• .even() en .odd() zijn geïmplementeerd als vervanging voor POS :even en :odd.
• Sizzle is inline gehaald in de selector module; selector-structuur is opgeschoond en er is werk gedaan rond :has en :scope.

20 jaar jQuery (en een reunion-foto)

Leuk detail: de release is gepost terwijl een deel van het team samen was voor een reunion in Dallas; John Resig sloot zelfs via Zoom aan. In de originele blogpost staat ook een groepsfoto.

Samenvatting: dit moet je onthouden voor je upgrade

• jQuery 4.0.0 is de eerste major release in ~10 jaar en bevat breaking changes.
• Support voor IE10 en ouder is verwijderd; IE11 wordt pas in jQuery 5.0 aangepakt (gefaseerde aanpak).
• Trusted Types en CSP-verbeteringen maken DOM-manipulatie en async scripts veiliger/strakker.
• De source is gemigreerd van AMD naar ES modules; packaging gebeurt met Rollup.
• Deprecated API’s zoals jQuery.trim en jQuery.parseJSON zijn verwijderd; stap over op native equivalents.
• push, sort, splice zijn uit de jQuery prototype gehaald.
• Focus/blur event-volgorde volgt nu de W3C spec (breaking change).
• Slim build is kleiner en bevat geen Deferreds/Callbacks meer; let op IE11 m.b.t. native Promises.
• Gebruik de upgrade guide en jQuery Migrate om veilig te migreren.