Founder & CEO

Transcription

1 X Founder & CEO

2 Introduction to Vaadin Framework

3 User interface framework for rich web applications

4 User Interface Components

5 Developer Rich Productivity UX

6 java html

7

8

9

10 Desktop browsers. er 6/ % IE 6/7 Safari Opera IE 8 14% 18% 36% 54% Tablets p IE 9 IE 10 + Chrome Firefox 79% 80% 94% 94% Phones iphone Daniel ipad Android Android 36.1% Windows 25.7% WP pho

11 How does server-side UI work, really?

12

13 Initial HTML CSS (theme) Images JavaScript 1.2M total compress 307k reduced widgetset 135k

14

15 name= Joonas button clicked 261 bytes

16

17 name= Joonas button clicked 261 bytes Add notification 267 bytes

18 Trends changing Web Frameworks

19 Client - Model View Whatever Disruptive trend today

20

21 AngularJS GWT

22 ??

23 AngularJS: Spreadsheet for HTML

24 =SUM(A1:A100) <input type="text" ng-model="yourname"> <h1>hello {{yourname}}!</h1>

25 Enables =SUM(A1:A100) business people to build financial "apps" <input type="text" Enables ng-model="yourname"> designers to build web prototypes <h1>hello {{yourname}}!</h1>

26 Design driven "Designed by a developer"

27 Developer productivity Powerful testing

28 Web Components The next disruptive trend?

29

30 <x-gangnam-style> </x-gangnam-style>

31

32 ?? disruptive

33 Simplification Reusability Robustness

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 Automated Communication Statically typed Java Statically typed Java

38

39 Disruption

40 Opportunity :)

41 CVaadin Components

42 Vaadin Components 0.1 <v-slider> <v-grid> <v-progress-bar> </v-slider> </v-grid> </v-progress-bar>

43

44

45

46

47

48

49

50 Super fast lazy loading Mobile friendly rendering engine <v-grid> Renderers Complex headers and footers

51 Vaadin Labs stuff is still experimental timeline is not set

52 Automated Communication Statically typed Java Components

53 Automated Communication Framework Statically typed Java Components web Components

54 Sass API for theme engine <v-component> <v-grid> / JS API AngularJS API GWT API Automatic communication Java Server API

55

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=" " required="true" id=" "></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>

57 design.html Framework

58

59

60

61 design.html Framework Designer

62 design.html Framework Designer Components

63 design.html Framework Designer Components

64 Not if, but when?

65 Do web components actually work?

66

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 CHROME OPERA FIREFOX SAFARI IE HTML Template Custom Element Shadow DOM HTML Import

72 Do web components actually work? No, but Yes :)

73 Web Components Custom Elements webcomponents.js Polyfill HTML Imports Shadow DOM DOM WeakMap {Mutation Observers

74

75 Timeline When could you really use web components Today Soonish? Evergreen browsers (polyfilled) With full CSS sandbox (native) Old browsers IE <10, Safari <6, < latest ios/ff/chrome/android

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", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

79 Elements.registerElement("v-grid", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

80 Elements.registerElement("v-grid", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

81 Elements.registerElement("v-grid", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

82 Elements.registerElement("v-grid", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

83 Elements.registerElement("v-grid", public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached { private Grid<JsArrayMixed> grid = new public void attachedcallback() { HTMLShadow shadow = createshadowroot(); shadow.appendchild(style); shadow.appendchild(container); } Panel shadowpanel = wrapaswidget(container); shadowpanel.add(grid); public void setdatasource(javascriptobject jso) { grid.setdatasource(wrapjsodatasource(jso)); }

84 Sass API for theme engine <v-component> <v-grid> / JS API AngularJS API GWT API Automatic communication Java Server API

85 JavaScript Polymer Java GWT Element Java GWT Widget GWT Element Sass API for theme engine <v-component> <v-grid> / JS API AngularJS API GWT API Automatic communication Java Server API Autogenerated

86 github.com/vaadin/components

87 Getting started

88 Designer

89 Vaadin Labs vaadin.com/labs

90 Elements

91 Vaadin Labs vaadin.com/labs

92 Components

93 Vaadin Labs vaadin.com/labs

94 vaadin-components zip vaadin-components.js Polymer HTML fies GWT API wrappers AngularJS support experimental Read more at

95 Bower vaadin-components vaadin-components.js Polymer HTML fies AngularJS support experimental Read more at

96 cdn.vaadin.com vaadin-components.js Polymer HTML fies AngularJS support experimental Read more at

97 vaadin-widgets jar Grid Widget API Stable and supported Wide browser support IE8+ All the modern ones: FF, Chrome, ios, Android, Example: beta Get from or Maven

98 slides slideshare.com/joonaslehtinen feel free to reuse Founder & CEO