Vaadin    overview@joonaslehtinen
Key ideas
coding
Gettingstarted          QA
User interfaceframework for rich  web applications
History behind Vaadin
healthcare portal, >100 kloc of perl, ..9819
web 1.0, netscape, ie5, ie6, ...
thinking ofobject oriented design, desktop, Java, U and I ...
desktop programming paradigm for web!
found         millstone ajax google web toolkit 00                                   08               02                  ...
re-released as 0920
Used by >100.000 developers                               in >150 countries                               Building apps fo...
java   html
Why on earth?
expectations
reality
consumer      business “million” users   “500” users        10 views   50 views         1€/user   500€/user100,000€ / view...
Problem How to build consumergrade UX with business        system budget
How?
123Key Ideas
1Componentseverywhere
User IntefaceData Source   Theme
Rich Applications
User IntefaceData Source   Theme
SASS
Variables & functions
Mixins
User IntefaceData Source   Theme
InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE,...
exampleSQLContainer
Tableor any other UI component   SQLContainerFreeformQuery           JDBC             SELECT * FROM ...
connectionPool =   new SimpleJDBCConnectionPool(      "org.hsqldb.jdbc.JDBCDriver",      "jdbc:hsqldb:mem:sqlcontainer",  ...
Tableor any other UI component   SQLContainerTableQuery           JDBC             Database Table
• lazy loading• advanced filtering• sorting• connection pooling• transactions• optimistic locking• autocommit mode
• HSQLDB• MySQL• PostgreSQL• Oracle• MS SQL Server
2Server + Client
Web application layersGWT Vaadin              required   required   optional     optional     optional              requir...
How does it work,really?
•   Initial HTML•   CSS (theme)•   Images•   JavaScript830k total        compress250k        reduced        widgetset120k
• name=”Joonas”• button clicked150 bytes
• name=”Joonas”• button clicked150 bytes• Add notification466 bytes
Trying it out
https://github.com/jojule/NotesDemo
Architecture
Vaadin += GWT
GWTCompatible
Server                    Pr                     Op          -             od                        t                    ...
Se     rve            r    P        r-                           e            Op              odu                        s...
Creating new UIcomponents is easy
HTTP(S)“UI Component”                    “Widget”• Button, Table,                  • Client-side peer for  Tree, ...      ...
Widget                         7         Connectorclient                     Stateserver         RPC         Component
public interface ButtonRpc extends ServerRpc {                             public void click(MouseEventDetails details);  ...
PaperStack notes = new PaperStack();!! @Override! public void init() {        // === Layout ==============================...
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...
3EmbracingJava
Any JVMLanguage
Internet Explorer         Chrome          Firefox           Safari           Opera             iOS         Android
No  browser   pluginsNothing to    install
Servlet      Portlet(most) clouds
EclipseIntelliJ IDEA   Netbeans       Maven           Ant Spring Roo            ∙∙∙
Who is using Vaadin?
24%               17%               12%Business Services   Technology   Financial and Insurance      9%                9% ...
OSC Enquiry System (TNT)LogisticsOSC (Operational Service Capabilities) Enquiry provides a singlesource for obtaining oper...
JavaOne                      edition 2012                                                                                 ...
Who is Vaadin?
60       Turku    Frankfurt    San Jose
gettingstarted
Eclipsehttp://vaadin.com/eclipse/experimental
Maven  mvn archetype:generate  -DarchetypeGroupId=com.vaadin  -DarchetypeArtifactId=     vaadin-archetype-application  -Da...
Download for Free     vaadin.com/book ework s thato u an d      ~700 pages
?   joonas@vaadin.com      vaadin.com/joonas        @joonaslehtinen
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Upcoming SlideShare
Loading in...5
×

Lecture: Vaadin Overview

1,451

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,451
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×