SlideShare uma empresa Scribd logo
1 de 66
Baixar para ler offline
Introduction to web application
development
with

7

Vaadin

.1

Johannes Eriksson
Vaadin Developer
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
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
hundreds of 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
https://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 Martketplace
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

728 pages
PDF, ePub, HTML
Apache
License
community of

100.000+
developers

Ohloh
#2 used
Java Web
Framework
?

slideshare.com/
JohannesEriksson

joheriks@vaadin.com

Mais conteúdo relacionado

Mais procurados (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
 

Destaque

Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
Johannes Eriksson
 

Destaque (6)

Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
 
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
 

Semelhante a Introduction to-web-application-development-with-vaadin7

HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
James Pearce
 

Semelhante a Introduction to-web-application-development-with-vaadin7 (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
 
Intro to-html-backbone
Intro to-html-backboneIntro to-html-backbone
Intro to-html-backbone
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Coding the UI
Coding the UICoding the UI
Coding the UI
 
Coding Ui
Coding UiCoding Ui
Coding Ui
 
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
 
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
 
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
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
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
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
 
Java Full Stack Curriculum
Java Full Stack Curriculum Java Full Stack Curriculum
Java Full Stack Curriculum
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
SiteMesh
SiteMeshSiteMesh
SiteMesh
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 

Último

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Último (20)

Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 

Introduction to-web-application-development-with-vaadin7