Así como en la electrónica se utilizan componentes complejos que a su vez son formados por otros que permiten su funcionamiento, he aquí el concepto adoptado en la web.
Uno de los grandes objetivos sobre los que se están trabajado en la web son los “Web components”, o Componentes web.
Estos componentes buscan solucionar o estandarizar widgets, controles y componentes comunes reutilizables y encapsulados, o como podría ser más claro dentro de un entorno probado en el que no pueda invadir componentes de su entorno y que su manipulación sea controlada o accedida por una api limitada teniendo como objetivo proteger la seguridad y otros aspectos del funcionamiento esperado como la aparición de ID’s duplicados u otras colisiones.
Actualmente podemos ver estos componentes como los utilizados en el control de video que se presenta cuando utilizamos el tag <video>.
Cuatro ramas:
Los “Web components” o como lo llamaremos en esta entrada “WC” se dividen en cuatro ramas de trabajo o enfoque.
- Templates: (Plantillas)
- Shadow DOM (DOM sombra)
- Custom elements (Elemento personalizados)
- Pakaging (Empaquetado o Encapsulación).
Shadow DOM
Shadow DOM es un concepto que aborda la encapsulación del DOM y es implementado por medio de JavaScript lo que nos permite modificar los datos encapsulados así como su funcionamiento. Siendo uno de los elementos tratados hace poco es implementado hasta la fecha a partir de Chrome 25 por medio del prefijo “webkit”. Por ejemplo, si habilitamos desde nuestras herramientas de desarrollador en chrome, desde las configuraciónes, la opción Shadow DOM, al inspeccionar un tag <VIDEO> de html5 podemos ver que dentro del tag video se encuentra un shadow dom que contiene todos los elementos que hacen a este componente, como los botónes, volumen y demás. Por este medio se puede acceder a modificar los controles con nuestros requerimientos de presentación, entre otras cosas.
En sintesis el Shadow DOM es un DOM encapsulado que coexiste dentro del DOM padre y permite definir elementos complejos como componentes de video, entre otros, y poder tanto reutilizar estos componentes como personalizar los existentes.
Templates
Los templates son platillas en HTML que se completan o utilizan con un modelo o colección de datos externa. Actualmente Frameworks de JS como Ember, Knockout, y otros, lo implementan así también como se pueden encontrar sistemas de templating del lado del cliente como Mustache, Handlebars, y mas.
Estos son implementados en el navegador por medio de, lo que vimos anteriormete, el Shadow DOM.
Pakaging
Estas son las técnicas y métodos que se utilizan para brindar privacidad, protección y abstracción a los controles, y componentes tanto utilizados de manera standard en los navegadores como los definidos por nosotros para el uso particular y común en nuestra aplicación. Uno de los principales conceptos de la POO o OOP (Programación orientada a objetos)
Custom elements
Para comenzar aclaremos a que nos referimos en primer lugar como elements o elementos. Los elementos agrupan entre otro, los tags: inputs, video, audio y demás elementos que nos brindan no solo una presentación, sino que además controles y funcionamientos estándar para tareas específicas dentro la interfaz y son comunes y transversales sobre toda aplicación web. Hoy ampliados en funcionamiento así también como nuevos disponibles como video, audio y los tipos email y number por medio de HTML5.
Por otro lado, la idea es poder definir o extender el lenguaje base con nuestros propios componentes para el uso constante o estándar dentro de nuestra aplicación o sitio (Creo que el concepto de sitio web solo define una landing comercial sin mayor funcionalidad que una presentación visual, hoy por hoy, algo que salga de esto se convierte en aplicación, pero es solo un concepto.). Para esto se plantea en conjunto con el concepto de template y packaging (por medio del shadow dom), la definición de estos en una sola instancia y la reutilización. Un ejemplo podría ser la necesidad de utilizar “Spiners” en nuestra interfaz y por medio de esta característica lo haríamos una sola vez y lo llamaríamos tantas veces como lo necesitemos.
Link al video que muestra este ejemplo (Ingles): http://www.youtube.com/watch?v=pQOuHNm5seY
Pronto publicaré un ejemplo mostrando las utilizaciones que les podemos dar a este maravilloso concepto de Componente Web, de más está que cada uno podrá ver el poder de este nuevo concepto.
Hasta la próxima.
Links interesantes:
Custom elements: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
Ejemplo de uso custom elements: http://blogs.adobe.com/cantrell/archives/2012/03/a-short-simple-video-explaining-the-shadow-dom-and-web-components.html
Especificación de la W3C sobre Shadow DOM: http://www.w3.org/TR/shadow-dom/
Actualización: (13/03/2013)
Primer draft de Web Components W3C: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/components/index.html
