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.
Web Components
@joonaslehtinen
Founder & CEO





for Java Developers
Component based UI?
Web Components 101
Integration strategies
Component
Oriented UI?
Benefits

Composition
Separation
Reusability
Rich component
oriented UI in Java?
Swing

Java 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('d...
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.createElemen...
Shadow DOM
var proto =
Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var root = this.createSh...
Shadow DOM
Shadow DOM
Document (light DOM)
<my-component> (shadow host)
Shadow border
<div> (shadow DOM)
Content border
<div> (light ...
Shadow DOM Dictionary
Local DOM = DOM created and managed by custom element
Shadow DOM = native way of implementing Light ...
Shadow DOM
Document (light DOM)
<my-component> (host)
Shadow border
<div> (shadow/local)
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.querySel...
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">
<sc...
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 ...
Polymer
<my-counter counter="10">Points</my-counter>
Increase
Points
Value: 10
<dom-module id="my-counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id...
Polymer({
is: 'my-counter',

properties: {
counter: {
type: Integer,
value: 0, // Default value
}
counterChanged: function...
https://www.polymer-project.org/1.0/
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 head...
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
https://github.com/vaadin-
marcus/vaadin-grid-rest
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, ...
Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, ...
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
slides
slideshare.com/joonaslehtinen
Hiring to
Vaadin Berlin
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Web Components for Java Developers
Upcoming SlideShare
Loading in …5
×

Web Components for Java Developers

15,996 views

Published on

101 to Web Components standards
Integration strategies for GWT, Vaadin Framework and Spring

Presentation from CodeMotion Berlin 2015

Published in: Software, Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi All, We are planning to start new Salesforce Online batch on this week... If any one interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here : http://www.keylabstraining.com/salesforce-online-training-hyderabad-bangalore
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi All, We are planning to start new devops online batch on this week... If any one interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here : http://www.keylabstraining.com/devops-online-training-tutorial
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Components for Java Developers

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

  72. • name=”Joonas” • button clicked 261 bytes
 • Add notification 267 bytes

  73. Connecting web components Option 1: AbstractJavaScriptComponent Option 2: Server-side Elements Add-on Option 3: Vaadin 8, eventually :)
  74. Connecting web components Option 1: AbstractJavaScriptComponent Option 2: Server-side Elements Add-on Option 3: Vaadin 8, eventually :)
  75. UI in Server-side Java
  76. PaperButton.java
  77. Communication
  78. Construction
  79. Event API
  80. Recommendations For Java developers
  81. Keep using Java based component oriented frameworks you use today.
  82. Wrap web components to your current framework 1-by-1, but only when needed.
  83. Consider going all-in when your target browsers and Java framework support web components natively.
  84. @joonaslehtinen Founder & CEO slides slideshare.com/joonaslehtinen Hiring to Vaadin Berlin

×