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

12,124 views

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
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,124
On SlideShare
0
From Embeds
0
Number of Embeds
658
Actions
Shares
0
Downloads
1,028
Comments
0
Likes
5
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

×