WebComponents Hoy

Introducción y alternativas para implementar WebComponents hoy

José David Cano / @gorzas

¿De qué alternativas vamos a hablar?

• Javascript "básico"
• Polymer (WebComponents polyfill)
• EmberJS

Javascript "básico" (VanillaJS)

Características

• Production-ready
• Fácil y rápido de desarrollar
• Gran flexibilidad
• No son Webcomponents
• No hay data-binding
• Do It Yourself

Ejemplo código - Instanciación de un Webcomponent

						<section>
  <div class="example col-md-6" data-template="components/example" data-min="0.0" data-max="100.0"></div>
</section>
					

Ejemplo: VanillaJS

Fuente: https://github.com/Gorzas/webcomponents-vanillajs-example

Ejemplo código - Plantilla Componente

						<h2>Component Scope</h2>
<div class="col-md-6">
  <h3>Value</h3>
  <input type="text" id="text" value="<%- value %>">
</div>
<div class="col-md-6">
  <h3>Range bar</h3>
  <input type="range" id="range" min="<%- min %>" max="<%- max %>" value="<%- value %>">
</div>
					

Fuente: https://github.com/Gorzas/webcomponents-vanillajs-example

Ejemplo código - Component.js

						var Component = {
  template: window.JST.example,

  init: function (root) {
    this.$root = $(root);
    this.min = root.getAttribute('data-min') || 0.0;
    this.max = root.getAttribute('data-max') || 100.0;
    this.value = Math.floor((this.max - this.min) / 2);

    this.render();

    this.addListeners();
  },

  addListeners: function () {
    var that = this;

    this.$root.on('change', '#text', function() {
      that.value = this.value;

      that.render();
    });

    this.$root.on('change', '#range', function() {
      that.value = this.value;

      that.render();
    });
  },

  render: function () {
    var temp = this.template;

    this.$root.html(temp({
      min: this.min,
      max: this.max,
      value: this.value
    }));
  }
};
					

Fuente: https://github.com/Gorzas/webcomponents-vanillajs-example

Polymer

Características WebComponents

• Custom Elements
• HTML Imports
• Templates
• Shadow DOM

Características Polymer

• Propuesto para estándar por el W3C
• Data-binding
• No requiere librerías extra
• No es production-ready
• Depuración de errores compleja

Ejemplo Código - Instancia

						<range-example class="example col-md-6" min="10" max="90"></range-example>
<div class="example col-md-6">
  <h2>Another header</h2>
</div>
					

Ejemplo: Polymer

Fuente: https://github.com/Gorzas/webcomponents-polymer-example

Ejemplo Código - Componente

						<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="range-example" attributes="min max value">
  <template>
    <link rel="stylesheet" type="text/css" href="range-example.css">
    <h2>Component Scope</h2>
    <div class="col-md-6">
      <h3>Value</h3>
      <input type="text" value="{{value}}">
    </div>
    <div class="col-md-6">
      <h3>Range bar</h3>
      <input type="range" min="{{min}}" max="{{max}}" value="{{value}}">
    </div>
  </template>
  <script>
    Polymer('range-example', {
      ready: function () {
        this.value = Math.floor((this.max - this.min) / 2);
      }
    });
  </script>
</polymer-element>
					

Fuente: https://github.com/Gorzas/webcomponents-polymer-example

EmberJS

Características EmberJS

• Data-binding
• Framework de verdad
• Adapta funcionalidades ECMAScript6
• Compatibilidad con navegadores
• Escasa flexibilidad
• Curva de aprendizaje pronunciada
• Ember-cli y Ember Data en fase beta

Código Ejemplo - Plantilla

						<div class="index">
  {{range-example min="10" max="90" value=value}}
  <div class="example controller col-md-6">
    <h2>Controller scope</h2>
    {{value}}
  </div>
</div>
					

						<h2>Component Scope</h2>
<div class="col-md-6">
  <h3>Value</h3>
  {{input type="text" id="text" value=value}}
</div>
<div class="col-md-6">
  <h3>Range bar</h3>
  {{input type="range" id="range" in=min max=max value=value}}
</div>
					

Fuente: https://github.com/Gorzas/webcomponents-emberjs-example

Código Ejemplo - Componente

						import Ember from 'ember';

export default Ember.Component.extend({
  classNames : ['example col-md-6'],

  init: function () {
    this._super();

    if (!this.get('value')) {
      this.set('value', Math.floor((this.get('max') - this.get('min')) / 2));
    }
  }
});
					

Fuente: https://github.com/Gorzas/webcomponents-emberjs-example

Referencias

• Underscore - http://underscorejs.org
• EmberJS - http://emberjs.com
• Polymer Project - https://www.polymer-project.org
• Webcomponents - http://webcomponents.org
• Shadow DOM 101 - http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

FIN