Introduction to Vaadin, GWT.create 2015
- 2. Intro to Vaadin new Label(“Hello world”)
- 4. User interface framework for rich web applications
- 6. htmljava
- 9. 123Key Ideas
- 10. 1Rich Components
- 14. 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 + +
- 21. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 28. $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;
- 31. 2Server + Client
- 34. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
- 35. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
- 36. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required
- 37. 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
- 38. 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
- 39. 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
- 40. 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
- 41. How does server-side UI work, really?
- 43. • Initial HTML • CSS (theme) • Images • JavaScript 135k reduced widgetset
- 45. • name=”Joonas” • button clicked 261 bytes
- 47. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
- 48. 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
- 49. 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
- 50. Scaling up
- 51. Demo
- 52. 3Embracing Java
- 56. Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant / SBT · · · Anything Java
- 57. Java EE Spring OSGi REST · · · Anything Java
- 59. Server Push
- 60. > 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
- 61. 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
- 62. Commercial support available Training, consulting, UI development
- 63. getting started
- 67. Netbeans Download plugin Netbeans Plugin Portal
- 69. Download for Free vaadin.com/book PDF, ePub, HTML
- 70. ? @henrimuurimaa [email protected] Thank you! Don’t forget to rate the talk: www.gwtcreate.com/agenda