Successfully reported this slideshow.
Joonas Lehtinen
2010
J3
Vaadin - Rich Web
Applications in Server-side
Java without Plug-ins or JS
Agilité iPhone Java Incubateur
8:15 Accueil des participantsAccueil des participantsAccueil des participantsAccueil des pa...
Joonas Lehtinen, PhD
IT Mill - CEO
joonas@vaadin.com
Rich Web Applications in
Server-side Java without
Plug-ins or JavaScr...
?Sunday, March 7, 2010
Sunday, March 7, 2010
Vaadin is a
UI framework
for desktop-like
web apps
Sunday, March 7, 2010
New configs,
taglibs and
syntax!?!
JavaScript,
DOM, Applet,
plugins?
No!
This is Java.
Nothing else.
Sunday, March 7, 2010
htmljava
Sunday, March 7, 2010
healthcare portal, 100 kloc of perl, ..
1998
Sunday, March 7, 2010
web 1.0, netscape, ie5, ie6, ...
Sunday, March 7, 2010
object oriented design, desktop, Java, U and I ...
thinking of
Sunday, March 7, 2010
desktop programming paradigm for web!
Sunday, March 7, 2010
found millstone ajax google web toolkit
2000
2002
2005
2008
Sunday, March 7, 2010
re-released as
2009
Sunday, March 7, 2010
is there a ?
Sunday, March 7, 2010
Apache
License
Sunday, March 7, 2010
Discussion
Vaadin
Big picture, Extending, Getting started
Server-side
RIA
What is it? Pros & cons?
In practice
Coding a Va...
Server-side RIA
Sunday, March 7, 2010
?Rich Internet
Application
Sunday, March 7, 2010
an application that
makes developers rich
Sunday, March 7, 2010
if they bill by hour
Sunday, March 7, 2010
Architecture
Sunday, March 7, 2010
“Web 1.0”
DOM
Client Server
ViewHTML Page
over HttpResponse
Controller
Model
Parameters over
HttpRequest
DB
2
3
4
5
1
Sund...
client-side ria
fat client
Sunday, March 7, 2010
Client-side RIA
DOM
Client Server
View
Controller
Model
DB
2
3
4
5
1
Requested data
to view as
XML / JSON
Changes to model...
programming
web is
not easy
Sunday, March 7, 2010
different
features
in different
browsers
Sunday, March 7, 2010
different
performance
in different
browsers
Sunday, March 7, 2010
different
bugs
in different
browsers
Sunday, March 7, 2010
Google Web Toolkit
Sunday, March 7, 2010
Java to
JavaScript
Compiler
Subset of
java.lang, java.util
Widgetset
Your Application UI
IE6
IE7
Firefox
Safari
Sunday, Ma...
simpler
• Java only
• forget the web
Sunday, March 7, 2010
cost-effective
stop debugging
JavaScript spaghetti
Sunday, March 7, 2010
modular
extensible♲
Sunday, March 7, 2010
Building wonderful
apps doesn’t
require writing fat
web clients.
Sunday, March 7, 2010
server-side ria
thin client
Sunday, March 7, 2010
Server-side RIA
DOM
Client Server
ViewHTML Page
over HttpResponse
Controller
Model
Parameters over
HttpRequest
DB
4
5
6
2
...
Server-side RIA
DOM
Client Server
ViewHTML Page
over HttpResponse
Controller
Model
Parameters over
HttpRequest
DB
4
5
6
2
...
Java
modular
extensible
cost-effective
no JavaScript
debugging
simpler
forget the web
the benefits
of Java
♲
Sunday, March...
even simpler
• forget the client-side
• synchronous
• server resources
Sunday, March 7, 2010
more flexible
• all Java tools and
libraries
• any JVM language
Sunday, March 7, 2010
more secure
• code stays in server
• less web services
Sunday, March 7, 2010
not as scalable
more processing
kept on server
Sunday, March 7, 2010
no offline mode
server is always
required
Sunday, March 7, 2010
In practice
Sunday, March 7, 2010
Seeing is believing
© National Geographic Channel 2010
Sunday, March 7, 2010
What can it do
in 20 minutes?
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Demo as video
http://www.youtube.com/watch?v=u-a3VQF90kw
Sunday, March 7, 2010
Vaadin
Sunday, March 7, 2010
all benefits of
• server-side ria
• gwt
Sunday, March 7, 2010
ui components
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Vaadin UI component
architecture
“UI Component”
• Button, Table, Tree, ...
• Server-side data
• Full Java API
Java
• Googl...
thanks to GWT,
creating new ui
components is
really easy
Sunday, March 7, 2010
directory
Sunday, March 7, 2010
channel for
distributing
Vaadin add-ons
Sunday, March 7, 2010
ui components,
data sources,
themes, tools, ...
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Sunday, March 7, 2010
Vaadin Directory
open to public by
the end of this month
Sunday, March 7, 2010
Eclipse
Maven
Netbeans
Sunday, March 7, 2010
Servlet
Portlet
GAE
Sunday, March 7, 2010
getting
started
Sunday, March 7, 2010
Sunday, March 7, 2010
Book of
Vaadin
Free
as
PDF
Sunday, March 7, 2010
By Marko Grönroos
ABOUT VAADIN
w.dzone.comGetMoreRefcardz!Visitrefcardz.com#85
Getting Started with Vaadin
CONTENTS INCLUD...
Questions
Comments
joonas@vaadin.com
+358-40-5035001
skype://joonaslehtinen
Sunday, March 7, 2010
Upcoming SlideShare
Loading in …5
×

soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript

1,465 views

Published on

Joonas Lehtinen

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: Technology
  • Be the first to comment

soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript

  1. 1. Joonas Lehtinen 2010 J3 Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JS
  2. 2. Agilité iPhone Java Incubateur 8:15 Accueil des participantsAccueil des participantsAccueil des participantsAccueil des participants 8:40 Mot des organisateurs & Criée des orateursMot des organisateurs & Criée des orateursMot des organisateurs & Criée des orateursMot des organisateurs & Criée des orateurs 9:00 Keynote de Nicolas Martignole (30 minutes)Keynote de Nicolas Martignole (30 minutes)Keynote de Nicolas Martignole (30 minutes)Keynote de Nicolas Martignole (30 minutes) 9:40 10:40 - A1 - Le terrain Agile Jean-Philippe Vigniel - I1- Hello iPhone Stephane Tavera - J1 - NOSQL also means RDF stores: an Android case study Fabrizio Giudci - X1 - Le développement durable Dominic Williams 11:00 12:00 - A2 - Integration of User Centered Design in Agile Development of RIA J. Borkenhagen, J. Desmazières - I2 - Développement d'une application iPhone pilotée par les tests Emmanuel Etasse, Van-Charles Tran - J2 - La Tequila du développement Web Nicolas Martignole - X2 - Cloud Computing: anatomie et pratique Marc-Elian Bégin 12:20 13:20 - A3 - Adoption de l'Agilité par les usages Xavier Warzee - I3 - Distribution d'applications iPhone en Entreprise: Réalisation d'un AppStore interne Géraud de Laval - J3 - Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaScript Joonas Lehtinen - X3 - Les DVCS sont vos amis Sébastien Douche Pause repas (50 minutes)Pause repas (50 minutes)Pause repas (50 minutes)Pause repas (50 minutes) 14h10 Keynote de Regis Medina (30 minutes)Keynote de Regis Medina (30 minutes)Keynote de Regis Medina (30 minutes)Keynote de Regis Medina (30 minutes) 14h50 15h50 - A4 - Scrum, introduction et mise en oeuvre avec iceScrum Claude Aubry - I4 - Agile iOS Development Jérôme Layat, Alexander Osterwalder - J4 - JAX-RS and Java EE 6 Paul Sandoz - X4 - IT Design & Ergonomy Pascal Petit, Aude Lussigny 16h10 17h10 - A5 - Agilité : 10 ans déjà Thierry Cros - I5 - Optimizing iOS applications Marc-Antoine Scheurer - J5 - Ecrivez et automatisez vos tests fonctionnels avec jBehave Xavier Bourguignon - X5 - NoSQL : Enfin de la biodiversité dans l'écosystème des BD Olivier Mallassi 17h30 18h30 - A6 - Lean engineering Jean-Christophe Dubail - I6 - iPhone et Agile, l'amour vache Guillaume Duquesnay - J6 - Let's make this test suite run faster David Gageot - X6 - The feel of Scala Mario Fusco Mot de la fin & tombolaMot de la fin & tombolaMot de la fin & tombolaMot de la fin & tombola Programme de la Conférence www.soft-shake.ch
  3. 3. Joonas Lehtinen, PhD IT Mill - CEO joonas@vaadin.com Rich Web Applications in Server-side Java without Plug-ins or JavaScript Sunday, March 7, 2010
  4. 4. ?Sunday, March 7, 2010
  5. 5. Sunday, March 7, 2010
  6. 6. Vaadin is a UI framework for desktop-like web apps Sunday, March 7, 2010
  7. 7. New configs, taglibs and syntax!?! JavaScript, DOM, Applet, plugins? No! This is Java. Nothing else. Sunday, March 7, 2010
  8. 8. htmljava Sunday, March 7, 2010
  9. 9. healthcare portal, 100 kloc of perl, .. 1998 Sunday, March 7, 2010
  10. 10. web 1.0, netscape, ie5, ie6, ... Sunday, March 7, 2010
  11. 11. object oriented design, desktop, Java, U and I ... thinking of Sunday, March 7, 2010
  12. 12. desktop programming paradigm for web! Sunday, March 7, 2010
  13. 13. found millstone ajax google web toolkit 2000 2002 2005 2008 Sunday, March 7, 2010
  14. 14. re-released as 2009 Sunday, March 7, 2010
  15. 15. is there a ? Sunday, March 7, 2010
  16. 16. Apache License Sunday, March 7, 2010
  17. 17. Discussion Vaadin Big picture, Extending, Getting started Server-side RIA What is it? Pros & cons? In practice Coding a Vaadin application step-by-step Contents Sunday, March 7, 2010
  18. 18. Server-side RIA Sunday, March 7, 2010
  19. 19. ?Rich Internet Application Sunday, March 7, 2010
  20. 20. an application that makes developers rich Sunday, March 7, 2010
  21. 21. if they bill by hour Sunday, March 7, 2010
  22. 22. Architecture Sunday, March 7, 2010
  23. 23. “Web 1.0” DOM Client Server ViewHTML Page over HttpResponse Controller Model Parameters over HttpRequest DB 2 3 4 5 1 Sunday, March 7, 2010
  24. 24. client-side ria fat client Sunday, March 7, 2010
  25. 25. Client-side RIA DOM Client Server View Controller Model DB 2 3 4 5 1 Requested data to view as XML / JSON Changes to model encoded as parameters Sunday, March 7, 2010
  26. 26. programming web is not easy Sunday, March 7, 2010
  27. 27. different features in different browsers Sunday, March 7, 2010
  28. 28. different performance in different browsers Sunday, March 7, 2010
  29. 29. different bugs in different browsers Sunday, March 7, 2010
  30. 30. Google Web Toolkit Sunday, March 7, 2010
  31. 31. Java to JavaScript Compiler Subset of java.lang, java.util Widgetset Your Application UI IE6 IE7 Firefox Safari Sunday, March 7, 2010
  32. 32. simpler • Java only • forget the web Sunday, March 7, 2010
  33. 33. cost-effective stop debugging JavaScript spaghetti Sunday, March 7, 2010
  34. 34. modular extensible♲ Sunday, March 7, 2010
  35. 35. Building wonderful apps doesn’t require writing fat web clients. Sunday, March 7, 2010
  36. 36. server-side ria thin client Sunday, March 7, 2010
  37. 37. Server-side RIA DOM Client Server ViewHTML Page over HttpResponse Controller Model Parameters over HttpRequest DB 4 5 6 2 TerminalAdapter TerminalAdapter Automated by the RIA framework 3 7 1 9 8 Sunday, March 7, 2010
  38. 38. Server-side RIA DOM Client Server ViewHTML Page over HttpResponse Controller Model Parameters over HttpRequest DB 4 5 6 2 TerminalAdapter TerminalAdapter Automated by the RIA framework 3 7 1 9 8 Handled by the framework Sunday, March 7, 2010
  39. 39. Java modular extensible cost-effective no JavaScript debugging simpler forget the web the benefits of Java ♲ Sunday, March 7, 2010
  40. 40. even simpler • forget the client-side • synchronous • server resources Sunday, March 7, 2010
  41. 41. more flexible • all Java tools and libraries • any JVM language Sunday, March 7, 2010
  42. 42. more secure • code stays in server • less web services Sunday, March 7, 2010
  43. 43. not as scalable more processing kept on server Sunday, March 7, 2010
  44. 44. no offline mode server is always required Sunday, March 7, 2010
  45. 45. In practice Sunday, March 7, 2010
  46. 46. Seeing is believing © National Geographic Channel 2010 Sunday, March 7, 2010
  47. 47. What can it do in 20 minutes? Sunday, March 7, 2010
  48. 48. Sunday, March 7, 2010
  49. 49. Sunday, March 7, 2010
  50. 50. Demo as video http://www.youtube.com/watch?v=u-a3VQF90kw Sunday, March 7, 2010
  51. 51. Vaadin Sunday, March 7, 2010
  52. 52. all benefits of • server-side ria • gwt Sunday, March 7, 2010
  53. 53. ui components Sunday, March 7, 2010
  54. 54. Sunday, March 7, 2010
  55. 55. Sunday, March 7, 2010
  56. 56. Sunday, March 7, 2010
  57. 57. Vaadin UI component architecture “UI Component” • Button, Table, Tree, ... • Server-side data • Full Java API Java • Google Web Toolkit “Widget” • Client-side peer for the component • Runs on JavaScript HTTP(S) Java • Compiled with JDK Sunday, March 7, 2010
  58. 58. thanks to GWT, creating new ui components is really easy Sunday, March 7, 2010
  59. 59. directory Sunday, March 7, 2010
  60. 60. channel for distributing Vaadin add-ons Sunday, March 7, 2010
  61. 61. ui components, data sources, themes, tools, ... Sunday, March 7, 2010
  62. 62. Sunday, March 7, 2010
  63. 63. Sunday, March 7, 2010
  64. 64. Sunday, March 7, 2010
  65. 65. Sunday, March 7, 2010
  66. 66. Sunday, March 7, 2010
  67. 67. Vaadin Directory open to public by the end of this month Sunday, March 7, 2010
  68. 68. Eclipse Maven Netbeans Sunday, March 7, 2010
  69. 69. Servlet Portlet GAE Sunday, March 7, 2010
  70. 70. getting started Sunday, March 7, 2010
  71. 71. Sunday, March 7, 2010
  72. 72. Book of Vaadin Free as PDF Sunday, March 7, 2010
  73. 73. By Marko Grönroos ABOUT VAADIN w.dzone.comGetMoreRefcardz!Visitrefcardz.com#85 Getting Started with Vaadin CONTENTS INCLUDE: About Vaadin Creating An Application Components Layout Components Themes Data Binding and more... Vaadin is a server-side Ajax web application development framework that allows you to build web applications just like with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components. In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache License 2.0. Figure 1: Vaadin Client-Server Architecture If the built-in selection of components is not enough, you can develop new components with the Google Web Toolkit (GWT) Figure 2: Architecture for Vaadin Applications Hot Tip You can get a reference to the application object from any component attached to the application with Event Listeners In the event-driven model, user interaction with user interface components triggers server-side events, which you can handle Web Browser Client-Side Engine Java Web Server Vaadin UI Components Your Java Application Web Service EJB DB Servlet Container User Application Event Listener Data Model Application Themes Application Resources Default Theme File Resources External Resources Database Data Binding Inherits Events Changes AJAX Requests Inherits UI Component Java Servlet Application Class Web Browser Client-Side Engine brought to you by... Sunday, March 7, 2010
  74. 74. Questions Comments joonas@vaadin.com +358-40-5035001 skype://joonaslehtinen Sunday, March 7, 2010

×