Vaadin intro
104
Vaadin 7 intro @joonaslehtinen Founder & CEO
-
Upload
joonas-lehtinen -
Category
Documents
-
view
836 -
download
1
description
Updated Vaadin introductory presentation given at DevNexus Atlanta on Feb 24, 2014.
Transcript of Vaadin intro
Vaadin7intro
@joonaslehtinen Founder & CEO
Intro to Vaadin
new Label(“Hello world”)
New in
7
Getting started
QA
User interface framework for rich
web applications
Building blocks
Developer
Productivity
Rich
UX
htmljava
123Key Ideas
1Rich Components
User Interface Data Source
Theme
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
415+ 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
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
Hello World!
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 / JRE
!
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
Vaadin7.1
v3 2002
v0.1 2001
Open Source
v4 2006
Ajax
v5 2007
72013v6
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
Complete stack
Renewed from Inside
Sass
JS
HTML5+= GWT
RPC State
UI
Field
Push
Favorite picks7
Vaadin += GWT
GWT Compatible
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
Control
Architecture
SassSyntactically Awesome Stylesheets
Demo
Variables & functions
Mixins
Nesting
Selector Inheritance
Redesigned Forms
public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, …}!
Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
6
form.setFormFieldFactory(new FormFieldFactory() {! public Field createField(Item item, Object propertyId, Component uiContext) {! if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; }! // ..! return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
6
GridLayout form = new GridLayout(2,2) {! TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); TextField salary = new TextField("Salary"); DateField birthDate = new DateField("Birth date");! { birthDate.setResolution(Resolution.DAY); setSpacing(true); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); } };! BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
7
public class Person { ! @Size(min = 5, max = 50) private String name; ! @Min(0) @Max(100) private int age; ! // + constructor + setters + getters }
model
presentation
“Joonas Lehtinen”
Component
firstName = “Joonas”!lastName = “Lehtinen”
Demo
Server Push
@Push MyUI !
!
<async-supported/> !
!
vaadin-push dependency
getting started
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.7
Maven
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
ApacheLicense
community of
100.000+ developers
Ohloh #2 used
Java Web Framework
Vaadin 7.2 See you tomorrow
Vaadin 7.2 See you tomorrow
