Vaadin7introduction

@joonaslehtinen Founder & CEO

Intro to Vaadin

new Label(“Hello world”)

What’s new

Getting started

QA

User interface framework for rich

web applications

User Interface Components

Developer

Productivity

Rich

UX

htmljava

123Key Ideas

1Rich Components

User Interface Data Source

Theme

http://demo.vaadin.com/sampler

http://localhost:48080/sampler/

http://localhost:48080/dashboard

http://localhost:48080/dashboard

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%25.7%

Phones

36.1%

Tablets

Desktop browsers

Others

2.1%

“Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones”

Daniel

Browsers developers expect to support in 2013

3.5 Browsers to support in 2012

IE 6/7 Safari Opera IE 8

6/7 8

14% 18% 36% 54%

Chrome

9 10IE 9 IE 10 Firefox

79% 80% 94% 94%Browsers developers expect to support in 2013

3.5 Browsers to support in 2012

IE 6/7 Safari Opera IE 8

6/7 8

14% 18% 36% 54%

Chrome

9 10IE 9 IE 10 Firefox

79% 80% 94% 94%

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for

desktop, tablet, and mobile consumption. As can be expected, over 98% of apps

support desktop browsers, but we found it interesting that tablets had overtaken

phones (at least when it came to support from GWT-based apps). In US, the number

of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%

25.7%

Phones

36.1%

Tablets

Desktop

browsers

Others2.1%

“Since gwt is used extensively

in the enterprise, this may

explain why tablets are more

popular than support for

phones”

Daniel

iPhone Android

WP

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for

desktop, tablet, and mobile consumption. As can be expected, over 98% of apps

support desktop browsers, but we found it interesting that tablets had overtaken

phones (at least when it came to support from GWT-based apps). In US, the number

of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%

25.7%

Phones

36.1%

Tablets

Desktop

browsers

Others2.1%

“Since gwt is used extensively

in the enterprise, this may

explain why tablets are more

popular than support for

phones”

Daniel

iPad Android Windows

++

462 add-on components

User Interface Data Source

Theme

User Interface Data Source

Theme

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

2Server + Client

Web application layers

Backend server

Web server

Commu- nication JavaScript

Web application layers

Backend server

Web server

Commu- nication JavaScript

Client-side UI

Web application layers

Backend server

Web server

Commu- nication JavaScript

Server-side UI Automated

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Client-side UIServer-side UI &

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

1 layer vs

3 layers

-50% dev. time -50% maintenance vs full control over DOM and communications

How does server-side UI work, really?

• Initial HTML • CSS (theme) • Images • JavaScript

1.2M total

307k

compress

135k

reduced widgetset

• name=”Joonas” • button clicked

261 bytes

• name=”Joonas” • button clicked

261 bytes

• Add notification

267 bytes

Hello World!

3Embracing Java

Any language on JVM

Internet Explorer Chrome Firefox Safari Opera

iOS Android

No browser plugins

Nothing to install

Servlet Portlet

(most) clouds · · ·

Anything Java

Eclipse IntelliJ IDEA

Netbeans Maven / Gradle / Ant

· · · Anything Java

Java EE Spring OSGi REST

· · · Anything Java

Vaadin7series

v3 2002

v0.1 2001

Open Source

v4 2006

Ajax

v5 2007

72013v6

2009

Complete stack

Renewed from Inside

Sass

JS

HTML5+= GWT

RPC State

UI

Field

Push

Vaadin += GWT

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol

Architecture

Hybrid apps?

Server-sideClient-side

Use for

• Offline• Low latency interaction• Maximum scalability

Use for

• Most places ( - 50% cost )• High security• Utilizing full Java platform

Benefits of the both sides, but adds complexity

Hybrid

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Try the demo at demo.vaadin.com/parking

Examplehttps://github.com/jojule/hybrid

Google

http://domain.com

Web Page Title

First nameTable cell

Table cell

Phone number

Table cell

Table cell

Table cellTable cellTable cell

Table cell

Table cellTable cell

Table cellTable cell

Table cell

Table cell Table cell

Table cell

Last name

Table cellTable cell

Email address

Table cellTable cell

Far far away, behind the word mountains,

far from the countries Vokalia and

Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove

right at the coast of the Semantics, a

large language ocean.

A small river named Duden flows by their

place and supplies it with the necessary

regelialia. It is a paradisematic country, in

which roasted parts of sentences fly into

your mouth.

Even the all-powerful Pointing has no

control about the blind texts it is an

almost unorthographic life One day

however a small line of blind text by the

name of Lorem Ipsum decided to leave

for the far World of Grammar. The Big

Oxmox advised her not to do so,

because there were thousands of bad

Commas.

Server-side

OfflineClient-side Vaadin-RPC

Client-side GWT-RPCServer-side

Edit Delete New

Save Cancel

First name Last name

Phone number Email address

AddressbookBackend

Address Impl

AddressbookBackendAddress ImplBackendFrontend

Server-side(with Vaadin)

Client-side(with GWT-RPC)

AddressbookEditor

AddressbookBackendAddress ImplBackendFrontend

Server-side(with Vaadin)

Client-side(with GWT-RPC)

AddressbookEditor

AddressbookEditor

View

Connector

Client

Server

create

place

AddressbookBackendAddress ImplBackendFrontend

Server-side(with Vaadin)

Client-side(with GWT-RPC)

AddressbookEditor

AddressbookEditor

RPCServlet ServiceView

Connector

Client

Server

create

place

implements

AddressbookBackendAddress ImplBackendFrontend

Server-side(with Vaadin)

Client-side(with GWT-RPC)

AddressbookEditor

AddressbookEditor

RPCServlet Service

ServiceAsync

View

Connector

Client

Server

Proxy(generated)

create

place

implements

implements

equal

Estimating Complexity

Server-sideClient-side

1 class

190 LOC

4 classes 2 interfaces ~ 500 LOC 3X

RPC State

server

client

Component

Widget

Connector

RPC

7State

Demo

public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); }

private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this);

public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); }

serverclient

private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } };

public Button() { registerRpc(rpc); }

Demo

JavaScript Integration

Java ⇄ JavaScript RPC

Java wrapper for existing JavaScript widget

Connector for existing JavaScript widget

Server Push

@Push MyUI

<async-supported/>

vaadin-push dependency

Demo

Responsive

// Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); }

// CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ }

http://demo.vaadin.com/responsive/

getting started

Eclipse

Download plugin from Martketplace

IntelliJ IDEA

Built-in support

Netbeans

Download plugin Netbeans Plugin Portal

mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0

Maven

Download for Freevaadin.com/book

728 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

Apache License

community of

100.000+ developers

Ohloh #2 used

Java Web Framework

Who is using Vaadin?

wor

ld o

f web

app

licat

ions

show the beauty of nature

Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28

Moleculenix, Rums, SentiOne

and many more...https://vaadin.com/who-is-using-vaadin

https://vaadin.com/dock

? joonas@vaadin.com @joonaslehtinen(405) 513-0739