web components for java developers
TRANSCRIPT
![Page 1: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/1.jpg)
Web Components
@joonaslehtinen Founder & CEO
for Java Developers
![Page 2: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/2.jpg)
Component based UI?
Web Components 101
Integration strategies
![Page 3: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/3.jpg)
Component Oriented UI?
![Page 5: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/5.jpg)
BenefitsComposition
Separation
Reusability
![Page 6: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/6.jpg)
Rich component
oriented UI in Java?
![Page 7: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/7.jpg)
SwingJava FX
Statically typed Java
UI Components
Applets
RPC
Stateless
![Page 8: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/8.jpg)
JSF
XML + Java
UI Components
Multi page rendering
Glue Ajax on top
Stateful
![Page 9: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/9.jpg)
GWT
Statically typed Java
RPC
UI Components
Stateless
Compiles to JavaScript
![Page 10: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/10.jpg)
Vaadin ZK
Single-page rendering
Automatic communications
Statically typed Java
Stateful
UI Components
![Page 11: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/11.jpg)
Problem solved for Java developers?
![Page 12: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/12.jpg)
Web Java>>
![Page 13: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/13.jpg)
Web Components 101
![Page 14: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/14.jpg)
<x-gangnam-style> </x-gangnam-style>
![Page 15: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/15.jpg)
Everything is an element
DOM is the Framework
![Page 16: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/16.jpg)
![Page 17: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/17.jpg)
<my-component></my-component>
Custom Elements
![Page 18: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/18.jpg)
document.registerElement( 'my-component', { prototype: proto } );
Custom Elements
![Page 19: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/19.jpg)
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'My Custom Element'; this.appendChild(div); };
Custom Elements
![Page 20: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/20.jpg)
Custom Elements
![Page 21: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/21.jpg)
Shadow DOM
![Page 22: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/22.jpg)
Shadow DOM
Document<my-component> (shadow host)
Shadow border
<div>
"This is Shadow DOM"
![Page 23: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/23.jpg)
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);
![Page 24: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/24.jpg)
Shadow DOM
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var root = this.createShadowRoot(); root.textContent = 'My Custom Element'; };
![Page 25: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/25.jpg)
Shadow DOM
![Page 26: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/26.jpg)
Shadow DOM
Document (light DOM)<my-component> (shadow host)
Shadow border
<div> (shadow DOM)Content border
<div> (light DOM)
![Page 27: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/27.jpg)
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
![Page 28: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/28.jpg)
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)
![Page 29: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/29.jpg)
<template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>
Templates
![Page 30: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/30.jpg)
var tmp = document.querySelector('#tmp'); var clone = document.importNode(tmp.content, true); var host = document.querySelector('#host'); host.appendChild(clone);
Templates
![Page 31: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/31.jpg)
HTML Imports
"import com.mybusiness.MyComponent;"
but for HTML5
![Page 32: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/32.jpg)
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
![Page 33: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/33.jpg)
Browser Support?:-?
![Page 34: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/34.jpg)
Blink:-)
Everything pretty much works
![Page 35: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/35.jpg)
Firefox:-|
Mozilla is committed in bringing full support, but not all of it is there yet
![Page 36: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/36.jpg)
WebKit:-|
Shadow DOM landed on the trunk last week, but Apple is keeping mouth shut on its plans
![Page 37: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/37.jpg)
Edge:-|
Microsoft started working on it and is committed to releasing a full support eventually
![Page 38: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/38.jpg)
IE:-(
Guaranteed to never add support
![Page 39: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/39.jpg)
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Browser support
![Page 40: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/40.jpg)
Polyfills:-]
Trying to emulate it on all "modern browsers"
![Page 41: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/41.jpg)
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
![Page 42: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/42.jpg)
![Page 43: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/43.jpg)
Polymer
![Page 44: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/44.jpg)
<my-counter counter="10">Points</my-counter>
Increase
PointsValue: 10
![Page 45: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/45.jpg)
<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>
![Page 46: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/46.jpg)
Polymer({ is: 'my-counter',
properties: { counter: { type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });
![Page 47: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/47.jpg)
![Page 49: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/49.jpg)
Web Components in Java apps?
![Page 50: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/50.jpg)
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
![Page 51: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/51.jpg)
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
![Page 52: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/52.jpg)
Spring
![Page 53: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/53.jpg)
Vaadin Elements
Web Components library that seamlessly extends Polymer with
focus on building business apps
![Page 54: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/54.jpg)
<vaadin-grid>
![Page 55: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/55.jpg)
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
![Page 56: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/56.jpg)
Setup columns
![Page 57: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/57.jpg)
![Page 58: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/58.jpg)
Configure grid and bind to REST API
![Page 59: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/59.jpg)
function PagedDataSource()
< 160 lines of Ajax, paging, caching, sorting and other logic >
![Page 60: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/60.jpg)
Render a column with progressbar
![Page 61: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/61.jpg)
Build REST API (finally some Java ):-)
Spring is magical…
![Page 62: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/62.jpg)
Build REST API
![Page 64: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/64.jpg)
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
![Page 65: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/65.jpg)
![Page 66: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/66.jpg)
Vaadin GWT
Polymer Elements
GWT API generated for Polymer Paper and Iron elements
![Page 67: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/67.jpg)
https://github.com/vaadin/gwt-polymer-elements
Source
![Page 68: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/68.jpg)
Bootstrap GWT application
![Page 69: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/69.jpg)
UI Binder Support
![Page 70: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/70.jpg)
Widget Java Class
![Page 71: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/71.jpg)
http://www.gwtproject.org/doc/latest/polymer-tutorial/create.html
Step-by-step tutorial
![Page 72: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/72.jpg)
https://github.com/vaadin/gwt-api-generator
Vaadin GWT API Generator
my-component.html MyComponent.java
![Page 73: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/73.jpg)
1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java
![Page 74: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/74.jpg)
Framework
![Page 75: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/75.jpg)
UI in Server-side Java
![Page 76: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/76.jpg)
• Initial HTML • CSS (theme) • Images • JavaScript
1.2M total
307k
compress
135k
reduced widgetset
![Page 77: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/77.jpg)
![Page 78: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/78.jpg)
• name=”Joonas” • button clicked
261 bytes
![Page 79: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/79.jpg)
![Page 80: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/80.jpg)
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes
![Page 81: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/81.jpg)
Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, eventually :)
![Page 82: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/82.jpg)
Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, eventually :)
![Page 83: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/83.jpg)
UI in Server-side Java
![Page 84: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/84.jpg)
PaperButton.java
![Page 85: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/85.jpg)
Communication
![Page 86: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/86.jpg)
Construction
![Page 87: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/87.jpg)
Event API
![Page 88: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/88.jpg)
![Page 89: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/89.jpg)
Recommendations For Java developers
![Page 90: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/90.jpg)
Keep using Java based component oriented frameworks you use today.
![Page 91: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/91.jpg)
Wrap web components to your current framework 1-by-1, but only when needed.
![Page 92: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/92.jpg)
Consider going all-in when your target browsers and Java framework support web components natively.
![Page 93: Web Components for Java Developers](https://reader034.vdocuments.mx/reader034/viewer/2022051300/586f86391a28ab54768b5481/html5/thumbnails/93.jpg)
@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