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.

GWT + Gears : The browser is the platform


Published on

GWT and Gears : The browser is the platform

Published in: Business, Technology
  • GWT in Action: Easy Ajax with the Google Web Toolkit
    Are you sure you want to  Yes  No
    Your message goes here
  • Design 'all browsers compatible' website.

    A website should be designed in accordance to the W3 standrads.These

    standards have been set to improve the functionality, design and look of

    websites, thus saving time and making them all browser compatible.

    We have many web browsers now a days as Mosaic, Cello, Lynx (2.0),

    Arena, Internet Explorer , Netscape,, Opera 3.0,fireFo.Now a days mozilla

    fire fox the most popular web browser that is being used. But the problems

    with mozilla are that is does not support java script and flash, the loading

    time is more.

    Therefore always design a website that is browser compatible so that your

    users don't have to adjust. It's you who should have a browser compatible

    website and not visitors should change their browsers to be able to see your

    Are you sure you want to  Yes  No
    Your message goes here

GWT + Gears : The browser is the platform

  1. GWT-Gears The Browser is the Platform Didier Girard – Sfeir CTO Member of OSSGTP
  2. Before starting, some questions <ul><li>Who knows javascript ? </li></ul><ul><li>Who is a javascript expert ? </li></ul><ul><li>Who knows java ? </li></ul>Google Confidential
  3. Content <ul><li>Ajax : the good, the bad and the coward </li></ul><ul><li>Demonstrations </li></ul><ul><li>GWT for Chief (whatyouwant) Officer </li></ul><ul><li>GWT for developers </li></ul><ul><li>Gears for early adopters </li></ul>Google Confidential
  4. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  5. Ajax : Asynchronous updates <ul><li>Fresh data without reload </li></ul>
  6. Ajax : Rich Widgets <ul><li>Widgets : One more beautiful than the other </li></ul>
  7. Ajax : Partial update of the screen <ul><li>No more « Blank page » effect </li></ul>
  8. Single Page Interface : Better scalability <ul><li>Stateless Server </li></ul><ul><li>Stateful client </li></ul>Data Base Data Application GUI+Business + Session
  9. At first, Ajax is really cool <ul><li>So wonderful, incredible, marvellous </li></ul><ul><li>So efficient </li></ul><ul><li>Customers love it </li></ul>
  10. Some boring comments about javascript <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>
  11. 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>
  12. The solution – Second step <ul><li>Your customer purchases : leave the project :-) </li></ul>
  13. But I’m not a coward
  14. Do something else
  15. But What ?
  16. My manifest <ul><li>I want a technology that </li></ul><ul><ul><li>helps to code stable, efficient and cross-browser applications </li></ul></ul><ul><ul><li>Is a friend to me as a developer </li></ul></ul><ul><ul><ul><li>Compatible with IDE, support debugging, refactoring, strong typing… </li></ul></ul></ul><ul><li>The base line could be : « Good for the user, good for the developer » </li></ul>
  17. That is what GWT is !
  18. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  19. Démonstrations
  20. Demonstrations <ul><li> </li></ul>
  21. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  22. GWT is simple <ul><li>Developing a web application with GWT is as simple as developing a Windows application with VB </li></ul>
  23. GWT is cheap Google Confidential
  24. GWT cuts costs <ul><li>Building a GWT application is 5 times faster than building a J2EE application </li></ul>
  25. GWT applications are efficient <ul><li>Local computation, bandwidth optimization </li></ul>
  26. GWT is offline compatible <ul><li>A GWT application doesn’t need a server </li></ul>
  27. Compatible with mobile Google Confidential
  28. GWT is MDI compatible * <ul><li>GWT applications could have windows residing under a single parent window. </li></ul>*MDI : Multiple Document Interface
  29. GWT, better ergonomically Web 1.0 GWT
  30. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  31. The approach <ul><li>Code in java </li></ul><ul><li>Compile the java to Javascript </li></ul>
  32. Hello World <ul><li>Demonstration </li></ul>
  33. How easy do you find GWT to use ? <ul><li>Very Easy, Easy, Medium, Hard, Very Hard ? </li></ul>Google Confidential Source :
  34. Architecture Browser IE, Firefox, Safari, Opera RWA in Java Java Runtime Library java.lang java.util 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
  35. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  36. Widgets : « 100% java » <ul><li>Demonstration (Kitchen Sink) </li></ul>
  37. Third party GWT Widgets <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>MyGWT </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>… </li></ul></ul>Google Confidential
  38. 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>
  39. 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>
  40. I18N/L10N support <ul><li>Simple and powerful </li></ul>
  41. GWT is compatible with unit testing <ul><li>Compatible with Junit </li></ul><ul><li>Compatible with Selenium </li></ul>Google Confidential
  42. Cross browser, cross platform
  43. CSS <ul><li>GWT widgets are CSS compatible </li></ul>
  44. Debugger <ul><li>Demonstration </li></ul>
  45. Javascript integration <ul><li>JSNI, a clever API </li></ul><ul><li>Many javascript libraries are already wrapped : Dojo, Extjs,… </li></ul><ul><li>Demonstration </li></ul>public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;
  46. 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>
  47. Good scalability <ul><li>GWT server could be stateless </li></ul><ul><li>No more session affinity </li></ul>
  48. 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>
  49. GWT 1.4 is fast <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);
  50. 2008 : GWT 1.5 <ul><li>The Java 1.5 syntax is fully supported, including generics, enums, nice &quot;for&quot; loops, autoboxing, static imports, annotations, and so on </li></ul><ul><li>The ability to subclass JavaScriptObject for very straightforward JavaScript interop </li></ul><ul><li>Thurs, Mar 6 2008 : GWT 1.5 M1 is available for download </li></ul>Google Confidential
  51. Google Gadget with GWT
  52. Gadget definition <ul><li><Module> <ModulePrefs title=&quot;Hello World” author=“Didier Girard” author_email=“”> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ Your application goes here ]]> </Content> </Module> </li></ul>
  53. Gadget definition with GWT : 1 line <ul><li><Module> <ModulePrefs title=&quot;Hello World” author=“Didier Girard” author_email=“”> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ <script src=&quot;http://..../com.mycompany.project.ImageViewer -xs.nocache.js &quot;> </li></ul><ul><li></script> ]]> </Content> </Module> </li></ul>
  54. Opensocial
  55. Who's Using It?
  56. Opensocial Definition with GWT : 2 lines <ul><li><Module> <ModulePrefs title=&quot;Hello World” author=“Didier Girard” author_email=“”> <Require feature=&quot;opensocial-0.7&quot;/> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ <script src=&quot;http://..../com.mycompany.project.ImageViewer -xs.nocache.js &quot;> </li></ul><ul><li></script> ]]> </Content> </Module> </li></ul>
  57. Simple, Efficient and Powerful ?
  58. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  59. I need offline applications <ul><li>Do you ever miss your application </li></ul><ul><ul><li>Pubs </li></ul></ul><ul><ul><li>Trains </li></ul></ul><ul><li>Are you sure that your user want its data in the cloud ? </li></ul>
  60. Classic web architecture Browser Server DataBase HTTP
  61. My needs in offline mode Browser Server DataBase DataBase Server
  62. I need Browser Server DataBase Install DataBase Server
  63. The solution <ul><li>Google Gears </li></ul><ul><ul><li>Browser Plugin (FireFox, Internet Explorer) </li></ul></ul><ul><ul><li>Features: </li></ul></ul><ul><ul><ul><li>LocalServer (“programmable cache”) </li></ul></ul></ul><ul><ul><ul><li>Database </li></ul></ul></ul><ul><ul><ul><li>Worker Threads for JavaScript </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  64. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  65. Architecture Google Confidential Browser Gears Javascript API Your GWT Application Your JS Application Dojo GWT Wrapper
  66. Demo <ul><li>Live coding </li></ul>
  67. Perspectives of Gears : future APIs <ul><li>Notification API </li></ul><ul><li>Crypto API </li></ul><ul><li>Factory API updates </li></ul><ul><li>Blob API </li></ul><ul><li>Logging API </li></ul><ul><li>Messaging API </li></ul><ul><li>Location API </li></ul><ul><li>Desktop Shortcut API </li></ul><ul><li>Image Manipulation API </li></ul>
  68. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  69. 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>Google Confidential
  70. 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
  71. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  72. You must used java on the server <ul><li>No, GWT is server free </li></ul>
  73. 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>
  74. GWT applications are heavy <ul><li>Compiled javascript is light and gzippable </li></ul><ul><ul><li>KitchenSink is around 60Ko ! </li></ul></ul>
  75. GWT is HTML incompatible <ul><li>Wrong </li></ul><ul><ul><li>It is possible to include GWT components in a standard HTML page </li></ul></ul>
  76. GWT applications are applets <ul><li>Applets, no thanks :-) </li></ul><ul><ul><li>Java is compiled to javascript ! </li></ul></ul>
  77. Content <ul><li>Demonstrations </li></ul><ul><li>Why GWT ? </li></ul><ul><li>GWT features </li></ul><ul><li>Google Gears </li></ul>
  78. Who are the challengers <ul><li>Silverlight </li></ul><ul><li>AIR/Flex </li></ul><ul><li>Firefox with the XUL/Prism stuff </li></ul>
  79. GWT and Gears Google Confidential
  80. GWT : THE Community <ul><li>Millions of downloads </li></ul><ul><li>12000 subscribers to the users forum </li></ul><ul><li>700 subscribers to the contributors forum </li></ul><ul><li>Books </li></ul><ul><li>Tons of articles </li></ul><ul><li>Tons of tutorials </li></ul><ul><li>Blogs </li></ul>
  81. Faster and faster <ul><li>GWT application are efficient </li></ul><ul><li>It is 5 times faster to build a GWT application </li></ul>
  82. This might surprise you but <ul><li>This pair of tools is the least disruptive </li></ul><ul><ul><li>It is based on the most used langage : java </li></ul></ul><ul><ul><li>It doesn’t challenge the current web architecture which is mainly based on browsers </li></ul></ul>
  83. No Future PHP, Struts, JSF, ASP.NET,…
  84. « GWT + Gears » The browser is the platform ! I thank the GWT Team, I thank the community! Reminder
  85. 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: </li></ul>Google Confidential
  86. Ressources GWT : Forum : GWT Blog : onGWT, Tracking news on GWT : GWT and GEARS :