YaJUG: What's new in GWT2
Download as PPTX, PDF•1 like•1,830 views
GWT 2.0 introduces several new features that make AJAX development easier, including a performance analysis tool, improved in-browser development mode, code splitting, a compile report, declarative UI binding with UiBinder, resource bundles, and enhanced layout panels. Key benefits are easier development through writing Java code, improved debugging with in-browser mode, reduced payload sizes through code splitting, and more responsive UIs using resource bundles. The presentation provided an overview and examples of these new features.
YaJUG: What's new in GWT2
- 1. GWT 2 = Easier AJAXYaJUG11/5/2010
- 2. Who am I?Olivier GérardinTechnical Director, Sfeir Benelux (groupe Sfeir)Java / Web architect13+ years Java3 years GWT
- 3. AgendaGWT remindersNew in GWT 2.0SpeedTracerIn-browser development modeCode splitting & compile reportUiBinderClient bundleLayout panelsMisc.Pointers, Conclusion, Q&A
- 4. Reminders
- 5. GWT solves all your problemsGWT gives you AJAX without the pain of JavaScript developmentTakes care of cross-browser issuesAllows full debugging (breakpoints, step by step, inspecting/watching variables)Strong static typing early error detectionFull refactoring optionsNo browser plugin or mandatory IDEShort learning curveSimple RPC mechanism built inBut 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 skillsUse 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 appUse standard Java debuggersTest with JUnit
- 7. … deploy in JavaScriptJavaScript is only generated:For deploymentTo test in actual web modeGWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)
- 8. 4 easy piecesJava-to-JavaScript compilerGenerates JS code from Java sourcePerforms many optimizationJRE emulation libraryGWT compatible version of most used Java core classes (java.lan, java.util)Java librariesUtility classes (JSON, I18N, …)Widget libraryHosted Development modeRun/debug the app as Java bytecode
- 9. Key benefits
- 10. Easy developmentDuring development, you are writing and running a classic Java appUse your favorite IDEAll IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)Plugins help GWT-specific taskslaunching development modecompilingrefactoringcreating projects, modules, RPC services, …even design GUI (GWT Designer from Instantiations)
- 11. More benefitsEasy RPC implementation / consumption / deploymentEasy JSON / XML parsingEasy UI building / widget reuseEasy history supportEasy i18nEasy debugging Easy testing
- 12. Any room for improvement???Of course…
- 13. New in GWT 2.0
- 14. Speed tracerPerformance analysis toolVisualize where your app spends time:JS executionBrowser renderingCSS handling (style selection/calculation)DOM handling / event processingResource loading
- 16. In-browser development modeBefore 2.0: hosted mode uses customized browser engineHeavily customizedOnly one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)Difficult to keep up-to-dateIncludes platform-specific code (SWT)Browser and hosted application share the same processMost plugins don’t work (including Google Gears…)
- 17. In-browser development modenow:Hosted mode shell runs outside browserCommunicates with browser using plugin through TCP
- 18. In-browser development modeBenefitsUse any (supported) browser/version on any platformCurrently Safari, Firefox, IE, Chrome (not on OS X!)Behavior closer to web modeNo interference with browser pluginsNo more platform-specific stuff in GWT (one jar for all!)Network protocol between shell and browser cross-platform dev possibleDev mode shell on machine X, slave browser on machine YE.g. dev on Linux, test in IE on Windows…
- 21. Code splittingBefore: monolithic download can become very bigSlow startup timesAfter: Programmer can insert “split points” in codeHints for the compiler to place everything not required up to split point in separate downloadCompiler divides code in several “chunks”, which are loaded on-demandBenefits:Initial loading time reduced 50% on average with a single split pointAllows on-demand module loading (provider pattern)
- 22. Specifying a split pointGWT.runAsync(newRunAsyncCallback() {publicvoidonFailure(Throwable reason) {// … } public void onSuccess() {// ..} });
- 23. Pattern: AsyncProviderpublicinterfaceAsyncClient<P> { voidonUnavailable(Throwable reason); void onAvailable(P instance);}
- 24. Async provider: Implementing the providerpublicclass 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 providerprivatevoidloadProvider() {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 processHelps tuning code splittingSimple compiler flagProduces HTML reportShows:PermutationsSizes per chunk, package, etc.DependenciesCompiler flag: -compileReport
- 28. Declarative UI: UiBinderDeclarative construction of GUI using XML grammarMix HTML and widgetsBenefits:Clearly separate responsibilities better collaborationStatic UI construction (XML)Dynamic UI behavior (Java)More efficientHTML vs DOM API callsEasy to transition from static HTML to dynamic
- 29. UiBinder: define layoutXML file (xx.ui.xml)<ui:UiBinderxmlns: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: instantiatepublicclass SexeRadio2 extends Composite {@UiTemplate("SexeRadio2.ui.xml")interfaceMyUiBinderextendsUiBinder<Panel, SexeRadio2> {}privatestaticfinalMyUiBinderbinder = GWT.create(MyUiBinder.class);public SexeRadio2() { finalPanel panel =binder.createAndBindUi(this);initWidget(panel);}
- 31. UiBinder: bind fieldsAutomatically 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: @UiFieldRadioButtonmaleRadio;@UiFieldRadioButtonfemaleRadio;
- 32. UiBinder: bind handlersAutomatically attach event handlers (@UiHandler)Widgets only (not DOM elements)Handler type inferred from parameter typeCode:@UiHandler("maleRadio")voidmaleClicked(ClickEvent event) {GWT.log("C'est un garçon!", null);}
- 33. More UiBinder goodnessMix HTML and widgets in same XML fileDefine CSS styles with <ui:style>Inline / externalApply to widgets with attributes styleNames / addStyleNamesProgrammatic 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 bundlesDownload multiple heterogeneous resources from server in a single requestImages (similar to ImageBundle in 1.x)CSSTextAny other resourceBenefits:Fewer round trips to the serverLess overheadMore responsive interface
- 35. Resource bundles: general mechanismFamiliar mechanismCoding time: define interfaceMethod type constrains resource typeMethod name (accessor) designates resourceAnnotation @source specifies resource contentIf unspecified, source is derived from accessorI18N aware (append _fr, _fr_FR)Runtime: access resourceObtain instance via GWT.create(interface.class) and call accessor directlyReference accessor through other mechanism (CSS injection @sprite, etc.)
- 36. Resource bundles: DataResourceWorks with any kind of sourceMake the resource available through a URLRename file to make resulting URL strongly-cacheable if appropriateXXX.pdf AAA12345.cache.pdfWebserver should be configured accordingly
- 37. Resource bundles: TextResourceAccess to static text contentTextResource is inlined into JavaScriptExternalTextResource is fetched asynchronouslyinterface Resources extendsClientBundle { Resources INSTANCE = GWT.create(Resources.class);@Source(“text1.txt")TextResource text1();@Source(“text2.txt")ExternalTextResource text2();}
- 38. Accessing TextResouce// TextResourcemyTextArea.setInnerText( Resources.INSTANCE.text1().getText());//ExternalTextResource Resources.INSTANCE.text2().getText(newResourceCallback<TextResource>() {publicvoidonError(ResourceExceptione) { ... }publicvoidonSuccess(TextResourcer) {myTextArea.setInnerText(r.getText()); } });
- 39. Resource bundles: ImageResourceOptimize runtime access to image dataTransparently group /split imagesUses ImageIO libraryUse in injected CSS with @sprite directive Supports most image formatsIncluding animated GIFNot an image-processing library!
- 40. Resource bundles: CssResourceDefine an extension of CSSSyntax validations / compile-time optimizationsInjected at runtime Usage:Write CSS stylesheetExtend CssResource interfaceMyCssextendsCssResource { }Include in ClientBundleinterfaceMyResourcesextendsClientBundle {@Source("my.css")MyCsscss();}Use GWT.create(MyResources.class) to obtain instance of bundleCall CssResource.ensureInjected() to inject stylesheet in page
- 41. CSS extensionsSprites with @spriteBundle:classMyResourcesextendsClientBundle {@Source("my.css")MyCssResourcecss();@Source("some.png")ImageResourceimageAccessor();}my.css:@sprite .mySpriteClass{ gwt-image: "imageAccessor” }
- 42. CSS extensionsConstants with @defRuntime evaluation with @eval and value()Conditional CSS with @if/@elif/@else
- 43. Layout panelsLayout panelsPredictable, consistent layoutConstraint based system built on top of CSSPlays nice with custom CSS stylesEach child must have 0 or 2 constraints per axisHorizontal: none, left/width, right/width, left/rightVertical: none, top/height, bottom/height, top/bottomno constraint = fill parentAny unit (%, px, …)Must be added to an instance of ProvidesResizetypically RootLayoutPanel
- 44. Layout PanelsEasily usable with UiBinder<g:layer left=‘25% right=‘25%’ top=‘10px’ bottom=‘0’><g:Label>Label</g:Label></g:layer>Bunch of specialized panels implemented as LayoutPanels:DockLayoutPanel, SplitLayoutPanel, StackLayoutPanel, TabLayoutPanel
- 45. And also…Compiler optimizationsMost notably reduces generated JS size (expect 3-20 %)Draft compile mode: flag -drafCompileNo optimizations / Faster buildsNot for deployment!GWTTestCaseNo more dependency on SWTNo native code / browser requiredHtmlUnit: GUI-less browser written in Java
- 47. PointersGWT home (downloads, docs, FAQs, guides, etc.)http://code.google.com/toolkitGoogle groups “GWT” grouphttp://groups.google.com/group/Google-Web-ToolkitonGWT: fresh news about GWThttp://www.ongwt.comLinkedIn “GWT Users” grouphttp://www.linkedin.com/groups?gid=129889