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
2 Java class files~ 50 LOC + importsno HTMLno CSSno JavaScriptno Cut-n-Paste
https://github.com/jojule/DocumentManager
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” • ...
Vaadin += GWT
GWTCompatible
Serve         ucr-od              ize                    Pr                    tim                       Op               ...
Client        Co              Op      -     im   t     ntr                                       f orol    ize  df        ...
CommercialSupport
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    ...
gettingstarted
vaadin.com/download
vaadin.com/comparison
Download for Free          vaadin.com/book     Vaadin is                a    for build n open source              ing mod ...
brought to you by...#85 Get More Refcardz! Visit refcardz.com                                         CONTENTS INCLUDE:   ...
Questions?Comments?joonas@vaadin.com  vaadin.com/joonas    @joonaslehtinen            #vaadin    Expert services          ...
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen
Upcoming SlideShare
Loading in …5
×

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen

1,277 views
1,230 views

Published on

Get introduced to the Vaadin framework by one of its core developers. 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. In this session, Joonas lays out 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

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

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

No notes for slide

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen

  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. Vaadin is aUI framework for rich web applications
  3. 3. java html
  4. 4. History behind Vaadin
  5. 5. healthcare portal, >100 kloc of perl, 8919
  6. 6. web 1.0, netscape, ie5, ie6, ...
  7. 7. thinking ofobject oriented design, desktop, Java, U and I ...
  8. 8. desktop programming paradigm for web!
  9. 9. found millstone ajax google web toolkit 00 08 02 0520 20 20 20
  10. 10. re-released as 09 20
  11. 11. 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
  12. 12. see our transparent vaadin.com/roadmap 12 20
  13. 13. ApacheLicense
  14. 14. ContentsServer-side DiscussionRIAWhat is it? Pros & cons? Vaadin Technology, Features, Getting startedIn practiceCoding a Vaadinapplication step-by-step
  15. 15. Server-side RIA
  16. 16. “Web 1.0”Client 5 Server HTML PageDOM over HttpResponse View 4 3 Model Parameters over HttpRequest Controller 2 DB 1
  17. 17. client-side riafat client
  18. 18. 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
  19. 19. challenge web isnot easy
  20. 20. Refactoring? Compile-AutomatedAPI docs? weak typing time checking? Code completion?
  21. 21. > 1 developers +JavaScriptfacilitated weak typingspaghetti + > 10k SLOC
  22. 22. performance browsers are bugs different features
  23. 23. Google Web Toolkit
  24. 24. Subset of IE6java.lang, java.util Java to IE7 Widgetset JavaScript Compiler FirefoxYour Application UI Safari
  25. 25. simpler• 100% Java• Static typing• Object oriented• Excellent tooling
  26. 26. less bugs• Stop debugging JavaScript spaghetti• Ignore most browser differences
  27. 27. client-side• UI in client• Asyncronous RPC• Services (for UI)
  28. 28. Building wonderfulapps doesn’trequire writing fatweb clients.
  29. 29. server-side riathin client
  30. 30. 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
  31. 31. High level simpler • 100% JavaStrong • Strong typing • Object orientedprogramming • Excellent toolingmodel less bugs • No JavaScript debugging • Ignore browsers
  32. 32. server enviroment• Access any library• Use any language• Runtime is not limited by browser• Trusted• Well defined
  33. 33. simplifiedcommunications• No RPC layer• No services (for UI)• Synchronous• Direct access to server API
  34. 34. secure• Code stays in server• No services (for UI)• Predictable runtime
  35. 35. not as scalableUI state is stored inthe server memory
  36. 36. 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
  37. 37. no offline modeconnection to serveris always required
  38. 38. #1 benefitdevelopment is really fast
  39. 39. 2 Java class files~ 50 LOC + importsno HTMLno CSSno JavaScriptno Cut-n-Paste
  40. 40. https://github.com/jojule/DocumentManager
  41. 41. VaadinFramework
  42. 42. Developer experiencegoals User expecience Scalability
  43. 43. 123 ideas
  44. 44. 1amazingcomponents
  45. 45. User IntefaceData Source Theme
  46. 46. User IntefaceData Source Theme
  47. 47. Reindeer RunoChameleon Custom
  48. 48. User IntefaceData Source Theme
  49. 49. InMemory, Bean, Method,Collection, JDBC, JPA,Hibernate, TextFile,FileSystem, Properties,EclipseLink, Lucene,Mockups, GAE, ... Your’s
  50. 50. exampleSQLContainer
  51. 51. Tableor any other UI componentSQLContainerFreeformQuery JDBC SELECT * FROM ...
  52. 52. 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);
  53. 53. Tableor any other UI componentSQLContainerTableQuery JDBC Database Table
  54. 54. • lazy loading• advanced filtering• sorting• connection pooling• transactions• optimistic locking• autocommit mode
  55. 55. • HSQLDB• MySQL• PostgreSQL• Oracle• MS SQL Server
  56. 56. 2combine power of• Server-side RIA• Google Web Toolkit
  57. 57. 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
  58. 58. How does itwork, really?
  59. 59. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  60. 60. • name=”Joonas”• button clicked150 bytes
  61. 61. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  62. 62. 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
  63. 63. Creating new UIcomponents isreally easy
  64. 64. 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
  65. 65. Vaadin += GWT
  66. 66. GWTCompatible
  67. 67. Serve ucr-od ize Pr tim Op f or ed tiv iz df ority tim e rol Op t- s d ont i C ien Cl
  68. 68. Client Co Op - im t ntr f orol ize df iz ed iv ityor tim c t sid Op u od r- e P r rve Se
  69. 69. CommercialSupport
  70. 70. 3embracejava
  71. 71. Any JVMLanguage
  72. 72. 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)
  73. 73. Internet Explorer6.. Chrome Firefox Safari Opera iOS Android
  74. 74. No browser pluginsNothing to install
  75. 75. Servlet Portlet(most) clouds
  76. 76. 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.
  77. 77. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  78. 78. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-clean mvn package yourproject-1.0.war
  79. 79. gettingstarted
  80. 80. vaadin.com/download
  81. 81. vaadin.com/comparison
  82. 82. 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
  83. 83. 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
  84. 84. Questions?Comments?joonas@vaadin.com vaadin.com/joonas @joonaslehtinen #vaadin Expert services Better Online support Results Training Slides available on Faster slideshare Tools vaadin.com/pro

×