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



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>
??disruptive
Simplification
Reusability
Robustness
Enables
developers & designers
to build UIs that would
otherwise be too hard or
expensive
Component oriented web frameworks
value
proposition
Statically typed Java
Components
Automated Communication
Statically typed Java
Components
Statically typed Java
Automated Communication
Statically typed Java
Disruption
Opportunity :)
Vaadin Components
C
</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?
HTML Template
Support by browser market share
Custom Elements
Support by browser market share
Shadow DOM
Support by browser market share
HTML Import
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 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...
<v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
AngularJS
API
Autogenerated
<v-grid>
Sass API for theme engine
<v-component> / JS API
AngularJS GWT
API
Java Server
Automatic
communicat...
github.com/vaadin/components
Getting started
Designer
Vaadin Labs
vaadin.com/labs
Elements
Vaadin Labs
vaadin.com/labs
Components
Vaadin Labs
vaadin.com/labs
vaadin-components-0.1.0.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
...
vaadin-widgets-7.4.0.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 Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Vaadin Components
Nächste SlideShare
Wird geladen in …5
×

Vaadin Components

2.033 Aufrufe

Veröffentlicht am

My presentation at Jfokus 2015 about upcoming Vaadin Components and Web Components in general

Veröffentlicht in: Software
  • 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
  • Great Stuff Dr. Joonas, Please share your video presentation. Thanks
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Vaadin Components

  1. 1. Vaadin X @joonaslehtinen Founder & CEO
 

  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. ??
  16. 16. AngularJS: Spreadsheet for HTML
  17. 17. <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}!</h1> =SUM(A1:A100)
  18. 18. <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"
  19. 19. "Designed by a developer" Design driven
  20. 20. Developer productivity 
 Powerful testing
  21. 21. Web Components The next disruptive trend?
  22. 22. <x-gangnam-style> </x-gangnam-style>
  23. 23. ??disruptive
  24. 24. Simplification Reusability Robustness
  25. 25. Enables developers & designers to build UIs that would otherwise be too hard or expensive
  26. 26. Component oriented web frameworks
  27. 27. value proposition Statically typed Java Components Automated Communication Statically typed Java Components
  28. 28. Statically typed Java Automated Communication Statically typed Java
  29. 29. Disruption
  30. 30. Opportunity :)
  31. 31. Vaadin Components C
  32. 32. </v-grid></v-slider> </v-progress-bar> Vaadin Components 0.1 <v-grid><v-slider> <v-progress-bar>
  33. 33. <v-grid> Super fast lazy loading rendering engine Mobile friendly Complex headers and footers Renderers
  34. 34. Vaadin Labs • stuff is still experimental • timeline is not set
  35. 35. Automated Communication Statically typed Java Components
  36. 36. Automated Communication Statically typed Java Components Framework Components web
  37. 37. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
  38. 38. <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>
  39. 39. design.html Framework
  40. 40. design.html Framework Designer
  41. 41. design.html Framework ComponentsDesigner
  42. 42. design.html Framework ComponentsDesigner
  43. 43. Not if, but when?
  44. 44. Do web components actually work?
  45. 45. HTML Template Support by browser market share
  46. 46. Custom Elements Support by browser market share
  47. 47. Shadow DOM Support by browser market share
  48. 48. HTML Import Support by browser market share
  49. 49. Summary Only works in blink Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE
  50. 50. Do web components actually work? No, but Yes :)
  51. 51. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTML Imports Shadow DOM DOM WeakMap Mutation Observers{
  52. 52. 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? ∞
  53. 53. Building Web Components With GWT
  54. 54. <v-grid>
 193 files 32 kLOC
 17 months
 5 persons No human sacrifices ;)
 </v-grid>
  55. 55. 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)); } }
  56. 56. 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)); } }
  57. 57. 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)); } }
  58. 58. 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)); } }
  59. 59. 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)); } }
  60. 60. 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)); } }
  61. 61. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API AngularJS API
  62. 62. 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
  63. 63. github.com/vaadin/components
  64. 64. Getting started
  65. 65. Designer
  66. 66. Vaadin Labs vaadin.com/labs
  67. 67. Elements
  68. 68. Vaadin Labs vaadin.com/labs
  69. 69. Components
  70. 70. Vaadin Labs vaadin.com/labs
  71. 71. 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
  72. 72. Bower vaadin-components • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
  73. 73. cdn.vaadin.com • vaadin-components.js • Polymer HTML fies • AngularJS support Read more at http://vaadin.com/labs experim ental
  74. 74. 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
  75. 75. @joonaslehtinen Founder & CEO joonas@vaadin.com slides slideshare.com/joonaslehtinen feel free to reuse :)

×