Introduction to Google Web Toolkit

Slide 1: Google Web Toolkit Introduction Didier Girard – girard.d@sfeir.com 2008

Slide 2: Content • Demonstrations • Why GWT ? • How does it run ? • GWT features

Slide 3: DEMONSTRATION

Slide 4: Démonstrations

Slide 5: Demonstrations • http://stuff.ongwt.com

Slide 6: GWT, FOR C*O LEVEL…

Slide 7: G WT is MDI c ompa tible * • GWT applications could have windows residing under a single parent window. *MDI : Multiple Document Interface

Slide 8: G WT is s im ple • Developing a web application with GWT is as simple as developing a Windows application with VB

Slide 9: G WT c uts c os ts • Building a GWT application is 5 times faster than building a J2EE application

Slide 10: G WT is offline c ompa tible • A GWT application doesn’t need a server

Slide 11: G WT, b e tte r e rg onom ic Web 1.0 GWT http://swissmiss.typepad.com/weblog/2007/11/task-clips.html

Slide 12: G WT a pplic a tions a re e ffic ie nt • Local computation, bandwidth optimization

Slide 14: Aja x a dva nta g e s 14

Slide 15: Ajax : Partial update of the screen • No more « Blank page » effect

Slide 16: Ajax : Asynchronous updates • Fresh data without reload

Slide 17: Ajax : Rich Widgets • Widgets : One more beautiful than the other

Slide 18: Ajax : Better scalability • Stateless Server • Statefull client Applicatio n Data Base GUI+Busine ss Data + Se ssio n

Slide 19: At first, Ajax is really cool • So beautiful • So efficient • Customers love it

Slide 20: But, what about… • … cross-browser • … memory leak • … loading latency • … « Javascript PhD » • … ajax IDE • … bugs (javascript is a dynamic language) • … cross browser javascript debugger • … security •…

Slide 21: The solution – First step • Build the prototype of the application – It is really fun – Everybody will admire you

Slide 22: The solution – Second step • Your customer purchases : leave the project :-)

Slide 23: Or…

Slide 24: Choose GWT

Slide 25: GWT, HOW DOES IT RUN ?

Slide 26: GWT manifest • GWT should help to code stable, efficient and cross- browser applications • GWT should be friendly for developers – Compatible with IDE, support debugging, refactoring, strong typing… • The based line : « First the user, second the developer » - Bruce Johnson

Slide 27: The approach • Code in java • Compile the java to Javascript

Slide 28: Hello World • Demonstration

Slide 29: 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

Slide 30: OVERVIEWS

Slide 31: Widgets : « 100% java » • Demonstration (Kitchen Sink) http://code.google.com/webtoolkit/examples/kitchensink/

Slide 32: History support • « Single Page Interface » with history support ! • Demonstration (Kitchen Sink) • Code : History.addHistoryListener(myCommand);

Slide 33: RPC Support (JSON/XML-RPC) • AJAX is a story of asynchronous request – With GWT, it is simple !

Slide 34: I18N/L10N support • Simple and powerfull

Slide 35: Absolute Panel • Rapid Application Development : sometime, you need it – Absolute panel : a pleasure ! • A panel of Panels : Grid, Row, Flex, Vertical, Tab,…

Slide 36: Cross browser, cross platform

Slide 37: CSS • GWT widgets are CSS compatible

Slide 38: Debugger • Demonstration

Slide 39: Javascript integration • JSNI, a clever API public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; • Many javascript library are already wrapped : Dojo, Extjs,… • Demonstration

Slide 40: 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

Slide 41: Good scalability • GWT server could be stateless • No more session affinity

Slide 42: Tools • GWT is supported by all the java IDE : Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,… • Advertisement : my favorite tool is GWT Designer

Slide 43: GWT : THE Community • Millions of download • 11000 subscribers to the forum • Books • Tones of Books • Tones of tutorials • Blogs

Slide 44: GWT 1.4, faster, faster, faster • 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

Slide 45: GWT Gears • Gears helps to build offline application • GWT wrapper : – http://code.google.com/p/gwt-google-apis/ • Demo 45 Google Confidential

Slide 46: GWT : summary • It is 5 times faster to build a GWT application – Refactoring – Debugging – Stateless server – Cross-browsers – I18N – Hosted mode – JSNI

Slide 47: TIPS AND TRICKS

Slide 48: Think differently! • Rethink application ergonomic. • Forget browsing • MDI is possible • Stateless server, statefull client • -> Demo • http://code.google.com/p/gdf 48 Google Confidential

Slide 49: A language is behind the other • It is not a java application, it is javascript application coded with the java API ! • For example, « long » is not a javascript type ! • -> Demonstration 49 Google Confidential

Slide 50: 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 50 Google Confidential

Slide 51: COMMONPLACE

Slide 52: You must used java on the server • No, GWT is server free

Slide 53: Compiled javascript is impossible to debug • It is possible to change compilation option • But you never need to it, • -> Demo

Slide 54: GWT Widgets ? Bof…. • GWT widgets are basic • It is really easy to build its own widget • Many libraries – GWT Ext – GWT Rialto – Tatami – GWT Widget – GWTaculous – MyGWT – … 54 Google Confidential

Slide 55: GWT are heavy • Compiled javascript is light and gzippable – KitchenSink is around 60Ko !

Slide 56: GWT is HTML incompatible • Wrong – It is possible to include GWT components in a classical HTML page

Slide 57: GWT are applets • Applets, no thanks :-) – Java is compiled to javascript !

Slide 58: GWT is not free • Noooo – GWT is opensource (Apache licence)

Slide 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/

Slide 60: 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 60 Google Confidential

Slide 61: Conclusion GWT, c’est facile, efficace et beau ! Merci à l’équipe GWT, Merci à la communauté, Merci à Google !