Rich Web Applications in                                   Server-side Java without                                     Pl...
sunnuntaina 13. helmikuuta 2011
Vaadin is a                UI framework              for desktop-like                     web appssunnuntaina 13. helmikuu...
New configs,    taglibs and    syntax!?!            No! {    JavaScript,    DOM, Applet,    plugins?                      ...
java                   htmlsunnuntaina 13. helmikuuta 2011
healthcare portal, 100 kloc of perl, ..                                    89                                  19sunnuntai...
web 1.0, netscape, ie5, ie6, ...sunnuntaina 13. helmikuuta 2011
thinking of   object oriented design, desktop, Java, U and I ...sunnuntaina 13. helmikuuta 2011
desktop programming paradigm for web!sunnuntaina 13. helmikuuta 2011
found                                millstone ajax google web toolkit            00                                      ...
re-released as                          09                      20sunnuntaina 13. helmikuuta 2011
Vaadin is now       21 months young        and 10 years oldsunnuntaina 13. helmikuuta 2011
Apache                                  Licensesunnuntaina 13. helmikuuta 2011
Contents         Server-side                                         Discussion         RIA         What is it? Pros & con...
Server-side RIAsunnuntaina 13. helmikuuta 2011
“Web 1.0”                      Client              5                                                               Server ...
Client-side RIA                        Client                  4                     Server                               ...
challenge                                    web is                                  not easysunnuntaina 13. helmikuuta 2011
different                 features                 in different                 browserssunnuntaina 13. helmikuuta 2011
different                 performance                 in different                 browserssunnuntaina 13. helmikuuta 2011
different                 bugs                 in different                 browserssunnuntaina 13. helmikuuta 2011
Google Web Toolkitsunnuntaina 13. helmikuuta 2011
Subset of                        IE6             java.lang, java.util                                       Java to     IE...
simpler                 • Java only                 • forget the websunnuntaina 13. helmikuuta 2011
cost-effective                 stop debugging                 JavaScript spaghettisunnuntaina 13. helmikuuta 2011
♲                             modular                                  extensiblesunnuntaina 13. helmikuuta 2011
Building wonderful                 apps doesn’t                 require writing fat                 web clients.sunnuntain...
Server-side RIA                    Client                                      8                                          ...
Server-side RIA                    Client                                      8                                          ...
the benefits    of Java                                  simpler                                  forget the web         J...
even simpler                 • forget the client-side                 • synchronous                 • server resourcessunn...
more flexible                 • all Java tools and                   libraries                 • any JVM language         ...
more secure                 • code stays in server                 • less web servicessunnuntaina 13. helmikuuta 2011
not as scalable                 UI state is stored in                 the server memorysunnuntaina 13. helmikuuta 2011
Measured 12.000                 active concurrent                 users per server                 for a ticketing app    ...
no offline mode                 server is always                 requiredsunnuntaina 13. helmikuuta 2011
#1 benefit                              development                               is really fastsunnuntaina 13. helmikuuta...
Vaadin                                  Frameworksunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011                                   1                                  Great UI             ...
sunnuntaina 13. helmikuuta 2011
Combined power of                                  • Server-side RIA                                  • Google Web Toolkit...
sunnuntaina 13. helmikuuta 2011                                  2                                  Combined power of     ...
Vaadin UI component    architecture                                       HTTP(S)          “UI Component”                 ...
Creating new UI                 components is                 really easysunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
Implement two classes      Server-side                               Client-side          “UI Component”            Automa...
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
First class                                  Java citizensunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011                                  3                                  First class           ...
Servlet                          Portlet                      App Enginesunnuntaina 13. helmikuuta 2011
Eclipse                            Maven                         Netbeans                        Spring Roosunnuntaina 13....
PRODUCTIVIsunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
persistence setup --provider HIBERNATE    --database HYPERSONIC_IN_MEMORY   entity --class ~.domain.Topping   field string ...
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
vaadin setup    --applicationPackage ~.web    --baseName PizzaShop    --themeName pizza    --useJpaContainer false   vaadi...
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
field string --class ~.domain.Pizza    --notNull --fieldName name --sizeMin 3sunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
getting                 startedsunnuntaina 13. helmikuuta 2011
sunnuntaina 13. helmikuuta 2011
Vaadin is                  a      for build n open source                ing mod         J     look gre           ern web ...
brought to you by... #85Get More Refcardz! Visit refcardz.com                                            CONTENTS INCLUDE:...
Forums with  1000 msgs/m                                                Ask the                                  [really a...
Questions               Comments                                  joon as@vaadin.com                                      ...
Upcoming SlideShare
Loading in...5
×

Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript

9,894

Published on

Vaadin Framework 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, one of the core Vaadin developers lays out the key concepts of the server-side RIA development model and shows how to build an application with Vaadin ground up.

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

No Downloads
Views
Total Views
9,894
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1,000
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript

  1. 1. Rich Web Applications in Server-side Java without Plug-ins or JavaScripttwitter: #vaadin @joonaslehtinen Joonas Lehtinen, PhD Vaadin Ltd - CEO joonas@vaadin.com sunnuntaina 13. helmikuuta 2011
  2. 2. sunnuntaina 13. helmikuuta 2011
  3. 3. Vaadin is a UI framework for desktop-like web appssunnuntaina 13. helmikuuta 2011
  4. 4. New configs, taglibs and syntax!?! No! { JavaScript, DOM, Applet, plugins? This is Nothin Java. g else .sunnuntaina 13. helmikuuta 2011
  5. 5. java htmlsunnuntaina 13. helmikuuta 2011
  6. 6. healthcare portal, 100 kloc of perl, .. 89 19sunnuntaina 13. helmikuuta 2011
  7. 7. web 1.0, netscape, ie5, ie6, ...sunnuntaina 13. helmikuuta 2011
  8. 8. thinking of object oriented design, desktop, Java, U and I ...sunnuntaina 13. helmikuuta 2011
  9. 9. desktop programming paradigm for web!sunnuntaina 13. helmikuuta 2011
  10. 10. found millstone ajax google web toolkit 00 08 02 05 20 20 20 20sunnuntaina 13. helmikuuta 2011
  11. 11. re-released as 09 20sunnuntaina 13. helmikuuta 2011
  12. 12. Vaadin is now 21 months young and 10 years oldsunnuntaina 13. helmikuuta 2011
  13. 13. Apache Licensesunnuntaina 13. helmikuuta 2011
  14. 14. Contents Server-side Discussion RIA What is it? Pros & cons? Vaadin Big picture, Extending, Getting started In practice Coding a Vaadin application step-by-stepsunnuntaina 13. helmikuuta 2011
  15. 15. Server-side RIAsunnuntaina 13. helmikuuta 2011
  16. 16. “Web 1.0” Client 5 Server HTML Page DOM over HttpResponse View 4 3 Model Parameters over HttpRequest Controller 2 DB 1sunnuntaina 13. helmikuuta 2011
  17. 17. Client-side RIA Client 4 Server Requested data View to view as XML / JSON 5 DOM Model 3 1 Changes to model Controller encoded as parameters DB 2sunnuntaina 13. helmikuuta 2011
  18. 18. challenge web is not easysunnuntaina 13. helmikuuta 2011
  19. 19. different features in different browserssunnuntaina 13. helmikuuta 2011
  20. 20. different performance in different browserssunnuntaina 13. helmikuuta 2011
  21. 21. different bugs in different browserssunnuntaina 13. helmikuuta 2011
  22. 22. Google Web Toolkitsunnuntaina 13. helmikuuta 2011
  23. 23. Subset of IE6 java.lang, java.util Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safarisunnuntaina 13. helmikuuta 2011
  24. 24. simpler • Java only • forget the websunnuntaina 13. helmikuuta 2011
  25. 25. cost-effective stop debugging JavaScript spaghettisunnuntaina 13. helmikuuta 2011
  26. 26. ♲ modular extensiblesunnuntaina 13. helmikuuta 2011
  27. 27. Building wonderful apps doesn’t require writing fat web clients.sunnuntaina 13. helmikuuta 2011
  28. 28. Server-side RIA Client 8 Server 9 7 TerminalAdapter TerminalAdapter HTML Page over HttpResponse View 6 Automated by 5 DOM the RIA framework Model Parameters over HttpRequest Controller 1 4 3 DB 2sunnuntaina 13. helmikuuta 2011
  29. 29. Server-side RIA Client 8 Server 9 7 TerminalAdapter TerminalAdapter HTML Page over HttpResponse View 6 Automated by 5 DOM the RIA framework Model Handled by the framework Parameters over HttpRequest Controller 1 4 3 DB 2sunnuntaina 13. helmikuuta 2011
  30. 30. the benefits of Java simpler forget the web Java cost-effective no JavaScript debugging modular extensible ♲sunnuntaina 13. helmikuuta 2011
  31. 31. even simpler • forget the client-side • synchronous • server resourcessunnuntaina 13. helmikuuta 2011
  32. 32. more flexible • all Java tools and libraries • any JVM language Scala Groovysunnuntaina 13. helmikuuta 2011
  33. 33. more secure • code stays in server • less web servicessunnuntaina 13. helmikuuta 2011
  34. 34. not as scalable UI state is stored in the server memorysunnuntaina 13. helmikuuta 2011
  35. 35. Measured 12.000 active concurrent users per server for a ticketing app [Amazon EC2-large; limited by storage layer]sunnuntaina 13. helmikuuta 2011
  36. 36. no offline mode server is always requiredsunnuntaina 13. helmikuuta 2011
  37. 37. #1 benefit development is really fastsunnuntaina 13. helmikuuta 2011
  38. 38. Vaadin Frameworksunnuntaina 13. helmikuuta 2011
  39. 39. sunnuntaina 13. helmikuuta 2011 1 Great UI Components
  40. 40. sunnuntaina 13. helmikuuta 2011
  41. 41. Combined power of • Server-side RIA • Google Web Toolkitsunnuntaina 13. helmikuuta 2011
  42. 42. sunnuntaina 13. helmikuuta 2011 2 Combined power of • Server-side RIA • Google Web Toolkit
  43. 43. Vaadin UI component architecture 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 Toolkitsunnuntaina 13. helmikuuta 2011
  44. 44. Creating new UI components is really easysunnuntaina 13. helmikuuta 2011
  45. 45. sunnuntaina 13. helmikuuta 2011
  46. 46. Implement two classes Server-side Client-side “UI Component” Automatic “Widget” • Define API • Render to DOM • Receive client events • Collect user events • Send UI updates backsunnuntaina 13. helmikuuta 2011
  47. 47. sunnuntaina 13. helmikuuta 2011
  48. 48. sunnuntaina 13. helmikuuta 2011
  49. 49. sunnuntaina 13. helmikuuta 2011
  50. 50. sunnuntaina 13. helmikuuta 2011
  51. 51. sunnuntaina 13. helmikuuta 2011
  52. 52. sunnuntaina 13. helmikuuta 2011
  53. 53. First class Java citizensunnuntaina 13. helmikuuta 2011
  54. 54. sunnuntaina 13. helmikuuta 2011 3 First class Java citizen
  55. 55. Servlet Portlet App Enginesunnuntaina 13. helmikuuta 2011
  56. 56. Eclipse Maven Netbeans Spring Roosunnuntaina 13. helmikuuta 2011
  57. 57. PRODUCTIVIsunnuntaina 13. helmikuuta 2011
  58. 58. sunnuntaina 13. helmikuuta 2011
  59. 59. persistence setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORY entity --class ~.domain.Topping field string --fieldName name --notNull entity --class ~.domain.Pizza field number --fieldName price --type java.lang.Float field set --fieldName toppings --type ~.domain.Toppingsunnuntaina 13. helmikuuta 2011
  60. 60. sunnuntaina 13. helmikuuta 2011
  61. 61. sunnuntaina 13. helmikuuta 2011
  62. 62. vaadin setup --applicationPackage ~.web --baseName PizzaShop --themeName pizza --useJpaContainer false vaadin generate all --package ~.web.ui --visuallyComposable truesunnuntaina 13. helmikuuta 2011
  63. 63. sunnuntaina 13. helmikuuta 2011
  64. 64. sunnuntaina 13. helmikuuta 2011
  65. 65. sunnuntaina 13. helmikuuta 2011
  66. 66. sunnuntaina 13. helmikuuta 2011
  67. 67. sunnuntaina 13. helmikuuta 2011
  68. 68. field string --class ~.domain.Pizza --notNull --fieldName name --sizeMin 3sunnuntaina 13. helmikuuta 2011
  69. 69. sunnuntaina 13. helmikuuta 2011
  70. 70. getting startedsunnuntaina 13. helmikuuta 2011
  71. 71. sunnuntaina 13. helmikuuta 2011
  72. 72. Vaadin is a for build n open source ing mod J look gre ern web ava framework at, app your use perform well an lications that rs happ d make y. you and http://va adin.com / ISBN 978 -9 52-92-67 53-8 90000 GET A Free 9 78952 9 267538US $24.9 5 Vaadin 6 Copy .4 Editionsunnuntaina 13. helmikuuta 2011
  73. 73. brought to you by... #85Get 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 w.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 handlesunnuntaina 13. helmikuuta 2011 components with the Google Web Toolkit (GWT) develop new
  74. 74. Forums with 1000 msgs/m Ask the [really active, world wide] 102,776 Communitysunnuntaina 13. helmikuuta 2011
  75. 75. Questions Comments joon as@vaadin.com vaadin.com/joonas twitter: joonaslehtinensunnuntaina 13. helmikuuta 2011
  1. A particular slide catching your eye?

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

×