Date post: | 06-Jan-2017 |
Category: |
Software |
Upload: | joonas-lehtinen |
View: | 12,702 times |
Download: | 0 times |
Web Components
@joonaslehtinen Founder & CEO
for Java Developers
Component based UI?
Web Components 101
Integration strategies
Component Oriented UI?
BenefitsComposition
Separation
Reusability
Rich component
oriented UI in Java?
SwingJava FX
Statically typed Java
UI Components
Applets
RPC
Stateless
JSF
XML + Java
UI Components
Multi page rendering
Glue Ajax on top
Stateful
GWT
Statically typed Java
RPC
UI Components
Stateless
Compiles to JavaScript
Vaadin ZK
Single-page rendering
Automatic communications
Statically typed Java
Stateful
UI Components
Problem solved for Java developers?
Web Java>>
Web Components 101
<x-gangnam-style> </x-gangnam-style>
Everything is an element
DOM is the Framework
<my-component></my-component>
Custom Elements
document.registerElement( 'my-component', { prototype: proto } );
Custom Elements
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'My Custom Element'; this.appendChild(div); };
Custom Elements
Custom Elements
Shadow DOM
Shadow DOM
Document<my-component> (shadow host)
Shadow border
<div>
"This is Shadow DOM"
Shadow DOM
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var div = document.createElement('div'); div.textContent = 'This is Shadow DOM'; root.appendChild(div);
Shadow DOM
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var root = this.createShadowRoot(); root.textContent = 'My Custom Element'; };
Shadow DOM
Shadow DOM
Document (light DOM)<my-component> (shadow host)
Shadow border
<div> (shadow DOM)Content border
<div> (light DOM)
Shadow DOM Dictionary
Local DOM = DOM created and managed by custom element
Shadow DOM = native way of implementing Light DOM
Light DOM = "Normal" DOM that is written to page ("view source")
Shady DOM = Local DOM imply in normal DOM by Polymer
Shadow DOM
Document (light DOM)<my-component> (host)
Shadow border
<div> (shadow/local)Content border
<div> (light DOM)
<div> (local DOM)
Content border
<div> (light DOM)
<template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>
Templates
var tmp = document.querySelector('#tmp'); var clone = document.importNode(tmp.content, true); var host = document.querySelector('#host'); host.appendChild(clone);
Templates
HTML Imports
"import com.mybusiness.MyComponent;"
but for HTML5
index.html<link rel="import" href="my-component.html">
my-component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js">
HTML Imports
Browser Support?:-?
Blink:-)
Everything pretty much works
Firefox:-|
Mozilla is committed in bringing full support, but not all of it is there yet
WebKit:-|
Shadow DOM landed on the trunk last week, but Apple is keeping mouth shut on its plans
Edge:-|
Microsoft started working on it and is committed to releasing a full support eventually
IE:-(
Guaranteed to never add support
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Browser support
Polyfills:-]
Trying to emulate it on all "modern browsers"
https://github.com/webcomponents/webcomponentsjs
*Indicates the current version of the browser, ~Indicates support may be flaky. If using Custom Elements or HTML Imports with Shadow DOM, you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
Polyfill: webcomponents.js support
Polymer
<my-counter counter="10">Points</my-counter>
Increase
PointsValue: 10
<dom-module id="my-counter">
<template> <style> /*...*/ </style> <div id="label"><content></content></div> Value: <span id="counterVal">{{counter}}</span><br> <button on-tap="{{increment}}">Increment</button> </template>
<script> … </script>
</dom-module>
Polymer({ is: 'my-counter',
properties: { counter: { type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });
Web Components in Java apps?
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
Spring
Vaadin Elements
Web Components library that seamlessly extends Polymer with
focus on building business apps
<vaadin-grid>
Render static HTML in a JSP?
<vaadin-grid> <table> <colgroup> <col header-text="Name"> <col header-text="Value"> <col header-text="Progress"> </colgroup> <tbody> <tr> <td>Project A</td><td>10000</td><td>0.8</td> </tr>...
Lose benefits
with a slow multi-page app
Setup columns
Configure grid and bind to REST API
function PagedDataSource()
< 160 lines of Ajax, paging, caching, sorting and other logic >
Render a column with progressbar
Build REST API (finally some Java ):-)
Spring is magical…
Build REST API
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
Vaadin GWT
Polymer Elements
GWT API generated for Polymer Paper and Iron elements
https://github.com/vaadin/gwt-polymer-elements
Source
Bootstrap GWT application
UI Binder Support
Widget Java Class
http://www.gwtproject.org/doc/latest/polymer-tutorial/create.html
Step-by-step tutorial
https://github.com/vaadin/gwt-api-generator
Vaadin GWT API Generator
my-component.html MyComponent.java
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
Framework
UI in Server-side Java
• Initial HTML • CSS (theme) • Images • JavaScript
1.2M total
307k
compress
135k
reduced widgetset
• name=”Joonas” • button clicked
261 bytes
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes
Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, eventually :)
Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, eventually :)
UI in Server-side Java
PaperButton.java
Communication
Construction
Event API
Recommendations For Java developers
Keep using Java based component oriented frameworks you use today.
Wrap web components to your current framework 1-by-1, but only when needed.
Consider going all-in when your target browsers and Java framework support web components natively.
@joonaslehtinen Founder & CEO
Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben
slides slideshare.com/joonaslehtinen
Hiring toVaadin Berlin