Vaadin introduction7 Intro to Vaadin new Label(“Hello world”) What’s QA new Getting started User interface framework for rich web applications User Interface Components Developer Rich Productivity UX java html 12Key Ideas3 Rich Components1 User Interface Data Source Theme 1.6 Going mobile GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe. Desktop browsers 1.6 Going mobile GWT is a versatile technology that allows developers to create application UI for 1.6 Going mobile desktop, tablet, and mobile consumption. As can be expected, over 98% of apps “Since gwt is used extensively support desktop browsers, but we found it interesting that tablets had overtaken GWT is a versatile technology that allows developers to create application UI for phones (at least when it came to support from GWT-based apps). In US, the number in the enterprise, this may of apps supporting tablets was as high as 46%, while it was just 34% in Europe. 98.1%desktop, tablet, and mobile consumption. As can be expected, over 98% of apps explain why tablets are more support desktop browsers, but we found it interesting that tabletsTablets had overtaken Tablets phones (at least when it came to support from GWT-based apps). In US, the number popular than support for What kind of devices does your app support? of apps supporting tablets was as high as 46%, while it was just 34% in Europe. phones” Desktop browsers Daniel 3.5 Browsers to support in 2012 Desktop 36.1% 3.5 Browsers to support inbrowsers 2012 36.1% Phones “Since gwt is used extensively 6/7 8 in the enterprise, this may explain why tablets are more IE 6/7 Safari Opera IE 8 popular than support for 6/7 8 14% 18% 36% phones” 98.1% IE 6/7 Safari Opera 54%IE 8 14% 18%98.1% 36% 54% What kind of devices does your app support? Tablets 25.7% Others Daniel 9 10+ Phones IE 9 IE 10 + Chrome Firefox Others 9 10 2.1% 79%IE 9 80%IE 10 Chrome Firefox iPhone iPad 94% 94% 2.1% Android 79% 80% 94% 94%Android 25.7% Windows36.1% W Browsers developers expect to support in 2013 P Browsers developers expect to support in 2013 “Since gwt is used extensively in the enterprise, this may What kind of devices does yourexplain whyapp tablets support? are more popular than support for phones” Others 2.1% Phones Daniel 25.7% 500+ 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, GAE, ... Server2 + Client Web application layers Backend Web Commu- JavaScript server server nication Web application layers Client-side UI Backend Web Commu- JavaScript server server nication Web application layers Backend Web Commu- JavaScript server server nication Server-side UI Automated Web application layers Backend Web Commu- Java to JavaScript server server nication JavaScript required required required required JS Web application layers Backend Web Commu- Java to JavaScript server server nication JavaScript Client-side UI required required required required optional GWT required required required required JS Web application layers Backend Web Commu- Java to JavaScript server server nication JavaScript required required optional optional optional Vaadin required required required required optional GWT required required required required JS Server-side UI & Client-side UI Web application layers Backend Web Commu- Java to JavaScript server server nication JavaScript required required optional optional optional Vaadin required required required-50% dev.required time optional GWT 1 layer -50% maintenance required required required required JS vs vs 3 layers full control over DOM and communications How does server-side UI work? • 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 Embracing Java3 Any language on JVM Internet Explorer Chrome Firefox Safari Opera iOS Android No browser plugins Nothing to install Servlet Portlet (most) clouds · · · Anything Java Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant · · · Anything Java Java EE Spring OSGi REST · · · Anything Java Architecture JavaScript Integration Java ⇄ JavaScript RPC Java wrapper for existing JavaScript widget Connector for existing JavaScript widget Server Push Demo @Push MyUI <async-supported/> vaadin-push dependency Responsive // 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/ getting started Eclipse Download plugin from Martketplace IntelliJ IDEA Built-in support Netbeans Download plugin Netbeans Plugin Portal mvn archetype:generate -DarchetypeGroupId= com.vaadin Maven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0 Download for Free vaadin.com/book ISBN 978-952-93-1970-1 9789529319701 728 pages PDF, ePub, HTML Apache License community of 130.000+ developers Ohloh #2 used Java Web Framework https://vaadin.com/dock p.28 p.4 · Coffee with R&D: Turning Java into Java Who is using Giants named HTML5 and JVM Vaadin? world of web applications web of world Moleculenix, Rums, SentiOne and many more... https://vaadin.com/who-is-using-vaadin show the beauty of nature ?.