Downloaded 33 times
Uploaded byJoonas Lehtinen
Vaadin & Web Components
The document presents an introduction to the Vaadin framework, a user interface framework for developing rich web applications, highlighting its support for various devices and browsers. It discusses trends in web frameworks, the concept of web components, and the advantages of using Vaadin components for enhanced developer productivity. Additionally, it covers technical details on building web components with GWT and Polymer, and provides resources for developers to explore Vaadin's capabilities further.
More Related Content
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Vaadin & Web Components
- 1. Vaadin X @joonaslehtinen Founder &CEO and Web Components
- 2.
- 3. User interface framework forrich web applications
- 4.
- 5.
- 6.
- 11. What kind ofdevices 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 + +
- 12. How does server-side UIwork, really?
- 14. • Initial HTML •CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
- 15. • name=”Joonas” • buttonclicked 261 bytes
- 17. • name=”Joonas” • buttonclicked 261 bytes • Add notification 267 bytes
- 18.
- 19. Client - Model ViewWhatever Disruptive trend today
- 21.
- 22.
- 23.
- 24. <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}!</h1> =SUM(A1:A100) Enables designers tobuild web prototypes Enables business people to build financial "apps"
- 25.
- 26.
- 27. Web Components The nextdisruptive trend?
- 29.
- 31. <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 });
- 32. 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
- 33. index.html <link rel="import" href="component.html"> component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
- 34. <template id="template"> <style> ... </style> <div> <h1>Web Components</h1> <imgsrc="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>
- 35.
- 36.
- 37. Enables developers & designers tobuild UIs that would otherwise be too hard or expensive
- 38. Component oriented webframeworks
- 39. Statically typed Java Components AutomatedCommunication Statically typed Java Components
- 40. Statically typed Java AutomatedCommunication Statically typed Java
- 42.
- 43.
- 44.
- 45.
- 46. </v-grid></v-slider> </v-progress-bar> Vaadin Components0.1 <v-grid><v-slider> <v-progress-bar>
- 54. <v-grid> Super fast lazy loading renderingengine Mobile friendly Complex headers and footers Renderers
- 55. Vaadin Labs • stuffis still experimental • timeline is not set
- 56. Automated Communication Statically typedJava Components
- 57. Automated Communication Statically typedJava Components Framework Components web
- 58. <v-grid> Sass API fortheme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
- 60. <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>
- 61.
- 65.
- 66.
- 67.
- 68. Not if, butwhen?
- 69.
- 71. Custom Elements Support bybrowser market share
- 72. Shadow DOM Support bybrowser market share
- 73. HTML Import Support bybrowser market share
- 74. HTML Template Support bybrowser market share
- 75. Summary Only works inblink Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE
- 76. Do web components actuallywork? No, but Yes :)
- 77. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTMLImports Shadow DOM DOM WeakMap Mutation Observers{
- 79. Timeline When could youreally use web components With full CSS sandbox (native) Evergreen browsers (polyfilled) Old browsers IE <10, Safari <6, < latest iOS/FF/Chrome/Android Today Soonish? ∞
- 80. Building Web Components WithPolymer
- 81.
- 82. <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>
- 83.
- 84. <v-grid> 193 files 32 kLOC 17months 5 persons No human sacrifices ;) </v-grid>
- 85. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 86. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 87. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 88. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 89. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 90. Elements.registerElement("v-grid", new WCVGrid()); @JsExport @JsType publicclass 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)); } }
- 91. Autogenerated <v-grid> Sass API fortheme 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
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99. vaadin-components-0.1.2.zip • vaadin-components.js • PolymerHTML fies • GWT API wrappers • AngularJS support Read more at http://vaadin.com/labs experim ental
- 100. Bower vaadin-components • vaadin-components.js •Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
- 101. cdn.vaadin.com • vaadin-components.js • PolymerHTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
- 102. github.com/vaadin/components • 0.2 expectedin April • First stable version that has full Grid API • We plan to add components to project one by one developm ent
- 103. vaadin-widgets-7.4.1.jar • Grid WidgetAPI • 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
- 104.