Todas las entradas de: admin

Guía 99 – Crea un Plugin PHPRunner desde un Web Components

Como había indicado en el artículo anterior, he creado un plugin de View y de Edit, desde un Web Components de Awesome, en concreto del «Switch».

Hago un pequeño resumen de lo que hasta ahora hemos visto:

Y con este artículo, completo el ciclo, pues lo que nos quedaría son ejemplos concretos o aplicación de lo que hemos aprendido.

Objetivo

Creación de un plugin  de PHPRunner (View y Edit) de un Web Components de tercero (Awesome).

DEMO: https://fhumanes.com/wc_test2/

Para realizar las pruebas de integración realizar las operaciones CRUD, tanto de página completa como en INLINE.

Si te interesa este artículo, sigue leyéndolo en este enlace.

Guía 98 – Utilizar Web Components de Awesome en PHPRunner

Este artículo muestra cómo de sencillo es utilizar Web Components de terceros en la parte de visualización de cualquier página.

La parte de edición, para ser integrada en PHPRunner es más compleja, pero en el siguiente artículo vamos a realizar algunos ejemplos, aunque soy consciente de que para los usuarios que son noveles en PHPRunner va a ser más difícil, si no hay alguien que le facilita la labor, escribiendo plugins de PHPRunner, que facilita su utilización. Voy a realizar un ejemplo, para ver si alguien se anima a construirlo para el colectivo de usuarios, porque yo no dispongo de tiempo para hacer esta labor.

Los Web Components que voy a utilizar el el ejemplo son los de Awesome. Seguro que hay otros muchos, pero estos, tienen buena documentación y son sencillos de utilizar.

Objetivo

Utilizar web components de Awesome para mostrar en un ejemplo básico cómo se pueden utilizar estos para variar el interface / UI de usuario de una aplicación de PHPRunner. En este caso vamos a modificar la visualización de contenidos.

Antes de entrar en la codificación, se ha hecho un ejemplo de HTML, para ver la sencillez de utilización de estos componentes. Los podéis revisar y para ver qué se ha escrito, podéis «ver el código fuente de la página» para que observéis lo simple que es.

DEMO: https://fhumanes.com/web_components/

La integración con PHPRunner se ha hecho cambiando la visualización de 2 campos:

  • Campo «Status», que es un campo de tipo checkBox y se muestra cómo Switch
  • Campo «Images», que muestra como Carrousel de miniaturas y de tamaño completo.

DEMO: https://fhumanes.com/wc_test1/

Si te interesa este artículo, sigue leyéndolo  en este enlace.

Guía 97 – Utilizar WEB Components en PHPRunner

En artículos anteriores hemos tratado:

En este artículo se explicará cómo utilizar los WEB Components en desarrollos PHPRunner.

Objetivo

  • Cómo podemos  utilizar esto WEB Components en desarrollos en PHPRunner.
  • Cómo construir el Backend SLIM4 – PHP, para comunicarnos con las variables de sesión del desarrollo PHPRunner y así poder utilizar la identificación del usuario para los 2 procesos de PHP (PHPRunner y SLIM4).

DEMO: https://fhumanes.com/pc_001

(1) es la integración de una App de Svelte 5 en PHPRuynner
(2) es la integración de un WEB Components hecho en Svelte 5 en PHPRunner.
(3) es la consola del navegador y las trazas que ven dejando los ejemplos para que se vean su funcionamiento.

Si estás interesado en este artículo, sigue leyéndolo en este enlace.

S-023 – Construir Web Components con Svelte 5

 

Un Web Component es un elemento HTML personalizado, creado con estándares del navegador (Custom Elements, Shadow DOM y HTML Templates). Permite encapsular HTML + CSS + JS en un único bloque reutilizable, sin depender de frameworks.


¿Dónde se utiliza?

Funciona en cualquier entorno donde exista HTML:

  • Aplicaciones web clásicas (PHP, Java, .NET)
  • Frameworks modernos (Svelte, React, Vue, Angular)
  • CMS (WordPress, Drupal)
  • Apps híbridas (Electron, Ionic)
  • Sistemas grandes con equipos múltiples

¿Cómo se usa en HTML?

Una vez registrado el componente, usarlo es tan simple como:

<mi-componente titulo="Hola" modo="dark"></mi-componente>

El navegador lo trata como si fuera una etiqueta nativa.

Repositorios de Web Components gratuitos

  • Web Awesome — RECOMENDADO Un conjunto completo y bien documentado, de Web Components profesional y gratis. Próximamente ejemplos de este conjunto de componentes
  • WebComponents.org — El mayor catálogo público de Web Components. Reúne componentes de Google, Vaadin, Shoelace, FAST y cientos de desarrolladores independientes.
  • Shoelace — Biblioteca moderna de componentes UI (botones, modales, tabs, formularios). 100% Web Components, sin framework y altamente personalizable.
  • Vaadin Web Components — Componentes empresariales de alta calidad: grids, formularios, layouts, pickers. Muy usados en aplicaciones corporativas.
  • FAST Components — Componentes de Microsoft, rápidos, accesibles y con diseño adaptable. Ideales para apps modernas.
  • Elix — Componentes avanzados de UI (carousels, date pickers, menús complejos) con un enfoque en accesibilidad y rendimiento.
  • PatternFly Elements — Componentes creados por Red Hat para interfaces profesionales y dashboards.
  • Lion Web Components — Componentes minimalistas y accesibles creados por ING, perfectos para formularios y validación.

Objetivo

Una vez que ya sabemos cómo construir Aplicaciones en Svelte 5, analizar los cambios a realizar para desarrollar WEB Components con Svelte 5.

Las funcionalidades que deseamos comprobar:

  • Integrarse en páginas HTML de aplicaciones WEB, del lenguaje PHP o ASP, etc.
  • Validas para instanciarse varias veces en la misma página (ejemplo páginas de Grid).
  • Poder pasar parámetros desde la aplicación WEB al inicio de la ejecución.
  • Poder enviar información desde dentro a la página HTML a través de eventos.
  • Poder recibir información desde dentro (Svelte 5) como evento, para su tratamiento en página HTML.

DEMO: https://fhumanes.com/pc_001

La imagen muestra un ejemplo de aplicación hecha con PHPRunner con (1) una app de Svelte 5 integrada y con (2) un Web Components hecho en Svelte 5.

Si estás interesado en el artículo,  sigue leyéndolo en este enlace.

Plugins jQuery vs Web Components

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

Criterio Plugins jQuery Web Components
Dependencias jQuery obligatorio Nativo, sin dependencias
Encapsulación Ninguna Shadow DOM
Reutilización Solo en DOM global En cualquier framework o web
Rendimiento Medio Alto
Compatibilidad futura En declive Estándar W3C
Mantenimiento Ecosistema abandonado En crecimiento
Integración Fácil en webs antiguas Fácil en webs modernas
Soporte a largo plazo No garantizado Garantizado por navegadores

4. Presente: ¿qué se usa hoy?

En webs antiguas o legacy

Los plugins jQuery siguen existiendo porque:

  • ya están integrados
  • funcionan
  • migrar cuesta tiempo

Pero no se crean plugins nuevos.

En webs modernas

Los Web Components están creciendo rápidamente, especialmente en:

  • aplicaciones híbridas (PHP + JS moderno)
  • microfrontends
  • sistemas de diseño (Design Systems)
  • componentes compartidos entre equipos
  • integraciones con CMS (WordPress, Drupal, Prestashop)
  • frameworks modernos (Svelte, React, Vue)

5. Futuro: ¿qué dominará?

La tendencia es clara:

jQuery → mantenimiento mínimo
Web Components → estándar dominante

Los navegadores ya soportan Web Components de forma nativa, y los frameworks modernos (Svelte, React, Vue, Angular) pueden generar Web Components como output final.

Esto significa:

  • un componente creado hoy en Svelte 5 puede usarse en cualquier web dentro de 10 años
  • un plugin jQuery creado hoy probablemente no sobrevivirá

6. Conclusión

Los plugins de jQuery fueron una solución brillante para su época, pero hoy pertenecen al pasado. Los Web Components representan el presente y el futuro de los componentes reutilizables en la web.

La transición no es solo tecnológica: es un cambio de mentalidad hacia componentes nativos, encapsulados, interoperables y duraderos.

Para proyectos nuevos, la recomendación es clara:

Construir componentes como Web Components, idealmente usando un framework moderno como Svelte 5 para simplificar el desarrollo.

Estar atentos a las novedades sobre este tema
En los siguientes artículos os mostraré cómo estos nuevos componentes se pueden crear con Svelte 5 y cómo los podemos utilizar en PHPRunner y por extensión, en cualquier otro sistema que genere páginas HTML, JavaScript y CSS.

Guía para construir Plugins de PHPRunner
He creado una guía para construir los plugins de PHPRunner. Está ubicada en GITHUB, donde están todos los plugins que yo os facilito de forma gratuita.