Vaadin7
Upcoming SlideShare
Loading in...5
×
 

Vaadin7

on

  • 532 views

My Vaadin 7 presentation - JavaOne Russia 2013 edition

My Vaadin 7 presentation - JavaOne Russia 2013 edition

Statistics

Views

Total Views
532
Views on SlideShare
532
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vaadin7 Presentation Transcript

  • 1. Vaadin7today@joonaslehtinenFounder & CEO
  • 2. Intro toVaadinnew Label(“Hello world”)
  • 3. New in7
  • 4. GettingstartedQA
  • 5. User interfaceframework for richweb applications
  • 6. Building blocks
  • 7. htmljava
  • 8. Why on earth?
  • 9. expectations
  • 10. reality
  • 11. businessconsumer“million” users “500” users>>100,000€ / view 5,000€ / view10 views1€/user50 views500€/user
  • 12. ChallengeHow to build consumergrade UX with businesssystem budget
  • 13. How?
  • 14. 123Key Ideas
  • 15. 1RichComponents
  • 16. User IntefaceData SourceTheme
  • 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. 350 add-oncomponents
  • 19. User IntefaceData SourceTheme
  • 20. User IntefaceData SourceTheme
  • 21. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  • 22. 2Server + Client
  • 23. Web application layersBackendserverWebserverCommu-nicationJavaScript
  • 24. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required
  • 25. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required1 layervs3 layers-50% codelines-50% development-50% maintenanceeasier to learn
  • 26. How does it work,really?
  • 27. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
  • 28. • name=”Joonas”• button clicked261 bytes
  • 29. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  • 30. Hello World!
  • 31. https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
  • 32. 3EmbracingJava
  • 33. Any languageon JVM
  • 34. Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
  • 35. NobrowserpluginsNothing toinstall
  • 36. ServletPortlet(most) clouds
  • 37. EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
  • 38. Vaadin7today
  • 39. v32002v0.12001OpenSource
  • 40. v42006Ajaxv52007
  • 41. 7Febv62009
  • 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. CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
  • 44. vaadin.com/7
  • 45. Favorite picks7
  • 46. Vaadin += GWT1/6
  • 47. GWTCompatible
  • 48. Server-Client-sideOptimizedforProductivityOptimizedforControl
  • 49. Architecture
  • 50. New Windowing API2/6
  • 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. @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. @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. Built-in high levelView managementDemo
  • 55. SassSyntactically Awesome StylesheetsDemo3/6
  • 56. RedesignedForms4/6
  • 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. 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. 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. public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setters + getters}
  • 61. modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
  • 62. RPCState5/6
  • 63. ComponentWidgetPaintableserverclientVariableChangesUIDL6
  • 64. serverclientComponentWidgetConnectorRPC7StateDemo
  • 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. JavaScriptAdd-ons6/6
  • 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. 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. 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. Roadmap
  • 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. 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. Vaadin TouchKit 3.0 beta• Vaadin 7 support• New components:• URLField• Datefield• Comboboxjustreleased
  • 74. Vaadin TestBench 3.1• Headless mode withPhantom JSMay
  • 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. gettingstarted
  • 77. Eclipse
  • 78. mvn archetype:generate-DarchetypeGroupId=com.vaadin-DarchetypeArtifactId=vaadin-archetype-application-DarchetypeVersion=7.0.4Maven
  • 79. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  • 80. Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
  • 81. ? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen