7

Vaadin
intro

@joonaslehtinen
Founder & CEO
Intro to
Vaadin
“Hello world”)
new Label(
New in

7
Getting
started

QA
User interface
framework for rich
web applications
Building blocks
Developer
Productivity

Rich
UX
java

html
123
Key Ideas
1

Rich
Components
User Interface
Data Source
Theme
User Interface
Data Source
Theme
s

3

3.5 Browsers to support in 2012

yo
ur

ap

Desktop
3.5 Browsers to support in 2012
browsers

pp
p
su
lic
pp
at
r 9 ...
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,
...
2

Server + Client
Web application layers

Backend
server

Web
server

Communication

JavaScript
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
How does it work,
really?
•
•
•
•

Initial HTML
CSS (theme)
Images
JavaScript

!

1.2M total

compress

307k
reduced
widgetset

135k
• name=”Joonas”
• button clicked
!

261 bytes

• name=”Joonas”
• button clicked
!

261 bytes

• Add notification
!

267 bytes

Hello World!
Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn
3

Embracing
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
7

Vaadin

.1
v0.1
2001
v3
2002

Open
Source
v4
2006

Ajax
v5
2007
7
v6
2009

2013
934 tickets closed during 16 months of
development
Oldest ticket created 3/2008
Newest ticket 2/2013
3939 commits made by ...
Renewed
from Inside

JS
Sass
HTML5
+=
GWT

sh

RPC
State

Pu

Complete
stack

UI

Field
vaadin.com/7
7

Favorite picks
Vaadin += GWT
GWT
Compatible
ity

tiv

or

df

ize

tim uc
Op
od
Pr

O

tim
p

fo
ed
iz

e rol
d ont
i C
s

r
e
v
r
e
S

r

tien
Cl
or

df

ize

O

P

d
ro

tim
p

ed
iz

or
f

it
iv
ct
u

rrve
Se
ol
tim
ntr

Op

e
sid
Co

t
n
e
i
l
C
Architecture
Demo

Sass


Syntactically Awesome Stylesheets
Variables & functions
Mixins
Nesting
Selector Inheritance
Redesigned
Forms
public class Employee {	
	 String firstName;	
	 String lastName;	
	 double salary;	
	 Date birthDate;	
// Getters, setters...
form.setFormFieldFactory(new FormFieldFactory() {	
!

	 	 	 public Field createField(Item item, Object propertyId,	
	 	 	 ...
GridLayout form = new GridLayout(2,2) {	

	
	
	
	

	
	
	
	

	
	
	
	

TextField
TextField
TextField
DateField

	
	
	
	
	
	
...
public class Person {
!

@Size(min = 5, max = 50)
private String name;
!

@Min(0)
@Max(100)
private int age;
!

// + const...
“Joonas Lehtinen”

presentation
model

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
Maven

mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-Darchety...
Download for Free
vaadin.com/book

-93-

1970
-1

01

728 pages

PDF, ePub, HTML
Apache
License
community of

100.000+
developers

Ohloh
#2 used
Java Web
Framework
Vaadin 7.2

See you tomorrow
Vaadin 7.2

See you tomorrow
?

slideshare.com/
joonaslehtinen

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Upcoming SlideShare
Loading in...5
×

Vaadin intro

799

Published on

Updated Vaadin introductory presentation given at DevNexus Atlanta on Feb 24, 2014.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
799
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin intro

  1. 1. 7 Vaadin intro @joonaslehtinen Founder & CEO
  2. 2. Intro to Vaadin “Hello world”) new Label(
  3. 3. New in 7
  4. 4. Getting started QA
  5. 5. User interface framework for rich web applications
  6. 6. Building blocks
  7. 7. Developer Productivity Rich UX
  8. 8. java html
  9. 9. 123 Key Ideas
  10. 10. 1 Rich Components
  11. 11. User Interface Data Source Theme
  12. 12. User Interface Data Source Theme
  13. 13. s 3 3.5 Browsers to support in 2012 yo ur ap Desktop 3.5 Browsers to support in 2012 browsers pp p su lic pp at r 9 io n or t? 8% U I fo ov of er ap r th take ps e nu n ro pe mb er . 36 .1% 6/7 IE 6/7 6/7 Opera Safari 14% IE 6/7 14% Ta bl et s 18% 9 10 36% 36% 18% Safari IE 9 79% 79% 9 98.1% IE 10 80% 80% 10 2. O Opera th er Chrome s 1% 94% iP ad 94% An 3 W dr6 in o.1 do id% “S w What kind of devices does yourh app support? in ince ex t e gw s po plai ent t is 8 ph pul n w erp us e r a h IE 9 IE 10 Browsers developers expect to support in 2013 Browsers developers expect to support in 2013 on r is d es tha y ta e, t ex ” n ble his ten su ts m si Chrome in 8 54% 54% IE 8 Firefox Ph on es 94% iPh A 94%nd one 2 Firefox inc e ex the gw po plain ente ph pula wh rp on r t y t es ha ab n ” su pp 8 IE 8 “S W 5 ro P .7 id 8% Da ni el
  14. 14. 415+ add-on components
  15. 15. User Interface Data Source Theme
  16. 16. User Interface Data Source Theme
  17. 17. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  18. 18. 2 Server + Client
  19. 19. Web application layers Backend server Web server Communication JavaScript
  20. 20. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required required
  21. 21. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer required vs required 3 layers -50% codelines -50% development required required -50% maintenance easier to learn required required optional
  22. 22. How does it work, really?
  23. 23. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k reduced widgetset 135k
  24. 24. • name=”Joonas” • button clicked ! 261 bytes

  25. 25. • name=”Joonas” • button clicked ! 261 bytes • Add notification ! 267 bytes

  26. 26. Hello World!
  27. 27. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  28. 28. 3 Embracing Java
  29. 29. Any language on JVM
  30. 30. Internet Explorer Chrome Firefox Safari Opera iOS Android
  31. 31. No browser plugins / JRE ! Nothing to install
  32. 32. ∙ ∙ Servlet Portlet (most) clouds ∙∙∙ Anything Java
  33. 33. ∙ ∙ Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant ∙∙∙ Anything Java
  34. 34. Java EE Spring OSGi REST ∙∙∙ Anything Java
  35. 35. 7 Vaadin .1
  36. 36. v0.1 2001 v3 2002 Open Source
  37. 37. v4 2006 Ajax v5 2007
  38. 38. 7 v6 2009 2013
  39. 39. 934 tickets closed during 16 months of development Oldest ticket created 3/2008 Newest ticket 2/2013 3939 commits made by 23 authors 93 % by 6 persons > 1 000 000 lines of code touched
  40. 40. Renewed from Inside JS Sass HTML5 += GWT sh RPC State Pu Complete stack UI Field
  41. 41. vaadin.com/7
  42. 42. 7 Favorite picks
  43. 43. Vaadin += GWT
  44. 44. GWT Compatible
  45. 45. ity tiv or df ize tim uc Op od Pr O tim p fo ed iz e rol d ont i C s r e v r e S r tien Cl
  46. 46. or df ize O P d ro tim p ed iz or f it iv ct u rrve Se ol tim ntr Op e sid Co t n e i l C
  47. 47. Architecture
  48. 48. Demo Sass
 Syntactically Awesome Stylesheets
  49. 49. Variables & functions
  50. 50. Mixins
  51. 51. Nesting
  52. 52. Selector Inheritance
  53. 53. Redesigned Forms
  54. 54. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } ! Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
  55. 55. form.setFormFieldFactory(new FormFieldFactory() { ! public Field createField(Item item, Object propertyId, Component uiContext) { ! 6 if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } ! // .. ! return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
  56. 56. GridLayout form = new GridLayout(2,2) { TextField TextField TextField DateField { } }; firstName = new TextField("First name"); lastName = new TextField("Last name"); salary = new TextField("Salary"); birthDate = new DateField("Birth date"); 7 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));
  57. 57. public class Person { ! @Size(min = 5, max = 50) private String name; ! @Min(0) @Max(100) private int age; ! // + constructor + setters + getters }
  58. 58. “Joonas Lehtinen” presentation model Component firstName = “Joonas”! lastName = “Lehtinen” Demo
  59. 59. Server Push
  60. 60. @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  61. 61. getting started
  62. 62. getting started
  63. 63. Eclipse Download plugin from Martketplace
  64. 64. IntelliJ IDEA Built-in support
  65. 65. Netbeans Download plugin Netbeans Plugin Portal
  66. 66. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  67. 67. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  68. 68. Apache License
  69. 69. community of 100.000+ developers Ohloh #2 used Java Web Framework
  70. 70. Vaadin 7.2 See you tomorrow
  71. 71. Vaadin 7.2 See you tomorrow
  72. 72. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×