What's new in GWT2

1. GWT 2 = Easier AJAX YaJUG 11/5/2010

2. Who am I? Olivier Gérardin Technical Director, Sfeir Benelux (groupe Sfeir) Java / Web architect 13+ years Java 3 years GWT

3. Agenda GWT reminders New in GWT 2.0 SpeedTracer In-browser development mode Code splitting & compile report UiBinder Client bundle Layout panels Misc. Pointers, Conclusion, Q&A

4. Reminders

5. GWT solves all your problems GWT gives you AJAX without the pain of JavaScript development Takes care of cross-browser issues Allows full debugging (breakpoints, step by step, inspecting/watching variables) Strong static typing early error detection Full refactoring options No browser plugin or mandatory IDE Short learning curve Simple RPC mechanism built in But can communicate with any server technology

6. Program in Java… GWT allows developing client-side web apps in full Java (with only a few restrictions) Leverage existing Java tools and skills Use any IDE (Eclipse, NetBeans, IntelliJ, …) Program like a traditional graphical client (Swing, SWT, …) Widgets, containers, listeners, etc. Use OO patterns (MVC, MVP, observer, composite, etc.) Test like any Java app Use standard Java debuggers Test with JUnit

7. … deploy in JavaScript JavaScript is only generated: For deployment To test in actual web mode GWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)

8. 4 easy pieces Java-to-JavaScript compiler Generates JS code from Java source Performs many optimization JRE emulation library GWT compatible version of most used Java core classes (java.lan, java.util) Java libraries Utility classes (JSON, I18N, …) Widget library Hosted Development mode Run/debug the app as Java bytecode

9. Key benefits

10. Easy development During development, you are writing and running a classic Java app Use your favorite IDE All IDE features available (code completion, code analysis, refactoring, links, Javadoc, …) Plugins help GWT-specific tasks launching development mode compiling refactoring creating projects, modules, RPC services, … even design GUI (GWT Designer from Instantiations)

11. More benefits Easy RPC implementation / consumption / deployment Easy JSON / XML parsing Easy UI building / widget reuse Easy history support Easy i18n Easy debugging Easy testing

12. Any room for improvement??? Of course…

13. New in GWT 2.0

14. Speed tracer Performance analysis tool Visualize where your app spends time: JS execution Browser rendering CSS handling (style selection/calculation) DOM handling / event processing Resource loading

15. Speed Tracer: example

16. In-browser development mode Before 2.0: hosted mode uses customized browser engine Heavily customized Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux) Difficult to keep up-to-date Includes platform-specific code (SWT) Browser and hosted application share the same process Most plugins don’t work (including Google Gears…)

17. In-browser development mode now: Hosted mode shell runs outside browser Communicates with browser using plugin through TCP

18. In-browser development mode Benefits Use any (supported) browser/version on any platform Currently Safari, Firefox, IE, Chrome (not on OS X!) Behavior closer to web mode No interference with browser plugins No more platform-specific stuff in GWT (one jar for all!) Network protocol between shell and browser  cross-platform dev possible Dev mode shell on machine X, slave browser on machine Y E.g. dev on Linux, test in IE on Windows…

19. Initiating dev mode

20. Plugin installation

21. Code splitting Before: monolithic download can become very big Slow startup times After: Programmer can insert “split points” in code Hints for the compiler to place everything not required up to split point in separate download Compiler divides code in several “chunks”, which are loaded on-demand Benefits: Initial loading time reduced 50% on average with a single split point Allows on-demand module loading (provider pattern)

22. Specifying a split point GWT.runAsync(newRunAsyncCallback() { publicvoidonFailure(Throwable reason) { // … } public void onSuccess() { // .. } });

23. Pattern: AsyncProvider publicinterfaceAsyncClient<P> { voidonUnavailable(Throwable reason); void onAvailable(P instance); }

24. Async provider: Implementing the provider publicclass Provider { privatestatic Provider instance = null; public static void getAsync(finalAsyncClient<Provider> client) { GWT.runAsync(newRunAsyncCallback() { public void onFailure(Throwable reason) { client.onUnavailable(reason); } public void onSuccess() { if (instance == null) { instance = new Provider(); } client.onAvailable(instance); } }); }

25. Async provider: Loading the provider privatevoidloadProvider() { Provider.getAsync(newAsyncClient<Provider>() { publicvoidonAvailable(Provider provider) { provider.doSomething(); } publicvoidonUnavailable(Throwable reason) { Window.alert(”Failed: " + reason); } }); }

26. Compile Report (formerly: SOYC) Better understanding of the compilation process Helps tuning code splitting Simple compiler flag Produces HTML report Shows: Permutations Sizes per chunk, package, etc. Dependencies Compiler flag: -compileReport

27. Compile Report: output

28. Declarative UI: UiBinder Declarative construction of GUI using XML grammar Mix HTML and widgets Benefits: Clearly separate responsibilities  better collaboration Static UI construction (XML) Dynamic UI behavior (Java) More efficient HTML vs DOM API calls Easy to transition from static HTML to dynamic

29. UiBinder: define layout XML file (xx.ui.xml) <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:gwt='urn:import:com.google.gwt.user.client.ui'> <gwt:HorizontalPanel> <gwt:Labeltext="Sexe :" /> <gwt:VerticalPanel> <gwt:RadioButtonname='sexeradio' text='M’ /> <gwt:RadioButtonname='sexeradio' text='F’ /> </gwt:VerticalPanel> </gwt:HorizontalPanel> </ui:UiBinder>

30. UiBinder: instantiate publicclass SexeRadio2 extends Composite { @UiTemplate("SexeRadio2.ui.xml") interfaceMyUiBinder extendsUiBinder<Panel, SexeRadio2> {} privatestaticfinalMyUiBinderbinder = GWT.create(MyUiBinder.class); public SexeRadio2() { finalPanel panel =binder.createAndBindUi(this); initWidget(panel); }

31. UiBinder: bind fields Automatically assign references to dynamically created widgets to designated Java fields (@UiField) XML : <gwt:RadioButtonname='sexeradio' text='M’ ui:field='maleRadio' /> <gwt:RadioButtonname='sexeradio' text='F’ ui:field='femaleRadio'/> Code: @UiField RadioButtonmaleRadio; @UiField RadioButtonfemaleRadio;

32. UiBinder: bind handlers Automatically attach event handlers (@UiHandler) Widgets only (not DOM elements) Handler type inferred from parameter type Code: @UiHandler("maleRadio") voidmaleClicked(ClickEvent event) { GWT.log("C'est un garçon!", null); }

33. More UiBinder goodness Mix HTML and widgets in same XML file Define CSS styles with <ui:style> Inline / external Apply to widgets with attributes styleNames / addStyleNames Programmatic access to styles (works with CssResource) Use external resources (images, CSS stylesheets, …) declared as client bundles with <ui:with> Instantiate widgets that don’t have zero-arg constructor with @UiFactory

34. Resource bundles Download multiple heterogeneous resources from server in a single request Images (similar to ImageBundle in 1.x) CSS Text Any other resource Benefits: Fewer round trips to the server Less overhead More responsive interface

35. Resource bundles: general mechanism Familiar mechanism Coding time: define interface Method type constrains resource type Method name (accessor) designates resource Annotation @source specifies resource content If unspecified, source is derived from accessor I18N aware (append _fr, _fr_FR) Runtime: access resource Obtain instance via GWT.create(interface.class) and call accessor directly Reference accessor through other mechanism (CSS injection @sprite, etc.)

36. Resource bundles: DataResource Works with any kind of source Make the resource available through a URL Rename file to make resulting URL strongly-cacheable if appropriate XXX.pdf AAA12345.cache.pdf Webserver should be configured accordingly

37. Resource bundles: TextResource Access to static text content TextResource is inlined into JavaScript ExternalTextResource is fetched asynchronously interface Resources extendsClientBundle { Resources INSTANCE = GWT.create(Resources.class); @Source(“text1.txt") TextResource text1(); @Source(“text2.txt") ExternalTextResource text2(); }

38. Accessing TextResouce // TextResource myTextArea.setInnerText( Resources.INSTANCE.text1().getText()); //ExternalTextResource Resources.INSTANCE.text2().getText( newResourceCallback<TextResource>() { publicvoidonError(ResourceExceptione) { ... } publicvoidonSuccess(TextResourcer) { myTextArea.setInnerText(r.getText()); } });

39. Resource bundles: ImageResource Optimize runtime access to image data Transparently group /split images Uses ImageIO library Use in injected CSS with @sprite directive Supports most image formats Including animated GIF Not an image-processing library!

40. Resource bundles: CssResource Define an extension of CSS Syntax validations / compile-time optimizations Injected at runtime Usage: Write CSS stylesheet Extend CssResource interfaceMyCssextendsCssResource { } Include in ClientBundle interfaceMyResourcesextendsClientBundle { @Source("my.css") MyCsscss(); } Use GWT.create(MyResources.class) to obtain instance of bundle Call CssResource.ensureInjected() to inject stylesheet in page

41. CSS extensions Sprites with @sprite Bundle: classMyResourcesextendsClientBundle { @Source("my.css") MyCssResourcecss(); @Source("some.png") ImageResourceimageAccessor(); } my.css: @sprite .mySpriteClass{ gwt-image: "imageAccessor” }

42. CSS extensions Constants with @def Runtime evaluation with @eval and value() Conditional CSS with @if/@elif/@else

43. Layout panels Layout panels Predictable, consistent layout Constraint based system built on top of CSS Plays nice with custom CSS styles Each child must have 0 or 2 constraints per axis Horizontal: none, left/width, right/width, left/right Vertical: none, top/height, bottom/height, top/bottom no constraint = fill parent Any unit (%, px, …) Must be added to an instance of ProvidesResize typically RootLayoutPanel

45. And also… Compiler optimizations Most notably reduces generated JS size (expect 3-20 %) Draft compile mode: flag -drafCompile No optimizations / Faster builds Not for deployment! GWTTestCase No more dependency on SWT No native code / browser required HtmlUnit: GUI-less browser written in Java

46. Pointers, Conclusion, etc.

47. Pointers GWT home (downloads, docs, FAQs, guides, etc.) http://code.google.com/toolkit Google groups “GWT” group http://groups.google.com/group/Google-Web-Toolkit onGWT: fresh news about GWT http://www.ongwt.com LinkedIn “GWT Users” group http://www.linkedin.com/groups?gid=129889

48. Shameless self-promotion

49. Thank you Questions? gerardin.o@sfeir.lu blog.gerardin.info twitter: @ogerardin