jQuery 4.0.0: qué cambia de verdad, qué se rompe y cómo actualizar sin dramas

El 14 de enero de 2006 John Resig presentó jQuery en BarCamp (Nueva York). Veinte años después, el equipo ha publicado la versión final de jQuery 4.0.0 tras un ciclo largo de desarrollo y varias pre-releases. Es la primera versión mayor en casi una década y llega con modernización real: recorte de compatibilidad antigua, retirada de APIs obsoletas y ajustes que por fin era imposible hacer en releases menores sin romper medio internet.

La contrapartida es clara: hay breaking changes. La buena noticia (según el propio equipo) es que la mayoría de proyectos podrán actualizar con cambios mínimos, especialmente si ya venían cuidando de no usar APIs deprecated. Aun así, antes de actualizar conviene leer el detalle y preparar una transición ordenada.

Antes de actualizar: guía oficial y jQuery Migrate

Para facilitar el salto, el equipo ha publicado dos piezas clave:

• Guía de actualización oficial: https://jquery.com/upgrade-guide/4.0/
• Release del plugin jQuery Migrate (para detectar y mitigar usos legacy): https://github.com/jquery/jquery-migrate/

Si encuentras problemas al actualizar, el canal recomendado es reportarlos en el tracker de issues: https://github.com/jquery/jquery/issues.

Disponibilidad: CDN, npm (y el “slim build”)

jQuery 4.0.0 ya está disponible en el CDN oficial y vía npm. En CDNs de terceros probablemente aparecerá “en breve”, pero no depende del equipo de jQuery: cada proveedor tiene su propio calendario.

Enlaces directos (build completo)

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

Instalación con npm

npm install jquery@4.0.0

npm install jquery@4.0.0

Slim build: más pequeño y ahora más “slim”

Además del build completo (con todos los módulos), existe una variante “slim” pensada para casos en los que no necesitas ajax, o prefieres usar librerías especializadas para peticiones, y también cuando te basta con manipulación de clases + CSS para animaciones. En jQuery 4.0.0 este build se ha adelgazado todavía más al eliminar Deferreds y Callbacks (queda alrededor de 19,5k bytes gzipped).

Los Deferreds llevan tiempo soportando el estándar Promises/A+ (https://promisesaplus.com/), así que en la mayoría de usos puedes migrar a Promises nativas. Ojo: las Promises nativas están disponibles en todos los navegadores soportados por jQuery 4.0 excepto IE11. Deferreds tienen algunas capacidades extra frente a Promises, pero para la mayoría de código se puede pasar a métodos de Promise. Si necesitas IE11, lo más recomendable es usar el build principal o añadir un polyfill de Promises.

El slim build también está en npm y en el CDN:

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

Estas actualizaciones ya están disponibles como versiones actuales en npm y Bower. Y tienes el resumen de todas las formas de obtener jQuery aquí: https://jquery.com/download/.

Los grandes cambios de jQuery 4.0.0 (y por qué importan)

1) Se elimina soporte para IE < 11 (y el siguiente paso será IE11)

jQuery 4.0 deja de soportar IE10 y anteriores. Es un recorte deliberado, por etapas: el equipo no ha eliminado IE11 en esta major porque planea hacerlo progresivamente, y el siguiente paso se publicará en jQuery 5.0 (referencia: https://github.com/jquery/jquery/pull/5077).

En esta versión se elimina el código específico de soporte para versiones de IE anteriores a 11. También cae soporte para otros navegadores muy antiguos: Edge Legacy, versiones de iOS anteriores a las últimas 3, versiones de Firefox anteriores a las últimas 2 (salvo Firefox ESR) y Android Browser.

2) Trusted Types y CSP: jQuery se alinea mejor con entornos “locked-down”

jQuery 4.0 añade soporte para Trusted Types, lo que permite que HTML envuelto en TrustedHTML (MDN: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) se use como input en métodos de manipulación sin violar la directiva de Content Security Policy (CSP) require-trusted-types-for.

Además, el equipo ha ajustado el transporte de scripts en AJAX: aunque algunas peticiones ya usaban <script> para mantener atributos como crossdomain, han pasado a usar <script> tags en la mayoría de peticiones asíncronas de scripts (cambio referenciado aquí: https://github.com/jquery/jquery/pull/4763). El objetivo es evitar errores de CSP asociados a scripts inline.

Aun así, hay casos donde se sigue usando XHR para peticiones asíncronas de scripts; por ejemplo, cuando pasas la opción "headers" (la recomendación en el anuncio es usar scriptAttrs en su lugar). En general, ahora se utiliza <script> siempre que sea posible.

3) El código fuente migra a ES modules (adiós AMD en el repo)

Uno de los cambios más relevantes para tooling moderno: el código fuente en la rama main se ha migrado de AMD (explicación de por qué AMD: https://requirejs.org/docs/whyamd.html) a ES modules (PR: https://github.com/jquery/jquery/pull/4541).

El código fuente de jQuery siempre se ha publicado con los releases en npm y GitHub, pero no se podía importar como módulos directamente sin RequireJS (https://requirejs.org/), que era el build tool principal durante mucho tiempo.

Ahora el empaquetado se hace con Rollup (https://rollupjs.org/introduction/) y el equipo ejecuta la batería de tests contra los ES modules por separado. Esto encaja mucho mejor con build tools modernos, flujos de desarrollo actuales y también con el navegador vía <script type=module>.

4) APIs deprecated: eliminadas (y hay reducción de tamaño)

jQuery 4.0.0 aprovecha la major para eliminar APIs que llevaban varias versiones marcadas como deprecated. En muchos casos eran funciones pensadas para uso interno o que hoy tienen equivalente nativo en todos los navegadores soportados.

Lista de funciones eliminadas:

• 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

La sustitución recomendada pasa por equivalentes nativos como Array.isArray(), JSON.parse(), String.prototype.trim() y Date.now().

Entre esta limpieza y el recorte de código específico para IE antiguo, el equipo indica una reducción de más de 3k bytes gzipped.

5) Se eliminan métodos “solo internos” del prototype de jQuery

El prototype de jQuery llevaba tiempo exponiendo métodos de Array que no se comportaban como el resto de métodos chainables de jQuery y que, en realidad, estaban ahí para uso interno. En concreto: push, sort y splice.

En jQuery 4.0 estos métodos se eliminan del prototype. Si los estabas usando (por ejemplo, con colecciones jQuery), el anuncio propone este reemplazo:

// Antes (ya no funciona en jQuery 4.0)
// $elems.push(elem)

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

// Antes (ya no funciona en jQuery 4.0)
// $elems.push(elem)

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

6) El orden de eventos de focus/blur se ajusta al estándar W3C

Durante años, los navegadores no se ponían de acuerdo con el orden de eventos relacionados con el foco: focusin, focusout, focus, blur. Con las versiones recientes de los navegadores soportados por jQuery 4.0, por fin han convergido en un orden común.

El problema: ese orden común no coincide con el orden consistente que jQuery había elegido hace años, así que esto se considera un breaking change. A partir de jQuery 4.0 se deja de sobrescribir el comportamiento nativo.

En la práctica, todos los navegadores salvo IE seguirán la especificación W3C actual con este orden:

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

En versiones anteriores, el orden de jQuery era:

• focusout, blur, focusin, focus

Dato curioso que menciona el anuncio: el único navegador que seguía el viejo estándar W3C (antes de su actualización en 2023) era Internet Explorer.

Notas prácticas de migración (lo que conviene revisar en tu código)

• Compatibilidad de navegador: si todavía soportas IE10 o anteriores (o Edge Legacy / Android Browser / iOS muy antiguo), no subas a 4.x. Mantente en 3.x.
• Busca usos de APIs eliminadas (jQuery.trim, jQuery.parseJSON, etc.) y sustitúyelas por equivalentes nativos.
• Revisa cualquier lógica que dependa del orden de eventos de foco (especialmente si tienes handlers encadenados de focusin/focusout/focus/blur).
• Si usabas push/sort/splice sobre colecciones jQuery, migra a llamadas con Array.prototype como en el ejemplo.
• Si trabajas con CSP estricta y/o require-trusted-types-for, valora el salto a 4.0 por sus mejoras en Trusted Types y el transporte de scripts en AJAX.
• Si estabas usando Deferreds/Callbacks por inercia, considera Promises nativas (y decide si necesitas el build completo o el slim).

Imagen: reunión por el 20º aniversario

Changelog completo y enlaces útiles

Para el detalle a nivel de commits, el anuncio enlaza el changelog completo comparando 3.7.1 con 4.0.0: https://github.com/jquery/jquery/compare/3.7.1…4.0.0.

Si vas a actualizar un proyecto grande, lo más sensato es combinar: guía de upgrade + jQuery Migrate + lectura del changelog para los módulos que más usas (Ajax, Event, Manipulation, Selector, etc.).

Agradecimientos del release

El anuncio incluye un agradecimiento explícito a quienes han participado con parches, reportes y pruebas: Alex, Ahmed S. El-Afifi, fecore1, Dallas Fraser, Richard Gibson, Michał Gołębiowski-Owczarek, Pierre Grimaud, Gabriela Gutierrez, Jonathan, Necmettin Karakaya, Anders Kaseorg, Wonseop Kim, Simon Legner, Shashanka Nataraj, Pat O’Callaghan, Christian Oliff, Dimitri Papadopoulos Orfanos, Wonhyoung Park, Bruno PIERRE, Baoshuo Ren, Beatriz Rezener, Sean Robinson, Ed Sanders, Timo Tijhof, Tom, Christian Wenz, ygj6 y todo el equipo de jQuery.