The document proposes a user-customizable one-page site generator built with web components. It describes using web components as reusable modules to build customizable components for things like descriptive text, backgrounds, and inputs. The generator allows users to drag and drop components to build a page, with the output assembled as standard HTML and CSS. Future work is proposed to improve component sharing, dependency management, and theming capabilities.
2. 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
4. 4User-Customizable Web Components for Building One-Page Sites23/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
5. 5User-Customizable Web Components for Building One-Page Sites23/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
6. 6User-Customizable Web Components for Building One-Page Sites23/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 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
7. 7User-Customizable Web Components for Building One-Page Sites23/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 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!
8. 8User-Customizable Web Components for Building One-Page Sites23/04/2015
SupportofWebComponents
source: http://jonrimmer.github.io/are-we-componentized-yet/
9. 9User-Customizable Web Components for Building One-Page Sites23/04/2015
… and with Google’s Polymer
What are Web Components?
Advantages:
Reusability
Isolation of JS and CSS
Standard
Declarative syntax
Easiness of use
Full browser support with polyfill
11. 11User-Customizable Web Components for Building One-Page Sites23/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
12. 12User-Customizable Web Components for Building One-Page Sites23/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
13. 13User-Customizable Web Components for Building One-Page Sites23/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
14. 14User-Customizable Web Components for Building One-Page Sites23/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?
15. 15User-Customizable Web Components for Building One-Page Sites23/04/2015
Component Manipulation
ANSWER: With Web Components
How to design each input?
Label
logicType: textarea
logicType: color
<textarea>
<input type=”color”>
Native input elements
16. 16User-Customizable Web Components for Building One-Page Sites23/04/2015
Component Manipulation
ANSWER: With Web Components
How to design each input?
logicType: background
<background-input>
Custom Component that expose a
value attribute (like native inputs)
25. 25User-Customizable Web Components for Building One-Page Sites23/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.
26. 26User-Customizable Web Components for Building One-Page Sites23/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. 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