7

Vaadin
@joonaslehtinen
Founder & CEO

.2
Disclaimer
Vaadin 7.2 is nowhere
near release even though I

though it would have been released
by DevNexus when submittin...
7
.1

11 maintenance
releases since
28.6.2013 - one
every 3 weeks
37 authors, 345
change sets
Agenda: The future
Hybrid apps &
RPC

TB4

Beautifying
apps with new
sassy theme
7.2
Power(ful) Grid

Vaadin 8 &
GWT 3

7....
Hybrid apps?
8.6L/100km

2.5L/100km

0L/100km

13€/100km

4€/100km

1€/100km

550km range!

500km range!

450km range!

gas stations

e...
Web application layers
Client-side UI
Backend
server

Web
server

Communication

JavaScript
Web application layers

Backend
server

Web
server

Server-side UI

Communication

JavaScript

Automated
Web application layers
Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

GWT

required

required
...
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...
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...
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
or

df

ize

O

P

d
ro

tim
p

ed
iz

or
f

it
iv
ct
u

rrve
Se
ol
tim
ntr

Op

e
sid
Co

t
n
e
i
l
C
Client-side
Use for

Server-side
Use for

•

Offline!

•

Most places ( - 50% cost )!

•

Low latency interaction!

•

High...
Client-side

Hybrid

Server-side

3 layer UI

1-3 layer UI

1 layer UI

Full control!

You choose!

Automated!

offline rea...
http://demo.vaadin.com/parking/
Example

https://github.com/jojule/hybrid
Web Page Title

Google

http://domain.com

Client-side GWT-RPC

Server-side

First name
Table cell
Table cell
Table cell
T...
Server-side!
(with Vaadin)

Client-side!
(with GWT-RPC)

AddressbookEditor
create
implements

Proxy


Connector

(generate...
Estimating
Complexity
Client-side

4 classes
2 interfaces
~ 500 LOC

Server-side

3X

1 class
!

190 LOC
Vaadin
RPC
State
Demo

Widget

Connector
client
server

State
RPC

Component
public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}

private ButtonRpc rpc =
Rp...
Client-side!
(with Conntector)

Client-side!
(with GWT-RPC)

AddressbookEditor

AddressbookEditor
create

Connector
Client...
Since 7.1

PUSH
@Push MyUI
!
!

<async-supported/>
!
!

vaadin-push dependency
JavaScript
Add-ons

6/7
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())...
Grid
Table: challenges
•

>10 years old architecture

•

Really hard to customize

•

Client-side API missing (and impossible)
...
Grid: New generation table for
the next 10 years?
•

Super fast on all devices
•

Unlimited datasets ("zillion rows")

•

...
Escalator
Renderer

Connector

Widget

Widget

Widget

Grid

Renderer

Widget

Per column

Widget

Editor row

In headers ...
Escalator
Some of the key features in 7.2
•

Renderers

•

Client-side API and data sources

•

Editor rows

•

"Billion pixel scrol...
Some of the key features in 7.x
•

Hierarchy

•

Variable row height

•

Embedding to super long pages (body
scrollbars)

...
Valo
Theme
Seriously SASSy
Variables & functions
Mixins
Nesting
Selector Inheritance
<Beat design example>
Responsive
// Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
!
!

// CSS
.v-ui[width-range~="0-800px"...
TouchKit 4
Vaadin TouchKit 4.0
New cross-platform theme

http://demo.vaadin.com/parking/

Windows Phone 8 support
Vaadin TouchKit 4.0
New cross-platform theme

http://demo.vaadin.com/parking/

Windows Phone 8 support
TestBench 4
ElementQuery API
ButtonElement okButton =
$(ButtonElement.class).caption("OK").first();
okButton.focus();



okButton.click...
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
?

slideshare.com/
joonaslehtinen

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
Vaadin 7.2
Vaadin 7.2
Vaadin 7.2
Vaadin 7.2
Vaadin 7.2
Upcoming SlideShare
Loading in …5
×

Vaadin 7.2

4,042 views

Published on

Presentation at DevNexus today about future Vaadin topics, including the upcoming Vaadin 7.2

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

No Downloads
Views
Total views
4,042
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
275
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Vaadin 7.2

  1. 1. 7 Vaadin @joonaslehtinen Founder & CEO .2
  2. 2. Disclaimer Vaadin 7.2 is nowhere near release even though I though it would have been released by DevNexus when submitting this presentation. I hope you would not take this a case example for missing the estimated release dates. Even though it is clearly the case…. ! Sorry, it will be released soon [when it is ready]
  3. 3. 7 .1 11 maintenance releases since 28.6.2013 - one every 3 weeks 37 authors, 345 change sets
  4. 4. Agenda: The future Hybrid apps & RPC TB4 Beautifying apps with new sassy theme 7.2 Power(ful) Grid Vaadin 8 & GWT 3 7.2 TK4
  5. 5. Hybrid apps?
  6. 6. 8.6L/100km 2.5L/100km 0L/100km 13€/100km 4€/100km 1€/100km 550km range! 500km range! 450km range! gas stations
 everywhere gas stations
 everywhere growing charge
 station network
  7. 7. Web application layers Client-side UI Backend server Web server Communication JavaScript
  8. 8. Web application layers Backend server Web server Server-side UI Communication JavaScript Automated
  9. 9. Web application layers Backend server Web server Communication Java to JavaScript JavaScript GWT required required required JS Client-side UI required required required required optional required
  10. 10. 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 Client-side UI required
  11. 11. 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 Server-side UI & Client-side UI required
  12. 12. 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
  13. 13. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer -50% dev. time required -50% maintenance optional vs required required required vs required required 3 layers full control over DOM and communications
  14. 14. 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
  15. 15. or df ize O P d ro tim p ed iz or f it iv ct u rrve Se ol tim ntr Op e sid Co t n e i l C
  16. 16. Client-side Use for Server-side Use for • Offline! • Most places ( - 50% cost )! • Low latency interaction! • High security! • Maximum scalability • Utilizing full Java platform Hybrid Benefits of the both sides, but adds complexity
  17. 17. Client-side Hybrid Server-side 3 layer UI 1-3 layer UI 1 layer UI Full control! You choose! Automated! offline ready
 architecture offline for chosen
 functionality connection to
 server required
  18. 18. http://demo.vaadin.com/parking/
  19. 19. Example
 https://github.com/jojule/hybrid
  20. 20. Web Page Title Google http://domain.com Client-side GWT-RPC Server-side First name Table cell Table cell Table cell Table cell Table cell Client-side Vaadin-RPC Last name 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 Delete New Last name Phone number rd mountains, Far far away, behind the wo ia and far from the countries Vokal the blind texts. Consonantia, there live okmarksgrove Separated they live in Bo mantics, a right at the coast of the Se large language ocean. Table cell Table cell Edit First name Server-side Email address Phone number Email address Save Offline Cancel n flows by their A small river named Dude the necessary place and supplies it with matic country, in regelialia. It is a paradise tences fly into which roasted parts of sen your mouth. ng has no Even the all-powerful Pointi ts it is an control about the blind tex ic life One day almost unorthograph d text by the however a small line of blin cided to leave name of Lorem Ipsum de r. The Big for the far World of Gramma to do so, Oxmox advised her not nds of bad because there were thousa Commas.
  21. 21. Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor create implements Proxy
 Connector (generated) Client ServiceAsync Server AddressbookEditor equal place View RPCServlet Frontend Service implements Backend Address AddressbookBackend Impl
  22. 22. Estimating Complexity
  23. 23. Client-side 4 classes 2 interfaces ~ 500 LOC Server-side 3X 1 class ! 190 LOC
  24. 24. Vaadin RPC State
  25. 25. Demo Widget Connector client server State RPC Component
  26. 26. 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)); } client Demo private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; ! public Button() { registerRpc(rpc); } server
  27. 27. Client-side! (with Conntector) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor create Connector Client Client! Server! Server RPC RPC create implements Proxy
 Connector (generated) State ServiceAsync place & ! serve View equal place View RPCServlet Frontend Service implements Backend Address AddressbookBackend Impl
  28. 28. Since 7.1 PUSH
  29. 29. @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  30. 30. JavaScript Add-ons 6/7
  31. 31. 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);
  32. 32. 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(); } ! ! }
  33. 33. 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); } }); }
  34. 34. Grid
  35. 35. Table: challenges • >10 years old architecture • Really hard to customize • Client-side API missing (and impossible) • Performance (heavy DOM tree) • Some key features missing (frozen columns, ..)
  36. 36. Grid: New generation table for the next 10 years? • Super fast on all devices • Unlimited datasets ("zillion rows") • Built for extensibility • Superset of features compared to Table • Client- and Server API
  37. 37. Escalator Renderer Connector Widget Widget Widget Grid Renderer Widget Per column Widget Editor row In headers and cells (Hierarchical) DataSource Component Component Component Component Component Editor row Grid (Hierarchical) DataSource In headers and cells
  38. 38. Escalator
  39. 39. Some of the key features in 7.2 • Renderers • Client-side API and data sources • Editor rows • "Billion pixel scrolling" • Hierarchical headers • Widgets in headers
  40. 40. Some of the key features in 7.x • Hierarchy • Variable row height • Embedding to super long pages (body scrollbars) • Infinite scrolling • Components in cells • Details rows
  41. 41. Valo Theme
  42. 42. Seriously SASSy
  43. 43. Variables & functions
  44. 44. Mixins
  45. 45. Nesting
  46. 46. Selector Inheritance
  47. 47. <Beat design example>
  48. 48. Responsive
  49. 49. // 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/
  50. 50. TouchKit 4
  51. 51. Vaadin TouchKit 4.0 New cross-platform theme
 http://demo.vaadin.com/parking/ Windows Phone 8 support
  52. 52. Vaadin TouchKit 4.0 New cross-platform theme
 http://demo.vaadin.com/parking/ Windows Phone 8 support
  53. 53. TestBench 4
  54. 54. ElementQuery API ButtonElement okButton = $(ButtonElement.class).caption("OK").first(); okButton.focus(); 
 okButton.click(); List<AbstractLayoutElement> list = 
 $(AbstractLayoutElement.class).all();
  55. 55. getting started
  56. 56. Eclipse Download plugin from Martketplace
  57. 57. IntelliJ IDEA Built-in support
  58. 58. Netbeans Download plugin Netbeans Plugin Portal
  59. 59. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  60. 60. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  61. 61. Apache License
  62. 62. community of 100.000+ developers Ohloh #2 used Java Web Framework
  63. 63. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×