0
Introduction
to

7

Vaadin
OOP 2014, Münich

.1

Johannes Eriksson
Vaadin Ltd
What?

Why?
How does it
work?
new L
abel(
“Hell
o wor
ld”)

How do I
use it?
How
do I
get
star
ted?

QA
User interface
framework for rich
web applications
java

html
JavaScript
DOM
AJAX
JSON
…
Apache 2.0 license
Why?
expectations
reality
Challenge
How to build consumer
grade UX with business
system budget
How?

1

Rich components

2

Server + Client

3

Embracing Java
User Interface
Data Source
Theme
demo.vaadin.com/sampler
demo.vaadin.com/dashboard
github.com/vaadin/dashboard-demo
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 ...
400+ add-on
components
User Interface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
...
User Interface
Data Source
Theme
sass

(syntactically awesome stylesheets)
constants and functions
.scss

$blue: #3bbfce;!
$margin: 16px;!
!
.content-navigation {!
border-color: $blue;!
color:!
dar...
mixins
.scss

@mixin table-base {!
th {!
text-align: center;!
font-weight: bold;!
}!
td,th {padding: 2px}!
}!
!
@mixin lef...
1

Rich components

2

Server + Client

3

Embracing Java
Web application layers

Backend
server

Web
server

Communication

JavaScript
Web application layers

JS

Backend
server

Web
server

Communication

required

required

required

Java to
JavaScript

J...
Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

GWT

required

required

required

required

op...
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

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

Connector
client
server

State
RPC

Component
•
•
•
•

Initial HTML
CSS (theme)
Images
JavaScript

!

1.2M total

compress

307k

135k

reduced
widgetset
and theme
• name=”Johannes”
• button clicked
!

263 bytes

• name=”Johannes
• button clicked
!

263

• Add notification
!

269 bytes

vaadin.com/learn
github.com/vaadin/documentmanager
1

Rich components

2

Server + Client

3

Embracing Java
Any
language
on JVM

Java
Scala
Groovy
Clojure
Python
Ruby

Ceylon
…
Eclipse
IntelliJ IDEA
Multiple
Netbeans
development
Maven
Ant
environments
ŁŁŁ
GWT
Compatible
Vaadin +=
GWT
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
How do I
get started?
Eclipse

Download plugin
from Marketplace
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

> 600 pages
PDF, ePub, HTML
Apache
License
Community of
100.000+
developers

Ohloh
#2 used
Java Web
Framework
?

slideshare.com/
JohannesEriksson

joheriks@vaadin.com
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Upcoming SlideShare
Loading in...5
×

Vaadin Introduction at OOP 2014

450

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
450
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Vaadin Introduction at OOP 2014"

  1. 1. Introduction to 7 Vaadin OOP 2014, Münich .1 Johannes Eriksson Vaadin Ltd
  2. 2. What? Why?
  3. 3. How does it work? new L abel( “Hell o wor ld”) How do I use it?
  4. 4. How do I get star ted? QA
  5. 5. User interface framework for rich web applications
  6. 6. java html JavaScript DOM AJAX JSON …
  7. 7. Apache 2.0 license
  8. 8. Why?
  9. 9. expectations
  10. 10. reality
  11. 11. Challenge How to build consumer grade UX with business system budget
  12. 12. How? 1 Rich components 2 Server + Client 3 Embracing Java
  13. 13. User Interface Data Source Theme
  14. 14. demo.vaadin.com/sampler
  15. 15. demo.vaadin.com/dashboard github.com/vaadin/dashboard-demo
  16. 16. 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 IE 9 98.1% IE 10 80% 80% 10 IE 10 2. O Opera th er Chrome s 1% 94% Chrome 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 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 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
  17. 17. 400+ add-on components
  18. 18. User Interface Data Source Theme
  19. 19. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  20. 20. User Interface Data Source Theme
  21. 21. sass (syntactically awesome stylesheets)
  22. 22. constants and functions .scss $blue: #3bbfce;! $margin: 16px;! ! .content-navigation {! border-color: $blue;! color:! darken($blue, 9%);! }! ! .border {! padding: $margin / 2;! margin: $margin / 2;! border-color: $blue;! } .css .content-navigation {! border-color: #3bbfce;! color: #2b9eab;! }! ! .border {! padding: 8px;! margin: 8px;! border-color: #3bbfce;! }
  23. 23. mixins .scss @mixin table-base {! th {! text-align: center;! font-weight: bold;! }! td,th {padding: 2px}! }! ! @mixin left($dist) {! float: left;! margin-left: $dist;! }! ! #data {! @include left(10px);! @include table-base;! } #data {! float: left;! margin-left: 10px;! }! ! #data th {! text-align: center;! font-weight: bold;! }! ! #data td, #data #th {! padding: 2px;! } .css
  24. 24. 1 Rich components 2 Server + Client 3 Embracing Java
  25. 25. Web application layers Backend server Web server Communication JavaScript
  26. 26. Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
  27. 27. Backend server Web server Communication Java to JavaScript JavaScript GWT required required required required optional JS Web application layers required required required required
  28. 28. 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
  29. 29. How does it work, really?
  30. 30. Widget Connector client server State RPC Component
  31. 31. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k 135k reduced widgetset and theme
  32. 32. • name=”Johannes” • button clicked ! 263 bytes

  33. 33. • name=”Johannes • button clicked ! 263 • Add notification ! 269 bytes

  34. 34. vaadin.com/learn github.com/vaadin/documentmanager
  35. 35. 1 Rich components 2 Server + Client 3 Embracing Java
  36. 36. Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …
  37. 37. Eclipse IntelliJ IDEA Multiple Netbeans development Maven Ant environments ŁŁŁ
  38. 38. GWT Compatible
  39. 39. Vaadin += GWT
  40. 40. 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
  41. 41. How do I get started?
  42. 42. Eclipse Download plugin from Marketplace
  43. 43. IntelliJ IDEA Built-in support
  44. 44. Netbeans Download plugin Netbeans Plugin Portal
  45. 45. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  46. 46. Download for Free vaadin.com/book -93- 1970 -1 01 > 600 pages PDF, ePub, HTML
  47. 47. Apache License
  48. 48. Community of 100.000+ developers Ohloh #2 used Java Web Framework
  49. 49. ? slideshare.com/ JohannesEriksson joheriks@vaadin.com
  1. A particular slide catching your eye?

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

×