Jax2013 SPA with Java

1,916 views
1,797 views

Published on

Published in: Technology

Jax2013 SPA with Java

  1. 1. Oliver Zeigermann | http://zeigermann.euSingle Page Web Applications with JavaDonnerstag, 25. April 13
  2. 2. Single Page Applications• A web application• Only a single page is delivered by theserver to the browser• All further action is controlled by theJavaScript delivered along with this page• Allows for high interactivity• comparable to desktop applicationsDonnerstag, 25. April 13
  3. 3. Examples of SPAs• Facebook• Gmail• MicroSoft Office 365• Twitter• TiddlyWikiDonnerstag, 25. April 13
  4. 4. Good for the user, but ...• developing for the browser is a tough task• might target different browsers• DOM•JavaScriptDonnerstag, 25. April 13
  5. 5. Objective of this talkWhat framework do Iuse to make SPAs workwith Java?Donnerstag, 25. April 13
  6. 6. Decisions• As an architect you make decisions all thetime• You have to be aware of• the requirements and• the options• If you aren‘t you can hardly make educateddecisions at allDonnerstag, 25. April 13
  7. 7. Architecture: one definition• The sum of all decisions that are either• impossible or• very hard to change during a projectDonnerstag, 25. April 13
  8. 8. The choice of the frameworkcould be one of the mostimportant architecturaldecisionsDonnerstag, 25. April 13
  9. 9. Options• GWT• JBoss Errai• GXT• Vaadin• AngularJSDonnerstag, 25. April 13
  10. 10. Common Requirements Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  11. 11. GWTDonnerstag, 25. April 13
  12. 12. Abstraction of differences #1• client & server• write everything in Java• client part compiles to JavaScript• shared code possible• call to server using a proprietary RPCprotocolDonnerstag, 25. April 13
  13. 13. Abstraction of differences #2• different browsers• dedicated JavaScript per browser• program on widgets, not DOM• widgets are thin layer over HTMLDonnerstag, 25. April 13
  14. 14. • Originally developed by Google• Said to be as good as dead in 2012 - due to• Google internal rival Dart• lack of ongoing development• Now managed by a steering committeeGWT fun factsDonnerstag, 25. April 13
  15. 15. How does it look like?Donnerstag, 25. April 13
  16. 16. GWT Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  17. 17. JBoss ErraiDonnerstag, 25. April 13
  18. 18. Motivation• GWT rocks, but• GWT-RPC sucks• a given layout is hard to implementDonnerstag, 25. April 13
  19. 19. Embraces• GWTs JavaScript compiler and tools• REST webservices• lets you use JAX-RS• DOM and HTML• lets you define your UI using HTML• Events• crossing client/server boundariesDonnerstag, 25. April 13
  20. 20. JBoss Errai fun facts• Done by JBoss / Red Hat• member of the GWT steering committeeDonnerstag, 25. April 13
  21. 21. Errai Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  22. 22. GXTDonnerstag, 25. April 13
  23. 23. Motivation• GWT rocks, but• we need richer, most desktop like UIwidgets• we need a good looking consistent themeDonnerstag, 25. April 13
  24. 24. GXT fun facts• Only free for non commercial use• GWT based “reimplementation” of Ext JS• actually NOT a wrapper over Ext JS• embraces all of GWTs core concepts• drives the component idea a little bit further downthe road• Done by Sencha• member of the GWT steering committeeDonnerstag, 25. April 13
  25. 25. How does it look like?Donnerstag, 25. April 13
  26. 26. GXT Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  27. 27. VaadinDonnerstag, 25. April 13
  28. 28. Motivation• Business applications• have a limited budget per view• I want to concentrate on the business logic• Technical aspects should not• stand in my way• slow me downDonnerstag, 25. April 13
  29. 29. Approach• application code runs on server side only• client-/server-communication transparentto application developer• using RPC and state synchronization• uses server side session• every non-trivial user interactions forcesclient-server round-tripDonnerstag, 25. April 13
  30. 30. Vaadin fun facts• Widgets based on GWT• All widgets initially loaded into browser• Done by a Finnish company - also calledVaadin - located in Turku• member of the GWT steering committeeDonnerstag, 25. April 13
  31. 31. How does it look like?Donnerstag, 25. April 13
  32. 32. Vaadin Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  33. 33. AngularJSDonnerstag, 25. April 13
  34. 34. Embrace• JavaScript• DOM• HTMLDonnerstag, 25. April 13
  35. 35. Approach• HTML enhanced for web apps!• How would HTML look like if it had beeninvented for applications?Donnerstag, 25. April 13
  36. 36. Features• Client side MVC framework• HTML5, DOM-based templates• 2-Way data-binding• Everything can be a model• HTML5 extensions• attributes• tagsDonnerstag, 25. April 13
  37. 37. Hello World<!doctype html><html ng-app><head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script></head><body><div><label>Name:</label><input type="text" ng-model="yourName" placeholder="Enter a name here"><hr><h1>Hello {{yourName}}!</h1></div></body></html>Donnerstag, 25. April 13
  38. 38. Java Integration:Appliesto any JavaScriptframeworkDonnerstag, 25. April 13
  39. 39. Generic ArchitectureDonnerstag, 25. April 13
  40. 40. Java integration pattern: Lean• UI• fully on client using JavaScript / AngularJS• Business logic• completely on server only• Communication• UI calls business logic using (REST) webservices• offline mode not possibleDonnerstag, 25. April 13
  41. 41. Donnerstag, 25. April 13
  42. 42. Java integration pattern: Fat• UI• fully on client using JavaScript / AngularJS• Business logic• major parts run on client in JavaScript• at least persistence parts run on server• Communication• business logic on client calls business logic on serverusing (REST) webservices• offline mode possibleDonnerstag, 25. April 13
  43. 43. Donnerstag, 25. April 13
  44. 44. GWT integration pattern• Business logic on client could be doneusing GWT• fixes problem of maintainability• calls to server could be REST or GWT-RPC• Experimental approaches even do UI partin GWT using AngularJS bindingDonnerstag, 25. April 13
  45. 45. AngularJS fun facts• Also done by Google• like Dart and GWT• Codenames of releases include• radioactive-gargle• tofu-animation• flatulent-propulsionDonnerstag, 25. April 13
  46. 46. AngularJS Checklistscales wellJava onlyflexible layoutimplicit remote callsoffline modeL&F out of the boxbackend reusableclient side UI logicrich set of UI widgetshas table widgetsimple tool chainintegrates wellDonnerstag, 25. April 13
  47. 47. Wrap up• SPAs are a modernalternative to desktopapplications• Developing SPAs withJava is a challenging task• Explicit Java / JavaScriptintegration might be anoption for you• All of the frameworkspresented arereasonable choices• which one is the rightfor you depends onyour requirementsand• the people who buildyour appDonnerstag, 25. April 13
  48. 48. Questions / DiscussionOliver Zeigermannhttp://zeigermann.euDonnerstag, 25. April 13

×