? ¡Bienvenidos a todos los nuevos suscriptores y codificadores de componentes que regresan! Estoy iniciando una nueva serie de tutoriales de 10 partes. Si bien mis otros tutoriales han utilizado Modulo.js para crear pequeñas aplicaciones específicas y divertidas, como fiestas de baile de Pokémon, editores de texto retro extruidos o galerías de videojuegos, esta serie de tutoriales se desarrollará en principios básicos, comenzando desde el punto de partida: ¿Qué Qué es un componente web?

El siguiente paso después de HTML y CSS

¿Acabas de aprender los conceptos básicos de HTML y CSS, tienes curiosidad por dar el siguiente paso y quieres crear aplicaciones web más grandes y completas? ¿O ya eres un desarrollador web o un profesional de JavaScript y solo quieres crear aplicaciones web rápidas y ligeras sin demasiada sobrecarga, herramientas ni dependencias excesivas?

Si es así, ¡los componentes web son para ti! Te permiten crear porciones de código reutilizables. Al realizar este tutorial, aprenderá cómo corregir HTML y CSS repetitivos y difíciles de mantener. También utiliza solo herramientas y bibliotecas mínimas, lo que significa que no necesitará Node.js, NPM o node_modules masivos. También le permite perfeccionar sus habilidades en el desarrollo web frontend moderno: en futuros tutoriales de esta serie, aprenderá conceptos como slots, shadowDOM, props , plantillas, gestión estatal, ¡y más! Estos son conceptos que son transferibles para usar otros marcos populares, y el enfoque declarativo simple de Modulo podría ser una forma más atractiva de aprender los conceptos básicos sin atascarse en una configuración compleja.

Presentamos el marco del módulo

¿Qué es Modulo? Modulo es un marco web de software gratuito/código abierto, pequeño pero poderoso, escrito en JavaScript. No tiene dependencias y utiliza sintaxis HTML para que pueda configurarse automáticamente al cargar la página, sin necesidad de Node.js ni compilación. Puede usarlo en un "sitio estático" HTML simple (por ejemplo, cuando ensambla HTML, CSS y otros activos estáticos en un directorio para iniciarlo en un servidor web estático), o en cualquier otra aplicación web existente. Este tutorial trata sobre el uso de Modulo como herramienta para crear componentes web.

Presentando la Parte 1

En la Parte 1, aprenderemos cómo crear un componente simple "Hola mundo". En partes futuras, aprenderemos cómo agregar estilo, accesorios, estado, formularios reactivos, espacios, API y mucho más, pero por ahora, comenzaremos con lo básico: Ir más allá del HTML básico y CSS creando y reutilizando un componente web con Modulo.

Paso 1: incluir el módulo

Antes de que podamos usar Modulo, tendremos que incluir el marco. Todo el marco está contenido en "Modulo.js", un archivo que contiene 2000 líneas de JavaScript. Esto significa que iniciar un proyecto Modulo requiere literalmente ninguna dependencia más allá de su navegador y editor. Entonces, simplemente abra un archivo HTML en blanco y comience con el siguiente código de inicio muy simple:

Paso 2: Definir tu primer componente

Ahora que lo hemos incluido, podemos comenzar a escribir Definiciones de módulo y usar el marco en general. Definimos nuestro primer componente creando una definición de Módulo y colocando dentro de ella una definición de , como se muestra a continuación:

Esta "Plantilla" se convierte así en la "plantilla" de nuestro componente: cada vez que nuestro componente aparece en la página, mostrará la plantilla dada dentro de ella.

Paso 3: usar tu primer componente

Una vez definido, puede utilizar un componente haciendo referencia a su nombre como si fuera una etiqueta HTML simple:

Esto hará que se muestre lo siguiente en la pantalla:

Hola Módulo ¡Mundo!

Tenga en cuenta que una vez registrados, los componentes pueden ir a cualquier lugar donde puedan ir las etiquetas HTML simples y también se les puede aplicar estilo con CSS de la misma manera. En otras palabras, crear un componente es como crear un nuevo tipo de etiqueta HTML que se puede usar en cualquier lugar, al igual que las etiquetas HTML originales de

One time: 
Another time: 

Learning Modulo Part 1
Your first Web Component

    
One time: 
    
Another time: