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

Joonas Lehtinen, PhDVaadin Ltd - CEO

joonas@vaadin.com

Rich Web Applications in Server-side Java without

Plug-ins or JavaScript

tiistaina 14. syyskuuta 2010

?tiistaina 14. syyskuuta 2010

tiistaina 14. syyskuuta 2010

tiistaina 14. syyskuuta 2010

Vaadin is a UI framework

for desktop-like web apps

tiistaina 14. syyskuuta 2010

New configs, taglibs and syntax!?!

JavaScript,DOM, Applet,plugins?

No! This is Java. Nothing else.

tiistaina 14. syyskuuta 2010

htmljava

tiistaina 14. syyskuuta 2010

healthcare portal, 100 kloc of perl, .. web 1.0, netscape, ie5, ie6, ...

1998

tiistaina 14. syyskuuta 2010

healthcare portal, 100 kloc of perl, .. web 1.0, netscape, ie5, ie6, ... object oriented design, desktop, Java, U and I ...thinking of

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

object oriented design, desktop, Java, U and I ... desktop programming paradigm for web! found

tiistaina 14. syyskuuta 2010

desktop programming paradigm for web! found millstone ajax google web toolkit re-released as

2000

2002

2005

2008

tiistaina 14. syyskuuta 2010

millstone ajax goolge web toolkit re-released as

2009

tiistaina 14. syyskuuta 2010

is there a ?

tiistaina 14. syyskuuta 2010

ApacheLicense

tiistaina 14. syyskuuta 2010

Discussion

VaadinBig picture, Extending, Getting started

Server-side RIAWhat is it? Pros & cons?

In practiceCoding a Vaadin application step-by-step

Contents

tiistaina 14. syyskuuta 2010

Server-side RIA

tiistaina 14. syyskuuta 2010

?Rich Internet Application

tiistaina 14. syyskuuta 2010

an application thatmakes developers rich

tiistaina 14. syyskuuta 2010

if they bill by hour

tiistaina 14. syyskuuta 2010

Architecture

tiistaina 14. syyskuuta 2010

“Web 1.0”

DOM

Client Server

ViewHTML Page

over HttpResponse

Controller

Model

Parameters overHttpRequest

DB2

3

4

5

1

tiistaina 14. syyskuuta 2010

client-side ria

fat client

tiistaina 14. syyskuuta 2010

Client-side RIA

DOM

Client Server

View

Controller

Model

DB2

3

4

5

1

Requested datato view as

XML / JSON

Changes to modelencoded as parameters

tiistaina 14. syyskuuta 2010

programming web is

not easy

tiistaina 14. syyskuuta 2010

different featuresin different browsers

tiistaina 14. syyskuuta 2010

different performancein different browsers

tiistaina 14. syyskuuta 2010

different bugsin different browsers

tiistaina 14. syyskuuta 2010

Google Web Toolkit

tiistaina 14. syyskuuta 2010

Java toJavaScriptCompiler

Subset of

java.lang, java.util

Widgetset

Your Application UI

IE6

IE7

Firefox

Safari

tiistaina 14. syyskuuta 2010

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.

tiistaina 14. syyskuuta 2010

server-side ria

thin client

tiistaina 14. syyskuuta 2010

Server-side RIA

DOM

Client Server

ViewHTML Pageover HttpResponse

Controller

Model

Parameters overHttpRequest

DB4

5

6

2

Term

inalAdapter

Term

inalAdapter

Automated bythe RIA framework

3

7

1

9

8

tiistaina 14. syyskuuta 2010

Server-side RIA

DOM

Client Server

ViewHTML Pageover HttpResponse

Controller

Model

Parameters overHttpRequest

DB4

5

6

2

Term

inalAdapter

Term

inalAdapter

Automated bythe RIA framework

3

7

1

9

8

Handled by the framework

tiistaina 14. syyskuuta 2010

Java

modularextensible

cost-effectiveno JavaScript debugging

simplerforget the web

the benefits of Java

♲tiistaina 14. syyskuuta 2010

even simpler• forget the client-side • synchronous• server resources

tiistaina 14. syyskuuta 2010

more flexible• all Java tools and libraries• any JVM language

tiistaina 14. syyskuuta 2010

more secure• code stays in server• less web services

tiistaina 14. syyskuuta 2010

not as scalablestoring state in server memory limits number of concurrent users

tiistaina 14. syyskuuta 2010

A server with 16GB memory can handle 50.000 concurrent 250kB sessions

tiistaina 14. syyskuuta 2010

no offline modeserver is always required

tiistaina 14. syyskuuta 2010

In practice

tiistaina 14. syyskuuta 2010

Seeing is believing

© National Geographic Channel 2010

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 videohttp://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. syyskuuta 2010

demo

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

thanks to GWT, creating new ui components is really easy

tiistaina 14. syyskuuta 2010

directory

tiistaina 14. syyskuuta 2010

channel fordistributingVaadin 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

EclipseMaven

Netbeans[Spring Roo]

tiistaina 14. syyskuuta 2010

ServletPortlet 1.0Portlet 2.0

App Engine

tiistaina 14. syyskuuta 2010

gettingstarted

tiistaina 14. syyskuuta 2010

tiistaina 14. syyskuuta 2010

Book ofVaadin

Free as

PDFtiistaina 14. syyskuuta 2010

By Marko Grönroos

ABOUT VAADIN

ww

w.d

zone

.co

m

G

et M

ore

Ref

card

z! V

isit

ref

card

z.co

m

#85

Getting Started with VaadinCONTENTS INCLUDE:

About VaadinCreating An ApplicationComponents Layout ComponentsThemesData 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 ListenersIn the event-driven model, user interaction with user interface components triggers server-side events, which you can handle

Web BrowserClient-Side Engine

JavaWeb Server

VaadinUIComponents

YourJavaApplication

WebService

EJB

DB

Servlet Container

UserApplication

EventListener

DataModel

ApplicationThemes

ApplicationResources

DefaultTheme

FileResources

ExternalResources

Database

DataBinding

Inherits Events Changes

AJAX Requests

Inherits

UIComponent

JavaServlet

ApplicationClass

Web BrowserClient-Side Engine

brought to you by...

tiistaina 14. syyskuuta 2010

QuestionsComments

joonas@vaadin.com+358-40-5035001skype://joonaslehtinen

tiistaina 14. syyskuuta 2010