How to Troubleshoot Apps for the Modern Connected Worker
GWT - Building Rich Internet Applications Using OO Tools
1. Google Web Toolkit
- Build Rich Web
Applications with
OO Tools
Benjamin Arciszewski
Senior Software Engineer - StudyBlue
2. Today's Agenda
● Introduce GWT and talk about what it is, why
it's different and why you should use it
● Talk about good/bad of the toolkit
● Describe the components of GWT at a high
level
● Go through the anatomy of a project
● Walk through a sample app that is a little
more complex than 'hello world'
● Bring it all together by showing some of the
functionality on StudyBlue.com
3. Purpose
To get you excited about GWT and to build a
large community of GWT users in Wisconsin so
StudyBlue has a large pool of qualified
developers to choose from as we grow...
4. Something to think about...
How many Java LOC are in the StudyBlue Web
application (method used is Eclipse metrics
plugin, only com.sb.* packages)?
5. 10 Second History of the Web
● Web pages
● Interactive Web pages
● Web applications
● Rich Internet Applications
7. Difficulty of traditional MVC
frameworks
● Mixed languages
○ Server
■ java, ruby, php, C#,...
■ templates (HTML,XML, markup...)
■ Glue languages (OGNL)
○ Client
■ JavaScript
■ HTML
● Server vs. Client
○ No sharing of code
○ Lots of config
○ Lots of conversion
8. Difficulty of Traditional Web
Frameworks, continued
● Complex project setups
○ Server-side code
○ Client side code
○ Templates
○ Static files
○ JavaScripts
10. Browser?
● Rich Object Model
● Performant Script processing engine (V8)
● Local persistence
● Rich Graphics (Canvas)
● Rich set of programming APIs
● Complete set of events
11. What is GWT?
Google Web Toolkit (GWT) is a development
toolkit for building and optimizing complex
browser-based applications. GWT is used by
many products at Google, including Google
AdWords and Orkut. It's open source,
completely free, and used by thousands of
developers around the world.
From:https://developers.google.com/web-toolkit/
12. What is GWT?
GWT, aka the Google Web Toolkit, or "Gwit" as their team
likes to say (which is a stupid pronunciation), is a Java skin
on the Javascript language. It allows objected oriented,
strictly-typed programming fans to work seamlessly with
pixel perfect, anal retentive HTML/CSS gurus. In addition it
provides tons of optimizations for code efficiency,
internationalization, resource bundling, etc. Finally, it's
flexible enough that you can bake it into any type of web
application, using any type of server-client communication
From:Chris Klunt, President andCo-Founder - StudyBlue
13. What is GWT?
GWT is a client-side framework for
developing rich internet applications in
Java, taking advantage of all of the
tools that come with a high-level
language like Java.
From:Dale Beerman, Chief Technical Architect - StudyBlue
14. How GWT is Different
● Code is in Java (mostly)
● 'compiled' to js/html
● No need for
○ page templates
○ 'glue languages'
○ scripting
● Full use of Java tool stack
○ Eclipse debugger
○ Code complete
○ Continuous compilation
● Shared code between client/server
15. Practical Description of GWT
● Set of tools that turn Java into html/js.
○ Eclipse Plugin
○ Project Generator
○ J2SE proxy libraries
○ Compiler
○ Browser Plugin (for development)
○ Java Widget and Service API
○ RPC mechanism
○ WYSIWYG Visual Editor (We don't use)
16. Advantages for doing it this way...
● Code is optimized for each browser during
compile (read: optimization)
● Full OO abstractions: inheritance,
polymorphism, encapsulation, extension
● One single language (mostly)
● Ability to bind to 'native' JS when needed
● Code re-use
○ Components, Widgets and Services
● High quality, easily usable, libraries
17. Disadvantages
● Compile can be slow (especially w/ i18n)
○ One version for each browser, for each language,
exponential growth...
● Plugin used for local testing in browser
● Give up some control (but not as much as
you might think)
● GWT Unit tests are SLOW
● You sometimes think you are in Java
18. Anatomy of a GWT Project
● Java code
○ client - compiled to js/html and run in browser
○ server - compiled to java and run on server
○ shared - both (must be compliant w/ client)
● .gwt.xml - configuration file
● .html host file - that will include your code
● .css file - for styling
19. GWT - RPC
● It's like magic
○ Define an Interface
○ Define an implementation in server
○ Define an implementation w/ callback in client.
● To Configure
○ Create an interface in client
○ Create an asynchronous interface in client
○ Create an implementation on server that extends
RemoteServiceServlet
○ Configure Servlet in web.xml
● To use
○ Get the Async version from GWT (GWT.create)
○ Make calls, receive response in Callback
20. UI code
● Widgets (Java objects)
○ Your code creates views via Extension and/or
Composition
● Customizable
● Configurable
● Similar to Swing
● Extensible
● Optional .ui.xml file bindings (StudyBlue)
