SlideShare a Scribd company logo

Lecture: Vaadin Overview

•
•
Joonas Lehtinen
Joonas Lehtinen

Vaadin is a Java-based web application framework that allows building rich client-side web applications using server-side Java and client-side JavaScript. Some key points: - It uses server-side Java and the GWT compiler to generate lightweight JavaScript widgets for the client-side UI. - This allows building complex, responsive UIs with a desktop-like experience using standard Java/GWT components on the server side. - Over 100,000 developers use Vaadin across industries like finance, healthcare, government to build applications for Fortune 500 companies and startups.

Related slideshows

HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
What's New In Apache Lenya 1.4
What's New In Apache Lenya 1.4What's New In Apache Lenya 1.4
What's New In Apache Lenya 1.4
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code Organization
 
1 of 107
Download to read offline
Vaadin overview @joonaslehtinen
Key ideas
coding
Getting started QA
Lecture: Vaadin Overview
User interface framework for rich web applications
History behind Vaadin
healthcare portal, >100 kloc of perl, .. 98 19
web 1.0, netscape, ie5, ie6, ...
thinking of object oriented design, desktop, Java, U and I ...
desktop programming paradigm for web!
found millstone ajax google web toolkit 00 08 02 05 20 20 20 20
re-released as 09 20
Used by >100.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by contributing ~300 plug-ins and helping each other on a forum with ~1500 posts / m add-ons, mainstream, 7 Backed by 60 person full-time team in Fi, Us & De 10 12 11 20 20 20
java html
Why on earth?
Lecture: Vaadin Overview
expectations
reality
consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user 100,000€ / view >> 5,000€ / view
Problem How to build consumer grade UX with business system budget
How?
123 Key Ideas
1 Components everywhere
User Inteface Data Source Theme
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Rich Applications
Lecture: Vaadin Overview
Lecture: Vaadin Overview
User Inteface Data Source Theme
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
SASS
Variables & functions
Mixins
User Inteface Data Source Theme
Lecture: Vaadin Overview
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
example SQLContainer
Table or any other UI component SQLContainer FreeformQuery JDBC SELECT * FROM ...
connectionPool = new SimpleJDBCConnectionPool( "org.hsqldb.jdbc.JDBCDriver", "jdbc:hsqldb:mem:sqlcontainer", "password", "", 2, 2); SQLContainer container = new SQLContainer( new FreeformQuery( "SELECT * FROM people", Arrays.asList("ID"), connectionPool)); Table table = new Table(null, container);
Table or any other UI component SQLContainer TableQuery JDBC Database Table
• lazy loading • advanced filtering • sorting • connection pooling • transactions • optimistic locking • autocommit mode
• HSQLDB • MySQL • PostgreSQL • Oracle • MS SQL Server
2 Server + Client
Web application layers GWT Vaadin required required optional optional optional required required required required optional JS required required required required Backend Web Java to RPC JavaScript server server JavaScript
How does it work, really?
Lecture: Vaadin Overview
• Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k
• name=”Joonas” • button clicked 150 bytes
Lecture: Vaadin Overview
• name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes
Trying it out
Lecture: Vaadin Overview
https://github.com/jojule/NotesDemo
Architecture
Lecture: Vaadin Overview
Vaadin += GWT
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
GWT Compatible
Server Pr Op - od t r im fo uc d ti ize ize vit df y or tim e rol Op t- s d ont i C ien Cl
Se rve r P r- e Op od u sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
Creating new UI components is easy
HTTP(S) “UI Component” “Widget” • Button, Table, • Client-side peer for Tree, ... the component • Server-side data • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit
Lecture: Vaadin Overview
Widget 7 Connector client State server RPC Component
public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click( private ButtonRpc rpc = MouseEventDetails details) { RpcProxy.create(ButtonRpc.class, this); // do stuff } public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() { } registerRpc(rpc); } client server
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
PaperStack notes = new PaperStack(); ! ! @Override ! public void init() { // === Layout ======================================================== ! ! HorizontalLayout lo= new HorizontalLayout(); ! ! Window mainWindow = new Window("Postitnotes Application", lo); ! ! lo.setSizeFull(); ! ! lo.addComponent(notes); ! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER); ! ! setMainWindow(mainWindow);! ! ! ! notes.setWidth("350px"); ! ! notes.setHeight("350px"); ! ! // === Note 1 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ======================================================== ! ! notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ======================================================== ! ! com.vaadin.ui.RichTextArea rta = new RichTextArea(); ! ! rta.setSizeFull(); ! ! notes.addComponent(rta); ! ! rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ + “Vaadin components here...</span>"); ! }
Lecture: Vaadin Overview
JavaScript Add-ons
Publish API from Java getPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
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); } }); }
Server-side Java API for Widget public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters } }
3 Embracing Java
Any JVM Language
Internet Explorer Chrome Firefox Safari Opera iOS Android
No browser plugins Nothing to install
Servlet Portlet (most) clouds
Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
Lecture: Vaadin Overview
Who is using Vaadin?
24% 17% 12% Business Services Technology Financial and Insurance 9% 9% 8% Education Healthcare Telecommunication 7% 5% 9% Industrial Goods Transport Other
Lecture: Vaadin Overview
Lecture: Vaadin Overview
Lecture: Vaadin Overview
OSC Enquiry System (TNT) Logistics OSC (Operational Service Capabilities) Enquiry provides a single source for obtaining operational ‘door-to-door’ service capabilities for all international and domestic products sold to TNT Express OSC Enquiry provides POJO software services that can be integrated into consuming applications to support their service capability enquiry transactions. The OSC Enquiry User Interface developed in Vaadin technology also consumes some of the OSC Enquiry Services required by the Service Quality users at TNT Express (150 or so). The UI users are responsible for measuring operational service performance by comparing actual achieved service against estimated transit times quoted to customers. Corrective maintenance actions can then be taken to improve the published transit times. Comparison of our transit times to our competitors’ is also facilitated this way. https://vaadin.com/showcase/osc-enquiry-system-tnt
Lecture: Vaadin Overview
Lecture: Vaadin Overview
JavaOne edition 2012 applications Download vaadin.com/dock world of web Introducing Best of clie Vaadin += G nt and serv er developm entWT Get inspire Web Applic d by our ca se studies Vaadin ation Scala bility:
Lecture: Vaadin Overview
Who is Vaadin?
6 0 Turku Frankfurt San Jose
getting started
Lecture: Vaadin Overview
Eclipse http://vaadin.com/ eclipse/experimental
Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta11 mvn package yourproject-1.0.war
Download for Free vaadin.com/book ework s that o u an d ~700 pages
? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

More Related Content

Lecture: Vaadin Overview

  • 1. Vaadin overview @joonaslehtinen
  • 6. User interface framework for rich web applications
  • 8. healthcare portal, >100 kloc of perl, .. 98 19
  • 9. web 1.0, netscape, ie5, ie6, ...
  • 10. thinking of object oriented design, desktop, Java, U and I ...
  • 12. found millstone ajax google web toolkit 00 08 02 05 20 20 20 20
  • 14. Used by >100.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by contributing ~300 plug-ins and helping each other on a forum with ~1500 posts / m add-ons, mainstream, 7 Backed by 60 person full-time team in Fi, Us & De 10 12 11 20 20 20
  • 15. java html
  • 20. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user 100,000€ / view >> 5,000€ / view
  • 21. Problem How to build consumer grade UX with business system budget
  • 22. How?
  • 36. SASS
  • 41. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 43. Table or any other UI component SQLContainer FreeformQuery JDBC SELECT * FROM ...
  • 44. connectionPool = new SimpleJDBCConnectionPool( "org.hsqldb.jdbc.JDBCDriver", "jdbc:hsqldb:mem:sqlcontainer", "password", "", 2, 2); SQLContainer container = new SQLContainer( new FreeformQuery( "SELECT * FROM people", Arrays.asList("ID"), connectionPool)); Table table = new Table(null, container);
  • 45. Table or any other UI component SQLContainer TableQuery JDBC Database Table
  • 46. • lazy loading • advanced filtering • sorting • connection pooling • transactions • optimistic locking • autocommit mode
  • 47. • HSQLDB • MySQL • PostgreSQL • Oracle • MS SQL Server
  • 49. Web application layers GWT Vaadin required required optional optional optional required required required required optional JS required required required required Backend Web Java to RPC JavaScript server server JavaScript
  • 50. How does it work, really?
  • 52. • Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k
  • 53. • name=”Joonas” • button clicked 150 bytes
  • 55. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes
  • 66. Server Pr Op - od t r im fo uc d ti ize ize vit df y or tim e rol Op t- s d ont i C ien Cl
  • 67. Se rve r P r- e Op od u sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  • 69. HTTP(S) “UI Component” “Widget” • Button, Table, • Client-side peer for Tree, ... the component • Server-side data • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit
  • 71. Widget 7 Connector client State server RPC Component
  • 72. public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click( private ButtonRpc rpc = MouseEventDetails details) { RpcProxy.create(ButtonRpc.class, this); // do stuff } public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() { } registerRpc(rpc); } client server
  • 77. PaperStack notes = new PaperStack(); ! ! @Override ! public void init() { // === Layout ======================================================== ! ! HorizontalLayout lo= new HorizontalLayout(); ! ! Window mainWindow = new Window("Postitnotes Application", lo); ! ! lo.setSizeFull(); ! ! lo.addComponent(notes); ! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER); ! ! setMainWindow(mainWindow);! ! ! ! notes.setWidth("350px"); ! ! notes.setHeight("350px"); ! ! // === Note 1 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ======================================================== ! ! notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ======================================================== ! ! com.vaadin.ui.RichTextArea rta = new RichTextArea(); ! ! rta.setSizeFull(); ! ! notes.addComponent(rta); ! ! rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ + “Vaadin components here...</span>"); ! }
  • 80. Publish API from Java getPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
  • 81. 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); } }); }
  • 82. Server-side Java API for Widget public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters } }
  • 85. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 86. No browser plugins Nothing to install
  • 87. Servlet Portlet (most) clouds
  • 88. Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  • 90. Who is using Vaadin?
  • 91. 24% 17% 12% Business Services Technology Financial and Insurance 9% 9% 8% Education Healthcare Telecommunication 7% 5% 9% Industrial Goods Transport Other
  • 95. OSC Enquiry System (TNT) Logistics OSC (Operational Service Capabilities) Enquiry provides a single source for obtaining operational ‘door-to-door’ service capabilities for all international and domestic products sold to TNT Express OSC Enquiry provides POJO software services that can be integrated into consuming applications to support their service capability enquiry transactions. The OSC Enquiry User Interface developed in Vaadin technology also consumes some of the OSC Enquiry Services required by the Service Quality users at TNT Express (150 or so). The UI users are responsible for measuring operational service performance by comparing actual achieved service against estimated transit times quoted to customers. Corrective maintenance actions can then be taken to improve the published transit times. Comparison of our transit times to our competitors’ is also facilitated this way. https://vaadin.com/showcase/osc-enquiry-system-tnt
  • 98. JavaOne edition 2012 applications Download vaadin.com/dock world of web Introducing Best of clie Vaadin += G nt and serv er developm entWT Get inspire Web Applic d by our ca se studies Vaadin ation Scala bility:
  • 101. 6 0 Turku Frankfurt San Jose
  • 105. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta11 mvn package yourproject-1.0.war
  • 106. Download for Free vaadin.com/book ework s that o u an d ~700 pages
  • 107. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen