Rich Web Applications in
                       Server-side Java without
                         Plug-ins or JavaScript
 ...
tiistaina 14. syyskuuta 2010
                               ?
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
Vaadin is a
                 UI framework
               for desktop-like
                      web apps


tiistaina 14. s...
New configs,
     taglibs and
     syntax!?!

     JavaScript,
     DOM, Applet,
     plugins?

     No!
     This is Java...
java               html

tiistaina 14. syyskuuta 2010
healthcare portal, 100 kloc of perl, ..
                                 89
                               19




tiistain...
web 1.0, netscape, ie5, ie6, ...




tiistaina 14. syyskuuta 2010
thinking of
    object oriented design, desktop, Java, U and I ...




tiistaina 14. syyskuuta 2010
desktop programming paradigm for web!




tiistaina 14. syyskuuta 2010
found                             millstone ajax google web toolkit
             00




                                  ...
re-released as
                               09
                        20




tiistaina 14. syyskuuta 2010
is there a             ?




tiistaina 14. syyskuuta 2010
Apache
                               License

tiistaina 14. syyskuuta 2010
Contents

          Server-side                                         Discussion
          RIA
          What is it? Pro...
Server-side RIA



tiistaina 14. syyskuuta 2010
?
                       Rich Internet
                        Application

tiistaina 14. syyskuuta 2010
an application that
            makes developers rich


tiistaina 14. syyskuuta 2010
if they bill by hour



tiistaina 14. syyskuuta 2010
Architecture




tiistaina 14. syyskuuta 2010
“Web 1.0”

                        Client           5
                                                              Server...
client-side ria

                               fat client


tiistaina 14. syyskuuta 2010
Client-side RIA

                          Client                4                     Server
                            ...
programming
                 web is
               not easy


tiistaina 14. syyskuuta 2010
different
                   features
                   in different
                   browsers

tiistaina 14. syyskuuta...
different
                   performance
                   in different
                   browsers

tiistaina 14. syysku...
different
                   bugs
                   in different
                   browsers

tiistaina 14. syyskuuta 2010
Google Web Toolkit


tiistaina 14. syyskuuta 2010
Subset of                            IE6
               java.lang, java.util

                                            ...
simpler
                   • Java only
                   • forget the web


tiistaina 14. syyskuuta 2010
cost-effective
                   stop debugging
                   JavaScript spaghetti


tiistaina 14. syyskuuta 2010
♲                          modular
                               extensible


tiistaina 14. syyskuuta 2010
Building wonderful
                   apps doesn’t
                   require writing fat
                   web clients.
...
server-side ria

                   thin client


tiistaina 14. syyskuuta 2010
Server-side RIA

                      Client                                 8
                                          ...
Server-side RIA

                      Client                                 8
                                          ...
the benefits
     of Java
                               simpler
                               forget the web

          ...
even simpler
                   • forget the client-side
                   • synchronous
                   • server reso...
more flexible
                   • all Java tools and
                     libraries
                   • any JVM language...
more secure
                   • code stays in server
                   • less web services


tiistaina 14. syyskuuta 2010
not as scalable
                   storing state in server
                   memory limits
                   number of c...
A server with
                   16GB memory can
                   handle 50.000
                   concurrent 250kB
    ...
no offline mode
                   server is always
                   required


tiistaina 14. syyskuuta 2010
In practice



tiistaina 14. syyskuuta 2010
© National Geographic Channel 2010




             Seeing is believing

tiistaina 14. syyskuuta 2010
What can it do
                   in 20 minutes?


tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
Demo as video
                 http://www.youtube.com/watch?v=u-a3VQF90kw




tiistaina 14. syyskuuta 2010
Vaadin



tiistaina 14. syyskuuta 2010
all benefits of
                               • server-side ria
                               • gwt


tiistaina 14. syys...
demo



tiistaina 14. syyskuuta 2010
Vaadin UI component
     architecture
                                        HTTP(S)
           “UI Component”           ...
thanks to GWT,
                   creating new ui
                   components is
                   really easy

tiistai...
directory



tiistaina 14. syyskuuta 2010
channel for
                   distributing
                   Vaadin add-ons


tiistaina 14. syyskuuta 2010
ui components,
           data sources,
        themes, tools, ...


tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
Eclipse
                    Maven
                 Netbeans
              [Spring Roo]

tiistaina 14. syyskuuta 2010
Servlet
                         Portlet 1.0
                         Portlet 2.0
                        App Engine

tiis...
getting
                   started


tiistaina 14. syyskuuta 2010
tiistaina 14. syyskuuta 2010
Book of
                         Vaadin

                                        as
                                      ...
brought to you by...
 #85Get More Refcardz! Visit refcardz.com


                                            CONTENTS INCL...
Questions
                Comments




                               joon as@vaadin.com
                                 ...
Upcoming SlideShare
Loading in …5
×

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

4,317 views

Published on

Get introduced to the Vaadin Web framework by one of its core developers, Joonas Lehtinen. The 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, 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.

Published in: Self Improvement
2 Comments
4 Likes
Statistics
Notes
  • i did JSF a few years to avoid JS, Vaadin is my new hope
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice and quick!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,317
On SlideShare
0
From Embeds
0
Number of Embeds
932
Actions
Shares
0
Downloads
113
Comments
2
Likes
4
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 in Server-side Java without Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO joonas@vaadin.com tiistaina 14. syyskuuta 2010
  2. 2. tiistaina 14. syyskuuta 2010 ?
  3. 3. tiistaina 14. syyskuuta 2010
  4. 4. tiistaina 14. syyskuuta 2010
  5. 5. Vaadin is a UI framework for desktop-like web apps tiistaina 14. syyskuuta 2010
  6. 6. New configs, taglibs and syntax!?! JavaScript, DOM, Applet, plugins? No! This is Java. Nothing else. tiistaina 14. syyskuuta 2010
  7. 7. java html tiistaina 14. syyskuuta 2010
  8. 8. healthcare portal, 100 kloc of perl, .. 89 19 tiistaina 14. syyskuuta 2010
  9. 9. web 1.0, netscape, ie5, ie6, ... tiistaina 14. syyskuuta 2010
  10. 10. thinking of object oriented design, desktop, Java, U and I ... tiistaina 14. syyskuuta 2010
  11. 11. desktop programming paradigm for web! tiistaina 14. syyskuuta 2010
  12. 12. found millstone ajax google web toolkit 00 08 02 05 20 20 20 20 tiistaina 14. syyskuuta 2010
  13. 13. re-released as 09 20 tiistaina 14. syyskuuta 2010
  14. 14. is there a ? tiistaina 14. syyskuuta 2010
  15. 15. Apache License tiistaina 14. syyskuuta 2010
  16. 16. Contents Server-side Discussion RIA What is it? Pros & cons? Vaadin Big picture, Extending, Getting started In practice Coding a Vaadin application step-by-step tiistaina 14. syyskuuta 2010
  17. 17. Server-side RIA tiistaina 14. syyskuuta 2010
  18. 18. ? Rich Internet Application tiistaina 14. syyskuuta 2010
  19. 19. an application that makes developers rich tiistaina 14. syyskuuta 2010
  20. 20. if they bill by hour tiistaina 14. syyskuuta 2010
  21. 21. Architecture tiistaina 14. syyskuuta 2010
  22. 22. “Web 1.0” Client 5 Server HTML Page DOM over HttpResponse View 4 3 Model Parameters over HttpRequest Controller 2 DB 1 tiistaina 14. syyskuuta 2010
  23. 23. client-side ria fat client tiistaina 14. syyskuuta 2010
  24. 24. 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 2 tiistaina 14. syyskuuta 2010
  25. 25. programming web is not easy tiistaina 14. syyskuuta 2010
  26. 26. different features in different browsers tiistaina 14. syyskuuta 2010
  27. 27. different performance in different browsers tiistaina 14. syyskuuta 2010
  28. 28. different bugs in different browsers tiistaina 14. syyskuuta 2010
  29. 29. Google Web Toolkit tiistaina 14. syyskuuta 2010
  30. 30. Subset of IE6 java.lang, java.util Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safari tiistaina 14. syyskuuta 2010
  31. 31. simpler • Java only • forget the web tiistaina 14. syyskuuta 2010
  32. 32. cost-effective stop debugging JavaScript spaghetti tiistaina 14. syyskuuta 2010
  33. 33. ♲ modular extensible tiistaina 14. syyskuuta 2010
  34. 34. Building wonderful apps doesn’t require writing fat web clients. tiistaina 14. syyskuuta 2010
  35. 35. server-side ria thin client tiistaina 14. syyskuuta 2010
  36. 36. 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 2 tiistaina 14. syyskuuta 2010
  37. 37. 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 2 tiistaina 14. syyskuuta 2010
  38. 38. the benefits of Java simpler forget the web Java cost-effective no JavaScript debugging modular extensible ♲ tiistaina 14. syyskuuta 2010
  39. 39. even simpler • forget the client-side • synchronous • server resources tiistaina 14. syyskuuta 2010
  40. 40. more flexible • all Java tools and libraries • any JVM language tiistaina 14. syyskuuta 2010
  41. 41. more secure • code stays in server • less web services tiistaina 14. syyskuuta 2010
  42. 42. not as scalable storing state in server memory limits number of concurrent users tiistaina 14. syyskuuta 2010
  43. 43. A server with 16GB memory can handle 50.000 concurrent 250kB sessions tiistaina 14. syyskuuta 2010
  44. 44. no offline mode server is always required tiistaina 14. syyskuuta 2010
  45. 45. In practice tiistaina 14. syyskuuta 2010
  46. 46. © National Geographic Channel 2010 Seeing is believing tiistaina 14. syyskuuta 2010
  47. 47. What can it do in 20 minutes? tiistaina 14. syyskuuta 2010
  48. 48. tiistaina 14. syyskuuta 2010
  49. 49. tiistaina 14. syyskuuta 2010
  50. 50. Demo as video http://www.youtube.com/watch?v=u-a3VQF90kw tiistaina 14. syyskuuta 2010
  51. 51. Vaadin tiistaina 14. syyskuuta 2010
  52. 52. all benefits of • server-side ria • gwt tiistaina 14. syyskuuta 2010
  53. 53. demo tiistaina 14. syyskuuta 2010
  54. 54. 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 Toolkit tiistaina 14. syyskuuta 2010
  55. 55. thanks to GWT, creating new ui components is really easy tiistaina 14. syyskuuta 2010
  56. 56. directory tiistaina 14. syyskuuta 2010
  57. 57. channel for distributing Vaadin add-ons tiistaina 14. syyskuuta 2010
  58. 58. ui components, data sources, themes, tools, ... tiistaina 14. syyskuuta 2010
  59. 59. tiistaina 14. syyskuuta 2010
  60. 60. tiistaina 14. syyskuuta 2010
  61. 61. tiistaina 14. syyskuuta 2010
  62. 62. tiistaina 14. syyskuuta 2010
  63. 63. tiistaina 14. syyskuuta 2010
  64. 64. tiistaina 14. syyskuuta 2010
  65. 65. tiistaina 14. syyskuuta 2010
  66. 66. Eclipse Maven Netbeans [Spring Roo] tiistaina 14. syyskuuta 2010
  67. 67. Servlet Portlet 1.0 Portlet 2.0 App Engine tiistaina 14. syyskuuta 2010
  68. 68. getting started tiistaina 14. syyskuuta 2010
  69. 69. tiistaina 14. syyskuuta 2010
  70. 70. Book of Vaadin as e re F F D P tiistaina 14. syyskuuta 2010
  71. 71. 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 handle tiistaina 14. syyskuuta 2010 new components with the Google Web Toolkit (GWT) develop
  72. 72. Questions Comments joon as@vaadin.com +358-40-5035001 sky pe://joonaslehtinen tiistaina 14. syyskuuta 2010

×