Introduction to Google Web Toolkit

14,760 views

Published on

Published in: Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,760
On SlideShare
0
From Embeds
0
Number of Embeds
1,916
Actions
Shares
0
Downloads
551
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • Enter Title of Presentation Here Google Confidential
  • 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 !

    ×