YaJUG: What's new in GWT2

5,521 views

Published on

What's new in GWT2

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,521
On SlideShare
0
From Embeds
0
Number of Embeds
2,432
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

YaJUG: What's new in GWT2

  1. 1. GWT 2 = Easier AJAX<br />YaJUG<br />11/5/2010<br />
  2. 2. Who am I?<br />Olivier Gérardin<br />Technical Director, Sfeir Benelux (groupe Sfeir)<br />Java / Web architect<br />13+ years Java<br />3 years GWT<br />
  3. 3. Agenda<br />GWT reminders<br />New in GWT 2.0<br />SpeedTracer<br />In-browser development mode<br />Code splitting & compile report<br />UiBinder<br />Client bundle<br />Layout panels<br />Misc.<br />Pointers, Conclusion, Q&A<br />
  4. 4. Reminders<br />
  5. 5. GWT solves all your problems<br />GWT gives you AJAX without the pain of JavaScript development<br />Takes care of cross-browser issues<br />Allows full debugging (breakpoints, step by step, inspecting/watching variables)<br />Strong static typing early error detection<br />Full refactoring options<br />No browser plugin or mandatory IDE<br />Short learning curve<br />Simple RPC mechanism built in<br />But can communicate with any server technology<br />
  6. 6. Program in Java…<br />GWT allows developing client-side web apps in full Java (with only a few restrictions)<br />Leverage existing Java tools and skills<br />Use any IDE (Eclipse, NetBeans, IntelliJ, …)<br />Program like a traditional graphical client (Swing, SWT, …)<br />Widgets, containers, listeners, etc.<br />Use OO patterns (MVC, MVP, observer, composite, etc.)<br />Test like any Java app<br />Use standard Java debuggers<br />Test with JUnit<br />
  7. 7. … deploy in JavaScript<br />JavaScript is only generated:<br />For deployment<br />To test in actual web mode<br />GWT guarantees that the generated JavaScript app behaves exactly like the Java app <br />And it does (most of the time)<br />
  8. 8. 4 easy pieces<br />Java-to-JavaScript compiler<br />Generates JS code from Java source<br />Performs many optimization<br />JRE emulation library<br />GWT compatible version of most used Java core classes (java.lan, java.util)<br />Java libraries<br />Utility classes (JSON, I18N, …)<br />Widget library<br />Hosted Development mode<br />Run/debug the app as Java bytecode<br />
  9. 9. Key benefits<br />
  10. 10. Easy development<br />During development, you are writing and running a classic Java app<br />Use your favorite IDE<br />All IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)<br />Plugins help GWT-specific tasks<br />launching development mode<br />compiling<br />refactoring<br />creating projects, modules, RPC services, …<br />even design GUI (GWT Designer from Instantiations)<br />
  11. 11. More benefits<br />Easy RPC implementation / consumption / deployment<br />Easy JSON / XML parsing<br />Easy UI building / widget reuse<br />Easy history support<br />Easy i18n<br />Easy debugging <br />Easy testing<br />
  12. 12. Any room for improvement???<br />Of course…<br />
  13. 13. New in GWT 2.0<br />
  14. 14. Speed tracer<br />Performance analysis tool<br />Visualize where your app spends time:<br />JS execution<br />Browser rendering<br />CSS handling (style selection/calculation)<br />DOM handling / event processing<br />Resource loading<br />
  15. 15. Speed Tracer: example<br />
  16. 16. In-browser development mode<br />Before 2.0: hosted mode uses customized browser engine<br />Heavily customized<br />Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)<br />Difficult to keep up-to-date<br />Includes platform-specific code (SWT)<br />Browser and hosted application share the same process<br />Most plugins don’t work (including Google Gears…)<br />
  17. 17. In-browser development mode<br />now:<br />Hosted mode shell runs outside browser<br />Communicates with browser using plugin through TCP<br />
  18. 18. In-browser development mode<br />Benefits<br />Use any (supported) browser/version on any platform<br />Currently Safari, Firefox, IE, Chrome (not on OS X!)<br />Behavior closer to web mode<br />No interference with browser plugins<br />No more platform-specific stuff in GWT (one jar for all!)<br />Network protocol between shell and browser  cross-platform dev possible<br />Dev mode shell on machine X, slave browser on machine Y<br />E.g. dev on Linux, test in IE on Windows…<br />
  19. 19. Initiating dev mode<br />
  20. 20. Plugin installation<br />
  21. 21. Code splitting<br />Before: monolithic download can become very big<br />Slow startup times<br />After: <br />Programmer can insert “split points” in code<br />Hints for the compiler to place everything not required up to split point in separate download<br />Compiler divides code in several “chunks”, which are loaded on-demand<br />Benefits:<br />Initial loading time reduced 50% on average with a single split point<br />Allows on-demand module loading (provider pattern)<br />
  22. 22. Specifying a split point<br />GWT.runAsync(newRunAsyncCallback() {<br />publicvoidonFailure(Throwable reason) {<br />// …<br /> }<br /> public void onSuccess() {<br />// ..<br />}<br /> });<br />
  23. 23. Pattern: AsyncProvider<br />publicinterfaceAsyncClient<P> {<br /> voidonUnavailable(Throwable reason);<br /> void onAvailable(P instance);<br />}<br />
  24. 24. Async provider: Implementing the provider<br />publicclass Provider {<br />privatestatic Provider instance = null;<br />public static void getAsync(finalAsyncClient<Provider> client) {<br />GWT.runAsync(newRunAsyncCallback() {<br /> public void onFailure(Throwable reason) {<br />client.onUnavailable(reason);<br /> }<br /> public void onSuccess() {<br /> if (instance == null) {<br />instance = new Provider();<br /> }<br />client.onAvailable(instance);<br /> }<br /> });<br /> }<br />
  25. 25. Async provider: Loading the provider<br />privatevoidloadProvider() {<br />Provider.getAsync(newAsyncClient<Provider>() {<br /> publicvoidonAvailable(Provider provider) {<br />provider.doSomething();<br /> }<br /> publicvoidonUnavailable(Throwable reason) {<br />Window.alert(”Failed: " + reason);<br /> }<br /> });<br />}<br />
  26. 26. Compile Report (formerly: SOYC)<br />Better understanding of the compilation process<br />Helps tuning code splitting<br />Simple compiler flag<br />Produces HTML report<br />Shows:<br />Permutations<br />Sizes per chunk, package, etc.<br />Dependencies<br />Compiler flag: -compileReport<br />
  27. 27. Compile Report: output<br />
  28. 28. Declarative UI: UiBinder<br />Declarative construction of GUI using XML grammar<br />Mix HTML and widgets<br />Benefits:<br />Clearly separate responsibilities  better collaboration<br />Static UI construction (XML)<br />Dynamic UI behavior (Java)<br />More efficient<br />HTML vs DOM API calls<br />Easy to transition from static HTML to dynamic<br />
  29. 29. UiBinder: define layout<br />XML file (xx.ui.xml)<br /><ui:UiBinder<br />xmlns:ui='urn:ui:com.google.gwt.uibinder'<br />xmlns:gwt='urn:import:com.google.gwt.user.client.ui'><br /> <gwt:HorizontalPanel><br /> <gwt:Labeltext="Sexe :" /><br /> <gwt:VerticalPanel><br /> <gwt:RadioButtonname='sexeradio' text='M’ /><br /> <gwt:RadioButtonname='sexeradio' text='F’ /><br /> </gwt:VerticalPanel><br /> </gwt:HorizontalPanel><br /></ui:UiBinder><br />
  30. 30. UiBinder: instantiate<br />publicclass SexeRadio2 extends Composite {<br />@UiTemplate("SexeRadio2.ui.xml")<br />interfaceMyUiBinder<br />extendsUiBinder<Panel, SexeRadio2> {}<br />privatestaticfinalMyUiBinderbinder = GWT.create(MyUiBinder.class);<br />public SexeRadio2() {<br /> finalPanel panel =binder.createAndBindUi(this);<br />initWidget(panel);<br />}<br />
  31. 31. UiBinder: bind fields<br />Automatically assign references to dynamically created widgets to designated Java fields (@UiField)<br />XML :<br /><gwt:RadioButtonname='sexeradio' text='M’ ui:field='maleRadio' /><br /><gwt:RadioButtonname='sexeradio' text='F’ ui:field='femaleRadio'/><br />Code: <br />@UiField<br />RadioButtonmaleRadio;<br />@UiField<br />RadioButtonfemaleRadio;<br />
  32. 32. UiBinder: bind handlers<br />Automatically attach event handlers (@UiHandler)<br />Widgets only (not DOM elements)<br />Handler type inferred from parameter type<br />Code:<br />@UiHandler("maleRadio")<br />voidmaleClicked(ClickEvent event) {<br />GWT.log("C'est un garçon!", null);<br />}<br />
  33. 33. More UiBinder goodness<br />Mix HTML and widgets in same XML file<br />Define CSS styles with <ui:style><br />Inline / external<br />Apply to widgets with attributes styleNames / addStyleNames<br />Programmatic access to styles (works with CssResource)<br />Use external resources (images, CSS stylesheets, …) declared as client bundles with <ui:with><br />Instantiate widgets that don’t have zero-arg constructor with @UiFactory<br />
  34. 34. Resource bundles<br />Download multiple heterogeneous resources from server in a single request<br />Images (similar to ImageBundle in 1.x)<br />CSS<br />Text<br />Any other resource<br />Benefits:<br />Fewer round trips to the server<br />Less overhead<br />More responsive interface<br />
  35. 35. Resource bundles: general mechanism<br />Familiar mechanism<br />Coding time: define interface<br />Method type constrains resource type<br />Method name (accessor) designates resource<br />Annotation @source specifies resource content<br />If unspecified, source is derived from accessor<br />I18N aware (append _fr, _fr_FR)<br />Runtime: access resource<br />Obtain instance via GWT.create(interface.class) and call accessor directly<br />Reference accessor through other mechanism (CSS injection @sprite, etc.)<br />
  36. 36. Resource bundles: DataResource<br />Works with any kind of source<br />Make the resource available through a URL<br />Rename file to make resulting URL strongly-cacheable if appropriate<br />XXX.pdf AAA12345.cache.pdf<br />Webserver should be configured accordingly<br />
  37. 37. Resource bundles: TextResource<br />Access to static text content<br />TextResource is inlined into JavaScript<br />ExternalTextResource is fetched asynchronously<br />interface Resources extendsClientBundle {<br /> Resources INSTANCE = GWT.create(Resources.class);<br />@Source(“text1.txt")<br />TextResource text1();<br />@Source(“text2.txt")<br />ExternalTextResource text2();<br />}<br />
  38. 38. Accessing TextResouce<br />// TextResource<br />myTextArea.setInnerText(<br /> Resources.INSTANCE.text1().getText());<br />//ExternalTextResource<br /> Resources.INSTANCE.text2().getText(<br />newResourceCallback<TextResource>() {<br />publicvoidonError(ResourceExceptione) { ... }<br />publicvoidonSuccess(TextResourcer) {<br />myTextArea.setInnerText(r.getText());<br /> }<br /> });<br />
  39. 39. Resource bundles: ImageResource<br />Optimize runtime access to image data<br />Transparently group /split images<br />Uses ImageIO library<br />Use in injected CSS with @sprite directive <br />Supports most image formats<br />Including animated GIF<br />Not an image-processing library!<br />
  40. 40. Resource bundles: CssResource<br />Define an extension of CSS<br />Syntax validations / compile-time optimizations<br />Injected at runtime <br />Usage:<br />Write CSS stylesheet<br />Extend CssResource<br /> interfaceMyCssextendsCssResource {<br /> }<br />Include in ClientBundle<br />interfaceMyResourcesextendsClientBundle {<br />@Source("my.css")<br />MyCsscss();<br />}<br />Use GWT.create(MyResources.class) to obtain instance of bundle<br />Call CssResource.ensureInjected() to inject stylesheet in page<br />
  41. 41. CSS extensions<br />Sprites with @sprite<br />Bundle:<br />classMyResourcesextendsClientBundle {<br />@Source("my.css")<br />MyCssResourcecss();<br />@Source("some.png")<br />ImageResourceimageAccessor();<br />}<br />my.css:<br />@sprite .mySpriteClass{ <br />gwt-image: "imageAccessor” <br /> }<br />
  42. 42. CSS extensions<br />Constants with @def<br />Runtime evaluation with @eval and value()<br />Conditional CSS with @if/@elif/@else<br />
  43. 43. Layout panels<br />Layout panels<br />Predictable, consistent layout<br />Constraint based system built on top of CSS<br />Plays nice with custom CSS styles<br />Each child must have 0 or 2 constraints per axis<br />Horizontal: none, left/width, right/width, left/right<br />Vertical: none, top/height, bottom/height, top/bottom<br />no constraint = fill parent<br />Any unit (%, px, …)<br />Must be added to an instance of ProvidesResize<br />typically RootLayoutPanel<br />
  44. 44. Layout Panels<br /><ul><li>Easily usable with UiBinder</li></ul><g:layer left=‘25% right=‘25%’ top=‘10px’ bottom=‘0’><br /><g:Label>Label</g:Label><br /></g:layer><br />Bunch of specialized panels implemented as LayoutPanels:<br />DockLayoutPanel, SplitLayoutPanel, StackLayoutPanel, TabLayoutPanel<br />
  45. 45. And also…<br />Compiler optimizations<br />Most notably reduces generated JS size (expect 3-20 %)<br />Draft compile mode: flag -drafCompile<br />No optimizations / Faster builds<br />Not for deployment!<br />GWTTestCase<br />No more dependency on SWT<br />No native code / browser required<br />HtmlUnit: GUI-less browser written in Java<br />
  46. 46. Pointers, Conclusion, etc.<br />
  47. 47. Pointers<br />GWT home (downloads, docs, FAQs, guides, etc.)<br />http://code.google.com/toolkit<br />Google groups “GWT” group<br />http://groups.google.com/group/Google-Web-Toolkit<br />onGWT: fresh news about GWT<br />http://www.ongwt.com<br />LinkedIn “GWT Users” group<br />http://www.linkedin.com/groups?gid=129889<br />
  48. 48. Shameless self-promotion<br />
  49. 49. Thank you<br />Questions?<br />gerardin.o@sfeir.lu<br />blog.gerardin.info<br />twitter: @ogerardin<br />

×