GWT + Gears : The browser is the platform

Slideshow Transcript

1. Slide 1: GWT-Gears The Browser is the Platform Didier Girard – girard.d@sfeir.com Sfeir CTO Member of OSSGTP
2. Slide 2: Before starting, some questions • Who knows javascript ? • Who is a javascript expert ? • Who knows java ? 2 Google Confidential
3. Slide 3: Content • Ajax : the good, the bad and the coward • Demonstrations • GWT for Chief (whatyouwant) Officer • GWT for developers • Gears for early adopters 3 Google Confidential
4. Slide 4: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
5. Slide 5: Ajax : Asynchronous updates • Fresh data without reload
6. Slide 6: Ajax : Rich Widgets • Widgets : One more beautiful than the other
7. Slide 7: Ajax : Partial update of the screen • No more « Blank page » effect
8. Slide 8: Single Page Interface : Better scalability • Stateless Server • Stateful client A p p lic a t io n D a ta B a s e G U I+B u s in e s s D a ta + S e s s io n
9. Slide 9: At first, Ajax is really cool • So wonderful, incredible, marvellous • So efficient • Customers love it
10. Slide 10: Some boring comments about javascript • … cross-browser • … memory leak • … loading latency • … « Javascript PhD » • … ajax IDE • … bugs (javascript is a dynamic language) • … cross browser javascript debugger • … security •…
11. Slide 11: The solution – First step • Build the prototype of the application – It is really fun – Everybody will admire you
12. Slide 12: The solution – Second step • Your customer purchases : leave the project :-)
13. Slide 13: But I’m not a coward
14. Slide 14: Do something else
15. Slide 15: But What ?
16. Slide 16: My manifest • I want a technology that – helps to code stable, efficient and cross-browser applications – Is a friend to me as a developer • Compatible with IDE, support debugging, refactoring, strong typing… • The base line could be : « Good for the user, good for the developer »
17. Slide 17: That is what GWT is !
18. Slide 18: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
19. Slide 19: Démonstrations
20. Slide 20: Demonstrations • http://stuff.ongwt.com
21. Slide 21: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
22. Slide 22: G WT is s im ple • Developing a web application with GWT is as simple as developing a Windows application with VB
23. Slide 23: GWT is cheap 23 Google Confidential
24. Slide 24: G WT c uts c os ts • Building a GWT application is 5 times faster than building a J2EE application
25. Slide 25: G WT a pplic a tions a re e ffic ie nt • Local computation, bandwidth optimization
26. Slide 26: G WT is offline c ompa tible • A GWT application doesn’t need a server
27. Slide 27: Compatible with mobile 27 Google Confidential
28. Slide 28: G WT is MDI c ompa tible * • GWT applications could have windows residing under a single parent window. *MDI : Multiple Document Interface
29. Slide 29: G WT, b e tte r e rg onom ic a lly Web 1.0 GWT http://swissmiss.typepad.com/weblog/2007/11/task-clips.html
30. Slide 30: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
31. Slide 31: The approach • Code in java • Compile the java to Javascript
32. Slide 32: Hello World • Demonstration
33. Slide 33: How easy do you find GWT to use ? Very Easy, Easy, Medium, Hard, Very Hard ? Source : http://www.ongwt.com/post/2008/02/21/How-easy-do-you-find-GWT-to-use 33 Google Confidential
34. Slide 34: Architecture Panels Widgets java.lang Button MenuBar Application Popup Radio Tree java.util Stack Check Table code Absolute TextArea Java.io Vertical …. … Java Runtime Library GWT GUI Library RWA in Java GWT Compiler GWT Runtime Javascript 100Ko Application Browser IE, Firefox, Safari, Opera
35. Slide 35: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
36. Slide 36: Widgets : « 100% java » • Demonstration (Kitchen Sink) http://code.google.com/webtoolkit/examples/kitchensink/
37. Slide 37: Third party GWT Widgets • It is really easy to build its own widget • Many libraries – GWT Ext – MyGWT – GWT Rialto – Tatami – GWT Widget – GWTaculous – … 37 Google Confidential
38. Slide 38: History support • « Single Page Interface » with history support ! • Demonstration (Kitchen Sink) • Code : History.addHistoryListener(myCommand);
39. Slide 39: RPC Support (JSON/XML-RPC) • AJAX is a story of asynchronous request – With GWT, it is simple !
40. Slide 40: I18N/L10N support • Simple and powerful
41. Slide 41: GWT is compatible with unit testing • Compatible with Junit • Compatible with Selenium 41 Google Confidential
42. Slide 42: Cross browser, cross platform
43. Slide 43: CSS • GWT widgets are CSS compatible
44. Slide 44: Debugger • Demonstration
45. Slide 45: Javascript integration • JSNI, a clever API public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; • Many javascript libraries are already wrapped : Dojo, Extjs,… • Demonstration
46. Slide 46: Optimization • Compiled javascript is optimized • 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
47. Slide 47: Good scalability • GWT server could be stateless • No more session affinity
48. Slide 48: Tools • GWT is supported by all the java IDE : Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,… • Advertisement : my favorite tool is GWT Designer
49. Slide 49: GWT 1.4 is fast • Example : ImageBundle, kind of database for images – From 12 requests to 1 request… ClippedImage timeIcon = new ClippedImage(\"icons.png\", 22, 0, 22, 22); http://roberthanson.blogspot.com/2007/02/gwt-clippedimage-optimizing-image.html
50. Slide 50: 2008 : GWT 1.5 • The Java 1.5 syntax is fully supported, including generics, enums, nice \"for\" loops, autoboxing, static imports, annotations, and so on • The ability to subclass JavaScriptObject for very straightforward JavaScript interop • Thurs, Mar 6 2008 : GWT 1.5 M1 is available for download 50 Google Confidential
51. Slide 51: Google Gadget with GWT
52. Slide 52: Gadget definition • <Module> <ModulePrefs title=\"Hello World” author=“Didier Girard” author_email=“Didier.Girard@gmail.com”> </ModulePrefs> <Content type=\"html\"> <![CDATA[ Your application goes here ]]> </Content> </Module>
53. Slide 53: Gadget definition with GWT : 1 line • <Module> <ModulePrefs title=\"Hello World” author=“Didier Girard” author_email=“Didier.Girard@gmail.com”> </ModulePrefs> <Content type=\"html\"> <![CDATA[ <script src=\"http://..../com.mycompany.project.ImageViewer-xs.nocache.js\"> </script> ]]> </Content> </Module>
54. Slide 54: Opensocial
55. Slide 55: Who's Using It?
56. Slide 56: Opensocial Definition with GWT : 2 lines • <Module> <ModulePrefs title=\"Hello World” author=“Didier Girard” author_email=“Didier.Girard@gmail.com”> <Require feature=\"opensocial-0.7\"/> </ModulePrefs> <Content type=\"html\"> <![CDATA[ <script src=\"http://..../com.mycompany.project.ImageViewer-xs.nocache.js\"> </script> ]]> </Content> </Module>
57. Slide 57: Simple, Efficient and Powerful ?
58. Slide 58: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
59. Slide 59: I need offline applications • Do you ever miss your application – Pubs – Trains • Are you sure that your user want its data in the cloud ?
60. Slide 60: Classic web architecture HTTP Browser Server DataBase
61. Slide 61: My needs in offline mode Browser Server Server DataBase DataBase
62. Slide 62: I need Install Browser Server Server DataBase DataBase
63. Slide 63: The solution • Google Gears – Browser Plugin (FireFox, Internet Explorer) – Features: • LocalServer (“programmable cache”) • Database • Worker Threads for JavaScript • http://gears.google.com
64. Slide 64: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
65. Slide 65: Architecture Your GWT Your JS Application Application GWT Dojo Wrapper Javascript API Browser Gears 65 Google Confidential
66. Slide 66: Demo • Live coding
67. Slide 67: Perspectives of Gears : future APIs • Notification API • Crypto API • Factory API updates • Blob API • Logging API • Messaging API • Location API • Desktop Shortcut API • Image Manipulation API
68. Slide 68: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
69. Slide 69: Think differently! • Rethink application ergonomic. • Forget browsing • MDI is possible • Stateless server, statefull client 69 Google Confidential
70. Slide 70: Misc • DOM manipulation is costly – Your user can have : « slow script message » – -> Use « IncrementalCommand » (DEMO) • No need to send tones of asynchronous request • Deal with RPC error by subclassing AsyncCallback • Forget javascript • Use Selenium (DEMO) • Use Maven 70 Google Confidential
71. Slide 71: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
72. Slide 72: You must used java on the server • No, GWT is server free
73. Slide 73: Compiled javascript is impossible to debug • It is possible to change compilation option • But you never need to it, • -> Demo
74. Slide 74: GWT applications are heavy • Compiled javascript is light and gzippable – KitchenSink is around 60Ko !
75. Slide 75: GWT is HTML incompatible • Wrong – It is possible to include GWT components in a standard HTML page
76. Slide 76: GWT applications are applets • Applets, no thanks :-) – Java is compiled to javascript !
77. Slide 77: Content • Demonstrations • Why GWT ? • GWT features • Google Gears
78. Slide 78: Who are the challengers • Silverlight • AIR/Flex • Firefox with the XUL/Prism stuff
79. Slide 79: GWT and Gears 79 Google Confidential
80. Slide 80: GWT : THE Community • Millions of downloads • 12000 subscribers to the users forum • 700 subscribers to the contributors forum • Books • Tons of articles • Tons of tutorials • Blogs
81. Slide 81: Faster and faster • GWT application are efficient • It is 5 times faster to build a GWT application
82. Slide 82: This might surprise you but • This pair of tools is the least disruptive – It is based on the most used langage : java – It doesn’t challenge the current web architecture which is mainly based on browsers
83. Slide 83: P HP , S truts , J S F , AS P .NE T,… No Future
84. Slide 84: Reminder « GWT + Gears » The browser is the platform ! I thank the GWT Team, I thank the community!
85. Slide 85: SFEIR • 6 projects with GWT – 5000 days of coding – It is just fun – Clients are very happy with their applications – Our stack : GWT/Spring/Hibernate • Jobs: girard.d@sfeir.com 85 Google Confidential
86. Slide 86: 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/ GWT and GEARS : http://www.ongwt.com/post/2008/01/28/Presentation-%3A-Gears-and-GWT