Vaadin7today@joonaslehtinenFounder & CEO
Intro toVaadinnew Label(“Hello world”)
New in7
GettingstartedQA
User interfaceframework for richweb applications
Building blocks
htmljava
Why on earth?
expectations
reality
businessconsumer“million” users “500” users>>100,000€ / view 5,000€ / view10 views1€/user50 views500€/user
ChallengeHow to build consumergrade UX with businesssystem budget
How?
123Key Ideas
1RichComponents
User IntefaceData SourceTheme
What kind of devices does your app support?98.1%3DesktopbrowsersBrowsers developers expect to support in 20133.5 Browsers ...
350 add-oncomponents
User IntefaceData SourceTheme
User IntefaceData SourceTheme
InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE,...
2Server + Client
Web application layersBackendserverWebserverCommu-nicationJavaScript
Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationopt...
Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationopt...
How does it work,really?
• Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
• name=”Joonas”• button clicked261 bytes
• name=”Joonas”• button clicked261 bytes• Add notification267 bytes
Hello World!
https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
3EmbracingJava
Any languageon JVM
Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
NobrowserpluginsNothing toinstall
ServletPortlet(most) clouds
EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
Vaadin7today
v32002v0.12001OpenSource
v42006Ajaxv52007
7Febv62009
934 tickets closed during 16 months ofdevelopment3939 commits made by 23 authorsOldest ticket created 3/2008Newest ticket ...
CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
vaadin.com/7
Favorite picks7
Vaadin += GWT1/6
GWTCompatible
Server-Client-sideOptimizedforProductivityOptimizedforControl
Architecture
New Windowing API2/6
public class Vaadin6App extends Application {	 public void init() {	 	 setMainWindow(createWindow());	 }	 public Window ge...
@Title("Vaadin 7 Application")public class HellowUI extends UI {	 protected void init(VaadinRequest request) {	 	 setConte...
@PreserveOnRefresh@Title("Vaadin 7 Application")public class HellowUI extends UI {	 protected void init(VaadinRequest requ...
Built-in high levelView managementDemo
SassSyntactically Awesome StylesheetsDemo3/6
RedesignedForms4/6
public class Employee {	 String firstName;	 String lastName;	 double salary;	 Date birthDate;// Getters, setters, …}Form f...
form.setFormFieldFactory(new FormFieldFactory() {	 	 	 public Field createField(Item item, Object propertyId,	 	 	 	 	 Com...
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 + setter...
modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
RPCState5/6
ComponentWidgetPaintableserverclientVariableChangesUIDL6
serverclientComponentWidgetConnectorRPC7StateDemo
public interface ButtonRpc extends ServerRpc {public void click(MouseEventDetails details);}private ButtonRpc rpc =RpcProx...
JavaScriptAdd-ons6/6
getPage().getJavaScript().addFunction("myCallback",	 new JavaScriptCallback() {	 	 public void call(JSONArray arguments) t...
public class MyWidget extends AbstractJavaScriptComponent {	 public MyWidget() {	 	 addFunction("plotClick", new JavaScrip...
window.com_example_MyWidget = function() {	 var element = $(this.getWidgetElement());	// Draw a plot for any server-side (...
Roadmap
Vaadin Framework 7.1 beta• Server push• Based on Atmosphere Framework• Web sockets, long polling and polling• Calendar (no...
Vaadin Charts 1.1• New charts:• Funnel• Box plot• Waterfall• Bubble• Error bars• Different coloring of a graph above and b...
Vaadin TouchKit 3.0 beta• Vaadin 7 support• New components:• URLField• Datefield• Comboboxjustreleased
Vaadin TestBench 3.1• Headless mode withPhantom JSMay
Vaadin CDI• Registering UI with @CDIUI annotation (web.xml no more)• Registering Views (to CDIViewManager)• Decoupling UI:...
gettingstarted
Eclipse
mvn archetype:generate-DarchetypeGroupId=com.vaadin-DarchetypeArtifactId=vaadin-archetype-application-DarchetypeVersion=7....
Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Upcoming SlideShare
Loading in …5
×

Vaadin7

600 views

Published on

My Vaadin 7 presentation - JavaOne Russia 2013 edition

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

  • Be the first to like this

No Downloads
Views
Total views
600
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin7

  1. 1. Vaadin7today@joonaslehtinenFounder & CEO
  2. 2. Intro toVaadinnew Label(“Hello world”)
  3. 3. New in7
  4. 4. GettingstartedQA
  5. 5. User interfaceframework for richweb applications
  6. 6. Building blocks
  7. 7. htmljava
  8. 8. Why on earth?
  9. 9. expectations
  10. 10. reality
  11. 11. businessconsumer“million” users “500” users>>100,000€ / view 5,000€ / view10 views1€/user50 views500€/user
  12. 12. ChallengeHow to build consumergrade UX with businesssystem budget
  13. 13. How?
  14. 14. 123Key Ideas
  15. 15. 1RichComponents
  16. 16. User IntefaceData SourceTheme
  17. 17. What kind of devices does your app support?98.1%3DesktopbrowsersBrowsers developers expect to support in 20133.5 Browsers to support in 2012IE 6/7 Safari Opera IE 86/7 814% 18% 36% 54%Chrome9 10IE 9 IE 10 Firefox79% 80% 94% 94%Browsers developers expect to support in 20133.5 Browsers to support in 2012IE 6/7 Safari Opera IE 86/7 814% 18% 36% 54%Chrome9 10IE 9 IE 10 Firefox79% 80% 94% 94%esyour appsupport?25.7%Phones36.1%Others2.1%“Since gwinthe enterpexplainwhy tabpopular thansuppphones”DanieliPhoneAndroidWP8pplicationUI forr 98%of appsovertakenthenumberrope.36.1%Tablets“Sincegwt isusedextensiintheenterprise, thismexplainwhy tabletspopular thansuphones”iPadAndroidWindows8
  18. 18. 350 add-oncomponents
  19. 19. User IntefaceData SourceTheme
  20. 20. User IntefaceData SourceTheme
  21. 21. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  22. 22. 2Server + Client
  23. 23. Web application layersBackendserverWebserverCommu-nicationJavaScript
  24. 24. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required
  25. 25. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required1 layervs3 layers-50% codelines-50% development-50% maintenanceeasier to learn
  26. 26. How does it work,really?
  27. 27. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
  28. 28. • name=”Joonas”• button clicked261 bytes
  29. 29. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  30. 30. Hello World!
  31. 31. https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
  32. 32. 3EmbracingJava
  33. 33. Any languageon JVM
  34. 34. Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
  35. 35. NobrowserpluginsNothing toinstall
  36. 36. ServletPortlet(most) clouds
  37. 37. EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
  38. 38. Vaadin7today
  39. 39. v32002v0.12001OpenSource
  40. 40. v42006Ajaxv52007
  41. 41. 7Febv62009
  42. 42. 934 tickets closed during 16 months ofdevelopment3939 commits made by 23 authorsOldest ticket created 3/2008Newest ticket 2/20133939 commits made by 23 authors93 % by 6 persons> 1 000 000 lines of code touched
  43. 43. CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
  44. 44. vaadin.com/7
  45. 45. Favorite picks7
  46. 46. Vaadin += GWT1/6
  47. 47. GWTCompatible
  48. 48. Server-Client-sideOptimizedforProductivityOptimizedforControl
  49. 49. Architecture
  50. 50. New Windowing API2/6
  51. 51. 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; }}
  52. 52. @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"))); }}
  53. 53. @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"))); }}
  54. 54. Built-in high levelView managementDemo
  55. 55. SassSyntactically Awesome StylesheetsDemo3/6
  56. 56. RedesignedForms4/6
  57. 57. public class Employee { String firstName; String lastName; double salary; Date birthDate;// Getters, setters, …}Form form = new Form();form.setItemDataSource(new BeanItem<Employee>(employee));6
  58. 58. 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
  59. 59. 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
  60. 60. public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setters + getters}
  61. 61. modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
  62. 62. RPCState5/6
  63. 63. ComponentWidgetPaintableserverclientVariableChangesUIDL6
  64. 64. serverclientComponentWidgetConnectorRPC7StateDemo
  65. 65. 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));}serverclientprivate ButtonRpc rpc = new ButtonRpc() {public void click(MouseEventDetails details) {// do stuff}};public Button() {registerRpc(rpc);}Demo
  66. 66. JavaScriptAdd-ons6/6
  67. 67. getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Publish API from Javawindow.myCallback(foo, 100);Use from JavaScript
  68. 68. 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
  69. 69. 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
  70. 70. Roadmap
  71. 71. 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-onsApril
  72. 72. 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 devicesMay
  73. 73. Vaadin TouchKit 3.0 beta• Vaadin 7 support• New components:• URLField• Datefield• Comboboxjustreleased
  74. 74. Vaadin TestBench 3.1• Headless mode withPhantom JSMay
  75. 75. 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 Licensejustreleased
  76. 76. gettingstarted
  77. 77. Eclipse
  78. 78. mvn archetype:generate-DarchetypeGroupId=com.vaadin-DarchetypeArtifactId=vaadin-archetype-application-DarchetypeVersion=7.0.4Maven
  79. 79. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  80. 80. Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
  81. 81. ? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen

×