vaadin intro at gwt.create conference

Vaadin7introduction to

@joonaslehtinen Founder & CEO

Intro to Vaadin

new Label(“Hello world”)

New in

7

Getting started

QA

User interface framework for rich

web applications

Sounds like GWT? Kinda…

Building blocks

Developer

Productivity

Rich

UX

htmljava

123Key Ideas

1Rich Components

User Interface Data Source

Theme

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 8

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 8

350+ 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

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

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% codelines -50% development -50% maintenance easier to learn

Googlehttp://domain.com

Web Page Title

First name

Table cell

Table cell

Phone number

Table cell

Table cell

Table cellTable cell

Table cell

Table cell

Table cell

Table cell Table cell

Table cell

Table cell

Table cell Table cell

Table cell

Last name

Table cell

Table 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-RPCClient-side GWT-RPCServer-side

Edit Delete New

Save Cancel

First name Last name

Phone number Email address

AddressbookBackendAddress ImplBackendFrontend

Server-side!(with Vaadin)

Client-side!(with GWT-RPC)

AddressbookEditor

AddressbookEditor

RPCServlet Service

ServiceAsyncClient

Server

Proxy(generated)

implements

implements

equal~150loc

68loc

~270loc

0loc

17loc 19loc

How does it 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

Development cycle

https://github.com/vaadin/documentmanager

https://vaadin.com/learn

Source

HOWTO Screencast

3Embracing Java

Any language on JVM

Internet Explorer Chrome Firefox Safari Opera

iOS Android

No browser plugins

!

Nothing to install

Servlet Portlet

(most) clouds

Eclipse IntelliJ IDEA

Netbeans Maven

Ant Ł Ł Ł

Vaadin += GWT

1/7

GWT Compatible

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol

Architecture

BleedingedgE

Complete stack

Renewed from Inside

Sass

JS

HTML5+= GWT

RPC State

UI

Field

Push

vaadin.com/7

SassSyntactically Awesome Stylesheets

Demo

JavaScript Add-ons

getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });

Publish API from Java

window.myCallback('foo', 100);

Use from JavaScript

!public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); }! public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); }

!!}

Server-side Java API for Widget

window.com_example_MyWidget = function() { var element = $(this.getWidgetElement());

// Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); }!

// Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) {

var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } });}

Widget implementation in JavaScript

Server Push

@Push MyUI !

!

<async-supported/> !

!

vaadin-push dependency

RPC State

server

client

Component

Widget

Connector

RPC

7State

Demo

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

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

Hybrid Applications !

Theming Workshop !

Vaadin Intro Workshop

1:30pm

? joonas@vaadin.com vaadin.com/joonas

@joonaslehtinen

slideshare.com/ joonaslehtinen