User-Customizable Web Components for Building One-Page Sites

User-Customizable

Web Componentsfor Building

One-Page Sites

Pasquale.Lisena @polito.it

Jetmir.Xhembulla

@polito.it

Giovanni.Malnati@polito.it

Pasquale.Morra@seat.it

2User-Customizable Web Components for Building One-Page Sites

23/04/2015

Agenda

1.Modules VS Web Componentsa. Starting Point

b. What are Web Components?

c. Why we are using them

2.The Approacha. Design of a Component

b. Component Manipulation

3.The Page Generatora. generator overview

b. app flow

4.Conclusion

3

Modules VS Web ComponentsPart I

4User-Customizable Web Components for Building One-Page Sites

23/04/2015

Starting point

Industrial need:One-Page Site Generator● For small business● For one-shot landing

page

● Fully customizable● Integrable in current

enterprise product

5User-Customizable Web Components for Building One-Page Sites

23/04/2015

Starting point

All available page generator are based on the combination and manipulation of

modules.

LIMITS

Possible CSS/JS scope

overflow

Third Part structure for saving the page for future editings.

Lack of interoperability with different technologies

Possible duplicate

IDs

Specific server environment

required

6User-Customizable Web Components for Building One-Page Sites

23/04/2015

What are Web Components?

A family of 4 W3C Specification:

Official blog: webcomponents.org

CUSTOM ELEMENTS

Define and use custom DOM elements in a

document

HTML IMPORTSInclude and reuse HTML documents as dependencies

TEMPLATESAn element for

describe structures

SHADOW DOMEncapsulate DOM

trees, isolating their scope and controlling

their interaction

7User-Customizable Web Components for Building One-Page Sites

23/04/2015

What are Web Components?

Create and use a Web Component means:

Write a template(HTML + CSS + JS)in component.html

Import it in your main.html

Register it withthe tag name “my-

component”.

Use it inmain.html by adding <my-component>.

The browser will render the

component in the shadow DOM.

my-component #shadow-root <div>Hello!</div>

Hello!

8User-Customizable Web Components for Building One-Page Sites

23/04/2015

Support of Web Com

ponents

source: http://jonrimmer.github.io/are-we-componentized-yet/

9User-Customizable Web Components for Building One-Page Sites

23/04/2015

… and with Google’s Polymer

What are Web Components?

Advantages:ReusabilityIsolation of JS and CSSStandard

Declarative syntaxEasiness of useFull browser support with polyfill

10

The Approach:Web Components as Modules

Part II

11User-Customizable Web Components for Building One-Page Sites

23/04/2015

Design of a Component<dom-module id="descriptive-content"> <style include="component-base"></style> <style> p { color: var(--descriptive-text-color); } </style> <template><p>{{text}}</p></template> <script> Polymer({ is: 'descriptive-content', behaviors: [ComponentBehavior], properties: { text: { type: String, logicType: 'textarea', value: 'Lorem ipsum....', label: 'Text', reflectToAttribute: true, customizable: true }, textColor: { type: String, logicType: 'color', value: '#ffffff', cssVariable: '--descriptive-text-color', label: 'Text color', reflectToAttribute: true, customizable: true, observer: 'computeStyle' }, // other properties } //methods and lifecycle callback });</dom-module>

Style(applies only to the component)

Template(this will written in the Shadow DOM)

Component registration● Declare the component

name● Assign the

ComponentBehavior (common properties for our modules)

● Define the available properties

● Contains the JS needed for component lifecycle

12User-Customizable Web Components for Building One-Page Sites

23/04/2015

Design of a Component

Polymer({ is: 'descriptive-content', behaviors: [ComponentBehavior], properties: { text: { type: String, logicType: 'textarea', value: 'Lorem ipsum....', label: 'Text', reflectToAttribute: true, customizable: true }, textColor: { type: String, logicType: 'color', value: '#ffffff', cssVariable: '--descriptive-text-color', label: 'Text color', reflectToAttribute: true, customizable: true, observer: 'computeStyle' }, // other properties } //methods and lifecycle callback });

A property represents a value that will bound in the template and reflected on the component node

13User-Customizable Web Components for Building One-Page Sites

23/04/2015

Design of a Component

<descriptive-content text="Lorem ipsum..." text-color="#ffffff”> #shadow-root //not shown <style> ... </style> <p> Lorem ipsum...</p></descriptive-content>

in the DOM attributes

in the render

14User-Customizable Web Components for Building One-Page Sites

23/04/2015

Component Manipulation

Component

text

textColor

Input 1

Input 2

Inputs

value

value

user interaction

current value

current value

user interaction

How to design each input?

15User-Customizable Web Components for Building One-Page Sites

23/04/2015

Component Manipulation

ANSWER: With Web ComponentsHow to design each input?

Label

logicType: textarea

logicType: color

<textarea>

<input type=”color”>

Native input elements

16User-Customizable Web Components for Building One-Page Sites

23/04/2015

Component Manipulation

ANSWER: With Web ComponentsHow to design each input?

logicType: background

<background-input>

Custom Component that expose a value attribute (like native inputs)

17

The Page GeneratorPart III

18User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application overview

19User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application overview

20User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application overview

21User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application overview

22User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application overview

<html><head><!-- dependencies loading --></head><body> <!-- other components --> <descriptive-content text-color="#FFFFFF" text="Hello ACHI 2016!"> </descriptive-content> <!-- other components --></body><html>

Output HTML

23User-Customizable Web Components for Building One-Page Sites

23/04/2015

Application flow

24

ConclusionsPart IV

25User-Customizable Web Components for Building One-Page Sites

23/04/2015

Conclusions

We used the Web Components standard in a novel way (user-driven instead of developer-driven)

We built a web page generator which works with client-side only technologies

It uses standards, in order to have high integration possibilities

Shadow DOM grants isolation of modules and avoid overflow of JS and CSS.

26User-Customizable Web Components for Building One-Page Sites

23/04/2015

Conclusions

Writing and sharing components platform for webmaster

Supporting dependency managers

Concatenation of the output (Vulcanization)Page theme with CSS variables

FUTURE WORKS

27

This work has been presented atNinth International Conference on Advances in

Computer-Human Interactions (ACHI) 2016Venice, 24-28 April 2016

background picture by FergieFam007, flic.kr/p/88iw5D

paper goo.gl/T3Ipuv demo goo.gl/LW3WGE