Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
https://www.polymer-project.org/1.0/
Nächste SlideShare
Wird geladen in …5
×

https://www.polymer-project.org/1.0/ Web Components for Java Developers

20.068 Aufrufe

Veröffentlicht am

https://www.polymer-project.org/1.0/

Veröffentlicht in: Software, Technologie
  • How to start a wildly profitable 7 figure marketing business and get your first commission check tonight, click here ➤➤ http://ishbv.com/j1r2c/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Doctor's 2-Minute Ritual For Shocking Daily Belly Fat Loss! Watch This Video ★★★ http://scamcb.com/bkfitness3/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Why is my hair falling out? 9 triggers of female hair loss ●●● http://t.cn/AiHip2fH
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Memory Improvement: How To Improve Your Memory In Just 30 Days, click here.. ♣♣♣ https://bit.ly/2GEWG9T
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How One Woman Discovered the Female Fat-Loss Code Missed by Modern Medicine And Lost 84 pounds Using a Simple 2-Step Ritual That Guarantees Shocking Daily Weight Loss &gt;&gt; ●●● http://t.cn/AiYhcYmI
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×