Vaadin
7today
@joonaslehtinen
Founder & CEO
Intro to
Vaadin
new Label(“Hello world”)
New in
7
Getting
started
QA
User interface
framework for rich
web applications
Building blocks
Developer
Productivity
Rich
UX
htmljava
Why on earth?
expectations
reality
businessconsumer
“million” users “500” users
>>100,000€ / view 5,000€ / view
10 views
1€/user
50 views
500€/user
Challenge
How to build consumer
grade UX with business
system budget
Key Ideas
123Key Ideas
Rich
Components
1Rich
Components
User Inteface
Data Source
Theme
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Brow...
350+ add-on
components
User Inteface
Data Source
Theme
User Inteface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
...
Server + Client
2Server + Client
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
How does it 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
Hello World!
https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast
Embracing
Java
3Embracing
Java
Any language
on JVM
Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
No
browser
plugins
Nothing to
install
Servlet
Portlet
(most) clouds
Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙ ∙ ∙
Vaadin
7.1
v3
2002
v0.1
2001
Open
Source
v4
2006
Ajax
v5
2007
7
Febv6
2009
934 tickets closed during 16 months of
development
3939 commits made by 23 authors
Oldest ticket created 3/2008
Newest tic...
Complete
stack
Renewed
from InsideSass
JS
HTML5
+=
GWT
RPC
State
UI
Field
Push
vaadin.com/7
Favorite picks
7.1
Vaadin += GWT
1/7
GWT
Compatible
Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control
Server-
Client-
side
Optim
izedfor
Productivit
Optim
izedfor
Control
Architecture
New Windowing API
2/7
public class Vaadin6App extends Application {
	 public void init() {
	 	 setMainWindow(createWindow());
	 }
	 public Windo...
@Title("Vaadin 7 Application")
public class HellowUI extends UI {
	 protected void init(VaadinRequest request) {
	 	 setCo...
@PreserveOnRefresh
@Title("Vaadin 7 Application")
public class HellowUI extends UI {
	 protected void init(VaadinRequest r...
Built-in high level
View management
Demo
Sass
Syntactically Awesome Stylesheets
Demo
3/7
Redesigned
Forms
4/7
public class Employee {
	 String firstName;
	 String lastName;
	 double salary;
	 Date birthDate;
// Getters, setters, …
}...
form.setFormFieldFactory(new FormFieldFactory() {
	 	 	 public Field createField(Item item, Object propertyId,
	 	 	 	 	 C...
GridLayout form = new GridLayout(2,2) {
	 	 	 TextField firstName = new TextField("First name");
	 	 	 TextField lastName ...
public class Person {
@Size(min = 5, max = 50)
private String name;
@Min(0)
@Max(100)
private int age;
// + constructor + ...
model
presentation
“Joonas Lehtinen”
Component
firstName = “Joonas”
lastName = “Lehtinen”
Demo
RPC
State
5/7
Component
Widget
Paintable
server
client
Variable
Changes
UIDL
6
server
client
Component
Widget
Connector
RPC
7
State
Demo
public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
Rpc...
JavaScript
Add-ons
6/7
getPage().getJavaScript().addFunction("myCallback",
	 new JavaScriptCallback() {
	 	 public void call(JSONArray arguments)...
public class MyWidget extends AbstractJavaScriptComponent {
	 public MyWidget() {
	 	 addFunction("plotClick", new JavaScr...
window.com_example_MyWidget = function() {
	 var element = $(this.getWidgetElement());
	
// Draw a plot for any server-sid...
Server Push
7/7
@Push MyUI
<async-supported/>
vaadin-push dependency
getting
started
getting
started
Eclipse
mvn archetype:generate 
-DarchetypeGroupId=com.vaadin 
-DarchetypeArtifactId=vaadin-archetype-application 
-DarchetypeVers...
Migration Guide:
Vaadin 6 to 7
https://vaadin.com/wiki/-/wiki/Main/Migrating
+from+Vaadin+6+to+Vaadin+7
Download for Free
vaadin.com/book
728 pages
701
-93-1970-1
PDF, ePub, HTML
Apache
License
community of
100.000+
developers
? joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
slideshare.com/
joonaslehtinen
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Vaadin 7
Upcoming SlideShare
Loading in …5
×

Vaadin 7

2,212 views

Published on

Updated copy of the Vaadin 7 introduction presentation.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,212
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Vaadin 7

  1. 1. Vaadin 7today @joonaslehtinen Founder & CEO
  2. 2. Intro to Vaadin new Label(“Hello world”)
  3. 3. New in 7
  4. 4. Getting started QA
  5. 5. User interface framework for rich web applications
  6. 6. Building blocks
  7. 7. Developer Productivity Rich UX
  8. 8. htmljava
  9. 9. Why on earth?
  10. 10. expectations
  11. 11. reality
  12. 12. businessconsumer “million” users “500” users >>100,000€ / view 5,000€ / view 10 views 1€/user 50 views 500€/user
  13. 13. Challenge How to build consumer grade UX with business system budget
  14. 14. Key Ideas
  15. 15. 123Key Ideas
  16. 16. Rich Components
  17. 17. 1Rich Components
  18. 18. User Inteface Data Source Theme
  19. 19. 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
  20. 20. 350+ add-on components
  21. 21. User Inteface Data Source Theme
  22. 22. User Inteface Data Source Theme
  23. 23. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  24. 24. Server + Client
  25. 25. 2Server + Client
  26. 26. Web application layers Backend server Web server Commu- nication JavaScript
  27. 27. 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
  28. 28. 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
  29. 29. How does it work, really?
  30. 30. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
  31. 31. • name=”Joonas” • button clicked 261 bytes
  32. 32. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
  33. 33. Hello World!
  34. 34. https://github.com/vaadin/documentmanager https://vaadin.com/learn Source HOWTO Screencast
  35. 35. Embracing Java
  36. 36. 3Embracing Java
  37. 37. Any language on JVM
  38. 38. Internet Explorer Chrome Firefox Safari Opera iOS Android
  39. 39. No browser plugins Nothing to install
  40. 40. Servlet Portlet (most) clouds
  41. 41. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙ ∙ ∙
  42. 42. Vaadin 7.1
  43. 43. v3 2002 v0.1 2001 Open Source
  44. 44. v4 2006 Ajax v5 2007
  45. 45. 7 Febv6 2009
  46. 46. 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
  47. 47. Complete stack Renewed from InsideSass JS HTML5 += GWT RPC State UI Field Push
  48. 48. vaadin.com/7
  49. 49. Favorite picks 7.1
  50. 50. Vaadin += GWT 1/7
  51. 51. GWT Compatible
  52. 52. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  53. 53. Server- Client- side Optim izedfor Productivit Optim izedfor Control
  54. 54. Architecture
  55. 55. New Windowing API 2/7
  56. 56. 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; } }
  57. 57. @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"))); } }
  58. 58. @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"))); } }
  59. 59. Built-in high level View management Demo
  60. 60. Sass Syntactically Awesome Stylesheets Demo 3/7
  61. 61. Redesigned Forms 4/7
  62. 62. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
  63. 63. 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
  64. 64. 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
  65. 65. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
  66. 66. model presentation “Joonas Lehtinen” Component firstName = “Joonas” lastName = “Lehtinen” Demo
  67. 67. RPC State 5/7
  68. 68. Component Widget Paintable server client Variable Changes UIDL 6
  69. 69. server client Component Widget Connector RPC 7 State Demo
  70. 70. 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
  71. 71. JavaScript Add-ons 6/7
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. Server Push 7/7
  76. 76. @Push MyUI <async-supported/> vaadin-push dependency
  77. 77. getting started
  78. 78. getting started
  79. 79. Eclipse
  80. 80. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0
  81. 81. Migration Guide: Vaadin 6 to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
  82. 82. Download for Free vaadin.com/book 728 pages 701 -93-1970-1 PDF, ePub, HTML
  83. 83. Apache License
  84. 84. community of 100.000+ developers
  85. 85. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen slideshare.com/ joonaslehtinen

×