GWT = easy AJAX

6,997 views
6,832 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,997
On SlideShare
0
From Embeds
0
Number of Embeds
381
Actions
Shares
0
Downloads
85
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • MyERP: Mime_Inc, admin/9p5fJJ_AHCompiere: Server:    http://open.compiere.comUser ID:    Olivier GérardinPassword:    20004098
  • A améliorer (dessin/anim)Exemple: http://web.archive.org/web/19961223105317/http://www.feedmag.com/
  • A améliorer (dessin/anim)
  • Étayer les arguments
  • Origine du nom JavaScript: accord entre Netscape et Sun pour promouvoir la marque “Java”
  • BrowserBpook: http://www.visibone.com/products/browserbook.html
  • 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 & 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
  • GWT = easy AJAX

    1. 1. GWT = Easy AJAX<br />Confoo.ca<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 java.io 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 />AppConstants.properties: title = Hello, World<br />AppConstants_fr_CA.properties: 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 (AppMessages.properties)<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-apishttp://code.google.com/p/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 />http://code.google.com/toolkit<br />Google groups “GWT” group<br />http://groups.google.com/group/Google-Web-Toolkit<br />onGWT: fresh news about GWT<br />http://www.ongwt.com<br />LinkedIn “GWT Users” group<br />http://www.linkedin.com/groups?gid=129889<br />
    75. 75. Shameless self-promotion<br />
    76. 76. Thank you<br />Questions?<br />gerardin.o@sfeir.lu<br />blog.gerardin.info<br />@ogerardin<br />

    ×