Κυκλοφόρησε το jQuery 4.0: λιγότερο legacy και περισσότερα σύγχρονα web standards

Με το jQuery 4 κυκλοφόρησε για πρώτη φορά μετά από περίπου μία δεκαετία μια νέα major έκδοση.

Στο πλαίσιο της 20ετούς επετείου της JavaScript βιβλιοθήκης, η ομάδα ανάπτυξης απομακρύνεται από πολλά «βαρίδια» του παρελθόντος και προσανατολίζει το jQuery πιο σταθερά προς σύγχρονους browsers, μηχανισμούς ασφάλειας και μοντέρνα build workflows.

Η έκδοση περιλαμβάνει breaking changes, όμως για τα περισσότερα projects η μετάβαση αναμένεται να γίνει με διαχειρίσιμο κόπο προσαρμογών.

Trusted Types, CSP και τέλος στην υποστήριξη παλιών browsers

Μία από τις πιο εμφανείς αλλαγές είναι ότι το jQuery 4 δεν υποστηρίζει πλέον τον Internet Explorer 10 (IE10) και παλαιότερους.

Επίσης, βγαίνουν εκτός υποστήριξης κι άλλες παλιές πλατφόρμες, όπως:

• Edge Legacy
• ο παλιός Android Browser
• παλαιότερες εκδόσεις iOS και Firefox

Ο IE11 παραμένει προς το παρόν συμβατός, αλλά προβλέπεται να αφαιρεθεί με το jQuery 5. Όποιος εξαρτάται υποχρεωτικά από αυτούς τους παλιούς browsers, θα πρέπει να παραμείνει στο jQuery 3.x.

Παράλληλα, το jQuery 4 ενσωματώνει Trusted Types, ώστε να συμμορφώνεται καλύτερα με σύγχρονες απαιτήσεις Content Security Policy (CSP).

Έτσι, trusted HTML μπορεί να περνά πιο ασφαλώς σε DOM manipulations.

Επιπλέον, η βιβλιοθήκη μεταφέρει σε μεγάλο βαθμό την ασύγχρονη φόρτωση scripts σε <script> tags, ώστε να αποφεύγονται CSP σφάλματα που προκαλούνται από inline scripts.

Ο πηγαίος κώδικας πλέον ως ES Modules

Στην έκδοση 4, η ομάδα ανάπτυξης μετέφερε πλήρως τον πηγαίο κώδικα του jQuery από AMD σε ES Modules.

Αντί για RequireJS, η βιβλιοθήκη αξιοποιεί πλέον το Rollup, έναν «ελαφρύ» JavaScript bundler για ES Modules.

Αυτό επιτρέπει:

• ευκολότερη ενσωμάτωση σε σύγχρονα toolchains
• χρήση και natively με <script type="module">
• ξεχωριστά tests για τη module έκδοση

Deprecations και περισσότερη τάξη στο jQuery Prototype

Με το major release, το jQuery αφαιρεί πολλές λειτουργίες που εδώ και χρόνια ήταν deprecated (παρωχημένες) (η πλήρης λίστα υπάρχει στο jQuery blog).

Μεταξύ άλλων καταργούνται:

• jQuery.isArray
• jQuery.trim
• jQuery.parseJSON
• jQuery.now

Για όλες υπάρχουν ήδη native δυνατότητες στη JavaScript. Μαζί με την αφαίρεση ειδικού κώδικα για IE, η βιβλιοθήκη (σύμφωνα με την ομάδα) μικραίνει πάνω από 3 KB (gzip).

Επίσης, εσωτερικές array μέθοδοι όπως push, sort και splice δεν αποτελούν πλέον τμήμα του jQuery prototype.

Αυτές οι μέθοδοι δεν προορίζονταν (όπως φαίνεται) για δημόσια χρήση και πλέον συμπεριφέρονται αυστηρά όπως οι αντίστοιχες native Array λειτουργίες.

Focus events: πλέον ακολουθούν το standard

Το jQuery δεν «καλύπτει» πια το native behavior των focus και blur events. Αντί της παλιάς σειράς/λογικής του jQuery, η έκδοση 4 ακολουθεί την τρέχουσα W3C προδιαγραφή.

• Αυτό μπορεί να επηρεάσει υπάρχουσα event logic σε εφαρμογές.
• Όμως προσφέρει ενιαία συμπεριφορά σε όλους τους υποστηριζόμενους browsers.

Πιο «λεπτό» Slim Build

Το Slim build γίνεται ακόμη μικρότερο: Deferreds και Callbacks αφαιρούνται πλήρως. Τα native Promises καλύπτουν τις περισσότερες περιπτώσεις χρήσης και είναι διαθέσιμα σε όλους τους υποστηριζόμενους browsers (με εξαίρεση τον IE11).

Αποτέλεσμα: το Slim build φτάνει περίπου 19,5 KB (gzip).

Διαθεσιμότητα και εργαλεία αναβάθμισης

Για τη μετάβαση στη νέα έκδοση, η ομάδα παρέχει:

• Upgrade Guide
• ανανεωμένη έκδοση του jQuery Migrate

Το jQuery 4 είναι διαθέσιμο μέσω CDN και npm, ενώ αναμένεται να ακολουθήσουν και άλλα CDNs. Περισσότερες πληροφορίες υπάρχουν στο επίσημο jQuery blog.

Πρακτικός οδηγός μετάβασης σε jQuery 4 (έξτρα πληροφορίες)

Η αναβάθμιση σε jQuery 4.0 είναι καλή ευκαιρία να «καθαρίσετε» τεχνικό χρέος, ειδικά αν το project σας βασίζεται σε παλιές πρακτικές (π.χ. inline scripts, μη ελεγχόμενα HTML injections).

Παρακάτω θα βρείτε έναν πρακτικό τρόπο προσέγγισης που ταιριάζει σε μικρά και μεγάλα sites.

Έλεγχος συμβατότητας πριν το upgrade

• Καταγράψτε browsers-στόχους (analytics): αν έχετε σημαντική χρήση IE10/Edge Legacy, η μετάβαση σε 4.0 θα δημιουργήσει άμεσο πρόβλημα.
• Αναβαθμίστε πρώτα σε jQuery 3.x latest, διορθώστε warnings και μετά περάστε σε 4.0.
• Ενεργοποιήστε το jQuery Migrate σε staging περιβάλλον για να εντοπίσετε deprecated patterns και συμπεριφορές που άλλαξαν.

CSP, Trusted Types και ασφαλές DOM manipulation

Αν εφαρμόζετε Content Security Policy, η v4 βοηθά να μειωθούν οι συγκρούσεις με inline κώδικα. Παρ’ όλα αυτά, ελέγξτε:

• σημεία όπου περνάτε HTML strings σε .html(), .append() κ.λπ.
• την πολιτική sanitization (π.χ. χρήση βιβλιοθήκης DOMPurify όπου απαιτείται)
• την ανάγκη για Trusted Types policy σε εφαρμογές υψηλής ασφάλειας

ES Modules: καλύτερη ενσωμάτωση σε σύγχρονα builds

Με ES Modules, η ενσωμάτωση σε εργαλεία όπως Rollup/Vite/Webpack γίνεται πιο «καθαρή». Σε projects που ήδη είναι ESM-first, μπορείτε να οργανώσετε καλύτερα:

• το splitting bundles (π.χ. admin vs public)
• το dependency graph
• τα tests που φορτώνουν modules χωρίς παλιά loaders

Slim build: πότε αξίζει

Το Slim build είναι ιδανικό όταν:

• θέλετε μικρότερο payload
• δεν χρησιμοποιείτε Deferreds/Callbacks
• βασίζεστε ήδη σε native Promises ή σε async/await

Αν όμως έχετε παλιό κώδικα που βασίζεται σε $.Deferred() ή plugins που το απαιτούν, προτιμήστε το full build ή κάντε refactor σταδιακά.

Στρατηγική σταδιακής αναβάθμισης (χωρίς downtime)

1. Αναβάθμιση dependencies σε staging
2. Ενεργοποίηση Migrate και διόρθωση θεμάτων ανά module
3. Regression tests σε κρίσιμες ροές (forms, modals, focus/blur συμπεριφορά)
4. Κυκλοφορία με feature flags όπου γίνεται, ώστε να μειώσετε ρίσκο σε παραγωγή

Με αυτή τη μεθοδολογία, η μετάβαση σε jQuery 4 γίνεται πιο προβλέψιμη και σας αφήνει με πιο σύγχρονο, ασφαλές και συντηρήσιμο frontend.