Todas las entradas de: admin

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

  • 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.

S-022 – Ordenación de Jerarquías en árbol

Otra solución que tenía en el ámbito del lenguaje de PHP era la ordenación de jerarquías tipo árbol.  Es muy habitual contar con esta organización en tareas de un Gantt, estructura de personal en una compañía, etc., por lo que requerimos de un algoritmo para obtener esa jerarquía a partir de datos planos donde sólo se dispone del registro «padre» para montar esa estructura de árbol.

Objetivo

Disponer de un algoritmo en JavaScript que facilite un estructura jerárquica partiendo de registros que identifican cuál es el registro «padre».

DEMO: https://fhumanes.com/my-jerarquia/

Los campos con fondo amarillo son calculados.

(1) .- Es el orden de los registros según su estructura y su fecha de inicio.
(2).- Identificador de orden. Es el orden, teniendo en cuenta el nivel de dependencia.
(3).- Es el nivel de profundidad de la estructura para ese registro.
(4).- Indica si es un nodo maestro, que tiene registros dependiente de él.

Si te interesa esta información sigue leyendo el artículo en este enlace.

S021 – Drag and Drop (Arrastrar y Soltar) en Svelte 5

Esta funcionalidad de «arrastrar y soltar» no es de las primeras cosas que pruebas en un nuevo entorno de programación, pero es importante para determinadas aplicaciones, si deseas que el interfaz de la aplicación aparezca como algo moderno.

Repasando las aplicaciones realizadas en Web con PHPRunner, vi que tenía una, de la que me sentía muy contento y que me faltaba esta pieza/solución. La aplicación es KANBAN.

La parte del interfaz que me faltaba era la de «Drag and Drop» o «Arrastrar y Soltar», para cambiar de estado a los incidentes o tareas.

Objetivo

Seleccionar una librería de DnD (Drag and Drop) para añadir esta funcionalidad a los desarrollos de Svelte 5.

DEMO:  https://fhumanes.com/my-fluid-dnd/

Solución Técnica

El producto que creí que tenía todas las características que necesitaba es Fluid DnD y el ejercicio que he hecho son prácticamente todos los ejemplos que tiene en el blog de documentación.

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

Los ejemplos de este Blog pasaran a GITHUB

Estoy pasando a GITHUB todo el código de este BLOG que considero debe permanecer accesible para vosotros, los que los habéis copiado, y así, dispongáis  un sitio estable y de futuro.

También, considero que de esta plataforma los «spiders» de las IA’s recuperan mucho mejor los códigos y eso extenderá el posible uso de los mismos.

También, es una plataforma que nos permite dialogar para informar de incidentes y definir posibles mejoras, que si me es posible, incorporaré a los ejemplos.

Ya están publicados los plugines de PHPRunner y poco a poco, iré publicando los ejemplos que considero más relevantes de PHPRunner, React y Svelte.

Espero que esta decisión sea para mejorar vuestro acceso y comunicación.