YaJUG: What's new in GWT2

GWT 2 = Easier AJAX,[object Object],YaJUG,[object Object],11/5/2010,[object Object]

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

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

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

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

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

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

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

More benefits,[object Object],Easy RPC implementation / consumption / deployment,[object Object],Easy JSON / XML parsing,[object Object],Easy UI building / widget reuse,[object Object],Easy history support,[object Object],Easy i18n,[object Object],Easy debugging ,[object Object],Easy testing,[object Object]

Any room for improvement???,[object Object],Of course…,[object Object]

New in GWT 2.0,[object Object]

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

Speed Tracer: example,[object Object]

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

In-browser development mode,[object Object],now:,[object Object],Hosted mode shell runs outside browser,[object Object],Communicates with browser using plugin through TCP,[object Object]

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

Initiating dev mode,[object Object]

Plugin installation,[object Object]

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

Specifying a split point,[object Object],GWT.runAsync(newRunAsyncCallback() {,[object Object],publicvoidonFailure(Throwable reason) {,[object Object],// …,[object Object], },[object Object], public void onSuccess() {,[object Object],// ..,[object Object],},[object Object], });,[object Object]

Pattern: AsyncProvider,[object Object],publicinterfaceAsyncClient<P> {,[object Object], voidonUnavailable(Throwable reason);,[object Object], void onAvailable(P instance);,[object Object],},[object Object]

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

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

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

Compile Report: output,[object Object]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS extensions,[object Object],Constants with @def,[object Object],Runtime evaluation with @eval and value(),[object Object],Conditional CSS with @if/@elif/@else,[object Object]

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

Layout Panels,[object Object],[object Object],<g:layer left=‘25% right=‘25%’ top=‘10px’ bottom=‘0’>,[object Object],<g:Label>Label</g:Label>,[object Object],</g:layer>,[object Object],Bunch of specialized panels implemented as LayoutPanels:,[object Object],DockLayoutPanel, SplitLayoutPanel, StackLayoutPanel, TabLayoutPanel,[object Object]

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

Pointers, Conclusion, etc.,[object Object]

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

Shameless self-promotion,[object Object]

Thank you,[object Object],Questions?,[object Object],gerardin.o@sfeir.lu,[object Object],blog.gerardin.info,[object Object],twitter: @ogerardin,[object Object]

YaJUG: What's new in GWT2

YaJUG: What's new in GWT2

Recommended

More Related Content

What's hot

What's hot(20)

Similar to YaJUG: What's new in GWT2

Similar to YaJUG: What's new in GWT2(20)

Recently uploaded

Recently uploaded(20)

YaJUG: What's new in GWT2