Lecture: Vaadin Overview

1,740 views

Published on

Lecture given at University of Turku kickstarting a series of Vaadin 7 lectures.

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

  • Be the first to like this

No Downloads
Views
Total views
1,740
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lecture: Vaadin Overview

  1. 1. Vaadin overview@joonaslehtinen
  2. 2. Key ideas
  3. 3. coding
  4. 4. Gettingstarted QA
  5. 5. User interfaceframework for rich web applications
  6. 6. History behind Vaadin
  7. 7. healthcare portal, >100 kloc of perl, ..9819
  8. 8. web 1.0, netscape, ie5, ie6, ...
  9. 9. thinking ofobject oriented design, desktop, Java, U and I ...
  10. 10. desktop programming paradigm for web!
  11. 11. found millstone ajax google web toolkit 00 08 02 0520 20 20 20
  12. 12. re-released as 0920
  13. 13. Used by >100.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by contributing ~300 plug-ins and helping each other on a forum with ~1500 posts / m add-ons, mainstream, 7 Backed by 60 person full-time team in Fi, Us & De 10 12 1120 20 20
  14. 14. java html
  15. 15. Why on earth?
  16. 16. expectations
  17. 17. reality
  18. 18. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  19. 19. Problem How to build consumergrade UX with business system budget
  20. 20. How?
  21. 21. 123Key Ideas
  22. 22. 1Componentseverywhere
  23. 23. User IntefaceData Source Theme
  24. 24. Rich Applications
  25. 25. User IntefaceData Source Theme
  26. 26. SASS
  27. 27. Variables & functions
  28. 28. Mixins
  29. 29. User IntefaceData Source Theme
  30. 30. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  31. 31. exampleSQLContainer
  32. 32. Tableor any other UI component SQLContainerFreeformQuery JDBC SELECT * FROM ...
  33. 33. connectionPool = new SimpleJDBCConnectionPool( "org.hsqldb.jdbc.JDBCDriver", "jdbc:hsqldb:mem:sqlcontainer", "password", "", 2, 2);SQLContainer container = new SQLContainer( new FreeformQuery( "SELECT * FROM people", Arrays.asList("ID"), connectionPool));Table table = new Table(null, container);
  34. 34. Tableor any other UI component SQLContainerTableQuery JDBC Database Table
  35. 35. • lazy loading• advanced filtering• sorting• connection pooling• transactions• optimistic locking• autocommit mode
  36. 36. • HSQLDB• MySQL• PostgreSQL• Oracle• MS SQL Server
  37. 37. 2Server + Client
  38. 38. Web application layersGWT Vaadin required required optional optional optional required required required required optionalJS required required required required Backend Web Java to RPC JavaScript server server JavaScript
  39. 39. How does it work,really?
  40. 40. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  41. 41. • name=”Joonas”• button clicked150 bytes
  42. 42. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  43. 43. Trying it out
  44. 44. https://github.com/jojule/NotesDemo
  45. 45. Architecture
  46. 46. Vaadin += GWT
  47. 47. GWTCompatible
  48. 48. Server Pr Op - od t r im fo uc d ti ize ize vit dfy or tim e rol Op t- s d ont i C ien Cl
  49. 49. Se rve r P r- e Op odu sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  50. 50. Creating new UIcomponents is easy
  51. 51. HTTP(S)“UI Component” “Widget”• Button, Table, • Client-side peer for Tree, ... the component• Server-side data • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit
  52. 52. Widget 7 Connectorclient Stateserver RPC Component
  53. 53. 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
  54. 54. PaperStack notes = new PaperStack();!! @Override! public void init() { // === Layout ========================================================! ! HorizontalLayout lo= new HorizontalLayout();! ! Window mainWindow = new Window("Postitnotes Application", lo);! ! lo.setSizeFull();! ! lo.addComponent(notes);! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);! ! setMainWindow(mainWindow);! !! ! notes.setWidth("350px");! ! notes.setHeight("350px");! ! // === Note 1 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style=font-size: 24px>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style=font-size: 24px>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ========================================================! ! notes.addComponent(new Label("<div style=font-size: 60px><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ========================================================! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();! ! rta.setSizeFull();! ! notes.addComponent(rta);! ! rta.setValue("<span style=font-size: 35pt; color: green;>You can use any “ + “Vaadin components here...</span>");! }
  55. 55. JavaScriptAdd-ons
  56. 56. 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);
  57. 57. 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); } });}
  58. 58. 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 }}
  59. 59. 3EmbracingJava
  60. 60. Any JVMLanguage
  61. 61. Internet Explorer Chrome Firefox Safari Opera iOS Android
  62. 62. No browser pluginsNothing to install
  63. 63. Servlet Portlet(most) clouds
  64. 64. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  65. 65. Who is using Vaadin?
  66. 66. 24% 17% 12%Business Services Technology Financial and Insurance 9% 9% 8% Education Healthcare Telecommunication 7% 5% 9%Industrial Goods Transport Other
  67. 67. OSC Enquiry System (TNT)LogisticsOSC (Operational Service Capabilities) Enquiry provides a singlesource for obtaining operational ‘door-to-door’ service capabilitiesfor all international and domestic products sold to TNT ExpressOSC Enquiry provides POJO software services that can beintegrated into consuming applications to support their servicecapability enquiry transactions.The OSC Enquiry User Interface developed in Vaadin technologyalso consumes some of the OSC Enquiry Services required by theService Quality users at TNT Express (150 or so).The UI users are responsible for measuring operational serviceperformance by comparing actual achieved service againstestimated transit times quoted to customers. Correctivemaintenance actions can then be taken to improve the publishedtransit times. Comparison of our transit times to our competitors’ isalso facilitated this way. https://vaadin.com/showcase/osc-enquiry-system-tnt
  68. 68. JavaOne edition 2012 applicationsDownloadvaadin.com/dock world of web Introducing Best of clie Vaadin += G nt and serv er developm entWT Get inspire Web Applic d by our ca se studies Vaadin ation Scala bility:
  69. 69. Who is Vaadin?
  70. 70. 60 Turku Frankfurt San Jose
  71. 71. gettingstarted
  72. 72. Eclipsehttp://vaadin.com/eclipse/experimental
  73. 73. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta11 mvn package yourproject-1.0.war
  74. 74. Download for Free vaadin.com/book ework s thato u an d ~700 pages
  75. 75. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×