introduction to vaadin 7

Vaadin7today

Leif ÅstrandSenior Vaadin Expert

lördag 30 november 13

http://creativecommons.org/licenses/by-nc-sa/3.0/








Intro toVaadin How Vaadin

works


new Label(“Hello world”)


Gettingstarted

QA


User interface framework for rich

web applications


Building blocks


htmljava


Why on earth?


expectations


reality


businessconsumer

“million” users “500” users

>>100,000! / view 5,000! / view

10 views1!/user

50 views500!/user


ChallengeHow to build consumer

grade UX with business system budget


123Key Ideas


1RichComponents


User InterfaceData Source

Theme



http://demo.vaadin.com/sampler/

http://demo.vaadin.com/sampler/


http://demo.vaadin.com/mobilemail/





































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.


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

iPhoneAndroid

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.


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

iPadAndroidWindows 8


350+ add-oncomponents



Theme



http://demo.vaadin.com/ReindeerTheme





http://demo.vaadin.com/RunoTheme





http://demo.vaadin.com/chameleon-editor





http://demo.vaadin.com/VaadinTunesLayout/




Sass variables & functions


Mixins



Theme


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


2Server + Client


Web application layers

Backendserver

Webserver

Commu-nication JavaScript



JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

Commu-nication

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required



JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

Commu-nication

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

1 layervs

3 layers

-50% lines of code-50% development-50% maintenanceeasier to learn


Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol


Server-Client-

sideO

ptim

ized

for

Prod

uctiv

ity

Optim

ized for

Controllördag 30 november 13

server

client

Component

Widget

Connector

RPC

State


How does it work, really?


name = new TextField("Name");greetButton = new Button("Greet");

greetButton.addClickListener(new ClickListener() { public void buttonClick(ClickEvent event) { Notification.show("Ciao " + name.getValue()); }});


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

1200k total

300k

compress

135k

reducedwidget setand theme


• name=”Leif”• Button clicked

332 bytes


name = new TextField("Name");greetButton = new Button("Greet");

greetButton.addClickListener(new ClickListener() { public void buttonClick(ClickEvent event) { Notification.show("Ciao " + name.getValue()); }});


• name=”Leif”• Button clicked

332 bytes

• Show notification

462 bytes


Hello World!


https://github.com/vaadin/documentmanager

https://vaadin.com/learn

Source

HOWTO Screencast






3EmbracingJava


Any JVMLanguage


Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid


Nobrowserplugins

Nothing toinstall


Servlet Portlet

(most) clouds


EclipseIntelliJ IDEA

NetbeansMaven

Ant∙ ∙ ∙


Vaadin += GWT


GWTCompatible


Vaadin7.1lördag 30 november 13

v32002

v0.12001

OpenSource


v42006

Ajax

v52007


7Febv6

2009


934 tickets closed during 16 months of development

3939 commits made by 23 authors

Oldest ticket created 3/2008Newest ticket 2/2013

3939 commits made by 23 authors93 % by 6 persons

> 1 000 000 lines of code touched


gettingstarted


Eclipse

Download plugin from Martketplace


IntelliJ IDEA

Built-in supportlördag 30 november 13

Netbeans

Download plugin Netbeans Plugin Portal


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

Maven


Migration Guide:Vaadin 6 to 7

https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7


Download for Freevaadin.com/book

728 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML


ApacheLicense


community of100.000+ developers

Ohloh#2 used

Java WebFramework


? [email protected]/leif

slideshare.com/lastrand


introduction to vaadin 7

Technology