Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Ajax apps with the Google Web Toolkit

5,421 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?

×