SlideShare una empresa de Scribd logo
1 de 66
Descargar para leer sin conexión
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 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
400+ add-on
components
User Interface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...
User Interface
Data Source
Theme
sass

(syntactically awesome stylesheets)
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;!
}
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
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

JavaScript

required
Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

GWT

required

required

required

required

optional

JS

Web application layers

required

required

required

required
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
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
-DarchetypeVersion=
7.1.7
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

Más contenido relacionado

La actualidad más candente (7)

디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
 
Documento
DocumentoDocumento
Documento
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
 
Scrivi X, Risolvi
Scrivi X, RisolviScrivi X, Risolvi
Scrivi X, Risolvi
 
VBA For Dummies
VBA For DummiesVBA For Dummies
VBA For Dummies
 
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSSARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
 
Microdata semantic-extend
Microdata semantic-extendMicrodata semantic-extend
Microdata semantic-extend
 

Destacado

Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7
Johannes Eriksson
 

Destacado (6)

Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7
 
Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)
 
What's Next in Growth? 2016
What's Next in Growth? 2016What's Next in Growth? 2016
What's Next in Growth? 2016
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post Formats
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar a Vaadin Introduction at OOP 2014

Similar a Vaadin Introduction at OOP 2014 (20)

Introduction to web-application development with Vaadin
Introduction to web-application development with VaadinIntroduction to web-application development with Vaadin
Introduction to web-application development with Vaadin
 
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceVaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Intro to-html-backbone
Intro to-html-backboneIntro to-html-backbone
Intro to-html-backbone
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
 
Crash Course HTML/Rails Slides
Crash Course HTML/Rails SlidesCrash Course HTML/Rails Slides
Crash Course HTML/Rails Slides
 
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
 
Coding the UI
Coding the UICoding the UI
Coding the UI
 
Coding Ui
Coding UiCoding Ui
Coding Ui
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Java Full Stack Curriculum
Java Full Stack Curriculum Java Full Stack Curriculum
Java Full Stack Curriculum
 
working with PHP & DB's
working with PHP & DB'sworking with PHP & DB's
working with PHP & DB's
 
Vaadin intro
Vaadin introVaadin intro
Vaadin intro
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

Vaadin Introduction at OOP 2014