Presentation at DevFestDC on Sep 28, 2012 about Vaadin 7, Vaadin += GWT and Vaadin in general.

1. Vaadin += GWT
Dr. Joonas Lehtinen
Vaadin - CEO
vaadin.com/joonas
@joonaslehtinen

3. Vaadin is a
UI framework
for rich web
applications

4. java html

5. healthcare portal, >100 kloc of perl,
89
19

6. web 1.0, netscape, ie5, ie6, ...

7. thinking of
object oriented design, desktop, Java, U and I ...

8. desktop programming paradigm for web!

9. found millstone ajax google web toolkit
00
08
02
05
20
20
20
20

10. re-released as
09
20

11. Used by >50.000
developers in >150
countries
Building apps for
fortune 500, startups,
governments, ...
across all industries
Collaborating by
conributing > 280
plug-ins and helping
add-ons, mainstream each other on a forum
with >1500 posts / m
10
11
Backed by 50+ person
20
20
full-time team

12. Vaadin += GWT
beta
12
20

13. is there a ?

14. Apache
License

15. Developer
experience
goals User
expecience
Scalability

16. 123
Key Ideas

17. 1
Rich
Components

18. User Inteface
Data Source
Theme

23. User Inteface
Data Source
Theme

29. User Inteface
Data Source
Theme

32. InMemory, Bean, Method,
Collection, JDBC, JPA,
Hibernate, TextFile,
FileSystem, Properties,
EclipseLink, Lucene,
Mockups, GAE, ...

33. 2
Server + Client

34. Layers of abstraction
Backend Web Java to
RPC JavaScript
server server JavaScript
ExtJS GWT Vaadin
required required optional optional optional
required required required required optional
required required required required

35. Vaadin += GWT

39. GWT
Compatible

40. Serve
ucr-od
ize
Pr
tim
Op
f or
ed
tiv
iz
df
or
ity
tim
e rol
Op
t-
s d ont
i C
ien
Cl

41. Client
Co
Op
- im t
ntr
f or
ol ize
df
iz ed iv ity
or
tim c t
sid
Op
u
od
r-
e
P r
rve
Se

42. Architecture

44. How does it
work, really?

46. • Initial HTML
• CSS (theme)
• Images
• JavaScript
830k total
compress
250k
reduced
widgetset
120k

47. • name=”Joonas”
• button clicked
150 bytes

49. • name=”Joonas”
• button clicked
150 bytes
• Add
notification
466 bytes

50. Widget
7
Connector
client
State
server
RPC
Component

51. Trying it out

53. https://github.com/jojule/NotesDemo

54. 3
Embracing
Java

55. Any JVM
Language

56. Scalawith Scaladin add-on
val 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)

57. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

58. No
browser
plugins
Nothing to
install

59. Servlet
Portlet
(most) clouds

60. Apache Tomcat, version 4.1 or later
Oracle WebLogic Server, version 9.2 or later
Oracle WebLogic Portal, version 10gR3
IBM WebSphere Application Server, version 6.1 or later
IBM WebSphere Portal, version 6.1 and 7.0
JBoss Application Server, version 3.2.8 or later
Jetty, version 5 or later
Glassfish, version 2 or later
Liferay Portal 5.2 or later
GateIn Portal 3.1
eXo Platform 3
Google App Engine
Vaadin supports Java Servlet API 2.3
and JSR-168 and JSR-286 Portlet
Specifications and should work with
any Java application server that conforms
to these standards.

61. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
Spring Roo
∙∙∙

63. getting
started

65. Maven
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=7.0.0.beta2
mvn package yourproject-1.0.war

66. Download for Free
vaadin.com/book
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
9 7 89 52
9 267538
S $29.9
5
Vaadin 7
Draft Edition
~700 pages

67. 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

69. vaadin.com/gwt
@joonaslehtinen #

70. Questions?
Comments?
joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
#vaadin
Slides available on
slideshare: