Building Ajax apps with the Google Web Toolkit

5,403 views

Published on

- Introduction to Ajax, Google Web Toolkit

Published in: Business, Technology

Building Ajax apps with the Google Web Toolkit

  1. 1. Building Ajax Applications with the Google Web Toolkit Vivek Prahlad
  2. 2. Agenda <ul><ul><li>What is the Google Web Toolkit? </li></ul></ul><ul><ul><li>Features </li></ul></ul><ul><ul><li>Architectural issues with AJAX applications </li></ul></ul><ul><ul><ul><li>And how the GWT handles them </li></ul></ul></ul><ul><ul><li>Experience report: </li></ul></ul><ul><ul><ul><li>What went well? </li></ul></ul></ul><ul><ul><ul><li>Gotchas </li></ul></ul></ul><ul><ul><li>Lots of demos </li></ul></ul>
  3. 3. What is the GWT? <ul><ul><li>A UI framework for building Ajax apps in Java </li></ul></ul><ul><ul><ul><li>Best suited for one page Ajax apps </li></ul></ul></ul><ul><ul><ul><li>Can be embedded into existing apps as well </li></ul></ul></ul><ul><ul><ul><li>Open Source (Apache 2 license) </li></ul></ul></ul><ul><ul><li>Component based programming model </li></ul></ul><ul><ul><ul><li>Similar to, but simpler than Swing / SWT </li></ul></ul></ul><ul><ul><ul><li>Control application appearance via CSS </li></ul></ul></ul><ul><ul><li>Simple RPC framework </li></ul></ul>
  4. 4. Source: Adaptive Path How are Ajax apps different?
  5. 5. Source: Adaptive Path
  6. 6. Source: Adaptive Path
  7. 7. Demo: Hello World
  8. 8. Developing applications <ul><ul><li>Client side code: Java + GWT UI library </li></ul></ul><ul><ul><ul><li>Restriction: subset of the JDK – java.lang, java.util </li></ul></ul></ul><ul><ul><ul><li>Compiled to javascript. Morfik, Script# are similar </li></ul></ul></ul><ul><ul><li>Server side code: GWT RPC + usual suspects </li></ul></ul><ul><ul><ul><li>Spring & Hibernate </li></ul></ul></ul><ul><ul><ul><li>Can send domain layer classes over the wire </li></ul></ul></ul><ul><ul><ul><li>Need to implement IsSerializable </li></ul></ul></ul><ul><ul><ul><li>Compiled to bytecode as usual </li></ul></ul></ul>
  9. 9. Features <ul><ul><li>Component based framework </li></ul></ul><ul><ul><li>Browser support: IE6+, Firefox, Mozilla, Safari, Opera </li></ul></ul><ul><ul><ul><li>No Konqueror support </li></ul></ul></ul><ul><ul><li>Internationalization </li></ul></ul><ul><ul><li>Debugging </li></ul></ul><ul><ul><li>Browser history management </li></ul></ul><ul><ul><li>Integrate with javascript libraries via JSNI </li></ul></ul><ul><ul><li>JUnit integration </li></ul></ul>
  10. 10. Demo: More Examples
  11. 11. Architectural Issues? <ul><ul><li>Back button support? </li></ul></ul><ul><ul><ul><li>Handled by the browser </li></ul></ul></ul><ul><ul><li>Session state? </li></ul></ul><ul><ul><ul><li>All on the client, not a server issue </li></ul></ul></ul><ul><ul><li>UI event handling? </li></ul></ul><ul><ul><ul><li>All on the client, no round trip </li></ul></ul></ul><ul><ul><li>Deployment? </li></ul></ul><ul><ul><ul><li>Compiled Javascript code, java on server side </li></ul></ul></ul>
  12. 12. Answers to a few Ajax headaches <ul><ul><li>History? </li></ul></ul><ul><ul><ul><li>Handled by the History class </li></ul></ul></ul><ul><ul><li>Cross browser support? </li></ul></ul><ul><ul><ul><li>Abstract DOM class </li></ul></ul></ul><ul><ul><li>RPC? </li></ul></ul><ul><ul><ul><li>Java based RPC mechanism </li></ul></ul></ul>
  13. 13. Building Widgets <ul><ul><li>Build new widgets from existing ones </li></ul></ul><ul><ul><li>Style with CSS </li></ul></ul><ul><ul><ul><li>No, your app doesn't have to look like Gmail! </li></ul></ul></ul><ul><ul><ul><li>Layout with panels </li></ul></ul></ul>
  14. 14. Testing <ul><ul><li>Sahi ( http://sahi.co.in ) for functional testing </li></ul></ul><ul><ul><li>Unit testing via the GWTTestCase </li></ul></ul><ul><ul><ul><li>Same restrictions as with UI code </li></ul></ul></ul><ul><ul><ul><li>MVC is your friend </li></ul></ul></ul><ul><ul><ul><li>Use GWTTestcase for the view </li></ul></ul></ul><ul><ul><ul><li>Test the Model and Controller as usual </li></ul></ul></ul>
  15. 15. What went well? <ul><ul><li>Truly cross-browser </li></ul></ul><ul><ul><li>App needed 2 lines of custom javascript </li></ul></ul><ul><ul><ul><li>For disabling text selection </li></ul></ul></ul><ul><ul><li>Great component model </li></ul></ul><ul><ul><ul><li>Easy to build custom components from scratch </li></ul></ul></ul><ul><ul><li>Java to Javascript compiler works like a charm </li></ul></ul><ul><ul><li>No memory leaks </li></ul></ul><ul><ul><li>Break up large apps with modules & IFrames </li></ul></ul>
  16. 16. Gotchas <ul><ul><li>RPC mechanism works only with GWT clients </li></ul></ul><ul><ul><li>Some widgets use HTML tables internally </li></ul></ul><ul><ul><ul><li>CSS for layout faster, but more challenging </li></ul></ul></ul><ul><ul><li>Table widget support weak </li></ul></ul><ul><ul><ul><li>No MVC separation </li></ul></ul></ul>
  17. 17. Gotchas <ul><ul><li>Need to be careful about client side state </li></ul></ul><ul><ul><ul><li>Ajax apps usually long lived – memory leaks can kill you </li></ul></ul></ul><ul><ul><li>Some widgets need a lot of custom HTML </li></ul></ul><ul><ul><ul><li>Tree widget biggest offender </li></ul></ul></ul><ul><ul><li>Need to replace hibernated objects before serializing </li></ul></ul><ul><ul><ul><li>Replace PersistentSet, PersistentList with HashSet, ArrayList </li></ul></ul></ul>
  18. 18. Resources <ul><ul><li>http://code.google.com/webtoolkit </li></ul></ul><ul><ul><li>http://groups.google.com/Google-Web-Toolkit </li></ul></ul><ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul></ul>
  19. 19. Questions?

×