'

Web Components for Java Developers

Понравилась презентация – покажи это...





Слайд 0

Web Components 
 for Java Developers @joonaslehtinen Founder & CEO
 



Слайд 1

Component based UI? Web Components 101 Integration strategies


Слайд 2

Component Oriented UI?


Слайд 3


Слайд 4

Benefits
 Composition Separation Reusability


Слайд 5

Rich component oriented UI in Java?


Слайд 6

RPC Applets Swing
 Java FX UI Components Stateless Statically typed Java


Слайд 7

Glue Ajax on top Multi page rendering JSF UI Components Stateful XML + Java


Слайд 8

RPC Compiles to JavaScript GWT UI Components Stateless Statically typed Java


Слайд 9

Automatic communications Single-page rendering Vaadin ZK UI Components Stateful Statically typed Java


Слайд 10

Problem solved for Java developers?


Слайд 11

>> Java Web


Слайд 12

Web Components 101


Слайд 13

<x-gangnam-style> </x-gangnam-style>


Слайд 14

Everything is an element DOM is the Framework


Слайд 15


Слайд 16

Custom Elements <my-component></my-component>


Слайд 17

Custom Elements document.registerElement( 'my-component', { prototype: proto } );


Слайд 18

Custom Elements var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'My Custom Element'; this.appendChild(div); };


Слайд 19

Custom Elements


Слайд 20

Shadow DOM


Слайд 21

Shadow DOM Document <my-component> (shadow host) Shadow border <div> "This is Shadow DOM"


Слайд 22

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);


Слайд 23

Shadow DOM var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var root = this.createShadowRoot(); root.textContent = 'My Custom Element'; };


Слайд 24

Shadow DOM


Слайд 25

Shadow DOM Document (light DOM) <my-component> (shadow host) Shadow border <div> (shadow DOM) Content border <div> (light DOM)


Слайд 26

Shadow DOM Dictionary Light DOM = "Normal" DOM that is written to page ("view source") Local DOM = DOM created and managed by custom element Shadow DOM = native way of implementing Light DOM Shady DOM = Local DOM imply in normal DOM by Polymer


Слайд 27

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)


Слайд 28

Templates <template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>


Слайд 29

Templates var tmp = document.querySelector('#tmp'); var clone = document.importNode(tmp.content, true); var host = document.querySelector('#host'); host.appendChild(clone);


Слайд 30

HTML Imports "import com.mybusiness.MyComponent;" but for HTML5


Слайд 31

HTML Imports index.html <link rel="import" href="my-component.html"> my-component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js">


Слайд 32

:-? Browser Support?


Слайд 33

:-) Blink Everything pretty much works


Слайд 34

:-| Firefox Mozilla is committed in bringing full support, but not all of it is there yet


Слайд 35

:-| WebKit Shadow DOM landed on the trunk last week, but Apple is keeping mouth shut on its plans


Слайд 36

:-| Edge Microsoft started working on it and is committed to releasing a full support eventually


Слайд 37

:-( IE Guaranteed to never add support


Слайд 38

Browser support CHROME HTML Template Custom Element Shadow DOM HTML Import OPERA FIREFOX SAFARI IE


Слайд 39

:-] Polyfills Trying to emulate it on all "modern browsers"


Слайд 40

Polyfill: webcomponents.js support *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. https://github.com/webcomponents/webcomponentsjs


Слайд 41


Слайд 42

Polymer


Слайд 43

Points Value: 10 Increase <my-counter counter="10">Points</my-counter>


Слайд 44

<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>


Слайд 45

Polymer({ is: 'my-counter',
 properties: { counter: { type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });


Слайд 46


Слайд 47

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


Слайд 48

Web Components in Java apps?


Слайд 49

1) REST API in Java 2) Wrap with GWT 3) Bind to server-side Java


Слайд 50

1) REST API in Java 2) Wrap with GWT 3) Bind to server-side Java


Слайд 51

Spring


Слайд 52

Vaadin Elements Web Components library that seamlessly extends Polymer with focus on building business apps


Слайд 53

<vaadin-grid>


Слайд 54

Render static HTML in a JSP? Lose benefits with a slow multi-page app <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> ...


Слайд 55

Setup columns


Слайд 56


Слайд 57

Configure grid and bind to REST API


Слайд 58

function PagedDataSource() < 160 lines of Ajax, paging, caching, sorting and other logic >


Слайд 59

Render a column with progressbar


Слайд 60

Spring is magical… :-) Build REST API (finally some Java )


Слайд 61

Build REST API


Слайд 62

https://github.com/vaadinmarcus/vaadin-grid-rest


Слайд 63

1) REST API in Java 2) Wrap with GWT 3) Bind to server-side Java


Слайд 64


Слайд 65

Vaadin GWT Polymer Elements GWT API generated for Polymer Paper and Iron elements


Слайд 66

Source https://github.com/vaadin/ gwt-polymer-elements


Слайд 67

Bootstrap GWT application


Слайд 68

UI Binder Support


Слайд 69

Widget Java Class


Слайд 70

Step-by-step tutorial http://www.gwtproject.org/doc/latest/ polymer-tutorial/create.html


Слайд 71

Vaadin GWT API Generator my-component.html MyComponent.java https://github.com/vaadin/gwt-api-generator


Слайд 72

1) REST API in Java 2) Wrap with GWT 3) Bind to server-side Java


Слайд 73

Framework


Слайд 74

UI in Server-side Java


Слайд 75

• • • • Initial HTML CSS (theme) Images JavaScript 1.2M total
 compress 307k reduced widgetset 135k


Слайд 76


Слайд 77

• name=”Joonas” • button clicked 261 bytes



Слайд 78


Слайд 79

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



Слайд 80

Connecting web components Option 1: AbstractJavaScriptComponent Option 2: Server-side Elements Add-on Option 3: Vaadin 8, eventually :)


Слайд 81

Connecting web components Option 1: AbstractJavaScriptComponent Option 2: Server-side Elements Add-on Option 3: Vaadin 8, eventually :)


Слайд 82

UI in Server-side Java


Слайд 83

PaperButton.java


Слайд 84

Communication


Слайд 85

Construction


Слайд 86

Event API


Слайд 87


Слайд 88

Recommendations For Java developers


Слайд 89

Keep using Java based component oriented frameworks you use today.


Слайд 90

Wrap web components to your current framework 1-by-1, but only when needed.


Слайд 91

Consider going all-in when your target browsers and Java framework support web components natively.


Слайд 92

Hiring to Vaadin B erli slides slideshare.com/joonaslehtinen n @joonaslehtinen Founder & CEO


Слайд 93


×

HTML:





Ссылка: