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
no profile picture user

  • 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

×