WebComponents –

View Github Repository Open presentation in a new window

ahmad2x4

See all presentation from ahmad2x4

WebComponents –

0 0

WCompTalk

On Github ahmad2x4 / WCompTalk

WebComponents and modern web frameworks

Ahmad Atighechi @ahmad2x4

Component !?

Turbo Vision (text base UI control set)

Talking about web !?

Visual InterDev (calendar component)

Recent technologies

              </div>                      
            </div>                        
          </div>                       
        </div>                        
      </div>                      
    </div>                        
  </div>                      
</div>
Probably a twitter bootstrap page

Why do we need web components?

Current developers' experience in reusing widgets is really poor

How does Web Components (WC) help?

Encapsulation

Componentization

Encapsulation

Why?

Current Encapsulation method

<iframe src="foo.htm"></iframe>

Componentization

  • Complexity Management
  • Product Flexibility
  • Collaboration
  • Easier to reason about your code

What are web components?

A set of HTML5 standards

  • Shadow DOM In progress (V1 milestone)
  • HTML Templates
  • Custom Element In progress (V1 milestone)
  • HTML Import In progress

Shadow DOM

Element (shadow host)
Shadow Root
Shadow Tree
Shadow tree has encapsulation

Shadow DOM

Example

HTML Templates

<template id="foo">
    <img src="img.png" alt="image">
    <h1>Hello World</h1>
</template>
<div id="container">
</div>
                    
var template = document.querySelector('#foo');
var container = document.querySelector('#container');
var clone = document.importNode(template.content, true);
//Creating shadow root and appending cloned template
var root = container.createShadowRoot();
root.appendChild(clone);
//To check if browser support native template
if ('content' in document.createElement('template')){
    
}
Note: Default template implementation doesn't come with if, repeat Server side / Client side
  • Underscore template
  • Mustache JS
  • Handlebar

Native browser suport

Inert

Custom Element

<li/>

<p/>

<div/>

<h1/>

Readable markup

<stack-question favored="true" rank="3">
    <h1>How do I use WebComponent in my HTML page</h1>
    <stack-comment>Comment 2</stack-comment>
    <stack-comment>Comment 2</stack-comment>
    <stack-answer rank="3" answer="true">Asnwer 1
        <stack-comment>Commnet 3</stack-comment>
    </stack-answer>
</stack-question>

Custom Element (Definition)

var XFavButton = document.registerElement('stack-favorite-button');
document.body.appendChild(new XFavButton());

Or

var XFavButton = document.registerElement('stack-favorite-button',{
        prototype: Object.create(HTMLButtonElement.prototype),
        extends: 'button'
    }
);
document.body.appendChild(new XFavButton());

HTML Import

javascript..... <script/>
image.......... <img/>
css............ <link/>
video.......... <video/>
HTML........... ????

HTML Import (Basics)

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

How to use imported HTML

<script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Clone the <template> in the import.
    var template = content.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
</script>

Browser support

Chrome Opera Firefox Safari Edge Templates 26 15 22 7.1 13 HTML Imports 36 23 On Hold Low Custom Elements 33 20 Behind Flag in dev Medium Shadow DOM 25 15 Behind Flag in dev High

What does community do with in-progress standard?

Polyfill

Webcomponentjs

                    bower install --save webcomponentsjs

Demo

Standard Compatibility

Shadow DOM HTML Import HTML Template Custom Element

Webcomponents-lite

Shadow DOM HTML Import HTML Template Custom Element

Includes all polyfills except for shadow DOM.

Angular 2

Demo

Standard Compatibility

Shadow DOM HTML Import HTML Template Custom Element

Polymer

Demo

Standard Compatibility

Shadow DOM HTML Import HTML Template Custom Element

MOAR about Polymer

  • Registration and manage lifecycle of elements
  • Extend native HTML
  • Two-way binding and attribute reflection
  • Responsive to property and attribute change
  • Local DOM
  • Events
  • Behaviors

Links:

QA

Slides http://ahmad2x4.github.io/WCompTalk

DDDSydney Thanks our sponsors

WebComponents and modern web frameworks Ahmad Atighechi @ahmad2x4