User-Customizable Web Components for Building One-Page Sites
-
Upload
pasquale-lisena -
Category
Engineering
-
view
65 -
download
1
Transcript of User-Customizable Web Components for Building One-Page Sites
![Page 1: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/1.jpg)
User-Customizable
Web Componentsfor Building
One-Page Sites
Pasquale.Lisena @polito.it
Jetmir.Xhembulla
@polito.it
![Page 2: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/2.jpg)
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
![Page 3: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/3.jpg)
3
Modules VS Web ComponentsPart I
![Page 4: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/4.jpg)
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
![Page 5: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/5.jpg)
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
![Page 6: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/6.jpg)
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
![Page 7: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/7.jpg)
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!
![Page 8: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/8.jpg)
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/
![Page 9: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/9.jpg)
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
![Page 10: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/10.jpg)
10
The Approach:Web Components as Modules
Part II
![Page 11: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/11.jpg)
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
![Page 12: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/12.jpg)
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
![Page 13: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/13.jpg)
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
![Page 14: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/14.jpg)
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?
![Page 15: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/15.jpg)
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
![Page 16: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/16.jpg)
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)
![Page 17: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/17.jpg)
17
The Page GeneratorPart III
![Page 18: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/18.jpg)
18User-Customizable Web Components for Building One-Page Sites
23/04/2015
Application overview
![Page 19: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/19.jpg)
19User-Customizable Web Components for Building One-Page Sites
23/04/2015
Application overview
![Page 20: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/20.jpg)
20User-Customizable Web Components for Building One-Page Sites
23/04/2015
Application overview
![Page 21: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/21.jpg)
21User-Customizable Web Components for Building One-Page Sites
23/04/2015
Application overview
![Page 22: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/22.jpg)
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
![Page 23: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/23.jpg)
23User-Customizable Web Components for Building One-Page Sites
23/04/2015
Application flow
![Page 24: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/24.jpg)
24
ConclusionsPart IV
![Page 25: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/25.jpg)
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.
![Page 26: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/26.jpg)
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
![Page 27: User-Customizable Web Components for Building One-Page Sites](https://reader035.fdocuments.us/reader035/viewer/2022062522/58a677781a28ab94238b45cb/html5/thumbnails/27.jpg)
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