SlideShare una empresa de Scribd logo
1 de 66
Descargar para leer sin conexión
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

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

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

Destacado (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
 

Similar 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
 

Similar 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

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
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
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 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
 
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
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
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
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 

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