Vue vs Vanilla
Components for the Web

Cadenza is big …

… and it's legacy, but …

… not that kind of legacy …

… or that kind:

It's vivid and
constantly improved and extended

Frankfurt main station, © Urmelbeauftragter / CC-BY-SA-3.0 (via Wikimedia Commons)

How to be future proof?

• 
• 
• 
• 
• 
  …

Refactoring on the go demands
maximum interoperability

                            const ELEMENT_NAME = 'd-toggle-button';

                            class ToggleButton extends HTMLElement {
                              connectedCallback () {
                                this.classList.add(ELEMENT_NAME);
                                this.setAttribute('role', 'button');
                                this.addEventListener('click', () => {
                                  this.pressed = !this.pressed;
                                  this.dispatchEvent(new CustomEvent('toggle', {bubbles: true}));
                                });
                              }
                              set pressed (value) {
                                this.setAttribute('aria-pressed', value);
                              }
                              get pressed () {
                                return this.getAttribute('aria-pressed') === 'true';
                              }
                            }

                            customElements.define(ELEMENT_NAME, ToggleButton);
                        

jsfiddle.net/w15c8mpx/

Usage with Plain DOM

                            const button = document.createElement('d-toggle-button');
                            button.textContent = 'Button';
                            button.pressed = true;
                            button.addEventListener('toggle', () => {
                              console.log(button.pressed);
                            });
                            document.body.append(button);
                        

Usage with Constructor

                            import ToggleButton from 'ui/toggle-button';
                            // or
                            const ToggleButton = customElements.get('d-toggle-button');

                            // Constructor
                            const button = new ToggleButton();
                            …
                        

Usage with jQuery

                            const $button = $('<d-toggle-button>')
                              .text('Button')
                              .prop('pressed', true)
                              .on('toggle', () => console.log($button.prop('pressed')))
                              .appendTo(document.body);
                        

Usage with Vue

                            new Vue({
                              el: '#app',
                              template: `<d-toggle-button
                                           :pressed.prop="pressed"
                                           @toggle="onToggle">Button</d-toggle-button>`,
                              data: { pressed: true },
                              methods: {
                                onToggle: event => console.log(event.target.pressed)
                              }
                            });
                        

Web Components

The Holy Grail

Web Components

The Holy Grail

A solid foundation
with the right level of abstraction

Railroad ties, © Störfix / CC-BY-SA-3.0 (via Wikimedia Commons)

A software component is a
unit of composition with contractually specified interfaces and explicit context dependencies only.

The effect is HUGE!

Button

UI components have a name and can be reused.

Design Tools: Style Guide

(Zeplin)

Design Tools: Component library

(Catalog)

Web Components

• Custom Elements
• Shadow DOM
• HTML Templates
• …

Custom elements

                            class MyComponent extends HTMLElement {
                              …
                            }

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

(Google primer on custom elements)

Custom Elements: Extending Built-ins

                            class MyButton extends HTMLButtonElement {
                              …
                            }

                            customElements.define('d-my-button', MyComponent, {extends: 'button'});

                            // Usage:
                            document.createElement('button', {is: 'd-my-button'});
                            // or
                            // new MyButton();
                            // <button is="d-my-button">My Button</button>
                        

Custom Elements: Browser Support

Custom Elements: Polyfilling

                            <script>
                              if (window.customElements) {
                                // Make the browser work with transpiled custom elements.
                                document.write('<script src="native-shim.js"></script>');
                              } else {
                                // Polyfill custom elements.
                                document.write('<script src="custom-elements.min.js"></script>');
                              }
                            </script>
                        

Polyfill for Custom Elements

⇒ We look forward to extend built-in elements in the future.

Custom Elements: Lifecycle Callbacks

                            class MyComponent extends HTMLElement {
                              constructor () {
                                // Called when the element is created or upgraded.
                                super(); // Don't forget to call super().
                                …
                              }
                              connectedCallback () {
                                // Called when the element is connected to the DOM.
                              }
                              disconnectedCallback () {
                                // Complement to the connectedCallback()
                              }
                            }
                        

Custom Elements: Attributes

                            class MyComponent extends HTMLElement {
                              static get observedAttributes() {
                                return ['some-attribute']; // Return attribute names to observe.
                              }
                              attributeChangedCallback (name, oldValue, newValue) {
                                // Called when the observed attributes' values change.
                              }
                            }
                        

Custom Elements: Properties

                            class ToggleButton extends HTMLElement {
                              connectedCallback () {
                                this.addEventListener('click', () => {
                                  this.pressed = !this.pressed;
                                  this.dispatchEvent(new CustomEvent('toggle', {bubbles: true}));
                                });
                              }
                              set pressed (value) {
                                this.setAttribute('aria-pressed', value);
                              }
                              get pressed () {
                                return this.getAttribute('aria-pressed') === 'true';
                              }
                            }
                        

Shadow DOM

                            class Tabs extends HTMLElement {
                              constructor() {
                                super();

                                const shadowRoot = this.attachShadow({mode: 'open'});
                                shadowRoot.innerHTML = `
                                  <style>#tabs { border-bottom: 1px solid; }</style>
                                  <div id="tabs">
                                    <slot name="tabs" />
                                  </div>
                                  <div id="panels">
                                    <slot />
                                  </div>
                                `;
                              }
                            }
                        

• Scoped Styles
• Declarative Composition

jsfiddle.net/09dyg34p/1/ (Google primer)

Shadow DOM: Browser Support

Polyfill for the Shadow DOM

Shadow DOM: "Challenges"

• Polyfills are "shady" and horribly slow.
• Scoped styles require native CSS custom
  properties to be really useful.
• No server-side rendering (although people try)

⇒ We do not use the Shadow DOM and do not recommend it.

HTML Templates

                            <ul id="todoList"></ul>
                            <template id="todoTemplate">
                              <li>
                                <label>
                                  <input type="checkbox"> <span class="text"></span>
                                </label>
                              </li>
                            </template>
                        

                            const todos = document.querySelector('#todoList');
                            const template = document.querySelector('#todoTemplate');
                            template.content.querySelector('.text').textContent = 'Give a talk';
                            template.content.querySelector('input').checked = true;
                            todos.append(document.importNode(template.content, true));
                        

jsfiddle.net/teg37rao/

HTML Templates: Browser Support

Polyfill for HTML Templates

⇒ HTML Templates work nicely, but we don't use them, yet.

And did I mention…

• 🔋 Batteries included
• 🎓 Flat learning curve
• 🛠️ Great devtools
• ☮️ You can use <x> with Web Components
• 📈 Big companies do commitments

Bottom line

• We have three years of experience with Custom Elements.
• Recently, we replaced our last RichFaces component.
• We benefit a lot and we'll move on into that direction.

Keep calm and #UseThePlatform

Departing train, © Xenotron / CC BY 4.0 (via Wikimedia Commons)

There was only one problem…

jsfiddle.net/zfoexhrq/2

It get's better…

HelloWorld.vue

codesandbox.io/s/vue-template-eikjx

main.js

                            import Vue from "vue";
                            import HelloWorld from "./HelloWorld.vue";

                            Vue.component("hello-world", HelloWorld);

                            new Vue({
                              el: "#app",
                              template: ""
                            });
                            

codesandbox.io/s/vue-template-eikjx

How to structure a Vue app?

Bottom line

• The prototype got finished in time.
• After 6 months my boss was finally convinced.
• New Vue projects are spreading.

Keep calm and #becomeaddicted

© Ryoji Iwata via unsplash.com

How to convince YOUR boss?