vaadin & web components
TRANSCRIPT
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%25.7%
Phones
36.1%
Tablets
Desktop browsers
Others
2.1%
“Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones”
Daniel
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10IE 9 IE 10 Firefox
79% 80% 94% 94%Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10IE 9 IE 10 Firefox
79% 80% 94% 94%
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPhone Android
WP
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPad Android Windows
++
<input type="text" ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)
Enables designers to build web prototypes
Enables business people to build financial "apps"
<x-component></x-component>
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'This is Custom Element'; this.appendChild(div); }; var XComponent = document.registerElement('x-component', { prototype: proto });
var host = document.querySelector('#host'); var root = host.createShadowRoot(); // Create a Shadow Root var div = document.createElement('div'); div.textContent = 'This is Shadow DOM'; root.appendChild(div); // Append elements to the Shadow Root
index.html<link rel="import" href="component.html" >
component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
<template id="template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="http://webcomponents.org/img/logo.svg"> </div> </template>
<script> var template = document.querySelector('#template'); var clone = document.importNode(template.content, true); var host = document.querySelector('#host'); host.appendChild(clone); </script> <div id="host"></div>
<v-grid>Super fast lazy loading rendering engine
Mobile friendly
Complex headers and footers
Renderers
<v-grid>Sass API for theme engine
<v-component> / JS API
GWTAPI
Java Server
Automatic communication
API
AngularJSAPI
<v-absolute-layout id="absoluteLayout"> <v-label id="label" size-auto="true" :top="0px" :left="21px"> <h3>Edit customer</h3> </v-label> <v-form-layout id="formLayout" margin="" :top="69px" :right="22px" :left="20px"> <v-text-field caption="First name" id="firstName" width-full="true"></v-text-field> <v-text-field caption="Last name" id="lastName" width-full="true"></v-text-field> <v-text-field caption="Email" required="true" id="email"></v-text-field> <v-popup-date-field caption="Birth day" id="birthDay"></v-popup-date-field> <v-native-select caption="Status" id="status"></v-native-select> </v-form-layout> <v-horizontal-layout spacing="true" id="horizontalLayout" width-full="true" :right="22px" :bottom="17px" :left="20px"> <v-button style-name="primary" id="save" plain-text="">Save</v-button> <v-button id="cancel" plain-text="">Cancel</v-button> <v-button style-name="FontAwesome" id="delete" plain-text="":expand="">!</v-button> </v-horizontal-layout> </v-absolute-layout>
Summary Only works in blink
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
webcomponents.js Polyfill
http://webcomponents.org/polyfills/
Web Components Custom Elements HTML Imports Shadow DOM
DOM WeakMap Mutation Observers{
Timeline When could you really use web components
With full CSS sandbox (native)
Evergreen browsers (polyfilled)
Old browsersIE <10, Safari <6, < latest iOS/FF/Chrome/Android
Today Soonish? ∞
<polymer-element name="my-counter" attributes="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> Polymer({ counter: 0, // Default value counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } }); </script></polymer-element>
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport@JsTypepublic class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new Grid<>();
@Override public void attachedCallback() { HTMLShadow shadow = createShadowRoot(); shadow.appendChild(style); shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container); shadowPanel.add(grid); }
@JsProperty public void setDataSource(JavaScriptObject jso) { grid.setDataSource(wrapJsoDataSource(jso)); }}
Autogenerated
<v-grid>Sass API for theme engine
<v-component> / JS API
AngularJS 2 GWTAPI
Java Server
Automatic communication
API
PolymerJavaScript
GWT ElementJava
GWT Element
GWT WidgetJava
API
vaadin-components-0.1.2.zip • vaadin-components.js • Polymer HTML fies • GWT API wrappers • AngularJS support
Read more at http://vaadin.com/labsexperimental
Bower vaadin-components • vaadin-components.js • Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labsexperimental
cdn.vaadin.com • vaadin-components.js • Polymer HTML fies • AngularJS support
Read more at http://vaadin.com/labsexperimental
github.com/vaadin/components • 0.2 expected in April
• First stable version that has full Grid API • We plan to add components to project one by one
development
vaadin-widgets-7.4.1.jar • Grid Widget API
• Stable and supported • Wide browser support
• IE8+ • All the modern ones: FF, Chrome, iOS, Android, …
• Example: https://github.com/Artur-/grid-gwt
Get from http://vaadin.com/downloadstable or Maven
@joonaslehtinen Founder & CEO
slides slideshare.com/joonaslehtinen feel free to reuse :)
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