GWT HJUG Presentation

Google Web ToolkitHouston Java Users Group February 29, 2012Peter Haynes, Derrick Bowen The Business of IT® The Business of www.parivedasolutions.com

Agenda► Rich Internet Applications & AJAX► Google Web Toolkit► 3rd Party Accelerators► Parting Thoughts 2

Users now expect significantly more interactivity from websites► Desktop application experience in the browser► Very interactive, low latency► Rich Internet Application experience in the browser provided by technologies such as • Silverlight • Flash • JavaFX • AJAX • Dart 3

There are several options for providing interactivity in the browser Technology Description Examples Flash • Proprietary - Adobe • Hulu • Requires browser plugin • Dish Network • First released in 1996 • YouTube • Ubiquitous - 98% install base • Disney • Many reported security vulnerabilities • Toshiba Silverlight • Proprietary - Microsoft • Netflix Movie Picker • Requires browser plugin • Bing Maps • Future is uncertain, as Microsoft is emphasizing • Often used to stream video HTML5 & JavaScript for Windows 8 development • NBC Sunday Night Football • 2008 Summer Olympics • 2010 Winter Olympics • Netflix streaming AJAX • AJAX – Asynchronous JavaScript and XML • Google Maps • Many open source & proprietary frameworks • Gmail • More of a pattern than any particular product • YouTube • Almost every modern website uses AJAX to some • Facebook tabs extent • Vimeo • Google Docs • SalesForce 4

JavaScript combined with asynchronous XML requests to the server enable desktop styleinteractivity on the web► AJAX stands for Asynchronous JavaScript and XML► JavaScript is an interpreted language supported by all modern browsers► Asychnronous background requests instead of waiting for a full page load • XMLHttpRequest • JSON • RPC serialization► Reduces the apparent latency when sending requests to the server► Results in smaller but more frequent requests without blocking the user 5

Large-scale AJAX development can be challenging► Organizations typically have few resources with expertise in JavaScript, CSS, DOM► Cross browser quirks - Internet Explorer 6 is still the standard for many companies► Maintenance is difficult for large / complex applications • Interpreted languages such as JavaScript often lead to long debug cycles • Unit testing can be difficult in JavaScript • Complex event-based programming model with a scripting language • JavaScript has limited OO capabilities • Managing asynchronous calls to the backend► Optimizing JavaScript performance is difficult 6

Google Web Toolkit provides blazing fast performance and a rich development experience Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT. ► Write code in object-oriented java, and GWT compiles it into cross-browser compatible JavaScript ► Minifies and optimizes the resulting JavaScript – better than hand-coded in most cases ► Provides simple classes for programmatic interaction with the DOM, CSS, and browser events ► Manages asynchronous calls from the client to the server 8

GWT provides tools for efficient development► Fast and easy code – deploy – test – fix cycle • Test most code with normal, everyday jUnit tests • GWT provides a jUnit extension allowing GUI components to be unit tested in the browser • Development mode provides debugger support of the java code – eg, set break points, click a button in the browser, and step through code► Good Eclipse integration, WYSIWYG editor, maven support► Internationalization & localization support► Integration with Google App Engine► Speed Tracer profiler Executing in Development Mode allows debugging java code in the IDE 9

GWT provides a rich set of widgets and panels out of the box► See the Widget Gallery and Showcase sample application► Widgets Button PushButton RadioButton CheckBox DatePicker ToggleButton TextBox PasswordTextBox TextArea Hyperlink ListBox CellList MenuBar Tree CellTree SuggestBox RichTextArea FlexTable Grid CellTable CellBrowser TabBar DialogBox► Panels PopupPanel StackPanel StackLayoutPanel HorizontalPanel VerticalPanel FlowPanel VerticalSplitPanel HorizontalSplitPanel SplitLayoutPanel DockPanel DockLayoutPanel TabPanel TabLayoutPanel DisclosurePanel 10

The development cycle in GWT is only slightly different than typical java development► Typical GWT development cycle 1. Write java unit tests – normal, everyday tests using jUnit 2. Implement the production classes in java 3. Compile and execute unit tests – normal, everyday java execution in the IDE or from command line 4. Compile java to JavaScript 5. Execute integration tests in the browser to verify functionality► If implementing GUI widgets, then the cycle changes a bit to run unit tests in the browser 1. Steps 1-3 as above, then for any classes that must run in the browser, 2. Implement a unit test extending GWTTestCase. Executing a GWTTestCase causes an embedded browser to spin up, so the test can execute in container 3. Once all unit tests pass, compile everything to JavaScript and integration test in the browser► There were a few more WTF moments than normal, as we all learned the limitations and quirks • CellTable class had limitations we didn’t expect, so we coded a replacement • Currency support was lacking► If things break beyond the abstraction layer, it can be difficult to debug • Zero width table column IE crash • Choosing which browser event handler to implement was sometimes difficult • Interactions with non-GWT JavaScript► Short demo 11

Not all java classes can be compiled into JavaScript► Most commonly used classes and operations from the JDK will work on the client side • java.lang • java.lang.annotation • java.math • java.io – limited set • java.sql – only date and time classes • java.util – most classes are included, including generic Collections • java.util.logging► Notable omissions include • Reflection • Calendar and its subclasses, Currency • Threading, Concurrency, Timer► Some classes are translated into the JavaScript equivalent functions, with subtle differences from java behavior • Regular expression classes can be used, but have minor differences from server to client side (z [end of String] not supported in JavaScript, had to use $ [end of line] ) • Care must be taken to test thoroughly in both client and server containers► In several instances, we coded different server and client implementations to work around limitations Using Class Interface Inject appropriate implementing class into using class, based on where it is running Server-side Client-side Implementation Implementation 12

Demos are cool► Inheritance► Passing data between client and server (RPC)► MVP Pattern► Unit Testing► Internationalization► Back button► Widgets 13

Agenda► Rich Internet Applications & AJAX► Google Web Toolkit► 3rd Party Accelerators • Gin & Guice • GWT presenter • GWT dispatcher • Widget Libraries► Parting Thoughts 14

GIN and Guice provide dependency injection for GWT► GIN (Gwt INjection) brings automatic dependency injection to GWT client-side code► GIN is built on top of Google’s general purpose dependency injection framework, Guice, and uses a subset of Guices binding language► GIN cannot provide the full set of Guice functionality mainly because GWT does not emulate reflection► Bindings direct GIN to inject a particular implementation, any time a constructor requires an interface • Most cases are satisfied by this simple configuration • Factory methods can also be implemented for more sophisticated bindingsbind(EventBus.class).to(DefaultEventBus.class).in(Singleton.class);bind(PlaceManager.class).to(ZaastraPlaceManager.class).in(Singleton.class);bind(TokenFormatter.class).to(ParameterTokenFormatter.class).in(Singleton.class);bind(DateUtility.class).to(GuiDateUtility.class).in(Singleton.class);bind(RpcExamplePlace.class).in(Singleton.class);bind(I18nExamplePlace.class).in(Singleton.class);bind(WidgetExamplePlace.class).in(Singleton.class);bind(GreetingServiceAsync.class).in(Singleton.class);bind(I18nExampleView.class); 15

GWT-Presenter is a popular implementation of the MVP pattern for GWT► Model-View-Presenter pattern is a variation of Model-View-Controller that allows more logic to be tested • Widgets and logic that interacts with them are hard to unit test because widgets must be executed within the browser • MVP addresses this challenge by reducing the responsibility of the View to merely wiring together the GUI components • The Presenter is a controller that also takes on almost all of the logic from the view (enabling / disabling, hiding / showing, setting focus, etc)► GWT-Presenter provides core MVP abstractions without dictating implementation of the View or Model • Base Presenter interfaces and abstract classes • Dependency injection helpers for GIN • Abstractions for interacting with GWT’s browser history support classes • The View implements an interface that limits the Presenter’s direct dependency on View implementation classes MVC Action MVP Display to Screen View View Presentation Logic Presenter Controller Application LogicNote: Diagram from ―Design Patterns for ASP.NET Developers, Part 1: Basic Patterns‖, Alex Homer, Link Model Domain Objects Model 16

GWT-dispatch simplifies the interaction between client and server► GWT-dispatch implements a reusable command pattern for communication with the server • Creates a single servlet on the backend • Client code instantiates an Action and passes it asynchronously to the DispatchServlet • The DispatchServlet routes the Action to the appropriate Handler • The Handler invokes server-side business logic to produce the Result, which is passed back to the client► Benefits • Clean, simple pattern for remote request / response • Limits the threat surface, because only one Servlet must be secured► We really liked this implementation, but had already implemented a similar pattern • Our client did not want to lose time ripping it out to implement yet another third party framework • We did lift a few ideas to improve our design, and migrating to GWT-dispatch is in the product backlog 17

GWT can be extended by creating custom widgets or using 3rd party widget libraries► SmartGWT http://www.smartclient.com/smartgwt/showcase/ • Slick looking widgets • Thin GWT wrapper around existing JavaScript widgets • Can be difficult to integrate plain GWT widgets with SmartGWT widgets • LGPL & commercial licenses starting at $750 • Originally named GWT EXT► Vaadin • Widgets are native GWT • Free to use under Apache Software License 2.0 • Paid support and commercial plugins► Sencha Ext GWT http://www.sencha.com/products/extgwt/examples/ • Native GWT • GPL v3 & commercial licenses starting at $595► Several others… 18

Pros & Cons► Cons • Takes more time to started with than direct JavaScript coding • Adds a number of dependencies and compile processes, more than you need for a simple project • Many 3rd party java libraries cannot be used for client-side code, because they cannot be compiled to JavaScript • Difficult to impossible to write native JavaScript code external to your GWT project that can interact with GWT components • Abstraction away from HTML is not complete, so if you are doing anything fancy you will still need to understand web/http/browser fundamentals • Not many public examples of GWT in production sites (apart from Google adsense/adwords and Angry Birds) • Dart has created anxiety that Google may eventually phase out GWT► Pros • Code is compiled and easily testable! • Debugging support! • Highly optimized JavaScript, minified to include only code required for a particular browser / locale combination • Google takes care of the nastiest cross-browser support issues, so you don’t have to • Leverage existing knowledge of java • Open source & active community • Does not require browser plugins • Several highly optimized options for communicating between client and server • Google Apps Engine integration 20

When would we recommend GWT?► When would we recommend • Strong java team, with little experience with JavaScript, CSS, DOM coding • Starting from scratch • Building a real ―web application‖ not a content site with a few dynamic features • Long term maintenance is expected • Tight response time requirements • Cross browser support is required► When would we not recommend • Large existing web application already in place • Simple, page based website, i.e. flashy consumer marketing site • Small and quick addition to an existing application • Many custom / 3rd party JavaScript widgets already in use • Team has little java experience, or already has strong JavaScript, CSS or html experience 21

Questions and Contact InfoQuestions?Peter HaynesEmail: Peter.Haynes@parivedasolutions.comDerrick BowenEmail: Derrick.Bowen@parivedasolutions.comTwitter: @derrickbowenWebsite/Blog: http://derrickbowen.com 22

So what about Dart?► What is Dart? • Dart is a programming language built by Google to replace JavaScript in web development • The goal is to create a structured yet flexible language that feels natural to programmers and is built for high performance • There has been significant backlash from the web standards community accusing Google of trying to take over the web • For now, programmers write client side code in Dart and a special compiler converts it to JavaScript to be included on the web page► That sounds an awfully lot like GWT. What does that mean for GWT? • Meanwhile, rest assured that GWT will continue to be a productive and reliable way to build the most ambitious web apps — and even games like Angry Birds. Key projects within Google rely on GWT every day, and we plan to continue improving (and open-sourcing) GWT based on their real-world needs. - Posted by Bruce Johnson - Thursday, November 10, 2011 at 7:39:00 AM (http://googlewebtoolkit.blogspot.com/2011/11/gwt-and- dart.html) • Your existing GWT/Java code shouldnt become useless any more than the gobs of such code inside Google would. Thats really the key point of the blog post -- nothing precipitous is happening. That said, I feel a lot of momentum around Dart. - Comment by Bruce Johnson – November 19, 2011 (https://plus.google.com/117487419861992917007/posts/6YWpsHpqMqZ) • Many of Googles services are still being written in GWT and wont change anytime soon, for example AdWords and AdSense, from which Google derives the majority of their revenue, are written in GWT, so given that fact alone, GWT will be around for a long time and continue to be improved. […] Obviously, we want Dart to be a huge success, but even if it is, Java isnt going away anytime soon. :) - Ray Cromwell – December 6, 2011 (https://plus.google.com/117487419861992917007/posts/6YWpsHpqMqZ) 23

Other stuff► Security • GWT makes it easy to deploy sophisticated logic to execute in the browser • Code is obfuscated • Avoid sending sensitive data to the client and validate all data received on the server side - Users can bypass the code to view / manipulate data directly - Even though the code is obfuscated, someone with time on their hands can hack it► Caching data on the client side • Prior to GWT 2.3, GWT did not provide a built in mechanism for client-side persistence or caching • GWT 2.3 includes support for the WC3 LocalStorage standard for persisting data between sessions 24

Comparison vs other JavaScript frameworks► Table showing primary differences► Info from: • Forester/gartner comparisons? • http://google.wikia.com/wiki/Google_Web_Toolkit#Comparison_of_GWT_with_other_AJAX_frameworks • http://aarendar.wordpress.com/2010/03/03/flex-vs-gwt-comparison-part-1/ • http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks • http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs • http://www.thoughtworks.com/sites/www.thoughtworks.com/files/images/26/radar-platforms-january-2011.jpg 25

Example of JavaScript compilation 26

http://derrickbowen.com	235
http://www.derrickbowen.com	52

GWT HJUG Presentation

by Derrick Bowen

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 287

Statistics

GWT HJUG Presentation Presentation Transcript