Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User-Customizable
Web Components
for Building
One-Page Sites
Pasquale.
Lisena
@polito.it
Jetmir.
Xhembulla
@polito.it
Giov...
2User-Customizable Web Components for Building One-Page Sites23/04/2015
Agenda
1. Modules VS Web Components
a. Starting Po...
3
Modules VS Web Components
Part I
4User-Customizable Web Components for Building One-Page Sites23/04/2015
Starting point
Industrial need:
One-Page Site Gene...
5User-Customizable Web Components for Building One-Page Sites23/04/2015
Starting point
All available page generator are ba...
6User-Customizable Web Components for Building One-Page Sites23/04/2015
What are Web Components?
A family of 4 W3C Specifi...
7User-Customizable Web Components for Building One-Page Sites23/04/2015
What are Web Components?
Create and use a Web Comp...
8User-Customizable Web Components for Building One-Page Sites23/04/2015
SupportofWebComponents
source: http://jonrimmer.gi...
9User-Customizable Web Components for Building One-Page Sites23/04/2015
… and with Google’s Polymer
What are Web Component...
10
The Approach:
Web Components as Modules
Part II
11User-Customizable Web Components for Building One-Page Sites23/04/2015
Design of a Component
<dom-module id="descriptive...
12User-Customizable Web Components for Building One-Page Sites23/04/2015
Design of a Component
Polymer({
is: 'descriptive-...
13User-Customizable Web Components for Building One-Page Sites23/04/2015
Design of a Component
<descriptive-content text="...
14User-Customizable Web Components for Building One-Page Sites23/04/2015
Component Manipulation
Component
text
textColor
I...
15User-Customizable Web Components for Building One-Page Sites23/04/2015
Component Manipulation
ANSWER: With Web Component...
16User-Customizable Web Components for Building One-Page Sites23/04/2015
Component Manipulation
ANSWER: With Web Component...
17
The Page Generator
Part III
18User-Customizable Web Components for Building One-Page Sites23/04/2015
Application overview
19User-Customizable Web Components for Building One-Page Sites23/04/2015
Application overview
20User-Customizable Web Components for Building One-Page Sites23/04/2015
Application overview
21User-Customizable Web Components for Building One-Page Sites23/04/2015
Application overview
22User-Customizable Web Components for Building One-Page Sites23/04/2015
Application overview
<html>
<head><!-- dependenci...
23User-Customizable Web Components for Building One-Page Sites23/04/2015
Applicationflow
24
Conclusions
Part IV
25User-Customizable Web Components for Building One-Page Sites23/04/2015
Conclusions
We used the Web Components standard i...
26User-Customizable Web Components for Building One-Page Sites23/04/2015
Conclusions
Writing and sharing components platfo...
27
This work has been presented at
Ninth International Conference on Advances in Computer-
Human Interactions (ACHI) 2016
...
Upcoming SlideShare
Loading in …5
×

User-Customizable Web Components for Building One-Page Sites

196 views

Published on

We show a client web application using Web Components as modules for generating One-Page sites in an enterprise environment.

This work has been presented at ACHI 2016.

Published in: Engineering
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

User-Customizable Web Components for Building One-Page Sites

  1. 1. 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
  2. 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
  3. 3. 3 Modules VS Web Components Part I
  4. 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. 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. 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. 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. 8. 8User-Customizable Web Components for Building One-Page Sites23/04/2015 SupportofWebComponents source: http://jonrimmer.github.io/are-we-componentized-yet/
  9. 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
  10. 10. 10 The Approach: Web Components as Modules Part II
  11. 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. 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. 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. 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. 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. 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)
  17. 17. 17 The Page Generator Part III
  18. 18. 18User-Customizable Web Components for Building One-Page Sites23/04/2015 Application overview
  19. 19. 19User-Customizable Web Components for Building One-Page Sites23/04/2015 Application overview
  20. 20. 20User-Customizable Web Components for Building One-Page Sites23/04/2015 Application overview
  21. 21. 21User-Customizable Web Components for Building One-Page Sites23/04/2015 Application overview
  22. 22. 22User-Customizable Web Components for Building One-Page Sites23/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
  23. 23. 23User-Customizable Web Components for Building One-Page Sites23/04/2015 Applicationflow
  24. 24. 24 Conclusions Part IV
  25. 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. 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. 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

×