Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Vaadin              7 today and tomorrow                      @joonaslehtinen                      Vaadin, Founder
v0.12001        v3       2002         Open        Source
v4 2006Ajax         v5        2007
v62009   7
934 tickets closed during 16 months ofdevelopmentOldest ticket created 3/2008Newest ticket 2/20133939 commits made by 23 a...
https://github.com/vaadin/dashboard-demo
Renewed             JS      Sass                         from Inside         HTML5                  +=    UI              ...
7Favorite picks
Vaadin += GWT
GWTCompatible
Server                    Pr             od      Op                        t          -                 im                ...
Architecture
New Windowing API
public class Vaadin6App extends Application {	   public void init() {	   	 setMainWindow(createWindow());	   }	   public W...
@Title("Vaadin 7 Application")public class Vaadin7uiUI extends UI {	   public void init(VaadinRequest request) {	   	 addC...
Built-in high levelView management
Sass
Variables & functions                        Demo
Mixins         Demo
RedesignedForms
public class Employee {	 String firstName;	 String lastName;	 double salary;                                        6	 Dat...
form.setFormFieldFactory(new FormFieldFactory() {	 	 	 public Field createField(Item item, Object propertyId,	 	 	 	 	 Com...
7	 	 GridLayout form = new GridLayout(2,2) {	   	   	    TextField   firstName = new TextField("First name");	   	   	    ...
public class Person {    @Size(min = 5, max = 50)    private String name;    @Min(0)    @Max(100)    private int age;    /...
“Joonas Lehtinen”       presentation                           Component       model                       firstName = “Joo...
RPCState
Widget                                        6                     Paintable          Variableclient   Changesserver     ...
Widget                                7                Connector       client                            State       serve...
public interface ButtonRpc extends ServerRpc {                             public void click(MouseEventDetails details);  ...
JavaScriptAdd-ons
Publish API from JavagetPage().getJavaScript().addCallback("myCallback",	 new JavaScriptCallback() {	 	 public void call(J...
Widget implementation in JavaScriptwindow.com_example_MyWidget = function() {	 var element = $(this.getWidgetElement());	 ...
Server-side Java API for Widgetpublic class MyWidget extends AbstractJavaScriptComponent {	   public MyWidget() {	   	 reg...
HTML5
<!DOCTYPE html>
Lighter DOM   Minimized reflows  6.8  7.0
IE8 (norm)
Roadmap
Vaadin Framework 7.1 • Server push   • Based on Atmosphere Framework   • Web sockets, long polling and polling • Calendar ...
Vaadin Charts • 1.1 version to be released in May, 2013   • New charts:     • Funnel     • Box plot     • Waterfall     • ...
Vaadin TouchKit  • 3.0 version to be released in April    • Vaadin 7 support    • New components:      • URLField      • D...
Vaadin TestBench  • 3.1 adds headless mode    in May
Vaadin CDI  • Alpha to be released in the end of March  • Apache 2.0 License
Vaadin JPAContainer  • License changed to Apache 2.0  • Vaadin 7 compatible version released in March
?   joonas@vaadin.com      vaadin.com/joonas        @joonaslehtinen
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Vaadin today and tomorrow
Upcoming SlideShare
Loading in …5
×

Vaadin today and tomorrow

1,457 views

Published on

My presentation at Vaadin Meetup Paris

  • Be the first to comment

Vaadin today and tomorrow

  1. 1. Vaadin 7 today and tomorrow @joonaslehtinen Vaadin, Founder
  2. 2. v0.12001 v3 2002 Open Source
  3. 3. v4 2006Ajax v5 2007
  4. 4. v62009 7
  5. 5. 934 tickets closed during 16 months ofdevelopmentOldest ticket created 3/2008Newest ticket 2/20133939 commits made by 23 authors93 % by 6 persons> 1 000 000 lines of code touched
  6. 6. https://github.com/vaadin/dashboard-demo
  7. 7. Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  8. 8. 7Favorite picks
  9. 9. Vaadin += GWT
  10. 10. GWTCompatible
  11. 11. Server Pr od Op t - im r uc fo ti ize df d vit izey or tim e rol Op t- s d ont i C ien Cl
  12. 12. Architecture
  13. 13. New Windowing API
  14. 14. 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; }}
  15. 15. @Title("Vaadin 7 Application")public class Vaadin7uiUI extends UI { public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }}
  16. 16. Built-in high levelView management
  17. 17. Sass
  18. 18. Variables & functions Demo
  19. 19. Mixins Demo
  20. 20. RedesignedForms
  21. 21. public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  22. 22. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { 6 DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
  23. 23. 7 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));
  24. 24. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  25. 25. “Joonas Lehtinen” presentation Component model firstName = “Joonas”Demo lastName = “Lehtinen”
  26. 26. RPCState
  27. 27. Widget 6 Paintable Variableclient Changesserver UIDL Component
  28. 28. Widget 7 Connector client State server RPC ComponentDemo
  29. 29. public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click(private ButtonRpc rpc = MouseEventDetails details) {RpcProxy.create(ButtonRpc.class, this); // do stuff }public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() {} registerRpc(rpc); } client server
  30. 30. JavaScriptAdd-ons
  31. 31. Publish API from JavagetPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScriptwindow.myCallback(foo, 100);
  32. 32. Widget implementation in JavaScriptwindow.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); } });}
  33. 33. Server-side Java API for Widgetpublic class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters }}
  34. 34. HTML5
  35. 35. <!DOCTYPE html>
  36. 36. Lighter DOM Minimized reflows 6.8 7.0
  37. 37. IE8 (norm)
  38. 38. Roadmap
  39. 39. Vaadin Framework 7.1 • Server push • Based on Atmosphere Framework • Web sockets, long polling and polling • Calendar (now under Apache 2.0 license) • Limited IE 10 support without touch • CSS string inject • Renewed debug console features ◦ Redesigned UI/UX for debug window ◦ Optimize widgetset • Arithmetics for SASS • Packaging CSS for add-ons without a widgetset
  40. 40. Vaadin Charts • 1.1 version to be released in May, 2013 • 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
  41. 41. Vaadin TouchKit • 3.0 version to be released in April • Vaadin 7 support • New components: • URLField • Datefield • Combobox • Preparing WP8 support
  42. 42. Vaadin TestBench • 3.1 adds headless mode in May
  43. 43. Vaadin CDI • Alpha to be released in the end of March • Apache 2.0 License
  44. 44. Vaadin JPAContainer • License changed to Apache 2.0 • Vaadin 7 compatible version released in March
  45. 45. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×