User-Customizable Web Components for Building One-Page Sites

User-Customizable
Web Components
for 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 Sites23/04/2015
Agenda
1. Modules VS Web Components
a. Starting Point
b. What are Web Components?
c. Why we are using them
2. The Approach
a. Design of a Component
b. Component Manipulation
3. The Page Generator
a. generator overview
b. app flow
4. Conclusion

3
Modules VS Web Components
Part I

Starting point
Industrial need:
One-Page Site Generator
● For small business
● For one-shot landing page
● Fully customizable
● Integrable in current
enterprise product

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

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 IMPORTS
Include and reuse
HTML documents as
dependencies
TEMPLATES
An element for
describe structures
SHADOW DOM
Encapsulate DOM trees,
isolating their scope and
controlling their
interaction

Create and use a Web Component means:
Write a template
(HTML + CSS + JS)
in component.html
Import it in your
main.html
Register it with
the tag name “my-
component”.
Use it in
main.html by adding
<my-component>.
The browser will
render the
component in the
shadow DOM.
my-component
#shadow-root
<div>Hello!</div>
Hello!

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

… and with Google’s Polymer
Advantages:
Reusability
Isolation of JS and CSS
Standard
Declarative syntax
Easiness of use
Full browser support with polyfill

10
The Approach:
Web Components as Modules
Part II

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',
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

Polymer({
is: 'descriptive-content',
behaviors: [ComponentBehavior],
properties: {
text: {
type: String,
logicType: 'textarea',
value: 'Lorem ipsum....',
label: 'Text',
customizable: true
},
textColor: {
type: String,
logicType: 'color',
value: '#ffffff',
cssVariable: '--descriptive-text-color',
label: 'Text color',
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

<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

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?

ANSWER: With Web Components
Label
logicType: textarea
logicType: color
<textarea>
<input type=”color”>
Native input elements

ANSWER: With Web Components
logicType: background
<background-input>
Custom Component that expose a
value attribute (like native inputs)

17
The Page Generator
Part III

Application overview

<html>
<head></head>
<body>

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

</body>
<html>
Output HTML

Applicationflow

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.

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 at
Ninth International Conference on Advances in Computer-
Human Interactions (ACHI) 2016
Venice, 24-28 April 2016
background picture by FergieFam007, flic.kr/p/88iw5D
paper goo.gl/T3Ipuv
demo goo.gl/LW3WGE

User-Customizable Web Components for Building One-Page Sites

More Related Content

Similar to User-Customizable Web Components for Building One-Page Sites (20)

Recently uploaded (20)

User-Customizable Web Components for Building One-Page Sites