0
MIKE BURBA FOUNDER Google Web Toolkit APRIL 17 TH , 2008
Acknowledgements <ul><li>Portions of this presentation were borrowed with permission from the following presentations: </l...
DevHive is a SaaS platform  for custom business apps <ul><li>Platform-as-a-Service </li></ul><ul><li>Business app building...
Demonstration
Why Ajax?
At first, Ajax is really cool SOURCE: Didier Girard
But, what about… <ul><li>…  cross-browser </li></ul><ul><li>…  memory leaks </li></ul><ul><li>…  loading latency </li></ul...
The Solution: GWT <ul><li>Build Ajax apps with Java </li></ul><ul><li>Developers with Java skills </li></ul><ul><li>Tool s...
How it works Browser IE, Firefox, Safari, Opera Java Runtime Library java.lang java.util Java.io GWT GUI Library GWT Compi...
HelloWorld SOURCE: Didier Girard
Robust API SOURCE: Bruce Johnson
Widgets : 100% Java SOURCE: Didier Girard
History support SOURCE: Bruce Johnson
RPC Support  SOURCE: Didier Girard
Cross browser, cross platform SOURCE: Didier Girard
CSS <ul><li>GWT widgets are CSS compatible </li></ul>SOURCE: Didier Girard
Debugger SOURCE: Didier Girard
Javascript integration <ul><li>JSNI is modelled on JNI </li></ul><ul><li>Many javascript library are already wrapped : Doj...
Compiler optimizations SOURCE: Bruce Johnson
Tools <ul><li>GWT is supported by all the Java IDEs: Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,… </li></ul>
Open Source
GWT : The Community <ul><li>Millions of downloads </li></ul><ul><li>11,000 subscribers to the forum </li></ul><ul><li>Book...
How easy do you find  GWT to use ? Google Confidential Source : http://www.ongwt.com/post/2008/02/21/How-easy-do-you-find-...
Resources GWT : http:// code.google.com/webtoolkit / Forum : http:// groups.google.com /group/Google-Web-Toolkit GWT Blog ...
Lessons Learned
Design your apps for  the real world <ul><li>Real-world users… </li></ul><ul><li>Have dial-up </li></ul><ul><li>Click thin...
Think asynch <ul><li>Handle exceptions! </li></ul><ul><li>Tell the user that something is going on </li></ul><ul><li>Load ...
Working with a designer <ul><li>It’s ok to use more  than one HTML page </li></ul><ul><li>Have the designer prepare HTML /...
Optimizing deployment <ul><li>Use ant </li></ul><ul><li>Include only the files that  are needed in production </li></ul><u...
One GWT module per user “role” Manager.gwt.xml 171k Admin.gwt.xml 512k User.gwt.xml 323k
Use Model-View-Controller Controller Model
During development, compile for only one browser SOURCE: Didier Girard * *Hosted mode currently uses IE.  Once GWT 1.5 shi...
Get Firebug
[Eclipse] project layout <ul><li>Single Java project </li></ul><ul><li>Manually setup JEE Web folders </li></ul><ul><ul><l...
Contact info <ul><li>[email_address] </li></ul><ul><li>+1.248.207.5054 </li></ul>
Upcoming SlideShare
Loading in...5
×

200804_DevHive_GWT.ppt

559

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Better user experience
  • Compiled javascript is optimized / minified Only the necessary javascript is downloaded by the browser IE downloads only javascript for IE, Firefox downloads only javascript for Firefox Unused APIs are removed from the compiled javascript
  • Real-world users: Have dial-up They click items furiously They don’t do what you think they should do They hit the back button
  • Transcript of "200804_DevHive_GWT.ppt"

    1. 1. MIKE BURBA FOUNDER Google Web Toolkit APRIL 17 TH , 2008
    2. 2. Acknowledgements <ul><li>Portions of this presentation were borrowed with permission from the following presentations: </li></ul><ul><li>Bruce Johnson, GWT Tech Lead, Google </li></ul><ul><ul><li>Fast, Easy, Beautiful: Pick Three - Building User Interfaces with GWT </li></ul></ul><ul><ul><li>Writing Big Apps with GWT </li></ul></ul><ul><ul><li>http:// code.google.com/webtoolkit/presentations.html </li></ul></ul><ul><li>Didier Girard, CTO, SFEIR </li></ul><ul><ul><li>Introduction to the Google Web Toolkit </li></ul></ul><ul><ul><li>http://www.slideshare.net/dgirard/introduction-to-google-web-toolkit?src =embed </li></ul></ul>
    3. 3. DevHive is a SaaS platform for custom business apps <ul><li>Platform-as-a-Service </li></ul><ul><li>Business app building blocks </li></ul><ul><li>Software marketplace </li></ul>
    4. 4. Demonstration
    5. 5. Why Ajax?
    6. 6. At first, Ajax is really cool SOURCE: Didier Girard
    7. 7. But, what about… <ul><li>… cross-browser </li></ul><ul><li>… memory leaks </li></ul><ul><li>… loading latency </li></ul><ul><li>… Javascript PhD </li></ul><ul><li>… Ajax IDE </li></ul><ul><li>… bugs (javascript is a dynamic language) </li></ul><ul><li>… cross browser javascript debugger </li></ul><ul><li>… security </li></ul><ul><li>… </li></ul>SOURCE: Didier Girard
    8. 8. The Solution: GWT <ul><li>Build Ajax apps with Java </li></ul><ul><li>Developers with Java skills </li></ul><ul><li>Tool support: IDEs, debugger, JUnit, etc. </li></ul><ul><li>Eliminate browser-specific coding </li></ul><ul><li>Facilitate reuse </li></ul><ul><li>Fast, simple RPC </li></ul>SOURCE: Bruce Johnson
    9. 9. How it works Browser IE, Firefox, Safari, Opera Java Runtime Library java.lang java.util Java.io GWT GUI Library GWT Compiler SOURCE: Didier Girard Application code Panels Popup Stack Absolute Vertical … Widgets Button MenuBar Radio Tree Check Table TextArea … . Javascript Application GWT Runtime 100Ko
    10. 10. HelloWorld SOURCE: Didier Girard
    11. 11. Robust API SOURCE: Bruce Johnson
    12. 12. Widgets : 100% Java SOURCE: Didier Girard
    13. 13. History support SOURCE: Bruce Johnson
    14. 14. RPC Support SOURCE: Didier Girard
    15. 15. Cross browser, cross platform SOURCE: Didier Girard
    16. 16. CSS <ul><li>GWT widgets are CSS compatible </li></ul>SOURCE: Didier Girard
    17. 17. Debugger SOURCE: Didier Girard
    18. 18. Javascript integration <ul><li>JSNI is modelled on JNI </li></ul><ul><li>Many javascript library are already wrapped : Dojo, Extjs, Google Ajax API… </li></ul>public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; SOURCE: Didier Girard
    19. 19. Compiler optimizations SOURCE: Bruce Johnson
    20. 20. Tools <ul><li>GWT is supported by all the Java IDEs: Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,… </li></ul>
    21. 21. Open Source
    22. 22. GWT : The Community <ul><li>Millions of downloads </li></ul><ul><li>11,000 subscribers to the forum </li></ul><ul><li>Books </li></ul><ul><li>Tons of tutorials </li></ul><ul><li>Blogs </li></ul>SOURCE: Didier Girard
    23. 23. How easy do you find GWT to use ? Google Confidential Source : http://www.ongwt.com/post/2008/02/21/How-easy-do-you-find-GWT-to-use SOURCE: Didier Girard
    24. 24. Resources GWT : http:// code.google.com/webtoolkit / Forum : http:// groups.google.com /group/Google-Web-Toolkit GWT Blog : http:// googlewebtoolkit.blogspot.com / onGWT, Tracking news on GWT : http:// www.ongwt.com /
    25. 25. Lessons Learned
    26. 26. Design your apps for the real world <ul><li>Real-world users… </li></ul><ul><li>Have dial-up </li></ul><ul><li>Click things furiously when they don’t see the screen respond </li></ul><ul><li>Don’t find your app as “elegant” & “intuitive” as you do </li></ul><ul><li>They hit the back button </li></ul><ul><li>Multi-task </li></ul>
    27. 27. Think asynch <ul><li>Handle exceptions! </li></ul><ul><li>Tell the user that something is going on </li></ul><ul><li>Load pages incrementally </li></ul><ul><li>Gracefully deal with stale sessions </li></ul>
    28. 28. Working with a designer <ul><li>It’s ok to use more than one HTML page </li></ul><ul><li>Have the designer prepare HTML / CSS </li></ul><ul><li>Drop GWT elements on the page as required </li></ul>
    29. 29. Optimizing deployment <ul><li>Use ant </li></ul><ul><li>Include only the files that are needed in production </li></ul><ul><li>Compress static content (Gzip – ant task) – 25% improvement </li></ul><ul><li>Tell browser to cache (far future headers) – 10X improvement </li></ul>
    30. 30. One GWT module per user “role” Manager.gwt.xml 171k Admin.gwt.xml 512k User.gwt.xml 323k
    31. 31. Use Model-View-Controller Controller Model
    32. 32. During development, compile for only one browser SOURCE: Didier Girard * *Hosted mode currently uses IE. Once GWT 1.5 ships, you should be able to stick to FF
    33. 33. Get Firebug
    34. 34. [Eclipse] project layout <ul><li>Single Java project </li></ul><ul><li>Manually setup JEE Web folders </li></ul><ul><ul><li>One folder for static content you want to cache </li></ul></ul><ul><li>Separate folders for </li></ul><ul><ul><li>Client </li></ul></ul><ul><ul><li>Server </li></ul></ul><ul><ul><li>Common / shared classes </li></ul></ul>
    35. 35. Contact info <ul><li>[email_address] </li></ul><ul><li>+1.248.207.5054 </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×