• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
YaJUG: What's new in GWT2
 

YaJUG: What's new in GWT2

on

  • 5,998 views

What's new in GWT2

What's new in GWT2

Statistics

Views

Total Views
5,998
Views on SlideShare
3,692
Embed Views
2,306

Actions

Likes
1
Downloads
49
Comments
0

8 Embeds 2,306

http://blog.gerardin.info 2238
http://www.slideshare.net 38
http://translate.googleusercontent.com 11
http://static.slidesharecdn.com 10
http://theoldreader.com 4
http://webcache.googleusercontent.com 2
http://feedreader.com 2
https://theoldreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    YaJUG: What's new in GWT2 YaJUG: What's new in GWT2 Presentation Transcript

    • GWT 2 = Easier AJAX
      YaJUG
      11/5/2010
    • Who am I?
      Olivier Gérardin
      Technical Director, Sfeir Benelux (groupe Sfeir)
      Java / Web architect
      13+ years Java
      3 years GWT
    • 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
    • Reminders
    • 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
    • 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
    • … 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)
    • 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
    • Key benefits
    • 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)
    • 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
    • Any room for improvement???
      Of course…
    • New in GWT 2.0
    • 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
    • Speed Tracer: example
    • 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…)
    • In-browser development mode
      now:
      Hosted mode shell runs outside browser
      Communicates with browser using plugin through TCP
    • 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…
    • Initiating dev mode
    • Plugin installation
    • 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)
    • Specifying a split point
      GWT.runAsync(newRunAsyncCallback() {
      publicvoidonFailure(Throwable reason) {
      // …
      }
      public void onSuccess() {
      // ..
      }
      });
    • Pattern: AsyncProvider
      publicinterfaceAsyncClient<P> {
      voidonUnavailable(Throwable reason);
      void onAvailable(P instance);
      }
    • 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);
      }
      });
      }
    • Async provider: Loading the provider
      privatevoidloadProvider() {
      Provider.getAsync(newAsyncClient<Provider>() {
      publicvoidonAvailable(Provider provider) {
      provider.doSomething();
      }
      publicvoidonUnavailable(Throwable reason) {
      Window.alert(”Failed: " + reason);
      }
      });
      }
    • 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
    • Compile Report: output
    • 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
    • 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>
    • 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);
      }
    • 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;
    • 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);
      }
    • 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
    • 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
    • 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.)
    • 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
    • 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();
      }
    • Accessing TextResouce
      // TextResource
      myTextArea.setInnerText(
      Resources.INSTANCE.text1().getText());
      //ExternalTextResource
      Resources.INSTANCE.text2().getText(
      newResourceCallback<TextResource>() {
      publicvoidonError(ResourceExceptione) { ... }
      publicvoidonSuccess(TextResourcer) {
      myTextArea.setInnerText(r.getText());
      }
      });
    • 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!
    • 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
    • CSS extensions
      Sprites with @sprite
      Bundle:
      classMyResourcesextendsClientBundle {
      @Source("my.css")
      MyCssResourcecss();
      @Source("some.png")
      ImageResourceimageAccessor();
      }
      my.css:
      @sprite .mySpriteClass{
      gwt-image: "imageAccessor”
      }
    • CSS extensions
      Constants with @def
      Runtime evaluation with @eval and value()
      Conditional CSS with @if/@elif/@else
    • 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
    • Layout Panels
      • Easily 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
    • 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
    • Pointers, Conclusion, etc.
    • 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
    • Shameless self-promotion
    • Thank you
      Questions?
      gerardin.o@sfeir.lu
      blog.gerardin.info
      twitter: @ogerardin