Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Vaadin
7introduction
@henrimuurimaa
SVP, Engineering
Intro to
Vaadin
new Label(“Hello world”)
What’s
new
Getting
started
QA
User interface
framework for rich
web applications
htmljava
Server-
Client-
side
Optim
izedfor
Productivit
Optim
izedfor
Control
Building blocks
123Key Ideas
1Rich
Components
User Interface
Data Source
Theme
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Brow...
500+ add-on
components
User Interface
Data Source
Theme
Grid
Form
Text field
Grid
Form
Text field
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
...
User Interface
Data Source
Theme
$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel:...
demo.vaadin.com/valo-theme
2Server + Client
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Client-side UI
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Server-side UI Automated
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
require...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
G...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
Google
http://domain.com
Web Page Title
First name
Table cell
Table cell
Phone number
Table cell
Table cell
Table cell
Tab...
AddressbookBackendAddress Impl
Backend
Frontend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor
Add...
How does server-side
UI work, really?
• Initial HTML
• CSS (theme)
• Images
• JavaScript
135k
reduced
widgetset
• name=”Joonas”
• button clicked
261 bytes

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

So Vaadin is server-side -
does it scale?
QuickTickets
• A fictitious movie tickets sales system
• Vaadin, Spring, Tomcat, ...
Test results
20,622 AJAX requests / minute before exceeding
1% rejected connections
MPAA reports 1,34 billion US
movie tic...
Scaling up
Demo
3Embracing
Java
Any language
on JVM
Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
Servlet
Portlet
Clouds
· · ·
Anything Java
Eclipse
IntelliJ IDEA
Netbeans
Maven / Gradle / Ant / SBT
· · ·
Anything Java
Java EE
Spring
OSGi
REST
· · ·
Anything Java
JavaScript
Integration
Server Push
> 130.000 developers from
> 10.000 cities
> 500 add-ons in the

marketplace
Other
4%Asia
20%
Americas
22%
Europe
54%
Open ...
Who is using
Vaadin?
worldofwebapplications
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28
...
Commercial support
available
Training, consulting, UI development
getting
started
Eclipse
Download plugin
from Martketplace
IntelliJ IDEA
Built-in support
Netbeans
Download plugin
Netbeans Plugin Portal
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersi...
Download for Free
vaadin.com/book
PDF, ePub, HTML
? @henrimuurimaa
henri@vaadin.com
Thank you!
Don’t forget to rate the talk:
www.gwtcreate.com/agenda
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
Upcoming SlideShare
Loading in …5
×

Introduction to Vaadin, GWT.create 2015

1,953 views

Published on

Slides to my Introduction to Vaadin talk at the GWT.create 2015 conference.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Introduction to Vaadin, GWT.create 2015

  1. 1. Vaadin 7introduction @henrimuurimaa SVP, Engineering
  2. 2. Intro to Vaadin new Label(“Hello world”)
  3. 3. What’s new Getting started QA
  4. 4. User interface framework for rich web applications
  5. 5. htmljava
  6. 6. Server- Client- side Optim izedfor Productivit Optim izedfor Control
  7. 7. Building blocks
  8. 8. 123Key Ideas
  9. 9. 1Rich Components
  10. 10. User Interface Data Source Theme
  11. 11. What kind of devices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% s your app support? 25.7% Phones 36.1% O thers2.1% “Since gw in the enterp explain why tab popular than supp phones” Daniel iPhone Android W P pplication UI for r 98% of apps overtaken the num ber rope. 36.1% Tablets “Since gwt is used extensi in the enterprise, this m explain why tablets popular than su phones” iPadAndroid W indow s + +
  12. 12. 500+ add-on components
  13. 13. User Interface Data Source Theme
  14. 14. Grid Form Text field
  15. 15. Grid Form Text field
  16. 16. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  17. 17. User Interface Data Source Theme
  18. 18. $v-background-color: #000; $v-focus-color: #ffa500; $v-font-size: 15px; $v-font-weight: 600; $v-unit-size: 42px; $v-bevel: false; $v-shadow: false; $v-gradient: false; $v-textfield-bevel: false; $v-textfield-shadow: false; $v-border-radius: 0; $v-border: 22px solid v-tone; $v-overlay-shadow: 0 0 0 2px (v-tint 10); $v-focus-style: $v-focus-color; $v-font-family: "Lato", sans-serif; $v-font-weight--header: 600;
  19. 19. demo.vaadin.com/valo-theme
  20. 20. 2Server + Client
  21. 21. Web application layers Backend server Web server Commu- nication JavaScript
  22. 22. Web application layers Backend server Web server Commu- nication JavaScript Client-side UI
  23. 23. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
  24. 24. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  25. 25. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required
  26. 26. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
  27. 27. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required 1 layer vs 3 layers -50% dev. time -50% maintenance vs full control over DOM and communications
  28. 28. Google http://domain.com Web Page Title First name Table cell Table cell Phone number Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Last name Table cell Table cell Email address Table cell Table cell Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas. Server-side Offline Client-side Vaadin-RPC Client-side GWT-RPC Server-side Edit Delete New Save Cancel First name Last name Phone number Email address https://github.com/jojule/hybrid
  29. 29. AddressbookBackendAddress Impl Backend Frontend Server-side (with Vaadin) Client-side (with GWT-RPC) AddressbookEditor AddressbookEditor RPCServlet Service ServiceAsync View Connector Client Server Proxy
 (generated) create place implements implements equal
  30. 30. How does server-side UI work, really?
  31. 31. • Initial HTML • CSS (theme) • Images • JavaScript 135k reduced widgetset
  32. 32. • name=”Joonas” • button clicked 261 bytes

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

  34. 34. So Vaadin is server-side - does it scale? QuickTickets • A fictitious movie tickets sales system • Vaadin, Spring, Tomcat, MySQL, EhCache, Memcached • Deployed in AWS • Tested with JMeter www.vaadin.com/blog/-/blogs/vaadin-scalability-study-quicktickets
  35. 35. Test results 20,622 AJAX requests / minute before exceeding 1% rejected connections MPAA reports 1,34 billion US movie tickets sold in 2013. ~2,550 tickets / minute. 5,496 tickets / minute ~11,000 concurrent users On a single Amazon EC2 Large instance
  36. 36. Scaling up
  37. 37. Demo
  38. 38. 3Embracing Java
  39. 39. Any language on JVM
  40. 40. Internet Explorer Chrome Firefox Safari Opera iOS Android
  41. 41. Servlet Portlet Clouds · · · Anything Java
  42. 42. Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant / SBT · · · Anything Java
  43. 43. Java EE Spring OSGi REST · · · Anything Java
  44. 44. JavaScript Integration
  45. 45. Server Push
  46. 46. > 130.000 developers from > 10.000 cities > 500 add-ons in the
 marketplace Other 4%Asia 20% Americas 22% Europe 54% Open Source community Apache-licensed
  47. 47. Who is using Vaadin? worldofwebapplications Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28 Moleculenix, Rums, SentiOne and many more... https://vaadin.com/who-is-using-vaadin https://vaadin.com/dock
  48. 48. Commercial support available Training, consulting, UI development
  49. 49. getting started
  50. 50. Eclipse Download plugin from Martketplace
  51. 51. IntelliJ IDEA Built-in support
  52. 52. Netbeans Download plugin Netbeans Plugin Portal
  53. 53. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.9 Maven
  54. 54. Download for Free vaadin.com/book PDF, ePub, HTML
  55. 55. ? @henrimuurimaa henri@vaadin.com Thank you! Don’t forget to rate the talk: www.gwtcreate.com/agenda

×