Rich Web Applications inServer-side Java without  Plug-ins or JavaScript           Joonas Lehtinen, PhD               Vaad...
Rich Web Applications inServer-side Java without  Plug-ins or JavaScript           Joonas Lehtinen, PhD               Vaad...
?
Vaadin is aUI framework for rich web applications
java   html
History behind Vaadin
healthcare portal, >100 kloc of perl,  8919
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                    0520        2...
re-released as       09      20
Used by >50.000                       developers in >150                       countries                       Building ap...
see our transparent vaadin.com/roadmap                         12                        20
ApacheLicense
ContentsServer-side                                        DiscussionRIAWhat is it? Pros & cons?                          ...
Server-side RIA
“Web 1.0”Client           5                                      Server            HTML PageDOM      over HttpResponse    ...
client-side riafat client
Client-side RIAClient                 4                     Server                 Requested data  View             to vie...
challenge  web isnot easy
Refactoring?                            Compile-AutomatedAPI docs?   weak typing       time                            che...
> 1 developers                     +JavaScriptfacilitated    weak typingspaghetti            +               > 10k SLOC
performance       browsers          are      bugs       different     features
Google Web Toolkit
Subset of                       IE6java.lang, java.util                         Java to     IE7    Widgetset          Java...
simpler• 100% Java• Static typing• Object oriented• Excellent tooling
less bugs• Stop debugging  JavaScript spaghetti• Ignore most  browser differences
client-side• UI in client• Asyncronous RPC• Services (for UI)
Building wonderfulapps doesn’trequire writing fatweb clients.
server-side riathin client
Server-side RIA    Client                              8                                                                  ...
High level              simpler              • 100% JavaStrong        • Strong typing              • Object orientedprogra...
server enviroment• Access any library• Use any language• Runtime is not  limited by browser• Trusted• Well defined
simplifiedcommunications• No RPC layer• No services (for UI)• Synchronous• Direct access to  server API
secure• Code stays in server• No services (for UI)• Predictable runtime
not as scalableUI state is stored inthe server memory
Measured 12.000  active concurrent  users per server  for a ticketing app* Amazon EC2-large; 20.622 Ajax requests /minute ...
no offline modeconnection to serveris always required
#1 benefitdevelopment is really fast
© National Geographic Channel 2010Seeing is believing
What we can doin 20 minutes?
2 Java class files50 LOC + importsno HTMLno CSSno JavaScriptno Cut-n-Paste
VaadinFramework
Developer        experiencegoals   User        expecience        Scalability
123 ideas
1amazingcomponents
User IntefaceData Source   Theme
User IntefaceData Source   Theme
Reindeer  RunoChameleon Custom
User IntefaceData Source   Theme
InMemory, Bean, Method,Collection, JDBC, JPA,Hibernate, TextFile,FileSystem, Properties,EclipseLink, Lucene,Mockups, GAE, ...
exampleSQLContainer
Tableor any other UI componentSQLContainerFreeformQuery      JDBC       SELECT * FROM ...
connectionPool =   new SimpleJDBCConnectionPool(      "org.hsqldb.jdbc.JDBCDriver",      "jdbc:hsqldb:mem:sqlcontainer",  ...
Tableor any other UI componentSQLContainerTableQuery      JDBC        Database Table
• lazy loading• advanced filtering• sorting• connection pooling• transactions• optimistic locking• autocommit mode
• HSQLDB• MySQL• PostgreSQL• Oracle• MS SQL Server
2combine power of• Server-side RIA• Google Web Toolkit
Layers of abstraction                   backend frontend                                                  RPC         brow...
How does itwork, really?
•   Initial HTML•   CSS (theme)•   Images•   JavaScript830k total       compress250k       reduced       widgetset120k
• name=”Joonas”• button clicked150 bytes
• name=”Joonas”• button clicked150 bytes• Add  notification466 bytes
Vaadin UI componentarchitecture                             HTTP(S)“UI Component”                         “Widget”• Button...
Creating new UIcomponents isreally easy
Implement two classesServer-side                            Client-side “UI Component”            Automatic    “Widget” • ...
PaperStack notes = new PaperStack();!! @Override! public void init() {        // === Layout ==============================...
3embracejava
Any JVMLanguage
Scalawith Scaladin add-onval layout =  new VerticalLayout(width = 100 pct, height = 100 pct) {      add(new Label(content ...
Internet Explorer6..         Chrome          Firefox           Safari           Opera             iOS         Android
No  browser   pluginsNothing to    install
Servlet      Portlet(most) clouds
Apache Tomcat, version 4.1 or laterOracle WebLogic Server, version 9.2 or laterOracle WebLogic Portal, version 10gR3IBM We...
EclipseIntelliJ IDEA   Netbeans       Maven           Ant Spring Roo            ∙∙∙
Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=   vaadin-archetype-clean mvn package    ...
PRODUCTIV
persistence setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORYentity --class ~.domain.Toppingfield string --fieldNam...
vaadin setup --applicationPackage ~.web --baseName PizzaShop --themeName pizza --useJpaContainer falsevaadin generate all ...
field string --class ~.domain.Pizza  --notNull --fieldName name --sizeMin 3
gettingstarted
vaadin.com/download
vaadin.com/comparison
Download for Free          vaadin.com/book     Vaadin is                a    for build n open source              ing mod ...
$43
brought to you by...#85 Get More Refcardz! Visit refcardz.com                                         CONTENTS INCLUDE:   ...
QuestionsComments            vaadin. com/joonas              @ joonaslehtinen                       #vaadin
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript
Upcoming SlideShare
Loading in …5
×

Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript

5,992 views

Published on

The Vaadin provides a desktop-like programming model on the server for creating Rich Internet Applications (RIAs) in plain Java - without the need for HTML, XML, plug-ins or JavaScript.

Session explains the key concepts of the server-side RIA development model and compares it to client-side RIA. To demonstrate the use of framework, an example application is developed during the session step-by-step. The presentation is concluded with pointers on how to start developing your own applications with Apache-licensed Vaadin-framework.

You'll learn:
* How to create a desktop like web application in Java
* Difference between page oriented, client-side RIA and server-side RIA architectures
* How Vaadin can be extended with Google Web Toolkit

More information and materials about the presentation:
http://vaadin.com/web/joonas/wiki/-/wiki/Main/Server-side%20RIA

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

No Downloads
Views
Total views
5,992
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
138
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript

  1. 1. Rich Web Applications inServer-side Java without Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen
  2. 2. Rich Web Applications inServer-side Java without Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen
  3. 3. ?
  4. 4. Vaadin is aUI framework for rich web applications
  5. 5. java html
  6. 6. History behind Vaadin
  7. 7. healthcare portal, >100 kloc of perl, 8919
  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 09 20
  13. 13. Used by >50.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by conributing > 200 plug-ins and helpingplug-ins, mainstream each other on a forum with >1500 posts / m 10 11 Backed by 50+ person 20 20 full-time team
  14. 14. see our transparent vaadin.com/roadmap 12 20
  15. 15. ApacheLicense
  16. 16. ContentsServer-side DiscussionRIAWhat is it? Pros & cons? Vaadin Technology, Features, Getting startedIn practiceCoding a Vaadinapplication step-by-step
  17. 17. Server-side RIA
  18. 18. “Web 1.0”Client 5 Server HTML PageDOM over HttpResponse View 4 3 Model Parameters over HttpRequest Controller 2 DB 1
  19. 19. client-side riafat client
  20. 20. Client-side RIAClient 4 Server Requested data View to view as XML / JSON 5 DOM Model 3 1 Changes to modelController encoded as parameters DB 2
  21. 21. challenge web isnot easy
  22. 22. Refactoring? Compile-AutomatedAPI docs? weak typing time checking? Code completion?
  23. 23. > 1 developers +JavaScriptfacilitated weak typingspaghetti + > 10k SLOC
  24. 24. performance browsers are bugs different features
  25. 25. Google Web Toolkit
  26. 26. Subset of IE6java.lang, java.util Java to IE7 Widgetset JavaScript Compiler FirefoxYour Application UI Safari
  27. 27. simpler• 100% Java• Static typing• Object oriented• Excellent tooling
  28. 28. less bugs• Stop debugging JavaScript spaghetti• Ignore most browser differences
  29. 29. client-side• UI in client• Asyncronous RPC• Services (for UI)
  30. 30. Building wonderfulapps doesn’trequire writing fatweb clients.
  31. 31. server-side riathin client
  32. 32. Server-side RIA Client 8 Server 9 7 TerminalAdapter TerminalAdapter HTML Page over HttpResponse View 6 Automated by 5 DOM the RIA framework ModelHandled by the framework Parameters over HttpRequest Controller 1 4 3 DB 2
  33. 33. High level simpler • 100% JavaStrong • Strong typing • Object orientedprogramming • Excellent toolingmodel less bugs • No JavaScript debugging • Ignore browsers
  34. 34. server enviroment• Access any library• Use any language• Runtime is not limited by browser• Trusted• Well defined
  35. 35. simplifiedcommunications• No RPC layer• No services (for UI)• Synchronous• Direct access to server API
  36. 36. secure• Code stays in server• No services (for UI)• Predictable runtime
  37. 37. not as scalableUI state is stored inthe server memory
  38. 38. Measured 12.000 active concurrent users per server for a ticketing app* Amazon EC2-large; 20.622 Ajax requests /minute peak; limited by storage layer
  39. 39. no offline modeconnection to serveris always required
  40. 40. #1 benefitdevelopment is really fast
  41. 41. © National Geographic Channel 2010Seeing is believing
  42. 42. What we can doin 20 minutes?
  43. 43. 2 Java class files50 LOC + importsno HTMLno CSSno JavaScriptno Cut-n-Paste
  44. 44. VaadinFramework
  45. 45. Developer experiencegoals User expecience Scalability
  46. 46. 123 ideas
  47. 47. 1amazingcomponents
  48. 48. User IntefaceData Source Theme
  49. 49. User IntefaceData Source Theme
  50. 50. Reindeer RunoChameleon Custom
  51. 51. User IntefaceData Source Theme
  52. 52. InMemory, Bean, Method,Collection, JDBC, JPA,Hibernate, TextFile,FileSystem, Properties,EclipseLink, Lucene,Mockups, GAE, ... Your’s
  53. 53. exampleSQLContainer
  54. 54. Tableor any other UI componentSQLContainerFreeformQuery JDBC SELECT * FROM ...
  55. 55. 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);
  56. 56. Tableor any other UI componentSQLContainerTableQuery JDBC Database Table
  57. 57. • lazy loading• advanced filtering• sorting• connection pooling• transactions• optimistic locking• autocommit mode
  58. 58. • HSQLDB• MySQL• PostgreSQL• Oracle• MS SQL Server
  59. 59. 2combine power of• Server-side RIA• Google Web Toolkit
  60. 60. Layers of abstraction backend frontend RPC browser browser server server any language any language json / xml java ➠ javascriptExtJS GWT Vaadin required required optional optional optional required required required required optional required required required X required
  61. 61. How does itwork, really?
  62. 62. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  63. 63. • name=”Joonas”• button clicked150 bytes
  64. 64. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  65. 65. Vaadin UI componentarchitecture HTTP(S)“UI Component” “Widget”• Button, Table, Tree, ... • Client-side peer for• Server-side data the component• Full Java API • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit
  66. 66. Creating new UIcomponents isreally easy
  67. 67. Implement two classesServer-side Client-side “UI Component” Automatic “Widget” • Define API • Render to DOM • Receive client events • Collect user events • Send UI updates back
  68. 68. 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>");! }
  69. 69. 3embracejava
  70. 70. Any JVMLanguage
  71. 71. Scalawith Scaladin add-onval layout = new VerticalLayout(width = 100 pct, height = 100 pct) { add(new Label(content = "Persons")) add(new Table(width = 100 pct, height = 100 pct), ratio = 1) add(new HorizontalLayout(spacing = true) { add(new Button("Edit selected", _ => editClicked())) add(new Button("Add new", _ => addNewClicked())) }) }getMainWindow.setContent(layout)
  72. 72. Internet Explorer6.. Chrome Firefox Safari Opera iOS Android
  73. 73. No browser pluginsNothing to install
  74. 74. Servlet Portlet(most) clouds
  75. 75. Apache Tomcat, version 4.1 or laterOracle WebLogic Server, version 9.2 or laterOracle WebLogic Portal, version 10gR3IBM WebSphere Application Server, version 6.1 or laterIBM WebSphere Portal, version 6.1 and 7.0JBoss Application Server, version 3.2.8 or laterJetty, version 5 or laterGlassfish, version 2 or laterLiferay Portal 5.2 or laterGateIn Portal 3.1eXo Platform 3Google App EngineVaadin supports Java Servlet API 2.3 and JSR-168 and JSR-286 PortletSpecifications and should work withany Java application server that conformsto these standards.
  76. 76. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  77. 77. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-clean mvn package yourproject-1.0.war
  78. 78. PRODUCTIV
  79. 79. persistence setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORYentity --class ~.domain.Toppingfield string --fieldName name --notNullentity --class ~.domain.Pizzafield number --fieldName price --type java.lang.Floatfield set --fieldName toppings --type ~.domain.Topping
  80. 80. vaadin setup --applicationPackage ~.web --baseName PizzaShop --themeName pizza --useJpaContainer falsevaadin generate all --package ~.web.ui --visuallyComposable true
  81. 81. field string --class ~.domain.Pizza --notNull --fieldName name --sizeMin 3
  82. 82. gettingstarted
  83. 83. vaadin.com/download
  84. 84. vaadin.com/comparison
  85. 85. Download for Free vaadin.com/book Vaadin is a for build n open source ing mod J look gre ern web ava framework at, applicat your use perform well a ion rs happ nd make s that y. you and http://va adin.com /SBN 978 -9 52-92-67 53-8 900009 7 8 95 2 9 267538 $29.95 4th Editio n 674 pages
  86. 86. $43
  87. 87. brought to you by...#85 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object .dzone.com Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle
  88. 88. QuestionsComments vaadin. com/joonas @ joonaslehtinen #vaadin

×