¡Rompiendo las reglas con
<web-components/>!

Adrián González Rus

Software Crafter

BBVA Next Technologies

EmberJS Madrid Organizer

@adrigzr

/adrigzr

Pero... ¿Qué es un web component?

<input>

<video>

<audio>

<track>

<source>

<embed>

Composición

<web-component/>

#shadow-root

<div>Content</div>

¡A desarrollar!

class MyComponent extends HTMLElement {}

customElements.define('my-component', MyComponent);

<my-component/>

HTMLAudioElement
HTMLVideoElement
HTMLTrackElement
HTMLSourceElement

¡A Implementar!

const shadowRoot = element.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = '<span>This is my content!</span>';

const template = document.getElementById('my-template');
const templateContent = template.content;

shadowRoot.appendChild(templateContent);
class MyComponent extends HTMLElement {
    constructor() {
        super();

        const shadowRoot = element.attachShadow({ mode: 'open' });
        const template = document.getElementById('my-template');
        const templateContent = template.content;
        
        shadowRoot.appendChild(templateContent);
    }
}

ALTERNATIVAS

Hybrids

FRameworks convencionales

y si... <framework-component>

antes de nada...

..CICLO DE Vida

class MyComponent extends HTMLElement {
    constructor() {}
    connectedCallback() {}
    disconnectedCallback() {}
    attributeChangedCallback() {}
    adoptedCallback() {}
}

Componentes en Ember

<!-- my-button.hbs -->
<style>
  button {
    background: #209cee;
    color: white;
    padding: 2rem 4rem;
    border: 0;
    font-size: 1.5rem;
  }
</style>
<button>Esto es un botón</button>

{{my-button}}

manos a la obra

class MyComponent extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: 'open' });
    }
}
class MyComponent extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: 'open' });
        const template = compileTemplate('{{my-component}}');
        const component = renderTemplate(app, template);
    }
}
class MyComponent extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: 'open' });
        const template = compileTemplate('{{my-component}}');
        const component = renderTemplate(app, template);

        shadow.appendChild(component);
    }
}

atributos?

eventos?

Poco a poco...

..slots

<my-component>
   Esto es un texto de contenido
</my-component>
shadowRoot.innerHTML = '<slot></slot>';
<my-component>
   <span slot="header">Cabecera</span>
   <span slot="body">Mensaje</span>
</my-component>
shadowRoot.innerHTML = `
   <slot name="header"></slot>
   <slot name="body"></slot>
`;

paso de atributos

<my-component title="Mi Component"/>
const title = element.getAttribute('title');
const title = element.getAttribute('title');

shadowRoot.innerHTML = `<span>${title}</span>`;
{{my-component title='Mi componente'}}

Conectando atributos

connectedCallback() {
   // ...
   const controller = Controller.create();
   const component = renderTemplate(controller, template);
   // ...
}
connectedCallback() {
   // ...
   const controller = Controller.create();
   const attrs = element.getAttributeNames().map(attr => 
      `${attr}=${attr}`).join(' ');
   const template = compileTemplate(
      `{{${componentName} ${attrs}}}`);
   const component = renderTemplate(controller, template);
   // ...
}
attributeChangedCallback() {
   element.getAttributeNames().forEach(attr => {
      const value = element.getAttribute(attr);

      controller.set(attr, value);
   });
}

paso de mensajes

const event = new CustomEvent('onClick', {
   detail: 'Se ha producido un click',
});

element.dispatchEvent(event);
element.addEventListener('onClick', value => {
   console.log(value)
});

ember cli web components

github.com/BBVAEngineering/ember-cli-web-components

Pero... ¿cómo funciona?

Ember App

Ember Addon

Bundle.js

integración en una app

<script src="bundled.js"></script>

defineCustomElements({
  'my-web-component': {
    name: 'my-ember-component'
  }
});

DEmo time

bit.ly/2XC9nf0

Conclusiones

¿</preguntas>?

https://slides.com/adriangonzalezrus-1/breaking-web-components

Breaking Web Components

By ADRIAN GONZALEZ RUS

Made with Slides.com

Breaking Web Components

Los Web Components nos proponen un estandar para desarrollar componentes reutilizables en cualquier página web. Sin embargo, ¿alguien conoce cuál es su límite real? En esta charla llevaremos el poder de los Web Components a su máximo exponente haciendo convivir de manera aislada varios frameworks de moda.

  • 205

More from ADRIAN GONZALEZ RUS