Presente y futuro de dos formas de extender la web

Durante más de una década, los plugins de jQuery (los actuales de PHPRunner) fueron la forma dominante de extender la web con componentes reutilizables. Desde sliders hasta calendarios, pasando por validadores de formularios, jQuery ofrecía una API sencilla y un ecosistema inmenso.

Pero la web ha evolucionado. Hoy, los Web Components representan un estándar nativo, moderno y sostenible para crear componentes reutilizables sin depender de frameworks.

Este artículo compara ambas tecnologías desde una perspectiva técnica y práctica, y analiza cuál es su papel en el presente y hacia dónde se dirige el futuro.

1. Qué son los plugins de jQuery

Los plugins de jQuery surgieron como una forma rápida y sencilla de encapsular funcionalidad en la época en la que:

• el DOM era inconsistente entre navegadores
• no existían módulos ES
• no existían clases nativas
• no existía Shadow DOM
• no existían Custom Elements

Un plugin típico:

(function($){
    $.fn.miPlugin = function(options){
        return this.each(function(){
            // lógica del plugin
        });
    };
})(jQuery);

Ventajas históricas

• API extremadamente simple
• Ecosistema enorme
• Resolvían problemas reales de compatibilidad
• Fácil de integrar en cualquier web

Limitaciones actuales

• Dependen de jQuery (carga extra)
• No aíslan estilos ni HTML
• No son reutilizables fuera del DOM global
• No funcionan bien en arquitecturas modernas (SPA, SSR, microfrontends)
• No aprovechan capacidades modernas del navegador

2. Qué son los Web Components

Los Web Components son un estándar nativo del navegador, compuesto por:

• Custom Elements
• Shadow DOM
• HTML Templates
• ES Modules

Permiten crear componentes reutilizables sin frameworks:

class MiComponente extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<button>Hola</button>`;
    }
}
customElements.define('mi-componente', MiComponente);

Ventajas modernas

• No requieren librerías externas
• Encapsulan HTML, CSS y JS
• Funcionan en cualquier framework (React, Vue, Angular, Svelte, Java, ASP,  PHP, WordPress…)
• Son estándar W3C
• Son ideales para microfrontends y aplicaciones híbridas
• Funcionan igual en desarrollo y producción

Limitaciones

• API más compleja que jQuery
• No todos los desarrolladores están familiarizados
• El Shadow DOM puede complicar estilos globales
• Requieren build tools si se usan con frameworks modernos (Svelte, React, etc.)

3. Comparación directa