Building Ajax Applications  with the Google Web Toolkit Vivek Prahlad
Agenda <ul><ul><li>What is the Google Web Toolkit? </li></ul></ul><ul><ul><li>Features </li></ul></ul><ul><ul><li>Architec...
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 ...
Source: Adaptive Path How are Ajax apps different?
Source: Adaptive Path
Source: Adaptive Path
Demo: Hello World
Developing applications <ul><ul><li>Client side code: Java + GWT UI library </li></ul></ul><ul><ul><ul><li>Restriction: su...
Features <ul><ul><li>Component based framework </li></ul></ul><ul><ul><li>Browser support: IE6+, Firefox, Mozilla, Safari,...
Demo: More Examples
Architectural Issues? <ul><ul><li>Back button support? </li></ul></ul><ul><ul><ul><li>Handled by the browser </li></ul></u...
Answers to a few Ajax headaches <ul><ul><li>History? </li></ul></ul><ul><ul><ul><li>Handled by the History class </li></ul...
Building Widgets <ul><ul><li>Build new widgets from existing ones </li></ul></ul><ul><ul><li>Style with CSS </li></ul></ul...
Testing <ul><ul><li>Sahi ( http://sahi.co.in ) for functional testing </li></ul></ul><ul><ul><li>Unit testing via the  GWT...
What went well? <ul><ul><li>Truly cross-browser </li></ul></ul><ul><ul><li>App needed 2 lines of custom javascript </li></...
Gotchas <ul><ul><li>RPC mechanism works only with GWT clients </li></ul></ul><ul><ul><li>Some widgets use HTML tables inte...
Gotchas <ul><ul><li>Need to be careful about client side state </li></ul></ul><ul><ul><ul><li>Ajax apps usually long lived...
Resources <ul><ul><li>http://code.google.com/webtoolkit </li></ul></ul><ul><ul><li>http://groups.google.com/Google-Web-Too...
Questions?
Upcoming SlideShare
Loading in …5
×

Google Web toolkit

5,836 views

Published on

AJAX, at its best using the Google Web Toolkit

Published in: Business, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,836
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 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?

    ×