Top Banner
Build Reusable Web Components Using HTML5 Web Components Gil Fink CEO and Senior Consultant, sparXys
32

Build Reusable Web Components using HTML5 Web cComponents

Jul 15, 2015

Download

Technology

Gil Fink
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Build Reusable Web Components using HTML5 Web cComponents

Build Reusable Web Components

Using HTML5 Web Components

Gil Fink CEO and Senior Consultant, sparXys

Page 2: Build Reusable Web Components using HTML5 Web cComponents

The Pyramid of Doom

Page 3: Build Reusable Web Components using HTML5 Web cComponents

Build Reusable Web Components

Using HTML5 Web Components

Gil Fink CEO and Senior Consultant, sparXys

Page 4: Build Reusable Web Components using HTML5 Web cComponents

About Me • sparXys CEO and Senior consultant

• ASP.NET/IIS Microsoft MVP

• Co-author of Pro Single Page Application

Development (Apress)

• Co-author of 4 Microsoft Official Courses (MOCs)

• Founder of Front-End.IL Meetup and co-organizer of

GDG Rashlatz Meetup

Page 5: Build Reusable Web Components using HTML5 Web cComponents

Agenda • The problems we face

• Web Components APIs o Templates

o Imports

o Shadow DOM

o Custom Elements

Page 6: Build Reusable Web Components using HTML5 Web cComponents

1. Undescriptive Markup

Google+ Example

Page 7: Build Reusable Web Components using HTML5 Web cComponents

The Pyramid of Doom is Back

Page 8: Build Reusable Web Components using HTML5 Web cComponents

2. Poor Separation of Concerns

You want HTML, CSS and JavaScript to work together

You end up with a mess

The wiring gets in your way!

Page 9: Build Reusable Web Components using HTML5 Web cComponents

3. No Native Templates • Store HTML in hidden DOM element and show it

• Use script tag as a template holder:

<script id=”myTemplate” type=”text/template”> <div> … </div> </script>

Page 10: Build Reusable Web Components using HTML5 Web cComponents

4. No Bundling • You want to bundle a complex component

The component includes HTML, CSS and JavaScript

how would you do that? o Use a server side wrapping mechanism?

Page 11: Build Reusable Web Components using HTML5 Web cComponents

Web Components to the Rescue

• A set of standards designed to componentize the

web

• Some general goals:

Code Reuse Encapsulation Separation of

Concerns Composition Theming Expressive Semantic

Page 12: Build Reusable Web Components using HTML5 Web cComponents

The Web Components Standards

• Reusable DOM fragments Templates

• Load HTML declaratively Imports

• DOM encapsulation Shadow DOM

• Create your own elements Custom

Elements

Page 13: Build Reusable Web Components using HTML5 Web cComponents

Let’s Drill Down

Page 14: Build Reusable Web Components using HTML5 Web cComponents

Templates • A new HTML element – template

• Can be used to instantiate document fragments

• Can wrap HTML, style tags and script tags

• To use the template you need some JavaScript

magic

<template id=”myTemplate”> <div> … </div> </template>

Page 15: Build Reusable Web Components using HTML5 Web cComponents

Cloning a Template • Select the template and extract its content

o Using its content property

• Use the importNode function to get the cloned

content

• Only when the clone is appended to the DOM o The style and JavaScript are executed

o Resources like images are retrieved from the server

var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);

Page 16: Build Reusable Web Components using HTML5 Web cComponents

Demo Templates

Page 17: Build Reusable Web Components using HTML5 Web cComponents

Imports • Load additional HTML documents

o Without Ajax

• A new type of link tag

• Use the rel attribute with the import type:

<link rel=”import” href=”myImport.html”>

Page 18: Build Reusable Web Components using HTML5 Web cComponents

Imports and Bundling • Enable to bundle a full component into a HTML file

o The HTML can include scripts and CSS styles

• The whole bundle can be retrieved in a single call

Page 19: Build Reusable Web Components using HTML5 Web cComponents

Imports and The DOM • Importing a document doesn’t include it into the

DOM o It will parse it in memory and load all the additional resources

• Use the import property of the link tag:

var content = document.querySelector(‘link[rel=”import”]’).import;

Page 20: Build Reusable Web Components using HTML5 Web cComponents

Demo Imports

Page 21: Build Reusable Web Components using HTML5 Web cComponents

Shadow DOM • Encapsulate DOM parts

o The browser will know how to present those parts

o The browser won’t show the encapsulated parts in the source code

• Creates a boundary between the component and

its user

Page 22: Build Reusable Web Components using HTML5 Web cComponents

Demo Enabling Chrome to Show Shadow DOM Elements

Page 23: Build Reusable Web Components using HTML5 Web cComponents

Shadow DOM – Cont. • Use the createShadowRoot function to wrap an

element as a shadow DOM:

var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;

Page 24: Build Reusable Web Components using HTML5 Web cComponents

Demo Shadow DOM

Page 25: Build Reusable Web Components using HTML5 Web cComponents

Custom Elements • Enable to extend or to create custom HTML

elements o The new element must inherit from HTMLElement

• Create a custom element using the registerElement

function:

• Extend an existing element:

var myElement = document.registerElement(‘my-element’);

var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });

Page 26: Build Reusable Web Components using HTML5 Web cComponents

Custom Elements – Cont. • Use the element in your DOM:

or use the createElement function

• Custom elements have life cycle events.

For example: o createdCallback

o attributeChangedCallback

<my-input></my-input>

Page 27: Build Reusable Web Components using HTML5 Web cComponents

Demo Custom Elements

Page 28: Build Reusable Web Components using HTML5 Web cComponents

The Current State of Web Components

• Still W3C Working Drafts

• Browser support:

http://caniuse.com/#search=web%20components

• Main Polyfills:

Polymer X-Tag

Page 29: Build Reusable Web Components using HTML5 Web cComponents

Questions?

Page 30: Build Reusable Web Components using HTML5 Web cComponents

Summary • Web Components are emerging standards that

enables: • Encapsulation

• Separation of Concerns

• Element portability

• And more

• They are still in working drafts

• Taking the web one step forward!

Page 31: Build Reusable Web Components using HTML5 Web cComponents

Resources • Download the slide deck:

• http://webcomponents.org/

• My Blog – http://www.gilfink.net

• Follow me on Twitter – @gilfink

Page 32: Build Reusable Web Components using HTML5 Web cComponents

Thank You!