Vaadin Components
•
2 likes•2,319 views
This document introduces the Vaadin framework, which is a user interface framework for building rich web applications. It discusses how Vaadin enables developer productivity through features like user interface components, automated communication between the client and server, and support for multiple devices. The document also covers trends in web frameworks like AngularJS and web components, and how Vaadin is exploring these trends through new components in Vaadin Labs and building web components with GWT.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Vaadin Components
Similar to Vaadin Components (20)
More from Joonas Lehtinen
More from Joonas Lehtinen (20)
Recently uploaded
Recently uploaded (20)
Vaadin Components
- 3. User interface framework for rich web applications
- 6. htmljava
- 10. 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 + +
- 11. How does server-side UI work, really?
- 13. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
- 15. • name=”Joonas” • button clicked 261 bytes
- 17. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
- 19. Client - Model View Whatever Disruptive trend today
- 21. AngularJS GWT
- 22. ??
- 25. <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"
- 28. Web Components The next disruptive trend?
- 32. ??disruptive
- 34. Enables developers & designers to build UIs that would otherwise be too hard or expensive
- 35. Component oriented web frameworks
- 36. value proposition Statically typed Java Components Automated Communication Statically typed Java Components
- 37. Statically typed Java Automated Communication Statically typed Java
- 39. Disruption
- 40. Opportunity :)
- 42. </v-grid></v-slider> </v-progress-bar> Vaadin Components 0.1 <v-grid><v-slider> <v-progress-bar>
- 50. <v-grid> Super fast lazy loading rendering engine Mobile friendly Complex headers and footers Renderers
- 51. Vaadin Labs • stuff is still experimental • timeline is not set
- 52. Automated Communication Statically typed Java Components
- 53. Automated Communication Statically typed Java Components Framework Components web
- 54. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
- 56. <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>
- 64. Not if, but when?
- 65. Do web components actually work?
- 67. HTML Template Support by browser market share
- 68. Custom Elements Support by browser market share
- 69. Shadow DOM Support by browser market share
- 70. HTML Import Support by browser market share
- 71. Summary Only works in blink Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE
- 72. Do web components actually work? No, but Yes :)
- 73. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTML Imports Shadow DOM DOM WeakMap Mutation Observers{
- 75. 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? ∞
- 76. Building Web Components With GWT
- 77. <v-grid> 193 files 32 kLOC 17 months 5 persons No human sacrifices ;) </v-grid>
- 78. 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)); } }
- 79. 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)); } }
- 80. 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)); } }
- 81. 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)); } }
- 82. 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)); } }
- 83. 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)); } }
- 84. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
- 85. Autogenerated <v-grid> Sass API for theme engine <v-component> / JS API AngularJS GWT API Java Server Automatic communication API Polymer JavaScript GWT Element Java GWT Element GWT Widget Java API
- 87. Getting started
- 88. Designer
- 90. Elements
- 92. Components
- 94. vaadin-components-0.1.0.zip • vaadin-components.js • Polymer HTML fies • GWT API wrappers • AngularJS support Read more at http://vaadin.com/labs experim ental
- 95. Bower vaadin-components • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
- 96. cdn.vaadin.com • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
- 97. vaadin-widgets-7.4.0.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/downloadbeta or Maven