jQuery 4.0.0: τι αλλάζει σε browsers, CSP, ES modules και breaking changes

Στις 14 Ιανουαρίου 2006 ο John Resig παρουσίασε για πρώτη φορά τη jQuery σε ένα BarCamp στη Νέα Υόρκη. Είκοσι χρόνια μετά, η ομάδα του project ανακοίνωσε το τελικό release της jQuery 4.0.0 (μετά από μακρύ κύκλο ανάπτυξης και αρκετά pre-releases). Είναι η πρώτη major έκδοση σε σχεδόν 10 χρόνια και, όπως είναι λογικό, περιλαμβάνει breaking changes-αν και ο στόχος είναι οι περισσότεροι να κάνουν αναβάθμιση με ελάχιστες αλλαγές.

Η φιλοσοφία της 4.0 είναι ξεκάθαρη: να κοπεί legacy κώδικας που «κρατούσε πίσω» το project, να αφαιρεθούν APIs που είχαν ήδη deprecated εδώ και εκδόσεις, να καθαριστούν public signatures από εσωτερικές/ατεκμηρίωτες παραμέτρους και να περιοριστούν διάφορα “magic” behaviors που ήταν υπερβολικά πολύπλοκα στη συντήρηση.

Για τη μετάβαση, υπάρχουν ήδη έτοιμα δύο βασικά εργαλεία: το upgrade guide και το jQuery Migrate plugin. Αν συναντήσεις προβλήματα στο upgrade, η ομάδα ζητά να τα αναφέρεις στο issue tracker.

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

Διαθεσιμότητα: CDN και npm (και τι γίνεται με τα 3rd party CDNs)

Η 4.0.0 διατίθεται κανονικά στο επίσημο CDN της jQuery και ως πακέτο στο npm. Τα third-party CDNs αναμένεται να ακολουθήσουν, αλλά δεν ελέγχονται από την ομάδα του jQuery, οπότε είναι φυσιολογικό να υπάρξει καθυστέρηση μερικών ημερών.

Άμεσα links για download

• https://code.jquery.com/jquery-4.0.0.js
• https://code.jquery.com/jquery-4.0.0.min.js

Εγκατάσταση από npm

npm install jquery@4.0.0

npm install jquery@4.0.0

Για όλους τους διαθέσιμους τρόπους απόκτησης/ενσωμάτωσης, η επίσημη σελίδα παραμένει το σημείο αναφοράς: https://jquery.com/download/

Τέλος εποχής: αφαιρείται η υποστήριξη για IE < 11 (και τι έρχεται μετά)

Το πιο συμβολικό (και πρακτικό) βήμα της 4.0 είναι ότι κόβεται η υποστήριξη για IE 10 και παλαιότερους. Εύλογα κάποιοι θα ρωτήσουν γιατί όχι και IE 11: η ομάδα έχει επιλέξει να το κάνει σταδιακά, με το επόμενο βήμα να έχει ήδη δρομολογηθεί για jQuery 5.0 (μέσω του PR που αναφέρεται στο GitHub). Για την ώρα, αφαιρείται ειδικά ο κώδικας που στόχευε IE εκδόσεις παλαιότερες του 11.

Μαζί με αυτό, κόβεται επίσης υποστήριξη για αρκετούς πολύ παλιούς browsers: Edge Legacy, iOS παλαιότερα από τις τελευταίες 3 εκδόσεις, Firefox παλαιότερα από τις τελευταίες 2 εκδόσεις (εκτός από Firefox ESR), καθώς και Android Browser. Σύμφωνα με το release post, δεν θα πρέπει να χρειαστεί κάποια αλλαγή από τη μεριά σου-αλλά αν έχεις πραγματική ανάγκη να υποστηρίξεις κάποιον από αυτούς τους browsers, η σύσταση είναι να μείνεις στη jQuery 3.x.

Trusted Types και CSP: πιο «ασφαλές» DOM manipulation και λιγότερα CSP pitfalls

Η jQuery 4.0 προσθέτει υποστήριξη για Trusted Types. Αν δουλεύεις με αυστηρά security headers, αυτό είναι σημαντικό: επιτρέπει HTML που είναι τυλιγμένο σε TrustedHTML (το αντίστοιχο Web API στο MDN) να περνά ως input σε μεθόδους DOM manipulation της jQuery χωρίς να παραβιάζει την οδηγία require-trusted-types-for του Content Security Policy (CSP).

Επιπλέον, η ομάδα έκανε μια πρακτική αλλαγή στον τρόπο που φορτώνονται scripts σε αρκετές περιπτώσεις AJAX: παρότι υπήρχαν ήδη requests που χρησιμοποιούσαν <script> tags (για να διατηρούν attributes όπως crossdomain), πλέον τα περισσότερα asynchronous script requests γίνονται με <script> tags ώστε να αποφεύγονται CSP errors που μπορούν να προκύψουν από inline scripts.

Ο κώδικας της jQuery μεταφέρεται σε ES modules: τέλος στο AMD ως εσωτερική βάση

Μία από τις πιο «μοντέρνες» αλλαγές είναι ότι το source της jQuery στο branch main μεταφέρθηκε από AMD σε ES modules (ESM). Ιστορικά, ο κώδικας δημοσιευόταν στο npm και στο GitHub, αλλά δεν μπορούσε να γίνει import «κατευθείαν» ως modules χωρίς RequireJS-το οποίο ήταν και το build tool της jQuery.

Πλέον το packaging γίνεται με Rollup και (σημαντικό για όσους έχουν CI απαιτήσεις) η ομάδα τρέχει tests και πάνω στα ES modules ξεχωριστά. Αυτό κάνει τη jQuery πιο συμβατή με σύγχρονα build tools και workflows, αλλά και με browsers που υποστηρίζουν <script type=module>.

Deprecated APIs: τι αφαιρέθηκε και με τι το αντικαθιστάς

Σε major έκδοση, το project εκμεταλλεύεται την ευκαιρία να καθαρίσει APIs που ήταν deprecated για αρκετές εκδόσεις. Στη 4.0 αφαιρούνται functions που είτε ήταν εξαρχής πιο «εσωτερικές» απ’ όσο θα έπρεπε, είτε πλέον έχουν πλήρως διαθέσιμα native equivalents σε όλους τους browsers που υποστηρίζει η 4.0.

Η λίστα των αφαιρέσεων

• jQuery.isArray
• jQuery.parseJSON
• jQuery.trim
• jQuery.type
• jQuery.now
• jQuery.isNumeric
• jQuery.isFunction
• jQuery.isWindow
• jQuery.camelCase
• jQuery.nodeName
• jQuery.cssNumber
• jQuery.cssProps
• jQuery.fx.interval

Στις περισσότερες περιπτώσεις, η αντικατάσταση είναι straightforward με native APIs όπως Array.isArray(), JSON.parse(), String.prototype.trim() και Date.now().

Ένα πρακτικό αποτέλεσμα του «καθαρίσματος» (μαζί με την αφαίρεση του IE legacy code) είναι ότι η βιβλιοθήκη μειώθηκε σε μέγεθος κατά πάνω από 3k bytes gzipped.

Αφαίρεση internal-only μεθόδων από το jQuery prototype (push/sort/splice)

Το jQuery prototype (δηλαδή το jQuery.fn) κουβαλούσε για χρόνια κάποιες Array μεθόδους που δεν συμπεριφέρονταν όπως τα υπόλοιπα chainable jQuery methods και στην πράξη ήταν για internal χρήση. Συγκεκριμένα: push, sort, splice. Στη 4.0 αφαιρούνται.

Αν (κακώς, αλλά συμβαίνει σε legacy codebases) τις χρησιμοποιούσες απευθείας, η ομάδα δίνει και παράδειγμα αντικατάστασης. Για παράδειγμα, αυτό:

$elems.push( elem );

$elems.push( elem );

μπορεί να αντικατασταθεί με αυτό:

[].push.call( $elems, elem );

[].push.call( $elems, elem );

Focus/blur event order: τώρα ακολουθείται το W3C spec (breaking change)

Για χρόνια, τα browsers δεν συμφωνούσαν στη σειρά που πυροδοτούνται τα focus-related events (focusin, focusout, focus, blur). Σταδιακά, οι πιο πρόσφατες εκδόσεις όλων των browsers που υποστηρίζει η jQuery 4.0 κατέληξαν να συγκλίνουν σε κοινή σειρά-όμως αυτή διαφέρει από τη σειρά που η jQuery είχε επιλέξει παλιότερα για να προσφέρει συνέπεια.

Από τη jQuery 4.0 και μετά, η βιβλιοθήκη σταματά να κάνει override τη native συμπεριφορά. Αυτό σημαίνει ότι όλα τα browsers εκτός από IE ακολουθούν το τρέχον W3C specification (όπως αναφέρεται στο release post) με σειρά:

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

Στις προηγούμενες εκδόσεις της jQuery η σειρά ήταν: focusout, blur, focusin, focus. Έχει ενδιαφέρον ότι ο μόνος browser που ακολουθούσε το παλιό W3C spec (πριν την ανανέωσή του το 2023) ήταν ο Internet Explorer.

Slim build: μικρότερο και χωρίς Deferreds/Callbacks (και τι σημαίνει για Promises)

Η jQuery έχει εδώ και καιρό slim build για περιπτώσεις όπου δεν χρειάζεσαι όλο το πακέτο. Στη 4.0.0 το slim γίνεται ακόμα μικρότερο, αφού αφαιρούνται τα Deferreds και τα Callbacks. Το αποτέλεσμα είναι περίπου 19.5k bytes gzipped.

Τα Deferreds υποστήριζαν εδώ και χρόνια το Promises/A+ standard, άρα στις περισσότερες περιπτώσεις μπορείς να μεταβείς σε native Promises. Οι native Promises υπάρχουν σε όλους τους browsers που υποστηρίζει η jQuery, με εξαίρεση τον IE11. Σημειώνεται επίσης ότι τα Deferreds έχουν κάποια extra χαρακτηριστικά που δεν καλύπτονται 100% από native Promises, αλλά η πλειονότητα των χρήσεων μεταφέρεται σε Promise methods.

Αν πρέπει να υποστηρίξεις IE11, η πιο ασφαλής επιλογή είναι είτε να χρησιμοποιήσεις το main build είτε να προσθέσεις polyfill για native Promises.

Slim build αρχεία (CDN)

• https://code.jquery.com/jquery-4.0.0.slim.js
• https://code.jquery.com/jquery-4.0.0.slim.min.js

Η λογική του slim build, όπως περιγράφεται στο release: αρκετές φορές δεν χρειάζεσαι ajax (ή προτιμάς μια standalone βιβλιοθήκη μόνο για requests). Επίσης, για animations συχνά αρκεί συνδυασμός CSS και class manipulation. Και αφού οι σύγχρονοι browsers (εκτός IE11) έχουν native Promises, τα Deferreds/Callbacks δεν είναι πλέον αναγκαία στις περισσότερες περιπτώσεις.

Χρήσιμα links για upgrade και release info

• Upgrade guide: https://jquery.com/upgrade-guide/4.0/
• jQuery Migrate plugin: https://github.com/jquery/jquery-migrate/
• Full changelog comparison 3.7.1 → 4.0.0: https://github.com/jquery/jquery/compare/3.7.1…4.0.0
• Download page: https://jquery.com/download/

Στιγμιότυπο 20ετίας: reunion της ομάδας

Το release post κλείνει με μια ωραία νότα: πολλοί contributors των τελευταίων 20 χρόνων βρέθηκαν σε reunion στο Dallas, με τον John Resig να συμμετέχει και μέσω Zoom. Η ανακοίνωση της 4.0.0 έγινε ενώ ήταν όλοι μαζί.

Ένα πρακτικό checklist πριν κάνεις upgrade σε 4.0.0

1. Διάβασε το upgrade guide (ειδικά αν έχεις legacy plugins ή μεγάλο codebase): https://jquery.com/upgrade-guide/4.0/
2. Τρέξε με jQuery Migrate για να εντοπίσεις legacy patterns: https://github.com/jquery/jquery-migrate/
3. Έλεγξε αν βασίζεσαι σε deprecated APIs που αφαιρέθηκαν (π.χ. jQuery.trim, jQuery.parseJSON κ.λπ.) και αντικατάστησέ τα με native APIs.
4. Κάνε smoke tests σε flows που επηρεάζονται από focus/blur (order αλλαγή).
5. Αν χρειάζεσαι IE < 11, δεν μπορείς να πας σε 4.0 (μείνε σε 3.x). Αν χρειάζεσαι IE11 και σκέφτεσαι slim build, θυμήσου ότι το slim βασίζεται σε native Promises (άρα θέλει main build ή polyfill).
6. Αν έχεις αυστηρό CSP/Trusted Types, αξιοποίησε τις νέες συμπεριφορές (TrustedHTML inputs και <script> transport) για να μειώσεις CSP errors.
7. Αν το project σου βασίζεται σε bundlers, δες τις αλλαγές γύρω από ES modules/Rollup και επιβεβαίωσε ότι το setup σου παίζει σωστά με ESM & CommonJS exports.