SlideShare a Scribd company logo

Vaadin += GWT

•
•
Joonas Lehtinen
Joonas Lehtinen

Vaadin is a UI framework for building rich web applications in Java. It allows developers to build applications like traditional desktop frameworks by treating web apps as client-server architectures where the user interface runs on the client-side but the application logic and data binding runs on the server. Vaadin handles all client-server communication seamlessly through AJAX requests so developers can focus on the application logic without having to work with HTML, JavaScript, or browser plugins. It includes over 100 reusable UI components and supports binding to various data sources and deployment on most application servers and clouds.

Related slideshows

Choosing a Java Web Framework
Choosing a Java Web FrameworkChoosing a Java Web Framework
Choosing a Java Web Framework
 
Using Grails to power your electric car
Using Grails to power your electric carUsing Grails to power your electric car
Using Grails to power your electric car
 
Gwt Presentation
Gwt PresentationGwt Presentation
Gwt Presentation
 
1 of 70
Download to read offline
Vaadin += GWT Dr. Joonas Lehtinen Vaadin - CEO vaadin.com/joonas @joonaslehtinen
Vaadin += GWT
Vaadin is a UI framework for rich web applications
java html
healthcare portal, >100 kloc of perl, 89 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 >50.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by conributing > 280 plug-ins and helping add-ons, mainstream each other on a forum with >1500 posts / m 10 11 Backed by 50+ person 20 20 full-time team
Vaadin += GWT beta 12 20
is there a ?
Apache License
Developer experience goals User expecience Scalability
123 Key Ideas
1 Rich Components
User Inteface Data Source Theme
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
User Inteface Data Source Theme
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
User Inteface Data Source Theme
Vaadin += GWT
Vaadin += GWT
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
2 Server + Client
Layers of abstraction Backend Web Java to RPC JavaScript server server JavaScript ExtJS GWT Vaadin required required optional optional optional required required required required optional required required required required
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
Vaadin += GWT
GWT Compatible
Serve ucr-od ize Pr tim Op f or ed tiv iz df or ity tim e rol Op t- s d ont i C ien Cl
Client Co Op - im t ntr f or ol ize df iz ed iv ity or tim c t sid Op u od r- e P r rve Se
Architecture
Vaadin += GWT
How does it work, really?
Vaadin += GWT
• Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k
• name=”Joonas” • button clicked 150 bytes
Vaadin += GWT
• name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes
Widget 7 Connector client State server RPC Component
Trying it out
Vaadin += GWT
https://github.com/jojule/NotesDemo
3 Embracing Java
Any JVM Language
Scalawith Scaladin add-on val layout = new VerticalLayout(width = 100 pct, height = 100 pct) { add(new Label(content = "Persons")) add(new Table(width = 100 pct, height = 100 pct), ratio = 1) add(new HorizontalLayout(spacing = true) { add(new Button("Edit selected", _ => editClicked())) add(new Button("Add new", _ => addNewClicked())) }) } getMainWindow.setContent(layout)
Internet Explorer Chrome Firefox Safari Opera iOS Android
No browser plugins Nothing to install
Servlet Portlet (most) clouds
Apache Tomcat, version 4.1 or later Oracle WebLogic Server, version 9.2 or later Oracle WebLogic Portal, version 10gR3 IBM WebSphere Application Server, version 6.1 or later IBM WebSphere Portal, version 6.1 and 7.0 JBoss Application Server, version 3.2.8 or later Jetty, version 5 or later Glassfish, version 2 or later Liferay Portal 5.2 or later GateIn Portal 3.1 eXo Platform 3 Google App Engine Vaadin supports Java Servlet API 2.3 and JSR-168 and JSR-286 Portlet Specifications and should work with any Java application server that conforms to these standards.
Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
Vaadin += GWT
getting started
Vaadin += GWT
Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta2 mvn package yourproject-1.0.war
Download for Free vaadin.com/book Vaadin is a for build n open source ing mod J look gre ern web ava framework at, app your use perform well an lications that rs happ d make y. you and http://va adin.com / ISBN 978 -9 52-92-67 53-8 90000 9 7 89 52 9 267538 S $29.9 5 Vaadin 7 Draft Edition ~700 pages
brought to you by... #85 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object .dzone.com Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle
Vaadin += GWT
vaadin.com/gwt @joonaslehtinen #
Questions? Comments? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen #vaadin Slides available on slideshare:

More Related Content

Vaadin += GWT

  • 1. Vaadin += GWT Dr. Joonas Lehtinen Vaadin - CEO vaadin.com/joonas @joonaslehtinen
  • 3. Vaadin is a UI framework for rich web applications
  • 4. java html
  • 5. healthcare portal, >100 kloc of perl, 89 19
  • 6. web 1.0, netscape, ie5, ie6, ...
  • 7. thinking of object oriented design, desktop, Java, U and I ...
  • 9. found millstone ajax google web toolkit 00 08 02 05 20 20 20 20
  • 10. re-released as 09 20
  • 11. Used by >50.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by conributing > 280 plug-ins and helping add-ons, mainstream each other on a forum with >1500 posts / m 10 11 Backed by 50+ person 20 20 full-time team
  • 12. Vaadin += GWT beta 12 20
  • 15. Developer experience goals User expecience Scalability
  • 32. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 34. Layers of abstraction Backend Web Java to RPC JavaScript server server JavaScript ExtJS GWT Vaadin required required optional optional optional required required required required optional required required required required
  • 40. Serve ucr-od ize Pr tim Op f or ed tiv iz df or ity tim e rol Op t- s d ont i C ien Cl
  • 41. Client Co Op - im t ntr f or ol ize df iz ed iv ity or tim c t sid Op u od r- e P r rve Se
  • 44. How does it work, really?
  • 46. • Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k
  • 47. • name=”Joonas” • button clicked 150 bytes
  • 49. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes
  • 50. Widget 7 Connector client State server RPC Component
  • 56. Scalawith Scaladin add-on val layout = new VerticalLayout(width = 100 pct, height = 100 pct) { add(new Label(content = "Persons")) add(new Table(width = 100 pct, height = 100 pct), ratio = 1) add(new HorizontalLayout(spacing = true) { add(new Button("Edit selected", _ => editClicked())) add(new Button("Add new", _ => addNewClicked())) }) } getMainWindow.setContent(layout)
  • 57. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 58. No browser plugins Nothing to install
  • 59. Servlet Portlet (most) clouds
  • 60. Apache Tomcat, version 4.1 or later Oracle WebLogic Server, version 9.2 or later Oracle WebLogic Portal, version 10gR3 IBM WebSphere Application Server, version 6.1 or later IBM WebSphere Portal, version 6.1 and 7.0 JBoss Application Server, version 3.2.8 or later Jetty, version 5 or later Glassfish, version 2 or later Liferay Portal 5.2 or later GateIn Portal 3.1 eXo Platform 3 Google App Engine Vaadin supports Java Servlet API 2.3 and JSR-168 and JSR-286 Portlet Specifications and should work with any Java application server that conforms to these standards.
  • 61. Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  • 65. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta2 mvn package yourproject-1.0.war
  • 66. Download for Free vaadin.com/book Vaadin is a for build n open source ing mod J look gre ern web ava framework at, app your use perform well an lications that rs happ d make y. you and http://va adin.com / ISBN 978 -9 52-92-67 53-8 90000 9 7 89 52 9 267538 S $29.9 5 Vaadin 7 Draft Edition ~700 pages
  • 67. brought to you by... #85 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object .dzone.com Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle
  • 69. vaadin.com/gwt @joonaslehtinen #
  • 70. Questions? Comments? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen #vaadin Slides available on slideshare: