Onsen UI - PhoneGap Day EU 2017

Simple yet Powerful API (v1)

Favorite Star

```
                  <link rel="import" href="favorite-star.html">
                ```

```

<template>
                    <style>
                      span[active] {
                        color: #ffac33;
                        animation: favorite-star-bounce 0.3s ease-in-out;
                      }
                      span:hover:not([active]) {
                        color: #f5c682;
                      }

/* Extra style omitted */
                    </style>

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

// Get and clone the <template>
                      const template = thisDoc.querySelector('template');
                      const clone = document.importNode(template.content, true);

// Create shadow DOM
                      const shadowRoot = this.attachShadow({mode: 'open'});
                      shadowRoot.appendChild(clone);

// Save a reference to the star element
                      this.starElement = shadowRoot.querySelector('span');
                      this.boundOnClick = this.toggle.bind(this);
                    }

connectedCallback() {
                      this.addEventListener('click', this.boundOnClick);
                    }

disconnectedCallback() {
                      this.removeEventListener('click', this.boundOnClick);
                    }

static get observedAttributes() {
                      return ['active'];
                    }

attributeChangedCallback(attr, oldValue, newValue) {
                      if (attr === 'active') {
                        // Update the star element
                        console.log('toggle!')
                        this.toggle.call(this.starElement);
                      }
                    }

toggle() {
                      if (this.hasAttribute('active')) {
                        this.removeAttribute('active');
                      } else {
                        this.setAttribute('active', '');
                      }
                    }
                  }

window.customElements.define('favorite-star', FavoriteStar);
                  </script>
                ```

<aside class="notes" data-markdown>
                  ### FavStar example

- Show how simple is Web Component API
                  - The visible star in the slide is a real web component that can be clicked.
                  - First line shows how to import the component in any document with HTML imports.
                  - The code shows a HTML template element that contains the body of the star as well as its style. The style is scoped (thanks to the shadow DOM) and only affects this component. As a visible example, it styles `span` elements but only affects the star.
                  - The rest is just a ES6 class with typical Custom Elements v1 callbacks. In the constructor, it creates a shadowDOM that uses the previous template element.
                  - It is possible to open the developer console, inspect the star and manually change its `active` attribute as an example.

</aside>


	Polyfill	Chrome/Opera	Firefox	Safari	Edge
Templates	✓	Stable	Stable	8	13
HTML Imports	✓	Stable	On Hold	No Active Development	Deciding
Custom Elements	✓	Stable	Flag	10.1	Deciding
Shadow DOM	✓	Stable	Bug	10	Deciding

!==

UI library to create hybrid & progressive web apps. Features:

* Super Simple API  - _Web Components_ ❤
              * Framework Agnostic  - _Web Components_ 💕
              * Future Proof  - _Web Components_ 💘

<aside class="notes" data-markdown>
                ### Onsen UI

- Describe about Onsen UI project and its relation to PhoneGap. Perhaps specify that it only uses Custom Elements.
                - Feat: WC/CE make possible having a very simple API based on attributes, events and methods
                - Feat: Framework Agnostic thanks again to WC/CE, since we don't need to import any framework to create components (it's just pure standard JavaScript) and can be plugged with anything else
                - Feat: As mentioned before, WC/CE will be native at some point, thus enhancing Onsen UI performance and making it a good bet (there is no framework that will be obsolete like AngularJS, etc.)

</aside>

## UI Components

<img src="./assets/carousel-ios.png" class="reset-img showcase-carousel"><img src="./assets/carousel-android.png" class="reset-img showcase-carousel">

```
              <ons-input type="search"></ons-input>
              ```
              
              ```
              <ons-switch checked></ons-switch>
              ```
              
              ```
              <ons-toast>Hi there! <button>Dismiss</button></ons-toast>
              ```

<aside class="notes" data-markdown>
                ### UI Components

- Many useful and easy to use components
                - Some example code is provided (input, switch adn toast)
                - Perhaps mention some extra components like Navigator, Tabbar or Splitter.

</aside>

Simple yet Powerful API (v1)

!==

Tailored API