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.
Vaadin
X @joonaslehtinen
Founder & CEO



and

Web Components
Introduction to
Vaadin Framework
User interface
framework for rich
web applications
User Interface
Components
Developer
Productivity
Rich
UX
htmljava
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Brow...
How does server-side
UI work, really?
• 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

Trends changing
Web Frameworks
Client -
Model View Whatever

Disruptive trend today
AngularJS
GWT
AngularJS:
Spreadsheet
for HTML
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)
Enables
designers
to build
web prototyp...
"Designed by
a developer"
Design
driven
Developer productivity


Powerful testing
Web Components
The next disruptive trend?
<x-gangnam-style>
</x-gangnam-style>
<x-component></x-component>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div...
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document...
index.html
<link rel="import" href="component.html" >
component.html
<link rel="stylesheet" href="css/style.css">
<script ...
<template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.sv...
??disruptive
Simplification
Reusability
Robustness
Enables
developers & designers
to build UIs that would
otherwise be too hard or
expensive
Component oriented web frameworks
Statically typed Java
Components
Automated Communication
Statically typed Java
Components
Statically typed Java
Automated Communication
Statically typed Java
Disruption
Opportunity :)
Vaadin Components
C
Demos
</v-grid></v-slider> </v-progress-bar>
Vaadin Components 0.1
<v-grid><v-slider> <v-progress-bar>
<v-grid>
Super fast
lazy loading
rendering engine
Mobile friendly
Complex headers and footers
Renderers
Vaadin Labs
• stuff is still experimental
• timeline is not set
Automated Communication
Statically typed Java
Components
Automated Communication
Statically typed Java
Components
Framework
Components web
<v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
AngularJS
API
<v-absolute-layout id="absoluteLayout">
<v-label id="label" size-auto="true" :top="0px" :left="21px">
<h3>Edit customer</h...
design.html Framework
design.html Framework
Designer
design.html Framework
ComponentsDesigner
design.html Framework
ComponentsDesigner
Not if, but when?
Do web components
actually work?
Custom Elements
Support by browser market share
Shadow DOM
Support by browser market share
HTML Import
Support by browser market share
HTML Template
Support by browser market share
Summary
Only works in blink
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Do web components
actually work?
No, but Yes :)
webcomponents.js
Polyfill
http://webcomponents.org/polyfills/
Web Components
Custom Elements
HTML Imports
Shadow DOM
DOM
Wea...
Timeline
When could you really use web components
With full CSS sandbox (native)
Evergreen browsers (polyfilled)
Old brows...
Building Web Components
With Polymer
<my-counter counter="10">Points</my-counter>
<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></co...
Building Web Components
With GWT
<v-grid>

193 files
32 kLOC

17 months

5 persons
No human sacrifices ;)

</v-grid>
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype im...
Autogenerated
<v-grid>
Sass API for theme engine
<v-component> / JS API
AngularJS 2 GWT
API
Java Server
Automatic
communic...
Getting started
Designer
Vaadin Labs
vaadin.com/labs
Elements
Vaadin Labs
vaadin.com/labs
Components
Vaadin Labs
vaadin.com/labs
vaadin-components-0.1.2.zip
• vaadin-components.js
• Polymer HTML fies
• GWT API wrappers
• AngularJS support
Read more at...
Bower vaadin-components
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs...
cdn.vaadin.com
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs
experim
...
github.com/vaadin/components
• 0.2 expected in April
• First stable version that has full Grid API
• We plan to add compon...
vaadin-widgets-7.4.1.jar
• Grid Widget API
• Stable and supported
• Wide browser support
• IE8+
• All the modern ones: FF,...
@joonaslehtinen
Founder & CEO
joonas@vaadin.com
slides
slideshare.com/joonaslehtinen
feel free to reuse :)
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Vaadin & Web Components
Nächste SlideShare
Wird geladen in …5
×

Vaadin & Web Components

2.277 Aufrufe

Veröffentlicht am

My presentation at DevNexus 2015 on how Vaadin will be leveraging Web Components, Polymer and Angular JS 2 in the future.

Veröffentlicht in: Technologie
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Vaadin & Web Components

  1. 1. Vaadin X @joonaslehtinen Founder & CEO
 
 and
 Web Components
  2. 2. Introduction to Vaadin Framework
  3. 3. User interface framework for rich web applications
  4. 4. User Interface Components
  5. 5. Developer Productivity Rich UX
  6. 6. htmljava
  7. 7. What kind of devices does your app support? 98.1% 3Desktop browsers 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 10 IE 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 10 IE 9 IE 10 Firefox 79% 80% 94% 94% s your app support? 25.7% Phones 36.1% O thers2.1% “Since gw in the enterp explain why tab popular than supp phones” Daniel iPhone Android W P pplication UI for r 98% of apps overtaken the num ber rope. 36.1% Tablets “Since gwt is used extensi in the enterprise, this m explain why tablets popular than su phones” iPadAndroid W indow s + +
  8. 8. How does server-side UI work, really?
  9. 9. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total
 307k compress 135k reduced widgetset
  10. 10. • name=”Joonas” • button clicked 261 bytes

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

  12. 12. Trends changing Web Frameworks
  13. 13. Client - Model View Whatever
 Disruptive trend today
  14. 14. AngularJS GWT
  15. 15. AngularJS: Spreadsheet for HTML
  16. 16. <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}!</h1> =SUM(A1:A100)
  17. 17. <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"
  18. 18. "Designed by a developer" Design driven
  19. 19. Developer productivity 
 Powerful testing
  20. 20. Web Components The next disruptive trend?
  21. 21. <x-gangnam-style> </x-gangnam-style>
  22. 22. <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 });
  23. 23. 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
  24. 24. index.html <link rel="import" href="component.html" > component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
  25. 25. <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>
  26. 26. ??disruptive
  27. 27. Simplification Reusability Robustness
  28. 28. Enables developers & designers to build UIs that would otherwise be too hard or expensive
  29. 29. Component oriented web frameworks
  30. 30. Statically typed Java Components Automated Communication Statically typed Java Components
  31. 31. Statically typed Java Automated Communication Statically typed Java
  32. 32. Disruption
  33. 33. Opportunity :)
  34. 34. Vaadin Components C
  35. 35. Demos
  36. 36. </v-grid></v-slider> </v-progress-bar> Vaadin Components 0.1 <v-grid><v-slider> <v-progress-bar>
  37. 37. <v-grid> Super fast lazy loading rendering engine Mobile friendly Complex headers and footers Renderers
  38. 38. Vaadin Labs • stuff is still experimental • timeline is not set
  39. 39. Automated Communication Statically typed Java Components
  40. 40. Automated Communication Statically typed Java Components Framework Components web
  41. 41. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
  42. 42. <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>
  43. 43. design.html Framework
  44. 44. design.html Framework Designer
  45. 45. design.html Framework ComponentsDesigner
  46. 46. design.html Framework ComponentsDesigner
  47. 47. Not if, but when?
  48. 48. Do web components actually work?
  49. 49. Custom Elements Support by browser market share
  50. 50. Shadow DOM Support by browser market share
  51. 51. HTML Import Support by browser market share
  52. 52. HTML Template Support by browser market share
  53. 53. Summary Only works in blink Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE
  54. 54. Do web components actually work? No, but Yes :)
  55. 55. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTML Imports Shadow DOM DOM WeakMap Mutation Observers{
  56. 56. Timeline When could you really use web components With full CSS sandbox (native) Evergreen browsers (polyfilled) Old browsers
 IE <10, Safari <6, < latest iOS/FF/Chrome/Android Today Soonish? ∞
  57. 57. Building Web Components With Polymer
  58. 58. <my-counter counter="10">Points</my-counter>
  59. 59. <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>
  60. 60. Building Web Components With GWT
  61. 61. <v-grid>
 193 files 32 kLOC
 17 months
 5 persons No human sacrifices ;)
 </v-grid>
  62. 62. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  63. 63. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  64. 64. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  65. 65. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  66. 66. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  67. 67. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType public 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)); } }
  68. 68. Autogenerated <v-grid> Sass API for theme engine <v-component> / JS API AngularJS 2 GWT API Java Server Automatic communication API Polymer JavaScript GWT Element Java GWT Element GWT Widget Java API
  69. 69. Getting started
  70. 70. Designer
  71. 71. Vaadin Labs vaadin.com/labs
  72. 72. Elements
  73. 73. Vaadin Labs vaadin.com/labs
  74. 74. Components
  75. 75. Vaadin Labs vaadin.com/labs
  76. 76. vaadin-components-0.1.2.zip • vaadin-components.js • Polymer HTML fies • GWT API wrappers • AngularJS support Read more at http://vaadin.com/labs experim ental
  77. 77. Bower vaadin-components • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
  78. 78. cdn.vaadin.com • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
  79. 79. 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 developm ent
  80. 80. 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
  81. 81. @joonaslehtinen Founder & CEO joonas@vaadin.com slides slideshare.com/joonaslehtinen feel free to reuse :)

×