Introduction to Google Web Toolkit

14,925 views

Published on

Published in: Business
  • Be the first to comment

Introduction to Google Web Toolkit

  1. 1. Google Web Toolkit Introduction Didier Girard – girard.d@sfeir.com 2008
  2. 2. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>How does it run ? </li></ul><ul><li>GWT features </li></ul>
  3. 3. DEMONSTRATION
  4. 4. Démonstrations
  5. 5. Demonstrations <ul><li>http://stuff.ongwt.com </li></ul>
  6. 6. GWT, FOR C*O LEVEL…
  7. 7. GWT is MDI compatible * <ul><li>GWT applications could have windows residing under a single parent window. </li></ul>*MDI : Multiple Document Interface
  8. 8. GWT is simple <ul><li>Developing a web application with GWT is as simple as developing a Windows application with VB </li></ul>
  9. 9. GWT cuts costs <ul><li>Building a GWT application is 5 times faster than building a J2EE application </li></ul>
  10. 10. GWT is offline compatible <ul><li>A GWT application doesn’t need a server </li></ul>
  11. 11. GWT, better ergonomic http://swissmiss.typepad.com/weblog/2007/11/task-clips.html Web 1.0 GWT
  12. 12. GWT applications are efficient <ul><li>Local computation, bandwidth optimization </li></ul>
  13. 14. Ajax advantages
  14. 15. Ajax : Partial update of the screen <ul><li>No more « Blank page » effect </li></ul>
  15. 16. Ajax : Asynchronous updates <ul><li>Fresh data without reload </li></ul>
  16. 17. Ajax : Rich Widgets <ul><li>Widgets : One more beautiful than the other </li></ul>
  17. 18. Ajax : Better scalability <ul><li>Stateless Server </li></ul><ul><li>Statefull client </li></ul>Data Base Data Application GUI+Business + Session
  18. 19. At first, Ajax is really cool <ul><li>So beautiful </li></ul><ul><li>So efficient </li></ul><ul><li>Customers love it </li></ul>
  19. 20. But, what about… <ul><li>… cross-browser </li></ul><ul><li>… memory leak </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>
  20. 21. The solution – First step <ul><li>Build the prototype of the application </li></ul><ul><ul><li>It is really fun </li></ul></ul><ul><ul><li>Everybody will admire you </li></ul></ul>
  21. 22. The solution – Second step <ul><li>Your customer purchases : leave the project :-) </li></ul>
  22. 23. Or…
  23. 24. Choose GWT
  24. 25. GWT, HOW DOES IT RUN ?
  25. 26. GWT manifest <ul><li>GWT should help to code stable, efficient and cross-browser applications </li></ul><ul><li>GWT should be friendly for developers </li></ul><ul><ul><li>Compatible with IDE, support debugging, refactoring, strong typing… </li></ul></ul><ul><li>The based line : « First the user, second the developer » - Bruce Johnson </li></ul>
  26. 27. The approach <ul><li>Code in java </li></ul><ul><li>Compile the java to Javascript </li></ul>
  27. 28. Hello World <ul><li>Demonstration </li></ul>
  28. 29. Architecture Browser IE, Firefox, Safari, Opera RWA in Java Java Runtime Library java.lang java.util Java.io GWT GUI Library GWT Compiler Application code Panels Popup Stack Absolute Vertical … Widgets Button MenuBar Radio Tree Check Table TextArea … . Javascript Application GWT Runtime 100Ko
  29. 30. OVERVIEWS
  30. 31. Widgets : « 100% java » <ul><li>Demonstration (Kitchen Sink) </li></ul>http://code.google.com/webtoolkit/examples/kitchensink/
  31. 32. History support <ul><li>« Single Page Interface » with history support ! </li></ul><ul><li>Demonstration (Kitchen Sink) </li></ul><ul><li>Code : </li></ul><ul><ul><li>History. addHistoryListener(myCommand); </li></ul></ul>
  32. 33. RPC Support (JSON/XML-RPC) <ul><li>AJAX is a story of asynchronous request </li></ul><ul><ul><li>With GWT, it is simple ! </li></ul></ul>
  33. 34. I18N/L10N support <ul><li>Simple and powerfull </li></ul>
  34. 35. Absolute Panel <ul><li>Rapid Application Development : sometime, you need it </li></ul><ul><ul><li>Absolute panel : a pleasure ! </li></ul></ul><ul><li>A panel of Panels : Grid, Row, Flex, Vertical, Tab,… </li></ul>
  35. 36. Cross browser, cross platform
  36. 37. CSS <ul><li>GWT widgets are CSS compatible </li></ul>
  37. 38. Debugger <ul><li>Demonstration </li></ul>
  38. 39. Javascript integration <ul><li>JSNI, a clever API </li></ul><ul><li>Many javascript library are already wrapped : Dojo, Extjs,… </li></ul><ul><li>Demonstration </li></ul>public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;
  39. 40. Optimization <ul><li>Compiled javascript is optimized </li></ul><ul><li>Only the necessary javascript is downloaded by the browser </li></ul><ul><ul><li>IE downloads only javascript for IE, Firefox downloads only javascript for Firefox </li></ul></ul><ul><ul><li>Unused APIs are removed from the compiled javascript </li></ul></ul>
  40. 41. Good scalability <ul><li>GWT server could be stateless </li></ul><ul><li>No more session affinity </li></ul>
  41. 42. Tools <ul><li>GWT is supported by all the java IDE : Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,… </li></ul><ul><li>Advertisement : my favorite tool is GWT Designer </li></ul>
  42. 43. GWT : THE Community <ul><li>Millions of download </li></ul><ul><li>11000 subscribers to the forum </li></ul><ul><li>Books </li></ul><ul><li>Tones of Books </li></ul><ul><li>Tones of tutorials </li></ul><ul><li>Blogs </li></ul>
  43. 44. GWT 1.4, faster, faster, faster <ul><li>Example : ImageBundle, kind of database for images </li></ul><ul><ul><li>From 12 requests to 1 request… </li></ul></ul>ClippedImage timeIcon = new ClippedImage(&quot;icons.png&quot;, 22, 0, 22, 22); http://roberthanson.blogspot.com/2007/02/gwt-clippedimage-optimizing-image.html
  44. 45. GWT Gears <ul><li>Gears helps to build offline application </li></ul><ul><li>GWT wrapper : </li></ul><ul><ul><li>http://code.google.com/p/gwt-google-apis/ </li></ul></ul><ul><li>Demo </li></ul>Google Confidential
  45. 46. GWT : summary <ul><li>It is 5 times faster to build a GWT application </li></ul><ul><ul><li>Refactoring </li></ul></ul><ul><ul><li>Debugging </li></ul></ul><ul><ul><li>Stateless server </li></ul></ul><ul><ul><li>Cross-browsers </li></ul></ul><ul><ul><li>I18N </li></ul></ul><ul><ul><li>Hosted mode </li></ul></ul><ul><ul><li>JSNI </li></ul></ul>
  46. 47. TIPS AND TRICKS
  47. 48. Think differently! <ul><li>Rethink application ergonomic. </li></ul><ul><li>Forget browsing </li></ul><ul><li>MDI is possible </li></ul><ul><li>Stateless server, statefull client </li></ul><ul><li>-> Demo </li></ul><ul><li>http://code.google.com/p/gdf </li></ul>Google Confidential
  48. 49. A language is behind the other <ul><li>It is not a java application, it is javascript application coded with the java API ! </li></ul><ul><li>For example, « long » is not a javascript type ! </li></ul><ul><li>-> Demonstration </li></ul>Google Confidential
  49. 50. Misc <ul><li>DOM manipulation is costly </li></ul><ul><ul><li>Your user can have : «  slow script message »  </li></ul></ul><ul><ul><li>-> Use « IncrementalCommand » ( DEMO ) </li></ul></ul><ul><li>No need to send tones of asynchronous request </li></ul><ul><li>Deal with RPC error by subclassing AsyncCallback </li></ul><ul><li>Forget javascript </li></ul><ul><li>Use Selenium ( DEMO ) </li></ul><ul><li>Use Maven </li></ul>Google Confidential
  50. 51. COMMONPLACE
  51. 52. You must used java on the server <ul><li>No, GWT is server free </li></ul>
  52. 53. Compiled javascript is impossible to debug <ul><li>It is possible to change compilation option </li></ul><ul><li>But you never need to it, </li></ul><ul><li>-> Demo </li></ul>
  53. 54. GWT Widgets ? Bof…. <ul><li>GWT widgets are basic </li></ul><ul><li>It is really easy to build its own widget </li></ul><ul><li>Many libraries </li></ul><ul><ul><li>GWT Ext </li></ul></ul><ul><ul><li>GWT Rialto </li></ul></ul><ul><ul><li>Tatami </li></ul></ul><ul><ul><li>GWT Widget </li></ul></ul><ul><ul><li>GWTaculous </li></ul></ul><ul><ul><li>MyGWT </li></ul></ul><ul><ul><li>… </li></ul></ul>Google Confidential
  54. 55. GWT are heavy <ul><li>Compiled javascript is light and gzippable </li></ul><ul><ul><li>KitchenSink is around 60Ko ! </li></ul></ul>
  55. 56. GWT is HTML incompatible <ul><li>Wrong </li></ul><ul><ul><li>It is possible to include GWT components in a classical HTML page </li></ul></ul>
  56. 57. GWT are applets <ul><li>Applets, no thanks :-) </li></ul><ul><ul><li>Java is compiled to javascript ! </li></ul></ul>
  57. 58. GWT is not free <ul><li>Noooo </li></ul><ul><ul><li>GWT is opensource (Apache licence) </li></ul></ul>
  58. 59. Ressources 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/
  59. 60. SFEIR <ul><li>6 projects with GWT </li></ul><ul><ul><li>5000 days of coding </li></ul></ul><ul><ul><li>It is just fun </li></ul></ul><ul><ul><li>Clients are very happy with their applications </li></ul></ul><ul><ul><li>Our stack : GWT/Spring/Hibernate </li></ul></ul><ul><li>Jobs: girard.d@sfeir.com </li></ul>Google Confidential
  60. 61. Conclusion GWT, c’est facile, efficace et beau ! Merci à l’équipe GWT, Merci à la communauté, Merci à Google !

×