introduction to vaadin 7

Vaadin7today

Leif ÅstrandSenior Vaadin Expert

lördag 30 november 13

Intro toVaadin How Vaadin

new Label(“Hello world”)

Gettingstarted

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

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

Tablets

Desktop browsers

Others

“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

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

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.

Phones

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

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.

Phones

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

Sass variables & functions

Mixins

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

required optionalrequired

requiredrequiredJS

requiredrequired

required required

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

Commu-nication

optional

required optionalrequired

requiredrequiredJS

requiredrequired

required required

1 layervs

3 layers

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

Server-

Client-

ized for

Productivity

Server-Client-

ized for

Controllördag 30 november 13

server

client

Component

Widget

Connector

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

compress

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

v52007

7Febv6

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

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

? leif@vaadin.comvaadin.com/leif

slideshare.com/lastrand

introduction to vaadin 7

Technology

vaadin slides for @devoxx 2012

iot with vaadin elements

gwt integration with vaadin

vaadin devday 2017 - data binding in vaadin 8

introducing gwt polymer (vaadin)

vaadin roadmap

vaadin spring-mvp maual

vaadin scalability-slides

introduction to vaadin

intro to vaadin

techlunch - dependency injection with vaadin

getting to know vaadin

vaadin components

liferay 6 and vaadin portlets

vaadin components @ angular u

vaadin programming cookbook -...

vaadin (1)

vaadin application tutorial

workshop: building vaadin add-ons

beoynd vaadin 7