S-026 – Crear DashBoard con ApexChart en Svelte

Aquel que me haya seguido desde 2017, sabrá que me gusta mucho la solución de AnyChart, pero que ésta es de pago, aunque los que trabajamos con PHPRunner, la licencia de PHPRunner incluye una licencia de AnyChart para integrar gráficos en sus desarrollos.

Este producto ApexCharts, es también un producto de muchas posibilidades y de excelente calidad, que dispone de una licencia Community, por lo que podremos utilizarlo en casi todas las posibilidades.

Aparte de analizar los tipos de gráficos, sus posibilidades, etc., se quiere probar su funcionamiento en Svelte 5 con Runas y su integración con TailWind CSS y Daisy UI.

Objetivo

Construir un ejemplo de aplicativo donde integremos ApexCharts, TailWind CSS y Daisy UI, y analizar las posibilidades de construcción de DashBoard.

DEMO: https://fhumanes.com/apexchart-svelte/

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

S-025 – Creación componente DataGrid con Daisy UI

Una de las cosas que se repiten muchísimas veces es disponer de un «DataGrid», para mostrar y navegar por los elementos de una tabla.

En los ejemplos hasta ahora mostrados, he utilizados soluciones hechas 100% con código Svelte 5 y en otras ocasiones el DataGrid de alguna librería como las de SVAR. He intentado utilizar ApexGrid, como DataGrid general y reutilizable para «todo», pero me he encontrado que sólo me funcionaba en inglés y no he sido capaz de ponerlo en otros idiomas.

Objetivo

Partiendo del DataGrid hecho con código Svelte 5 y utilizando Daisy UI, realizar un componente de DataGrid que pueda reutilizar en los proyectos de cara a simplificar,  optimizar y minimizar el código necesario para disponer de DataGrid para las tablas de un proyecto.

DEMO: https://fhumanes.com/datagrid-svelte/

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

S-024 – Integración de Daisy UI + TailWind CSS en Svelte

He vuelto a realizar, otra vez, el ejemplo de la Gestión de Videos, que ya he realizado muchas otras veces.

En este caso, sólo he utilizado Daisy UI + Tailwind CSS, porque creo que es una de las combinaciones que más se utilizan en los desarrollos de framework de JavaScript y que mejor se ajustan al aprendizaje de los que se inician en ellos.

También, quería resolver el uso de «drawer» (ventanas emergentes que aparecen por los bordes de la pantalla), que incorpora Daisy UI.

Objetivo

Obtener un ejemplo claro, potente y sencillo de utilización de Daisy UI + Tailwind CSS, utilice los «drawer» de Daisy UI.

Deseo utilizar esta base para realizar ejemplos de WEB Components y Tailwind CSS es excelente para la realización de APP de escritorio que se adapten perfectamente al uso en móvil.

DEMO: https://fhumanes.com/daisy-svelte/

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

Utilizar Web Components de Material Web

🌐 Qué es Material Web

Material Web es la implementación oficial de Material Design en forma de Web Components. A diferencia de versiones anteriores (Material para Angular, Material UI para React, etc.), esta librería está construida directamente sobre estándares del navegador, sin depender de ningún framework.

Esto significa que sus componentes:

  • funcionan en cualquier proyecto HTML
  • se integran en React, Svelte, Vue, Angular o Vanilla JS
  • no requieren compilación especial
  • son totalmente reutilizables y encapsulados
🧩 Por qué es importante para los frameworks modernos

✔️ 1. Un único código funciona en todos los frameworks

  • Material para Angular
  • Material Components for Web (MDC)
  • Material UI (React) mantenido por la comunidad
  • Variantes no oficiales para Vue, Svelte, etc.

Un único componente funciona en todos los frameworks.

✔️ 2. Los frameworks modernos ya están optimizados para Web Components

React, Vue, Angular y Svelte han ido añadiendo soporte nativo para Custom Elements. Hoy, Material Web se integra sin hacks ni adaptadores en:

  • Svelte 5 (mi caso)
  • React 18+
  • Vue 3
  • Angular 17+

✔️ 3. Es la forma más estable de usar Material Design

Material Web es la implementación oficial de Material Design.

🏢 Quién mantiene y evoluciona Material Web

Material Web está desarrollado y mantenido por el equipo oficial de Material Design de Google

Esto implica:

  • soporte continuo
  • actualizaciones alineadas con Material Design
  • accesibilidad certificada
  • rendimiento optimizado
  • documentación oficial y ejemplos reales

Además, el repositorio es público y activo:

  • Google revisa PRs
  • Google publica releases
  • Google marca la hoja de ruta

Esto lo diferencia de otras librerías UI que dependen de comunidades externas.

🚀 Por qué es relevante esta solución

Material Web es hoy:

  • la implementación más moderna de Material Design
  • la más compatible con cualquier stack
  • la más fácil de integrar en proyectos PHP, ASP, JAVA, Vanilla, etc.
  • una buena forma de aprender Web Components reales
🌀Pero……

Como resumen particular, creo que esta implementación es muy buena y aunque no tenga asegurado su futuro, que me gustaría mucho, es lo que suele ocurrir con todos los temas de implementación de soluciones.

DEMO: https://fhumanes.com/wc-material/ y https://fhumanes.com/wc-material/index2.html

Es muy sencillo la personalización de los colores y del UI, siendo además muy fácil de definir los campos y sus validaciones

Si estas interesado en este tema, sigue leyendo el artículo 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.