Manual de Web Components

En este manual vamos a conocer el nuevo estándar de los Web Components, una nueva tecnología implementada en navegadores modernos que permitirá llevar la web a un nuevo nivel.

Web Components incluye cuatro especificaciones que nos van a servir para cambiar radicalmente el modo en el que construimos las páginas web, aportando nuevas herramientas capaces de extender el lenguaje HTML. Las veremos por separado y luego las utilizaremos en conjunto.

Los componentes, también llamados Custom Elements, son el corazón y objetivo final de este estándar y tienen como objetivo construir nuevos elementos para el lenguaje HTML. Éstos son como etiquetas HTML nuevas que puedes desarrollar tú mismo con muy poco esfuerzo, de modo que puedas realizar componentes para implementar cualquier tipo de tarea en el ámbito de una web, interfaz de usuario, etc.

Como Web Components es un estándar, podemos desarrollar directamente con Javascript y no estaremos obligados a usar alguna librería o framework adicional. En este manual nos centraremos en esta posibilidad, usar Web Components con Javascript estándar.

Por todo ello es una tecnología que ya podemos usar y beneficiarnos de extraordinarias posibilidades. En este manual vamos a recorrer diversos puntos del estándar para explicarlo, de modo que los desarrolladores puedan aprender y comenzar a usar Web Components.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Web Components' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Introducción a Web Components

Web Components es un estándar de la W3C que está siendo definido en el momento de escribir este manual. Explicaremos con detalle en qué consiste el estándar y su filosofía.

Las especificaciones están a distintos niveles de finalización pero, como ya se encuentran publicados sus borradores, varios navegadores las vienen implementando. Todos los navegadores en algún momento se adaptarán para soportar Web Components, pero para los navegadores antiguos explicaremos cómo usar el Polyfill, que nos aporta compatibilidad entre los clientes web que no lo implementan todavía.

1.- Qué son Web Components

Los Web Components son 4 especificaciones que nos permiten extender el desarrollo para la web por medio de componentes web que cualquier desarrollador podría realizar.
Especificaciones de Web Components

Vamos a explicar las cuatro especificaciones del estándar de los Web Components, que básicamente nos ofrecen nuevas etiquetas HTML y APIs Javascript para programación. Se pueden usar por separado, pero la verdadera potencia se da cuando se juntan para el desarrollo de nuevos elementos.
Analizaremos de manera independiente cada una de las especificaciones que contiene, aportando ejemplos de uso con el código Javascript necesario para operar con ellas.

2.- Especificación Custom Elements, explicaciones y práctica

Cómo realizar Custom Elements con Javascript básico, basando los estándares de los Web Components y sin usar ninguna librería.

3.- Extendiendo elementos en Web Components

Cómo extender unos componentes a base de otros componentes, creando nuevos Custom Elements, con Javascript nativo.

4.- Template con Web Components

Cómo es el estándar Template de los Web Components y cómo podemos usar el sistema de templating nativo en Javascript.

5.- Shadow DOM de Web Components

Explicaciones y ejemplos de uso de Shadow DOM el estándar de Web Components que nos sirve para crear elementos del DOM encapsulados en otros elementos de la página.

6.- Especificación Import en Web Components

Explicamos en qué consiste la especificación de Import en los Web Components, junto con algunos ejemplos de uso.

7.- Ciclo de vida en los Web Components

Qué es el ciclo de vida en los Web Components y cómo podemos ejecutar acciones en diferentes estados de los componentes.
Desarrollo basado en componentes

En los siguientes artículos nos dedicaremos a mostrar ejemplos que nos permitan entender cómo usar Web Components, con sus diversas especificaciones en conjunto, para el desarrollo web. De este modo pretendemos ofrecer ejemplos ilustrativos sobre las posibilidades de este nuevo estándar.

8.- Custom elements sencillos y sus HTML import

Ejemplos de custom elements sencillos y cómo usar la declaración import para incluirlos en una página web, de modo que se puedan usar.

9.- Practicando web components con VanillaJS

Ejemplo de desarrollo de un custom element con Web Components y Javascript nativo en el que usamos las 4 especificaciones del estándar.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir