GWT = easy AJAX

GWT = Easy AJAX Confoo.ca 11/3/2010

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

Agenda Little GWT showcase Why GWT? How does it work? Key features Myths & misconceptions Pointers, Conclusion, Q&A

GWT Showcase Seesmic web GWT Equation editor GWTUML Piano Etudes Clarity Accounting ContactOffice MyERP, Compiere Ext-GWT explorer And more: Google Wave, Timetonote CRM …

Mandatory and oversimplified history of the dynamic web Why GWT?

Web 0.0 Or “The Link Era” A web page is just a bunch of images and text with links Pages are usually stored (not generated) Links take you to a new page Click on link HTTP request is built (from static link URL) and sent Wait for server to reply Server replies with HTML page (usually from file) Response received  blank screen Wait for entire page to load

Web 1.0 Or “The Form Era” In addition to images and text, a web page can contain fields and other widgets A designated button submits the form Pages are build Fill in form Submit HTTP request is built (from form parameters and field values) and sent Wait for server to reply Server replies with HTML page (usually generated on server) Response received  blank screen Wait for entire page to load

Server side processing CGI Basic bridge to OS commands Very ineffective (1 request = 1 process) Web server / application server PHP, JSP, ASP, perl, whatever Performance improvements On-demand compilation Thread pooling Page is totally reconstructed for every request

1995: here comes JavaScript Client-side scripting First usage: client-side form validation Avoid server round-trip when invalid Instant feedback With DOM: polymorphic client page (DHTML) Menus, animations, etc. Cross-browser (almost) No server interaction without submit/reload 

2000: XHTTPR and AJAX MS introduces Outlook Web Access Web “clone” of desktop client (Outlook) Fetches data from server without reloading page! How is that possible? New class: XmlHttpRequest Allows server interaction without page reload Response received asynchronously Interface updated through DOM AJAX is born!

The first AJAX app: Outlook Web Access

JavaScript frenzy JS becomes hype… Cool-looking, nice to use web UIs Everyone wants to do JavaScript Any serious web site must have dynamic content, auto-completion or other AJAX goodies Widget sets / frameworks begin to emerge Scriptaculous, YUI, dojo, jScript, … Anything seems possible in JavaScript JavaScript OS, AjaxSwing (WebCream), …

JavaScript hangover Serious JavaScript hurts… Cross-browser compatibility nightmare Fix in one, break in another JavaScript Guru required! Developing/Debugging nightmare Weird runtime errors No static typing No refactoring And.. Memory leaks Heavy pages Security issues

JavaScript confusion Source: BrowserBook © Visibone

What to do? Option 1: leave the hard work to others Build the demo with AJAX Win the contract Leave the team… Option 2: Give up AJAX For what? Flex? Silverlight? JavaFX? Plugin required SEO unfriendly Learning curve AJAX is too cool!

Google is in the same boat Google is a heavy producer of AJAX apps Had to come up with a solution…

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 JRE emulation library Java libraries Hosted Development mode

GWT compiler Generates JS code from Java source Performs numerous optimizations In most cases better than hand coding Can generate obfuscated (ultra-compact) code JS plays a role similar to bytecode for compiled Java applications Shocking!

JRE Emulation library Provides a GWT-compatible version of Java core classes Most of java.lang Most of java.util Some classes of java.io and java.sql For convenience only! No real I/O or JDBC! Used when running in web mode Hosted mode runs in a JVM with standard JRE

GWT Java libraries Utility classes RPC, I18N, … Widget set Simple widgets (Button, TextField, …) Base building blocks In most cases map to native HTML object Composites = widgets built from other widgets Panels = widget containers Panels enforce a layout (vertical, horizontal, grid, …)

Development mode Allows running GWT apps without converting them to JavaScript Code runs as Java bytecode in a standard JVM Development mode shell emulates JS runtime Actual rendering done by real browser Performs extensive checks to make sure the code is compilable to JavaScript Bottom line: if a GWT application performs as expected in development mode, it will perform identically in web mode 99,9% of the time…

Luxembourg interesting facts Cultural break

Luxembourg is very small Fits inside a 82 x 67 km rectangle Population < 500k (Montréal: 1.6 m)

Luxembourg has a lot of castles

Luxembourg Trivia World’s only Grand-Duchy More than 150k cross-border workers 50% of the capital city’s population during working hours 3 official languages (fr, de, lu) Highest GDP per capita Important financial center (funds) Home of Europe’s largest TV/radio company (RTL group) 2 hours away from Paris by TGV / international airport

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)

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

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

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

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

Easy JSON parsing Easy 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 binding Appropriate 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 time Advantages: Allows app-wide optimizations Compensates for the lack of dynamic (runtime) loading Disadvantages: 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 designated Generation: class is generated during compilation

Easy native JavaScript integration Implement a method directly in JavaScript: publicstaticnativevoidalert(Stringmsg) /*-{ $wnd.alert(msg); }-*/; Call back Java methods from JavaScript Pass objects back and forth Useful to Wrap legacy JavaScript libraries Access browser functionality not exposed by GWT Dangerous! Easily breaks cross-browser compatibility

Easy Widget reuse Create your own widgets: Extend existing widget Works but not the most efficient Might expose unwanted methods from superclass Extend Composite Recommended method Use JSNI To wrap existing JavaScript widgets

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

I18n: constant substitution Define interface publicinterfaceAppConstantsextends Constants { String title(); } “Implement” interface AppConstants.properties: title = Hello, World AppConstants_fr_CA.properties: title = Salut, Monde … Use AppConstantsappConstants = GWT.create(AppConstants.class); String title = appConstants.title();

I18n: template substitution Define interface publicinterfaceAppMessagesextends 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 debugging In development mode, application runs as bytecode (just like any old Java app…) So you can debug it just like any classic Java app: Set breakpoints Step through code Inspect variables Change variables …

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

Easy client-server testing Integrated application server for testing RPC services Can be disabled to use external server JUnit integration to run client-side test cases Hosted mode or web mode Full access to RPC services GWTTestCase, GWTTestSuite for automation Selenium for automated GUI testing

Easy scaling All session data resides on client Similar to classic fat client No session information on server-side Forget session affinity Add/remove servers on the fly Restart server without losing clients

“Easy” styling Styling relies entirely on CSS Widgets have well-known style names Programmer can add custom styles No shift from traditional HTML styling HTML/DOM build page “skeleton” Appearance tuned with CSS Separate UI construction from styling With well thought styles, it’s possible to reskin completely an application without changing one line of code GWT styling has all the benefits of CSS with all problems of CSS Be careful with brower dependencies!

Easy Google AJAX APIs Project gwt-google-apishttp://code.google.com/p/gwt-google-apis Libraries that wrap Google JavaScript APIs Maps Gears (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 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…)

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

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

[new in 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

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

[new in 2.0] declarative UI Declarative construction of GUI using XML grammar Allows 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 bundle Download multiple heterogeneous resources from server in a single request Images (already possible in pre-2.0) CSS Text Any binary resource Benefits: Fewer round trips to the server Less overhead More responsive interface

[new in 2.0] and also… Compiler optimizations Mostly generated JS size Draft compile mode Faster builds Not for deployment! Layout panels Predictable, consistent layout Constraint based system built on top of CSS Plays nice with custom CSS styles HtmlUnit No native code / browser required

Myth: GWT is a JS library/framework/widget set GWT is not for JavaScript developers Provides only Java classes

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

Myth: GWT is applets A GWT application is 100% JavaScript No runtime/plugin No JRE required

Myth: GWT is only for Java programmers Yes, 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 language GWT makes it worth learning Java!

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

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

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

Myth: GWT apps have long startup times Not longer than any JavaScript app Obfuscation reduces size Deferred binding loads just the necessary code for the platform/language GWT 2.0’s code splitting can split code in several chunks Smaller initial download On-demand downloading

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

Myth: GWT has poor skinning possibilities GWT uses CSS for styling Can 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

Conclusion Is GWT the future of web development? GWT has passed reality check Give it a try! GWT = easy AJAX now ! =

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

Thank you Questions? gerardin.o@sfeir.lu blog.gerardin.info @ogerardin

GWT = easy AJAX

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to GWT = easy AJAX

Similar to GWT = easy AJAX (20)

Recently uploaded

Recently uploaded (20)

GWT = easy AJAX

Editor's Notes