JAVASCRIPT 101: ENTENDIENDO WEB COMPONENTS

< script src=”other pages” title=”entendiendo web components” >

¡Ah, aquellos días en los que no existía “jotacueri”! La programación en Javascript estaba repleta de referencias a document, a window, muchos arrays, muchos callbacks y no existía nada más. #Porai decían que los desarrolladores en Javascript de verdad no usaban (“y no usan”) frameworks o librerías… Aquellos días… 😎

Probablemente, esos días vuelvan…

Previo a la llegada de ES6, en Enero de 2015 fue presentado por la W3C, un borrador que contenía la especificación de varios estándares para “modularizar la web” usando solamente HTML5, CSS3 y Javascript para contribuir al desarrollo de componentes interoperables, autocontenidos y sin ninguna dependencia externa, así nació Web Components.

¿Qué es Web Components?

Según MDN:

Web Components consiste en varias tecnologías separadas. Puedes pensar en Web Components como widgets reutilizables de interfaz de usuario, desarrollados con tecnología web (HTML5, CSS3 y Javascript). Están autocontenidos dentro del navegador y no necesitan ninguna dependencia externa como jQuery o Dojo. Un Web Component existente no necesita ser implementado usando codificación adicional, simplemente añadiendo el código que lo contiene dentro de una página HTML. Web Components utiliza funciones nativas del navegador, tanto nuevas como aquellas en fase beta.”

— Mozilla Developer Network.

Dichas tecnologías son:

  1. Custom Elements: Crea tags personalizadas que son reconocidas en el DOM.
  2. HTML templates: Fusiona data con marcado HTML sin requerir compilación previa.
  3. Shadow DOM: Encapsula HTML Templates, Javascript y CSS3 dentro del DOM.
  4. HTML Imports: Empaqueta Web Components. No será soportado por Mozilla Firefox.

Más de un año después, y aún con la llegada de ES6 y sus nuevas características, en la actualidad Web Components continua siendo un borrador 😡 , sin embargo no ha pasado desapercibido este año. A la gran suma de frameworks, librerías y complementos (a.k.a. Polyfills) existentes, Web Components ha aportado algunas librerías (e ideas) adicionales. A saber (en orden de relevancia de búsquedas en Google):

  1. Bosonic: comunitaria.
  2. Polymer: de Google.
  3. x-tag: de Mozilla.
  4. webcomponents.js: de Google, como polyfill gratuito para Polymer, pero usado en todos los demás proyectos anteriores. :mrgreen:

Pronto espero estar desarrollando componentes y probando este estándar. Aunque es una pena que mi navegador favorito no soporte del todo Web Components, tengo fe en que en algún momento lo hará 😉

</script>

Anuncios