A presentation prepared by Peter Haynes and Derrick Bowen of Pariveda Solutions on GWT for the Houston Java Users Group

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

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

3. 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

4. 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

5. JavaScript combined with asynchronous XML requests to the server enable desktop style
interactivity 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

6. 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

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

8. 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

9. 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

10. 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

11. 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

12. 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

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

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

15. 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 Guice's 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 bindings
bind(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

16. 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 Logic
Note: Diagram from ―Design Patterns for ASP.NET Developers, Part 1: Basic Patterns‖, Alex Homer, Link Model Domain Objects Model
16

17. 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

18. 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

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

20. 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

21. 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

22. Questions and Contact Info
Questions?
Peter Haynes
Email: Peter.Haynes@parivedasolutions.com
Derrick Bowen
Email: Derrick.Bowen@parivedasolutions.com
Twitter: @derrickbowen
Website/Blog: http://derrickbowen.com
22

23. 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 shouldn't become useless any more than the gobs of such code inside Google would.
That's 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 Google's services are still being written in GWT and won't 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 isn't going away anytime soon. :)
- Ray Cromwell – December 6, 2011 (https://plus.google.com/117487419861992917007/posts/6YWpsHpqMqZ)
23

24. 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

25. 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

26. Example of JavaScript compilation
26