user-customizable web components for building one-page sites
TRANSCRIPT
User-Customizable
Web Componentsfor Building
One-Page Sites
Pasquale.Lisena @polito.it
Jetmir.Xhembulla
@polito.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