GWT = easy AJAX

GWT = Easy AJAXConfoo.ca11/3/2010

Who am I?Olivier GérardinTechnical Director, Sfeir Benelux (groupe Sfeir)Java / Web architect13+ years Java3 years GWT

AgendaLittle GWT showcaseWhy GWT?How does it work?Key featuresMyths & misconceptionsPointers, Conclusion, Q&A

GWT ShowcaseSeesmic webGWT Equation editorGWTUMLPiano EtudesClarity AccountingContactOfficeMyERP, CompiereExt-GWT explorerAnd more: Google Wave, Timetonote CRM…

Mandatory and oversimplified history of the dynamic webWhy GWT?

Web 0.0Or “The Link Era”A web page is just a bunch of images and text with linksPages are usually stored (not generated)Links take you to a new pageClick on linkHTTP request is built (from static link URL) and sentWait for server to replyServer replies with HTML page (usually from file)Response received  blank screenWait for entire page to load

Web 1.0Or “The Form Era”In addition to images and text, a web page can contain fields and other widgetsA designated button submits the form Pages are build Fill in formSubmitHTTP request is built (from form parameters and field values) and sentWait for server to replyServer replies with HTML page (usually generated on server)Response received  blank screenWait for entire page to load

Server side processingCGIBasic bridge to OS commandsVery ineffective (1 request = 1 process)Web server / application serverPHP, JSP, ASP, perl, whateverPerformance improvementsOn-demand compilationThread poolingPage is totally reconstructed for every request

1995: here comes JavaScriptClient-side scriptingFirst usage: client-side form validationAvoid server round-trip when invalidInstant feedbackWith DOM: polymorphic client page (DHTML)Menus, animations, etc.Cross-browser (almost)No server interaction without submit/reload 

2000: XHTTPR and AJAXMS introduces Outlook Web AccessWeb “clone” of desktop client (Outlook)Fetches data from server without reloading page!How is that possible?New class: XmlHttpRequestAllows server interaction without page reloadResponse received asynchronouslyInterface updated through DOMAJAX is born!

The first AJAX app: Outlook Web Access

JavaScript frenzyJS becomes hype… Cool-looking, nice to use web UIsEveryone wants to do JavaScriptAny serious web site must have dynamic content, auto-completion or other AJAX goodiesWidget sets / frameworks begin to emergeScriptaculous, YUI, dojo, jScript, …Anything seems possible in JavaScriptJavaScript OS, AjaxSwing (WebCream), …

JavaScript hangoverSerious JavaScript hurts…Cross-browser compatibility nightmareFix in one, break in anotherJavaScript Guru required!Developing/Debugging nightmareWeird runtime errorsNo static typingNo refactoringAnd..Memory leaksHeavy pagesSecurity issues

JavaScript confusionSource: BrowserBook © Visibone

What to do?Option 1: leave the hard work to othersBuild the demo with AJAXWin the contractLeave the team…Option 2: Give up AJAXFor what? Flex? Silverlight? JavaFX?Plugin requiredSEO unfriendlyLearning curveAJAX is too cool!

Google is in the same boatGoogle is a heavy producer of AJAX appsHad to come up with a solution…

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

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

… 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)

4 easy piecesJava-to-JavaScript compilerJRE emulation libraryJava librariesHosted Development mode

GWT compilerGenerates JS code from Java sourcePerforms numerous optimizationsIn most cases better than hand codingCan generate obfuscated (ultra-compact) codeJS plays a role similar to bytecode for compiled Java applicationsShocking!

JRE Emulation libraryProvides a GWT-compatible version of Java core classesMost of java.langMost of java.utilSome classes of java.io and java.sqlFor convenience only! No real I/O or JDBC!Used when running in web modeHosted mode runs in a JVM with standard JRE

GWT Java librariesUtility classesRPC, I18N, …Widget setSimple widgets (Button, TextField, …)Base building blocksIn most cases map to native HTML objectComposites = widgets built from other widgetsPanels = widget containersPanels enforce a layout (vertical, horizontal, grid, …)

Development modeAllows running GWT apps without converting them to JavaScriptCode runs as Java bytecode in a standard JVMDevelopment mode shell emulates JS runtimeActual rendering done by real browserPerforms extensive checks to make sure the code is compilable to JavaScriptBottom line: if a GWT application performs as expected in development mode, it will perform identically in web mode99,9% of the time…

Luxembourg interesting factsCultural break

Luxembourg is very smallFits inside a 82 x 67 km rectanglePopulation < 500k (Montréal: 1.6 m)

Luxembourg has a lot of castles

Luxembourg TriviaWorld’s only Grand-DuchyMore than 150k cross-border workers50% of the capital city’s population during working hours3 official languages (fr, de, lu)Highest GDP per capitaImportant financial center (funds)Home of Europe’s largest TV/radio company (RTL group)2 hours away from Paris by TGV / international airport

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)

Easy RPC implementationRPC mechanism based on Java servletsEasy as:Define service interfaceintadd (intx, inty);Derive asynchronous interfacevoid add (intx, inty, AsyncCallback<Integer> callback);Implement service interface publicint add (intx, inty) { returnx + y; }

Easy RPC consumptionEasy as:Obtain service proxyAddServiceAsyncaddService = GWT.create(AddService.class);Call methodaddService.add(x, y, newAsyncCallback<Long>() { publicvoidonFailure(Throwable caught) { // handle failure } publicvoidonSuccess(Integer result) { // handle success }});

Easy RPC deploymentRPC services are actually POJS (plain old Java servlets)Can be deployed without changes in any servlet engineIntegrated test server uses standard web.xml format for declaring services

Easy JSON generationEasy as:JSONObjectlivre = newJSONObject();livre.put("Titre", newJSONString("GWT"));livre.put("Pages", new JSONNumber(123));JSONArraychapitres = newJSONArray();chapitres.set(0, newJSONString("Introduction"));

Easy JSON parsingEasy as:JSONObjectlivre = newJSONObject(json);String titre = livre.get("Titre").isString().stringValue();doublepages = livre.get("Pages").isNumber().doubleValue();JSONArraychapitres = livre.isArray();String chap0 = chapitres.get(0).isString().stringValue();

Deferred bindingAppropriate code for user environment (browser, locale) is chosen at application startup time≠ dynamic binding (implementation chosen at runtime)≠ static binding (implementation chosen at compile time)Code for every combination is generated at compile timeAdvantages:Allows app-wide optimizationsCompensates for the lack of dynamic (runtime) loadingDisadvantages:Increases compilation time

Deferred Binding (explicit)Deferred binding can be called explicitly:Foofoo = GWT.create(Foo.class);Implementation is provided by either:Substitution: an existing class is designatedGeneration: class is generated during compilation

Easy native JavaScript integrationImplement a method directly in JavaScript:publicstaticnativevoidalert(Stringmsg) /*-{ $wnd.alert(msg);}-*/;Call back Java methods from JavaScriptPass objects back and forthUseful to Wrap legacy JavaScript librariesAccess browser functionality not exposed by GWTDangerous! Easily breaks cross-browser compatibility

Easy Widget reuseCreate your own widgets:Extend existing widgetWorks but not the most efficientMight expose unwanted methods from superclassExtend CompositeRecommended methodUse JSNITo wrap existing JavaScript widgets

Easy history supportAJAX app = single page“back” button  catastrophe…GWT solution:Encode app state in URL as “fragment”E.g. http://myserver/myGwtApp#x=1;y=2Save state:History.newItem(token);React to state change (“back” button)History.addValueChangeHandler(…);

I18n: constant substitutionDefine interfacepublicinterfaceAppConstantsextends Constants { String title();}“Implement” interfaceAppConstants.properties: title = Hello, WorldAppConstants_fr_CA.properties: title = Salut, Monde …UseAppConstantsappConstants = GWT.create(AppConstants.class);String title = appConstants.title();

I18n: template substitutionDefine interfacepublicinterfaceAppMessagesextends Messages { String mailStatus(intn, String s);}“Implement” interface (AppMessages.properties)mailStatus = You have {0} messages in folder {1}Use:AppMessagesmsgs = GWT.create(AppMessages.class);String status = msgs.mailStatus(15, “Inbox”);

Easy debuggingIn development mode, application runs as bytecode (just like any old Java app…)So you can debug it just like any classic Java app:Set breakpointsStep through codeInspect variablesChange variables…

Short dev cycleChange client code:press “Reload”.. Done!Change server code:Embedded server: press “Restart”.. Done!External server: hotswap /redeploy if needed

Easy client-server testingIntegrated application server for testing RPC servicesCan be disabled to use external serverJUnit integration to run client-side test cases Hosted mode or web modeFull access to RPC servicesGWTTestCase, GWTTestSuite for automationSelenium for automated GUI testing

Easy scalingAll session data resides on clientSimilar to classic fat clientNo session information on server-sideForget session affinityAdd/remove servers on the flyRestart server without losing clients

“Easy” stylingStyling relies entirely on CSSWidgets have well-known style namesProgrammer can add custom stylesNo shift from traditional HTML stylingHTML/DOM build page “skeleton”Appearance tuned with CSSSeparate UI construction from stylingWith well thought styles, it’s possible to reskin completely an application without changing one line of codeGWT styling has all the benefits of CSS with all problems of CSSBe careful with brower dependencies!

Easy Google AJAX APIsProject gwt-google-apishttp://code.google.com/p/gwt-google-apisLibraries that wrap Google JavaScript APIsMapsGears (storage, obsoleted by HTML5)Gadgets (embedable applets)AJAX search (embedded google search)Visualization (charts)Language (translation, language detection)Standalone libraries (do not require JavaScript libraries)

[new in 2.0] 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…)

[new in 2.0] in-browser development modenow:Hosted mode shell runs outside browserCommunicates with browser using plugin through TCP

[new in 2.0] in-browser development modeBenefitsUse any (supported) browser/version on any platformBehavior closer to web modeNo interference with browser pluginsNo more platform-specific stuff in GWT (one jar for all!)Network protocol cross-platform possibleDev mode shell on machine X, slave browser on machine YE.g. dev on Linux, test in IE on Windows…

[new in 2.0] speed tracerPerformance analysis toolVisualize where your app spends time:JS executionBrowser renderingCSS handling (style selection/calculation)DOM handling (event processing)Resource loading

[new in 2.0] 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)

[new in 2.0] declarative UIDeclarative construction of GUI using XML grammarAllows automatic binding with Java code (through annotations)Automatically assign references to dynamically created widgets to designated Java fields (@UiField)Automatically attach methods as event handlers (@UiHandler)Benefits:Clearly separate:Static UI construction (XML)Dynamic UI behavior (Java)

[new in 2.0] resource bundleDownload multiple heterogeneous resources from server in a single requestImages (already possible in pre-2.0)CSSTextAny binary resourceBenefits:Fewer round trips to the serverLess overheadMore responsive interface

[new in 2.0] and also…Compiler optimizationsMostly generated JS sizeDraft compile modeFaster buildsNot for deployment!Layout panelsPredictable, consistent layoutConstraint based system built on top of CSSPlays nice with custom CSS stylesHtmlUnitNo native code / browser required

Myth: GWT is a JS library/framework/widget setGWT is not for JavaScript developersProvides only Java classes

Myth: GWT is a frameworkGWT is a toolkit (set of tools)Frameworks may be built on top of it

Myth: GWT is appletsA GWT application is 100% JavaScriptNo runtime/pluginNo JRE required

Myth: GWT is only for Java programmersYes, GWT uses Java as programming language…BUT you can also see it this way:GWT lets you write/debug/test/refactor AJAX apps with state-of-the-art IDEs and tools using a statically-typed object-oriented languageGWT makes it worth learning Java!

Myth: GWT generates poorly performing JSThe GWT compiler generates highly optimized and compact codeHand written JavaScript might be marginally faster in some cases, but it’s not worth the trouble

Myth: GWT only works with a Java backendGWT includes a simple and efficient RPC mechanism that relies on Java servletsBUT it plays nice with any server-side technology that can handle HTTP requests (even PHP)Includes XML encoding/decoding libraryIncludes JSON encoding/decoding library

Myth: GWT has poor UI componentsYes, GWT’sbuiltin widgets are minimalistic…BUT GWT’s point is not to provide a complete and beautiful widget setGWT provides the basis for rich and good-looking componentsCreate your own or use 3rd partySee Ext-GWT, SmartGWT

Myth: GWT apps have long startup timesNot longer than any JavaScript appObfuscation reduces sizeDeferred binding loads just the necessary code for the platform/languageGWT 2.0’s code splitting can split code in several chunksSmaller initial downloadOn-demand downloading

Myth: GWT doesn’t integrate with existing sitesGWT was designed from the beginning with the goal to integrate well into existing sitesGWT can build the UI from a blank HTML page or alter existing elementsVery easy to add GWT to an existing pageOnly a few lines of HTML to load the moduleCan “hook up” to any DOM element (through its ID)

Myth: GWT has poor skinning possibilitiesGWT uses CSS for stylingCan reskin a whole application without changing a line of code (done that!)Can split work between developer (behavior) and designer (appearance)Caution: CSS can introduce browser dependencies

ConclusionIs GWT the future of web development?GWT has passed reality checkGive it a try!GWT = easy AJAX now !=

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

Thank youQuestions?gerardin.o@sfeir.lublog.gerardin.info@ogerardin

GWT = easy AJAX

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to GWT = easy AJAX (20)

Recently uploaded (20)

GWT = easy AJAX

Editor's Notes