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.
Vaadin7 introduction 
@joonaslehtinen 
Founder & CEO
Intro to 
Vaadin 
new Label(“Hello world”)
What’s 
new 
Getting 
started 
QA
User interface 
framework for rich 
web applications
User Interface 
Components
Developer 
Productivity 
Rich 
UX
java html
12Key Idea3s
Ric1h 
Components
User Interface 
Data Source 
Theme
6/7 8 
IE 6/7 Safari Opera IE 8 
6/7 8 
14% 18% 36% 54% 
98.1% 
3.5 Browsers to support in 2012 
3.5 Browsers to support i...
462 add-on 
components
User Interface 
Data Source 
Theme
User Interface 
Data Source 
Theme
InMemory, Bean, Method, 
Collection, JDBC, JPA, Hibernate, 
TextFile, FileSystem, Properties, 
EclipseLink, Lucene, Mockup...
2Server + Client
Web application layers 
Backend 
server 
Web 
server 
Commu-nication 
JavaScript
Web application layers 
Backend 
server 
Web 
server 
Client-side UI 
Commu-nication 
JavaScript
Web application layers 
Backend 
server 
Web 
server 
Commu-nication 
JavaScript 
Server-side UI Automated
Web application layers 
Java to JavaScript 
JavaScript 
Web 
server 
Backend 
server 
Commu-nication 
required required op...
Web application layers 
Java to JavaScript 
JavaScript 
Web 
server 
Backend 
server 
Commu-nication 
required required op...
How does server-side 
UI work, really?
• Initial HTML 
• CSS (theme) 
• Images 
• JavaScript 
1.2M total 
307k 
compress 
135k 
reduced 
widgetset
• name=”Joonas” 
• button clicked 
261 bytes
• name=”Joonas” 
• button clicked 
261 bytes 
• Add notification 
267 bytes
Hello World!
3Embracing 
Java
Any language 
on JVM
Internet Explorer 
Chrome 
Firefox 
Safari 
Opera 
iOS 
Android
No 
browser 
plugins 
Nothing to 
install
Servlet 
Portlet 
(most) clouds 
· · · 
Anything Java
Eclipse 
IntelliJ IDEA 
Netbeans 
Maven / Gradle / Ant 
· · · 
Anything Java
Java EE 
Spring 
OSGi 
REST 
· · · 
Anything Java
Vaadin7series
v3 
2002 
v0.1 
2001 
Open 
Source
v4 
2006 
Ajax 
v5 
2007
7 
2013 v6 
2009
Renewed 
from Inside Sass 
Complete 
stack 
JS 
HTML5 
+= 
GWT 
UI 
RPC 
State 
Field 
Push
Vaadin += GWT
Optimized for 
Client-side 
Optimized for 
Productivity 
Server- 
Control
Architecture
Hybrid apps?
Client-side Server-side 
Use for 
• Offline 
• Low latency interaction 
• Maximum scalability 
Use for 
• Most places ( - ...
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Try the demo at 
demo.vaadin.com/parking
Example 
https://github.com/jojule/hybrid
Web Page Title 
Google http://domain.com 
First name 
Offline Client-side Vaadin-RPC Client-side GWT-RPC Server-side 
Last...
AddressbookBackend 
Address Impl
Address AddressbookBackend Impl 
Frontend 
Backend 
Server-side 
(with Vaadin) 
Client-side 
(with GWT-RPC) 
AddressbookEd...
Connector 
Address AddressbookBackend Impl 
Frontend 
Backend 
Server-side 
(with Vaadin) 
Client-side 
(with GWT-RPC) 
Ad...
Connector 
Address AddressbookBackend Impl 
Frontend 
Backend 
Server-side 
(with Vaadin) 
Client-side 
(with GWT-RPC) 
Ad...
Connector 
Address AddressbookBackend Impl 
Frontend 
Backend 
Server-side 
(with Vaadin) 
Client-side 
(with GWT-RPC) 
Ad...
Estimating 
Complexity
Client-side Server-side 
1 class 
190 LOC 
4 classes 
2 interfaces 
~ 500 LOC 3X
RPC 
State
client 
server 
Widget 
Connector 
RPC 
Component 
7 
State 
Demo
public interface ButtonRpc extends ServerRpc { 
public void click(MouseEventDetails details); 
} 
private ButtonRpc rpc = ...
JavaScript 
Integration
Java ⇄ JavaScript RPC
Java wrapper for existing JavaScript widget
Connector for existing JavaScript widget
Server Push
@Push MyUI 
<async-supported/> 
vaadin-push dependency 
Demo
Responsive
// Vaadin UI 
protected void init(VaadinRequest request) { 
new Responsive(this); 
} 
// CSS 
.v-ui[width-range~="0-800px"...
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 
-Darchetype...
Download for Free 
vaadin.com/book 
952-93-1970-1 
728 pages 
9789529319701 
PDF, ePub, HTML
Apache 
License
community of 
100.000+ 
developers 
Ohloh 
#2 used 
Java Web 
Framework
Who is using 
Vaadin? 
world of web applications 
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java...
? joonas@vaadin.com 
@joonaslehtinen 
(405) 513-0739
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
Upcoming SlideShare
Loading in …5
×

Vaadin Introduction, 7.3 edition

1,717 views

Published on

Introduction to Vaadin Framework. Updated in Sep 2014 to cover Vaadin 7.3.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vaadin Introduction, 7.3 edition

  1. 1. Vaadin7 introduction @joonaslehtinen Founder & CEO
  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. User Interface Components
  6. 6. Developer Productivity Rich UX
  7. 7. java html
  8. 8. 12Key Idea3s
  9. 9. Ric1h Components
  10. 10. User Interface Data Source Theme
  11. 11. 6/7 8 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% 98.1% 3.5 Browsers to support in 2012 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 14% 18% 36% 54% What kind of devices does your app support? 36.1% Desktop browsers Tablets Browsers developers expect to support in 2013 Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% does your app support? Phones 25.7% 36.1% Others 2.1% “Since gwt in the enterprise, explain why tablets popular than support phones” Daniel iPhone Android WP application over 98% of apps had overtaken UI for US, Europe. the number 36.1% “Since gwt is used extensively in the enterprise, this may explain why tablets are popular than support phones” iPad Android Windows + +
  12. 12. 462 add-on components
  13. 13. User Interface Data Source Theme
  14. 14. User Interface Data Source Theme
  15. 15. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  16. 16. 2Server + Client
  17. 17. Web application layers Backend server Web server Commu-nication JavaScript
  18. 18. Web application layers Backend server Web server Client-side UI Commu-nication JavaScript
  19. 19. Web application layers Backend server Web server Commu-nication JavaScript Server-side UI Automated
  20. 20. Web application layers Java to JavaScript JavaScript Web server Backend server Commu-nication required required optional optional optional Vaadin required required optional GWT required required JS required required required required Server-side UI & Client-side UI
  21. 21. Web application layers Java to JavaScript JavaScript Web server Backend server Commu-nication required required optional optional optional Vaadin required required optional GWT required required JS required required required required 1 layer vs 3 layers -50% dev. time -50% maintenance vs full control over DOM and communications
  22. 22. How does server-side UI work, really?
  23. 23. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
  24. 24. • name=”Joonas” • button clicked 261 bytes
  25. 25. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
  26. 26. Hello World!
  27. 27. 3Embracing Java
  28. 28. Any language on JVM
  29. 29. Internet Explorer Chrome Firefox Safari Opera iOS Android
  30. 30. No browser plugins Nothing to install
  31. 31. Servlet Portlet (most) clouds · · · Anything Java
  32. 32. Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant · · · Anything Java
  33. 33. Java EE Spring OSGi REST · · · Anything Java
  34. 34. Vaadin7series
  35. 35. v3 2002 v0.1 2001 Open Source
  36. 36. v4 2006 Ajax v5 2007
  37. 37. 7 2013 v6 2009
  38. 38. Renewed from Inside Sass Complete stack JS HTML5 += GWT UI RPC State Field Push
  39. 39. Vaadin += GWT
  40. 40. Optimized for Client-side Optimized for Productivity Server- Control
  41. 41. Architecture
  42. 42. Hybrid apps?
  43. 43. Client-side Server-side Use for • Offline • Low latency interaction • Maximum scalability Use for • Most places ( - 50% cost ) • High security • Utilizing full Java platform Hybrid Benefits of the both sides, but adds complexity
  44. 44. Try the demo at demo.vaadin.com/parking
  45. 45. Try the demo at demo.vaadin.com/parking
  46. 46. Try the demo at demo.vaadin.com/parking
  47. 47. Try the demo at demo.vaadin.com/parking
  48. 48. Try the demo at demo.vaadin.com/parking
  49. 49. Try the demo at demo.vaadin.com/parking
  50. 50. Try the demo at demo.vaadin.com/parking
  51. 51. Try the demo at demo.vaadin.com/parking
  52. 52. Try the demo at demo.vaadin.com/parking
  53. 53. Try the demo at demo.vaadin.com/parking
  54. 54. Try the demo at demo.vaadin.com/parking
  55. 55. Try the demo at demo.vaadin.com/parking
  56. 56. Try the demo at demo.vaadin.com/parking
  57. 57. Try the demo at demo.vaadin.com/parking
  58. 58. Try the demo at demo.vaadin.com/parking
  59. 59. Try the demo at demo.vaadin.com/parking
  60. 60. Try the demo at demo.vaadin.com/parking
  61. 61. Try the demo at demo.vaadin.com/parking
  62. 62. Try the demo at demo.vaadin.com/parking
  63. 63. Try the demo at demo.vaadin.com/parking
  64. 64. Try the demo at demo.vaadin.com/parking
  65. 65. Example https://github.com/jojule/hybrid
  66. 66. Web Page Title Google http://domain.com First name Offline Client-side Vaadin-RPC Client-side GWT-RPC Server-side Last name cell Table cell Table cell Table Table cell 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 Email address Table cell Table cell Server-side 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. Edit Delete New Save Cancel First name Last name Phone number Email address
  67. 67. AddressbookBackend Address Impl
  68. 68. Address AddressbookBackend Impl Frontend Backend Server-side (with Vaadin) Client-side (with GWT-RPC) AddressbookEditor
  69. 69. Connector Address AddressbookBackend Impl Frontend Backend Server-side (with Vaadin) Client-side (with GWT-RPC) AddressbookEditor AddressbookEditor View Client Server create place
  70. 70. Connector Address AddressbookBackend Impl Frontend Backend Server-side (with Vaadin) Client-side (with GWT-RPC) AddressbookEditor AddressbookEditor View RPCServlet Service Client Server create place implements
  71. 71. Connector Address AddressbookBackend Impl Frontend Backend Server-side (with Vaadin) Client-side (with GWT-RPC) AddressbookEditor AddressbookEditor ServiceAsync RPCServlet Service View Client Server Proxy (generated) create place implements implements equal
  72. 72. Estimating Complexity
  73. 73. Client-side Server-side 1 class 190 LOC 4 classes 2 interfaces ~ 500 LOC 3X
  74. 74. RPC State
  75. 75. client server Widget Connector RPC Component 7 State Demo
  76. 76. public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this); public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); } private ButtonRpc rpc = new ButtonRpc() { public void click( client server MouseEventDetails details) { // do stuff } }; public Button() { registerRpc(rpc); } Demo
  77. 77. JavaScript Integration
  78. 78. Java ⇄ JavaScript RPC
  79. 79. Java wrapper for existing JavaScript widget
  80. 80. Connector for existing JavaScript widget
  81. 81. Server Push
  82. 82. @Push MyUI <async-supported/> vaadin-push dependency Demo
  83. 83. Responsive
  84. 84. // Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); } // CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ } http://demo.vaadin.com/responsive/
  85. 85. getting started
  86. 86. Eclipse Download plugin from Martketplace
  87. 87. IntelliJ IDEA Built-in support
  88. 88. Netbeans Download plugin Netbeans Plugin Portal
  89. 89. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0 Maven
  90. 90. Download for Free vaadin.com/book 952-93-1970-1 728 pages 9789529319701 PDF, ePub, HTML
  91. 91. Apache License
  92. 92. community of 100.000+ developers Ohloh #2 used Java Web Framework
  93. 93. Who is using Vaadin? world of web applications Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28 Moleculenix, Rums, SentiOne and many more... beauty of nature https://vaadin.com/who-is-using-vaadin https://vaadin.com/dock
  94. 94. ? joonas@vaadin.com @joonaslehtinen (405) 513-0739

×