vaadin - rich web applications in server-side java without plug-ins or javascript

72
Joonas Lehtinen, PhD Vaadin Ltd - CEO [email protected] Rich Web Applications in Server-side Java without Plug-ins or JavaScript tiistaina 14. syyskuuta 2010

Upload: boris-kraft

Post on 25-May-2015

3.955 views

Category:

Self Improvement


1 download

DESCRIPTION

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.

TRANSCRIPT

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

Joonas Lehtinen, PhDVaadin Ltd - CEO

[email protected]

Rich Web Applications in Server-side Java without

Plug-ins or JavaScript

tiistaina 14. syyskuuta 2010

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

?tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

Vaadin is a UI framework

for desktop-like web apps

tiistaina 14. syyskuuta 2010

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

New configs, taglibs and syntax!?!

JavaScript,DOM, Applet,plugins?

No! This is Java. Nothing else.

tiistaina 14. syyskuuta 2010

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

htmljava

tiistaina 14. syyskuuta 2010

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

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

1998

tiistaina 14. syyskuuta 2010

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

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

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

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

tiistaina 14. syyskuuta 2010

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

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

tiistaina 14. syyskuuta 2010

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

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

2000

2002

2005

2008

tiistaina 14. syyskuuta 2010

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

millstone ajax goolge web toolkit re-released as

2009

tiistaina 14. syyskuuta 2010

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

is there a ?

tiistaina 14. syyskuuta 2010

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

ApacheLicense

tiistaina 14. syyskuuta 2010

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

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

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

Server-side RIA

tiistaina 14. syyskuuta 2010

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

?Rich Internet Application

tiistaina 14. syyskuuta 2010

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

an application thatmakes developers rich

tiistaina 14. syyskuuta 2010

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

if they bill by hour

tiistaina 14. syyskuuta 2010

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

Architecture

tiistaina 14. syyskuuta 2010

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

“Web 1.0”

DOM

Client Server

ViewHTML Page

over HttpResponse

Controller

Model

Parameters overHttpRequest

DB2

3

4

5

1

tiistaina 14. syyskuuta 2010

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

client-side ria

fat client

tiistaina 14. syyskuuta 2010

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

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

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

programming web is

not easy

tiistaina 14. syyskuuta 2010

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

different featuresin different browsers

tiistaina 14. syyskuuta 2010

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

different performancein different browsers

tiistaina 14. syyskuuta 2010

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

different bugsin different browsers

tiistaina 14. syyskuuta 2010

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

Google Web Toolkit

tiistaina 14. syyskuuta 2010

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

Java toJavaScriptCompiler

Subset of

java.lang, java.util

Widgetset

Your Application UI

IE6

IE7

Firefox

Safari

tiistaina 14. syyskuuta 2010

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

simpler• Java only• forget the web

tiistaina 14. syyskuuta 2010

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

cost-effective stop debugging JavaScript spaghetti

tiistaina 14. syyskuuta 2010

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

modular extensible♲

tiistaina 14. syyskuuta 2010

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

Building wonderful apps doesn’t require writing fat web clients.

tiistaina 14. syyskuuta 2010

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

server-side ria

thin client

tiistaina 14. syyskuuta 2010

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

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

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

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

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

Java

modularextensible

cost-effectiveno JavaScript debugging

simplerforget the web

the benefits of Java

♲tiistaina 14. syyskuuta 2010

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

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

tiistaina 14. syyskuuta 2010

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

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

tiistaina 14. syyskuuta 2010

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

more secure• code stays in server• less web services

tiistaina 14. syyskuuta 2010

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

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

tiistaina 14. syyskuuta 2010

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

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

tiistaina 14. syyskuuta 2010

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

no offline modeserver is always required

tiistaina 14. syyskuuta 2010

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

In practice

tiistaina 14. syyskuuta 2010

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

Seeing is believing

© National Geographic Channel 2010

tiistaina 14. syyskuuta 2010

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

What can it do in 20 minutes?

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

Demo as videohttp://www.youtube.com/watch?v=u-a3VQF90kw

tiistaina 14. syyskuuta 2010

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

Vaadin

tiistaina 14. syyskuuta 2010

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

all benefits of• server-side ria• gwt

tiistaina 14. syyskuuta 2010

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

demo

tiistaina 14. syyskuuta 2010

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

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

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

thanks to GWT, creating new ui components is really easy

tiistaina 14. syyskuuta 2010

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

directory

tiistaina 14. syyskuuta 2010

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

channel fordistributingVaadin add-ons

tiistaina 14. syyskuuta 2010

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

ui components, data sources,

themes, tools, ...

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

EclipseMaven

Netbeans[Spring Roo]

tiistaina 14. syyskuuta 2010

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

ServletPortlet 1.0Portlet 2.0

App Engine

tiistaina 14. syyskuuta 2010

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

gettingstarted

tiistaina 14. syyskuuta 2010

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

tiistaina 14. syyskuuta 2010

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

Book ofVaadin

Free as

PDFtiistaina 14. syyskuuta 2010

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

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