Successfully reported this slideshow.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

GWT = easy AJAX

  1. 1. GWT = Easy AJAX<br /><br />11/3/2010<br />
  2. 2. Who am I?<br />Olivier Gérardin<br />Technical Director, Sfeir Benelux (groupe Sfeir)<br />Java / Web architect<br />13+ years Java<br />3 years GWT<br />
  3. 3. Agenda<br />Little GWT showcase<br />Why GWT?<br />How does it work?<br />Key features<br />Myths & misconceptions<br />Pointers, Conclusion, Q&A<br />
  4. 4. GWT Showcase<br />Seesmic web<br />GWT Equation editor<br />GWTUML<br />Piano Etudes<br />Clarity Accounting<br />ContactOffice<br />MyERP, Compiere<br />Ext-GWT explorer<br />And more: Google Wave, Timetonote CRM<br />…<br />
  5. 5. Mandatory and oversimplified history of the dynamic web<br />Why GWT?<br />
  6. 6. Web 0.0<br />Or “The Link Era”<br />A web page is just a bunch of images and text with links<br />Pages are usually stored (not generated)<br />Links take you to a new page<br />Click on link<br />HTTP request is built (from static link URL) and sent<br />Wait for server to reply<br />Server replies with HTML page (usually from file)<br />Response received  blank screen<br />Wait for entire page to load<br />
  7. 7. Web 1.0<br />Or “The Form Era”<br />In addition to images and text, a web page can contain fields and other widgets<br />A designated button submits the form <br />Pages are build <br />Fill in form<br />Submit<br />HTTP request is built (from form parameters and field values) and sent<br />Wait for server to reply<br />Server replies with HTML page (usually generated on server)<br />Response received  blank screen<br />Wait for entire page to load<br />
  8. 8. Server side processing<br />CGI<br />Basic bridge to OS commands<br />Very ineffective (1 request = 1 process)<br />Web server / application server<br />PHP, JSP, ASP, perl, whatever<br />Performance improvements<br />On-demand compilation<br />Thread pooling<br />Page is totally reconstructed for every request<br />
  9. 9. 1995: here comes JavaScript<br />Client-side scripting<br />First usage: client-side form validation<br />Avoid server round-trip when invalid<br />Instant feedback<br />With DOM: polymorphic client page (DHTML)<br />Menus, animations, etc.<br />Cross-browser (almost)<br />No server interaction without submit/reload <br />
  10. 10. 2000: XHTTPR and AJAX<br />MS introduces Outlook Web Access<br />Web “clone” of desktop client (Outlook)<br />Fetches data from server without reloading page!<br />How is that possible?<br />New class: XmlHttpRequest<br />Allows server interaction without page reload<br />Response received asynchronously<br />Interface updated through DOM<br />AJAX is born!<br />
  11. 11. The first AJAX app: Outlook Web Access<br />
  12. 12. JavaScript frenzy<br />JS becomes hype… <br />Cool-looking, nice to use web UIs<br />Everyone wants to do JavaScript<br />Any serious web site must have dynamic content, auto-completion or other AJAX goodies<br />Widget sets / frameworks begin to emerge<br />Scriptaculous, YUI, dojo, jScript, …<br />Anything seems possible in JavaScript<br />JavaScript OS, AjaxSwing (WebCream), …<br />
  13. 13. JavaScript hangover<br />Serious JavaScript hurts…<br />Cross-browser compatibility nightmare<br />Fix in one, break in another<br />JavaScript Guru required!<br />Developing/Debugging nightmare<br />Weird runtime errors<br />No static typing<br />No refactoring<br />And..<br />Memory leaks<br />Heavy pages<br />Security issues<br />
  14. 14. JavaScript confusion<br />Source: BrowserBook © Visibone<br />
  15. 15. What to do?<br />Option 1: leave the hard work to others<br />Build the demo with AJAX<br />Win the contract<br />Leave the team…<br />Option 2: Give up AJAX<br />For what? Flex? Silverlight? JavaFX?<br />Plugin required<br />SEO unfriendly<br />Learning curve<br />AJAX is too cool!<br />
  16. 16. Google is in the same boat<br />Google is a heavy producer of AJAX apps<br />Had to come up with a solution…<br />
  17. 17. GWT solves all your problems<br />GWT gives you AJAX without the pain of JavaScript development<br />Takes care of cross-browser issues<br />Allows full debugging (breakpoints, step by step, inspecting/watching variables)<br />Strong static typing early error detection<br />Full refactoring options<br />No browser plugin or mandatory IDE<br />Short learning curve<br />Simple RPC mechanism built in<br />But can communicate with any server technology<br />
  18. 18. Program in Java…<br />GWT allows developing client-side web apps in full Java (with only a few restrictions)<br />Leverage existing Java tools and skills<br />Use any IDE (Eclipse, NetBeans, IntelliJ, …)<br />Program like a traditional graphical client (Swing, SWT, …)<br />Widgets, containers, listeners, etc.<br />Use OO patterns (MVC, MVP, observer, composite, etc.)<br />Test like any Java app<br />Use standard Java debuggers<br />Test with JUnit<br />
  19. 19. … deploy in JavaScript<br />JavaScript is only generated:<br />For deployment<br />To test in actual web mode<br />GWT guarantees that the generated JavaScript app behaves exactly like the Java app <br />And it does (most of the time)<br />
  20. 20. How does it work?<br />
  21. 21. 4 easy pieces<br />Java-to-JavaScript compiler<br />JRE emulation library<br />Java libraries<br />Hosted Development mode<br />
  22. 22. GWT compiler<br />Generates JS code from Java source<br />Performs numerous optimizations<br />In most cases better than hand coding<br />Can generate obfuscated (ultra-compact) code<br />JS plays a role similar to bytecode for compiled Java applications<br />Shocking!<br />
  23. 23. JRE Emulation library<br />Provides a GWT-compatible version of Java core classes<br />Most of java.lang<br />Most of java.util<br />Some classes of and java.sql<br />For convenience only! No real I/O or JDBC!<br />Used when running in web mode<br />Hosted mode runs in a JVM with standard JRE<br />
  24. 24. GWT Java libraries<br />Utility classes<br />RPC, I18N, …<br />Widget set<br />Simple widgets (Button, TextField, …)<br />Base building blocks<br />In most cases map to native HTML object<br />Composites = widgets built from other widgets<br />Panels = widget containers<br />Panels enforce a layout (vertical, horizontal, grid, …)<br />
  25. 25. GWT widgets: Simple widgets<br />
  26. 26. GWT widgets: Composites<br />
  27. 27. GWT widgets: Panels<br />
  28. 28. Development mode<br />Allows running GWT apps without converting them to JavaScript<br />Code runs as Java bytecode in a standard JVM<br />Development mode shell emulates JS runtime<br />Actual rendering done by real browser<br />Performs extensive checks to make sure the code is compilable to JavaScript<br />Bottom line: if a GWT application performs as expected in development mode, it will perform identically in web mode<br />99,9% of the time…<br />
  29. 29. Luxembourg interesting facts<br />Cultural break<br />
  30. 30. Luxembourg is very small<br />Fits inside a 82 x 67 km rectangle<br />Population < 500k (Montréal: 1.6 m)<br />
  31. 31. Luxembourg City is beautiful<br />
  32. 32. Luxembourg has a lot of castles<br />
  33. 33. Luxembourg Trivia<br />World’s only Grand-Duchy<br />More than 150k cross-border workers<br />50% of the capital city’s population during working hours<br />3 official languages (fr, de, lu)<br />Highest GDP per capita<br />Important financial center (funds)<br />Home of Europe’s largest TV/radio company (RTL group)<br />2 hours away from Paris by TGV / international airport<br />
  34. 34. Back to GWT:Key features<br />
  35. 35. Easy development<br />During development, you are writing and running a classic Java app<br />Use your favorite IDE<br />All IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)<br />Plugins help GWT-specific tasks<br />launching development mode<br />compiling<br />refactoring<br />creating projects, modules, RPC services, …<br />even design GUI (GWT Designer from Instantiations)<br />
  36. 36. Easy RPC implementation<br />RPC mechanism based on Java servlets<br />Easy as:<br />Define service interface<br />intadd (intx, inty);<br />Derive asynchronous interface<br />void add (intx, inty, AsyncCallback<Integer> callback);<br />Implement service interface<br /> publicint add (intx, inty) {<br /> returnx + y;<br /> }<br />
  37. 37. Easy RPC consumption<br />Easy as:<br />Obtain service proxy<br />AddServiceAsyncaddService = GWT.create(AddService.class);<br />Call method<br />addService.add(x, y, newAsyncCallback<Long>() {<br /> publicvoidonFailure(Throwable caught) {<br /> // handle failure<br /> }<br /> publicvoidonSuccess(Integer result) {<br /> // handle success<br /> }<br />});<br />
  38. 38. Easy RPC deployment<br />RPC services are actually POJS (plain old Java servlets)<br />Can be deployed without changes in any servlet engine<br />Integrated test server uses standard web.xml format for declaring services<br />
  39. 39. Easy JSON generation<br />Easy as:<br />JSONObjectlivre = newJSONObject();<br />livre.put("Titre", newJSONString("GWT"));<br />livre.put("Pages", new JSONNumber(123));<br />JSONArraychapitres = newJSONArray();<br />chapitres.set(0, newJSONString("Introduction"));<br />
  40. 40. Easy JSON parsing<br />Easy as:<br />JSONObjectlivre = newJSONObject(json);<br />String titre = livre.get("Titre").isString().stringValue();<br />doublepages = livre.get("Pages").isNumber().doubleValue();<br />JSONArraychapitres = livre.isArray();<br />String chap0 = chapitres.get(0).isString().stringValue();<br />
  41. 41. Deferred binding<br />Appropriate code for user environment (browser, locale) is chosen at application startup time<br />≠ dynamic binding (implementation chosen at runtime)<br />≠ static binding (implementation chosen at compile time)<br />Code for every combination is generated at compile time<br />Advantages:<br />Allows app-wide optimizations<br />Compensates for the lack of dynamic (runtime) loading<br />Disadvantages:<br />Increases compilation time<br />
  42. 42. Deferred Binding (explicit)<br />Deferred binding can be called explicitly:<br />Foofoo = GWT.create(Foo.class);<br />Implementation is provided by either:<br />Substitution: an existing class is designated<br />Generation: class is generated during compilation<br />
  43. 43. Easy native JavaScript integration<br />Implement a method directly in JavaScript:<br />publicstaticnativevoidalert(Stringmsg) /*-{<br /> $wnd.alert(msg);<br />}-*/;<br />Call back Java methods from JavaScript<br />Pass objects back and forth<br />Useful to <br />Wrap legacy JavaScript libraries<br />Access browser functionality not exposed by GWT<br />Dangerous! <br />Easily breaks cross-browser compatibility<br />
  44. 44. Easy Widget reuse<br />Create your own widgets:<br />Extend existing widget<br />Works but not the most efficient<br />Might expose unwanted methods from superclass<br />Extend Composite<br />Recommended method<br />Use JSNI<br />To wrap existing JavaScript widgets<br />
  45. 45. Easy history support<br />AJAX app = single page<br />“back” button  catastrophe…<br />GWT solution:<br />Encode app state in URL as “fragment”<br />E.g. http://myserver/myGwtApp#x=1;y=2<br />Save state:<br />History.newItem(token);<br />React to state change (“back” button)<br />History.addValueChangeHandler(…);<br />
  46. 46. I18n: constant substitution<br />Define interface<br />publicinterfaceAppConstantsextends Constants {<br /> String title();<br />}<br />“Implement” interface<br /> title = Hello, World<br /> title = Salut, Monde<br /> …<br />Use<br />AppConstantsappConstants = GWT.create(AppConstants.class);<br />String title = appConstants.title();<br />
  47. 47. I18n: template substitution<br />Define interface<br />publicinterfaceAppMessagesextends Messages {<br /> String mailStatus(intn, String s);<br />}<br />“Implement” interface (<br />mailStatus = You have {0} messages in folder {1}<br />Use:<br />AppMessagesmsgs = GWT.create(AppMessages.class);<br />String status = msgs.mailStatus(15, “Inbox”);<br />
  48. 48. Easy debugging<br />In development mode, application runs as bytecode (just like any old Java app…)<br />So you can debug it just like any classic Java app:<br />Set breakpoints<br />Step through code<br />Inspect variables<br />Change variables<br />…<br />
  49. 49. Short dev cycle<br />Change client code:<br />press “Reload”.. Done!<br />Change server code:<br />Embedded server: press “Restart”.. Done!<br />External server: hotswap /redeploy if needed<br />
  50. 50. Easy client-server testing<br />Integrated application server for testing RPC services<br />Can be disabled to use external server<br />JUnit integration to run client-side test cases <br />Hosted mode or web mode<br />Full access to RPC services<br />GWTTestCase, GWTTestSuite for automation<br />Selenium for automated GUI testing<br />
  51. 51. Easy scaling<br />All session data resides on client<br />Similar to classic fat client<br />No session information on server-side<br />Forget session affinity<br />Add/remove servers on the fly<br />Restart server without losing clients<br />
  52. 52. “Easy” styling<br />Styling relies entirely on CSS<br />Widgets have well-known style names<br />Programmer can add custom styles<br />No shift from traditional HTML styling<br />HTML/DOM build page “skeleton”<br />Appearance tuned with CSS<br />Separate UI construction from styling<br />With well thought styles, it’s possible to reskin completely an application without changing one line of code<br />GWT styling has all the benefits of CSS with all problems of CSS<br />Be careful with brower dependencies!<br />
  53. 53. Easy Google AJAX APIs<br />Project gwt-google-apis<br />Libraries that wrap Google JavaScript APIs<br />Maps<br />Gears (storage, obsoleted by HTML5)<br />Gadgets (embedable applets)<br />AJAX search (embedded google search)<br />Visualization (charts)<br />Language (translation, language detection)<br />Standalone libraries (do not require JavaScript libraries)<br />
  54. 54. [new in 2.0] in-browser development mode<br />Before 2.0: hosted mode uses customized browser engine<br />Heavily customized<br />Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)<br />Difficult to keep up-to-date<br />Includes platform-specific code (SWT)<br />Browser and hosted application share the same process<br />Most plugins don’t work (including Google Gears…)<br />
  55. 55. [new in 2.0] in-browser development mode<br />now:<br />Hosted mode shell runs outside browser<br />Communicates with browser using plugin through TCP<br />
  56. 56. [new in 2.0] in-browser development mode<br />Benefits<br />Use any (supported) browser/version on any platform<br />Behavior closer to web mode<br />No interference with browser plugins<br />No more platform-specific stuff in GWT (one jar for all!)<br />Network protocol cross-platform possible<br />Dev mode shell on machine X, slave browser on machine Y<br />E.g. dev on Linux, test in IE on Windows…<br />
  57. 57. [new in 2.0] speed tracer<br />Performance analysis tool<br />Visualize where your app spends time:<br />JS execution<br />Browser rendering<br />CSS handling (style selection/calculation)<br />DOM handling (event processing)<br />Resource loading<br />
  58. 58. [new in 2.0] code splitting<br />Before: monolithic download can become very big<br />Slow startup times<br />After: <br />Programmer can insert “split points” in code<br />Hints for the compiler to place everything not required up to split point in separate download<br />Compiler divides code in several “chunks”, which are loaded on-demand<br />Benefits:<br />Initial loading time reduced 50% on average with a single split point<br />Allows on-demand module loading (provider pattern)<br />
  59. 59. [new in 2.0] declarative UI<br />Declarative construction of GUI using XML grammar<br />Allows automatic binding with Java code (through annotations)<br />Automatically assign references to dynamically created widgets to designated Java fields (@UiField)<br />Automatically attach methods as event handlers (@UiHandler)<br />Benefits:<br />Clearly separate:<br />Static UI construction (XML)<br />Dynamic UI behavior (Java)<br />
  60. 60. [new in 2.0] resource bundle<br />Download multiple heterogeneous resources from server in a single request<br />Images (already possible in pre-2.0)<br />CSS<br />Text<br />Any binary resource<br />Benefits:<br />Fewer round trips to the server<br />Less overhead<br />More responsive interface<br />
  61. 61. [new in 2.0] and also…<br />Compiler optimizations<br />Mostly generated JS size<br />Draft compile mode<br />Faster builds<br />Not for deployment!<br />Layout panels<br />Predictable, consistent layout<br />Constraint based system built on top of CSS<br />Plays nice with custom CSS styles<br />HtmlUnit<br />No native code / browser required<br />
  62. 62. Myths & misconceptions<br />
  63. 63. Myth: GWT is a JS library/framework/widget set<br />GWT is not for JavaScript developers<br />Provides only Java classes<br />
  64. 64. Myth: GWT is a framework<br />GWT is a toolkit (set of tools)<br />Frameworks may be built on top of it<br />
  65. 65. Myth: GWT is applets<br />A GWT application is 100% JavaScript<br />No runtime/plugin<br />No JRE required<br />
  66. 66. Myth: GWT is only for Java programmers<br />Yes, GWT uses Java as programming language…<br />BUT you can also see it this way:<br />GWT lets you write/debug/test/refactor AJAX apps with state-of-the-art IDEs and tools using a statically-typed object-oriented language<br />GWT makes it worth learning Java!<br />
  67. 67. Myth: GWT generates poorly performing JS<br />The GWT compiler generates highly optimized and compact code<br />Hand written JavaScript might be marginally faster in some cases, but it’s not worth the trouble <br />
  68. 68. Myth: GWT only works with a Java backend<br />GWT includes a simple and efficient RPC mechanism that relies on Java servlets<br />BUT it plays nice with any server-side technology that can handle HTTP requests (even PHP)<br />Includes XML encoding/decoding library<br />Includes JSON encoding/decoding library<br />
  69. 69. Myth: GWT has poor UI components<br />Yes, GWT’sbuiltin widgets are minimalistic…<br />BUT GWT’s point is not to provide a complete and beautiful widget set<br />GWT provides the basis for rich and good-looking components<br />Create your own or use 3rd party<br />See Ext-GWT, SmartGWT<br />
  70. 70. Myth: GWT apps have long startup times<br />Not longer than any JavaScript app<br />Obfuscation reduces size<br />Deferred binding loads just the necessary code for the platform/language<br />GWT 2.0’s code splitting can split code in several chunks<br />Smaller initial download<br />On-demand downloading<br />
  71. 71. Myth: GWT doesn’t integrate with existing sites<br />GWT was designed from the beginning with the goal to integrate well into existing sites<br />GWT can build the UI from a blank HTML page or alter existing elements<br />Very easy to add GWT to an existing page<br />Only a few lines of HTML to load the module<br />Can “hook up” to any DOM element (through its ID)<br />
  72. 72. Myth: GWT has poor skinning possibilities<br />GWT uses CSS for styling<br />Can reskin a whole application without changing a line of code (done that!)<br />Can split work between developer (behavior) and designer (appearance)<br />Caution: CSS can introduce browser dependencies<br />
  73. 73. Conclusion<br />Is GWT the future of web development?<br />GWT has passed reality check<br />Give it a try!<br />GWT = easy AJAX now !<br />=<br />
  74. 74. Pointers<br />GWT home (downloads, docs, FAQs, guides, etc.)<br /><br />Google groups “GWT” group<br /><br />onGWT: fresh news about GWT<br /><br />LinkedIn “GWT Users” group<br /><br />
  75. 75. Shameless self-promotion<br />
  76. 76. Thank you<br />Questions?<br /><br /><br />@ogerardin<br />

Editor's Notes

  • MyERP: Mime_Inc, admin/9p5fJJ_AHCompiere: Server:    http://open.compiere.comUser ID:    Olivier GérardinPassword:    20004098
  • A améliorer (dessin/anim)Exemple:
  • A améliorer (dessin/anim)
  • Étayer les arguments
  • Origine du nom JavaScript: accord entre Netscape et Sun pour promouvoir la marque “Java”
  • BrowserBpook:
  • Side discussion: high-level languages vs low-level languages. Make the point that although using GWT means giving up some JS idioms, the benefits are elsewhere.
  • Native HTML widgets use the system’s native look &amp; feel.
  • Native Javascript (JSNI) works in dev mode too
  • No constraints on server-side code (plain Java bytecode)
  • GWT performs “Browser sniffing” (controversy)
  • Works
  • DEMO if time allows
  • DEMO if time allows
  • Improved with GWT 2.0
  • Gears phased out fro HTML5
  • ×