7

Vaadin
introduction to

@joonaslehtinen
Founder & CEO
Intro to
Vaadin
“Hello world”)
new Label(
New in

7
Getting
started

QA
User interface
framework for rich
web applications
Sounds like GWT?
Kinda…
Building blocks
Developer
Productivity

Rich
UX
java

html
123
Key Ideas
1

Rich
Components
User Interface
Data Source
Theme
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 ...
350+ 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, Mockups,
...
2

Server + Client
Web application layers

Backend
server

Web
server

Communication

JavaScript
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
Server-side

Client-side GWT-RPC

Client-side Vaadin-RPC

First name

Last name

Phone number

Table cell

Table cell

Ser...
Server-side!
(with Vaadin)

Client-side!
(with GWT-RPC)

AddressbookEditor

~270loc

implements

Proxy


0loc

(generated)...
How does it work,
really?
•
•
•
•

Initial HTML
CSS (theme)
Images
JavaScript

!

1.2M total

compress

307k
reduced
widgetset

135k
• name=”Joonas”
• button clicked
!

261 bytes

• name=”Joonas”
• button clicked
!

261 bytes

• Add notification
!

267 bytes

Development cycle
Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn
3

Embracing
Java
Any language
on JVM
Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
No
browser
plugins
!

Nothing to
install
Servlet
Portlet
(most) clouds
Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
ŁŁŁ
Vaadin += GWT
1/7
GWT
Compatible
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
Architecture
Bleeding
edgE
Renewed
from Inside

JS
Sass
HTML5
+=
GWT

sh

RPC
State

Pu

Complete
stack

UI

Field
vaadin.com/7
Demo

Sass


Syntactically Awesome Stylesheets
JavaScript
Add-ons
Publish API from Java
getPage().getJavaScript().addFunction("myCallback",	
	 new JavaScriptCallback() {	
	 	 public void c...
Server-side Java API for Widget
!
public class MyWidget extends AbstractJavaScriptComponent {	
	 public MyWidget() {	
	 	 ...
Widget implementation in JavaScript
window.com_example_MyWidget = function() {	
	 var element = $(this.getWidgetElement())...
Server Push
@Push MyUI
!
!

<async-supported/>
!
!

vaadin-push dependency
RPC
State
7

Demo

Widget

Connector
client
server

State
RPC

Component
getting
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
-Darchety...
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
Hybrid Applications
!

Theming Workshop

!

Vaadin Intro Workshop

1:30pm
?

slideshare.com/
joonaslehtinen

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
Upcoming SlideShare
Loading in...5
×

Vaadin intro at GWT.create conference

1,531

Published on

Introduction to Vaadin given at GWT.create conference

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,531
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Vaadin intro at GWT.create conference

  1. 1. 7 Vaadin introduction to @joonaslehtinen Founder & CEO
  2. 2. Intro to Vaadin “Hello world”) new Label(
  3. 3. New in 7
  4. 4. Getting started QA
  5. 5. User interface framework for rich web applications
  6. 6. Sounds like GWT? Kinda…
  7. 7. Building blocks
  8. 8. Developer Productivity Rich UX
  9. 9. java html
  10. 10. 123 Key Ideas
  11. 11. 1 Rich Components
  12. 12. User Interface Data Source Theme
  13. 13. 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 98.1% IE 10 80% 80% 10 2. O Opera th er Chrome s 1% 94% 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 IE 9 IE 10 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 Chrome 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
  14. 14. 350+ add-on components
  15. 15. User Interface Data Source Theme
  16. 16. User Interface Data Source Theme
  17. 17. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  18. 18. 2 Server + Client
  19. 19. Web application layers Backend server Web server Communication JavaScript
  20. 20. 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
  21. 21. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer required vs required 3 layers -50% codelines -50% development required required -50% maintenance easier to learn required required optional
  22. 22. Server-side Client-side GWT-RPC Client-side Vaadin-RPC First name Last name Phone number Table cell Table cell Server-side Email address Table cell Offline 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 Table cell Table cell Far far away, behind the far from the countries Vok Consonantia, there live th Separated they live in Bo right at the coast of the S large language ocean. Table cell Edit First name Phone number Delete New Last name Email address Save Cancel A small river named Dude place and supplies it with regelialia. It is a paradise which roasted parts of se your mouth. Even the all-powerful Poi control about the blind tex almost unorthographic life however a small line of b name of Lorem Ipsum de for the far World of Gram Oxmox advised her not to because there were thou Commas.
  23. 23. Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor ~270loc implements Proxy
 0loc (generated) Client ServiceAsync Server AddressbookEditor 17loc ~150loc 68loc RPCServlet Frontend equal Service implements Backend Address AddressbookBackend Impl 19loc
  24. 24. How does it work, really?
  25. 25. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k reduced widgetset 135k
  26. 26. • name=”Joonas” • button clicked ! 261 bytes

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

  28. 28. Development cycle
  29. 29. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  30. 30. 3 Embracing Java
  31. 31. Any language on JVM
  32. 32. Internet Explorer Chrome Firefox Safari Opera iOS Android
  33. 33. No browser plugins ! Nothing to install
  34. 34. Servlet Portlet (most) clouds
  35. 35. Eclipse IntelliJ IDEA Netbeans Maven Ant ŁŁŁ
  36. 36. Vaadin += GWT 1/7
  37. 37. GWT Compatible
  38. 38. 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
  39. 39. Architecture
  40. 40. Bleeding edgE
  41. 41. Renewed from Inside JS Sass HTML5 += GWT sh RPC State Pu Complete stack UI Field
  42. 42. vaadin.com/7
  43. 43. Demo Sass
 Syntactically Awesome Stylesheets
  44. 44. JavaScript Add-ons
  45. 45. Publish API from Java getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
  46. 46. Server-side Java API for Widget ! public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } ! public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); } ! ! }
  47. 47. Widget implementation in JavaScript window.com_example_MyWidget = function() { var element = $(this.getWidgetElement()); // Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); } ! // Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } }); }
  48. 48. Server Push
  49. 49. @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  50. 50. RPC State
  51. 51. 7 Demo Widget Connector client server State RPC Component
  52. 52. getting started
  53. 53. Eclipse Download plugin from Martketplace
  54. 54. IntelliJ IDEA Built-in support
  55. 55. Netbeans Download plugin Netbeans Plugin Portal
  56. 56. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.9
  57. 57. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  58. 58. Apache License
  59. 59. community of ~100.000 developers Ohloh #2 used Java Web Framework
  60. 60. Hybrid Applications ! Theming Workshop ! Vaadin Intro Workshop 1:30pm
  61. 61. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×