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

[email protected]

[email protected]

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


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


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


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

http://webcomponents.org/


23/04/2015


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!


23/04/2015

Support of Web Com

ponents

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

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


23/04/2015

… and with Google’s Polymer


Advantages:ReusabilityIsolation of JS and CSSStandard

Declarative syntaxEasiness of useFull browser support with polyfill

10

The Approach:Web Components as Modules

Part II


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


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


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


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?


23/04/2015


ANSWER: With Web ComponentsHow to design each input?

Label

logicType: textarea

logicType: color

<textarea>

<input type=”color”>

Native input elements


23/04/2015


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


23/04/2015

Application overview


23/04/2015



23/04/2015



23/04/2015



23/04/2015


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

Output HTML


23/04/2015

Application flow

24

ConclusionsPart IV


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.


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

https://flic.kr/p/88iw5D

http://goo.gl/T3Ipuv

Engineering

User-Customizable Web Components for Building One-Page Sites