My Vaadin 7 presentation - JavaOne Russia 2013 edition

1. Vaadin
7today
@joonaslehtinen
Founder & CEO

2. Intro to
Vaadin
new Label(“Hello world”)

3. New in
7

4. Getting
started
QA

6. User interface
framework for rich
web applications

7. Building blocks

9. htmljava

10. Why on earth?

12. expectations

13. reality

14. businessconsumer
“million” users “500” users
>>100,000€ / view 5,000€ / view
10 views
1€/user
50 views
500€/user

15. Challenge
How to build consumer
grade UX with business
system budget

16. How?

17. 123Key Ideas

18. 1Rich
Components

19. User Inteface
Data Source
Theme

25. 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%
es
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
8
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

26. 350 add-on
components

28. User Inteface
Data Source
Theme

33. User Inteface
Data Source
Theme

36. InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...

37. 2Server + Client

38. Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript

39. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required

40. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
1 layer
vs
3 layers
-50% codelines
-50% development
-50% maintenance
easier to learn

41. How does it work,
really?

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

44. • name=”Joonas”
• button clicked
261 bytes

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

47. Hello World!

49. https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast

50. 3Embracing
Java

51. Any language
on JVM

52. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

53. No
browser
plugins
Nothing to
install

54. Servlet
Portlet
(most) clouds

55. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙ ∙ ∙

56. Vaadin
7today

57. v3
2002
v0.1
2001
Open
Source

58. v4
2006
Ajax
v5
2007

59. 7
Febv6
2009

60. 934 tickets closed during 16 months of
development
3939 commits made by 23 authors
Oldest ticket created 3/2008
Newest ticket 2/2013
3939 commits made by 23 authors
93 % by 6 persons
> 1 000 000 lines of code touched

61. Complete
stack
Renewed
from InsideSass
JS
HTML5
+=
GWT
RPC
State
UI
Field

72. vaadin.com/7

73. Favorite picks
7

74. Vaadin += GWT
1/6

78. GWT
Compatible

79. Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control

80. Architecture

82. New Windowing API
2/6

84. public class Vaadin6App extends Application {
public void init() {
setMainWindow(createWindow());
}
public Window getWindow(String name) {
Window window = super.getWindow(name);
if (window == null) {
window = createWindow();
window.setName(name);
addWindow(window);
}
return window;
}
private Window createWindow() {
Window window = new Window("Vaadin 6 Application");
window.addComponent(new TextField("What is your name"));
window.addComponent(new Button("Do not push me"));
return window;
}
}

85. @Title("Vaadin 7 Application")
public class HellowUI extends UI {
protected void init(VaadinRequest request) {
setContent(new VerticalLayout(
new TextField("What is your name"),
new Button("Do not push me")));
}
}

86. @PreserveOnRefresh
@Title("Vaadin 7 Application")
public class HellowUI extends UI {
protected void init(VaadinRequest request) {
setContent(new VerticalLayout(
new TextField("What is your name"),
new Button("Do not push me")));
}
}

87. Built-in high level
View management
Demo

88. Sass
Syntactically Awesome Stylesheets
Demo
3/6

89. Redesigned
Forms
4/6

90. public class Employee {
String firstName;
String lastName;
double salary;
Date birthDate;
// Getters, setters, …
}
Form form = new Form();
form.setItemDataSource(
new BeanItem<Employee>(employee));
6

93. form.setFormFieldFactory(new FormFieldFactory() {
public Field createField(Item item, Object propertyId,
Component uiContext) {
if ("birthDate".equals(propertyId)) {
DateField df = new DateField();
df.setResolution(DateField.RESOLUTION_DAY);
return df;
}
// ..
return DefaultFieldFactory.createFieldByPropertyType(item
.getItemProperty(propertyId).getType());
}
});
6

94. GridLayout form = new GridLayout(2,2) {
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
TextField salary = new TextField("Salary");
DateField birthDate = new DateField("Birth date");
{
birthDate.setResolution(Resolution.DAY);
setSpacing(true);
addComponent(firstName);
addComponent(lastName);
addComponent(birthDate);
addComponent(salary);
}
};
BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class);
fieldGroup.bindMemberFields(form);
fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
7

95. public class Person {
@Size(min = 5, max = 50)
private String name;
@Min(0)
@Max(100)
private int age;
// + constructor + setters + getters
}

96. model
presentation
“Joonas Lehtinen”
Component
firstName = “Joonas”
lastName = “Lehtinen”
Demo

97. RPC
State
5/6

98. Component
Widget
Paintable
server
client
Variable
Changes
UIDL
6

99. server
client
Component
Widget
Connector
RPC
7
State
Demo

100. public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
RpcProxy.create(ButtonRpc.class, this);
public void onClick(ClickEvent event) {
rpc.click(
new MouseEventDetails(event));
}
serverclient
private ButtonRpc rpc = new ButtonRpc() {
public void click(
MouseEventDetails details) {
// do stuff
}
};
public Button() {
registerRpc(rpc);
}
Demo

101. JavaScript
Add-ons
6/6

102. getPage().getJavaScript().addFunction("myCallback",
new JavaScriptCallback() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the arguments
}
});
Publish API from Java
window.myCallback('foo', 100);
Use from JavaScript

103. public class MyWidget extends AbstractJavaScriptComponent {
public MyWidget() {
addFunction("plotClick", new JavaScriptFunction() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the event
}
});
}
public static class MyWidgetState extends JavaScriptComponentState {
public List<List<List<Double>>> plotSeriesData =
new ArrayList<List<List<Double>>>();
}
public MyWidgetState getState() { return (MyWidgetState) super.getState(); }
}
Server-side Java API for Widget

104. window.com_example_MyWidget = function() {
var element = $(this.getWidgetElement());
// Draw a plot for any server-side (plot data) state change
this.onStateChange = function() {
$.plot(element, this.getState().series, {grid: {clickable: true}});
}
// Communicate local events back to server-side component
element.bind('plotclick', function(event, point, item) {
if (item) {
var onPlotClick = this.getCallback("plotClick");
onPlotClick(item.seriesIndex, item.dataIndex);
}
});
}
Widget implementation in JavaScript

105. Roadmap

106. Vaadin Framework 7.1 beta
• Server push
• Based on Atmosphere Framework
• Web sockets, long polling and polling
• Calendar (now under Apache 2.0 license)
• Limited IE 10 support (without pointer events)
• CSS string inject
• Renewed debug console features
◦Redesigned UI/UX for debug window
◦Optimize widgetset
• Arithmetics for SASS
• Packaging SCSS / CSS for add-ons
April

107. Vaadin Charts 1.1
• New charts:
• Funnel
• Box plot
• Waterfall
• Bubble
• Error bars
• Different coloring of a graph above and below a threshold
• Pinch zooming and panning for touch devices
May

115. Vaadin TouchKit 3.0 beta
• Vaadin 7 support
• New components:
• URLField
• Datefield
• Combobox
just
released

116. Vaadin TestBench 3.1
• Headless mode with
Phantom JS
May

117. Vaadin CDI
• Registering UI with @CDIUI annotation (web.xml no more)
• Registering Views (to CDIViewManager)
• Decoupling UI:s by injecting UI components (handy for MVP)
• Injecting all the normal Java EE stuff (ejbs, events, ...)
• UI Scope to complement the session scope
• Supports JAAS (set @RolesAllowed for a View, ...)
• 1.0 alpha to be released any day now (in staging repo today)
• Apache 2.0 License
just
released

118. getting
started

120. Eclipse

121. mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=7.0.4
Maven

122. Migration Guide:
Vaadin 6 to 7
https://vaadin.com/wiki/-/wiki/Main/Migrating
+from+Vaadin+6+to+Vaadin+7

123. Download for Free
vaadin.com/book
728 pages
701
-93-1970-1
PDF, ePub, HTML

124. ? joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
slideshare.com/
joonaslehtinen