Google Web Toolkit - Build Rich Web Applications with OO ToolsBenjamin ArciszewskiSenior Software Engineer - StudyBlue

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

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

Something to think about...

How many Java LOC are in the StudyBlue Web application (method used is Eclipse metrics plugin, only com.sb.* packages)?

10 Second History of the Web

● Web pages● Interactive Web pages● Web applications● Rich Internet Applications

Traditional Frameworks

● MVC ○ Struts○ Struts II

● Component-based○ JSF○ Tapestry

● SOUI (AJAX)○ Ext JS○ DOJO○ jQuery

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

Difficulty of Traditional Web Frameworks, continued

● Complex project setups○ Server-side code○ Client side code○ Templates○ Static files○ JavaScripts

Ultimate Issue?

● They all treat Rich Internet Applications as Web Pages!

Browser?

● Rich Object Model● Performant Script processing engine (V8)● Local persistence● Rich Graphics (Canvas)● Rich set of programming APIs● Complete set of events

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/

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

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

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

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)

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

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

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

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

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)

Project Structure

Organization - Config

Organization - src

Organization - war

Interaction - Host Page - JavaScript

<script type="text/javascript" language="javascript" src="jugsampleapp/jugsampleapp.nocache.js"></script>

Interaction - Host page - Elements

<h1>JUG Sample Application</h1> <div id="searchWrapper"> <div id="editor"><!-- GWT ... --></div> <div id="buttons"><!-- GWT ... --></div> </div> <div id="cardWall"> <div id="cardList" class="cardBox"><!-- GWT ... --></div> </div>

Interaction - Execution Start

● EntryPoint.onModuleLoad● In our sample: JugSampleApp

Interaction - RPC

● CardService (client)● CardServiceAsync (client)● CardServiceImpl extends

RemoteServiceServlet implements CardService(server)

Sample Project

Bring it together - Cardwall

Bring it all together - Preview

Bring it all together - Edit

Bring it all together - Flip

Bring it all together - Quiz

How many LOC are in our app?

Answer:

About 66,000

StudyBlue Any questions?Benjamin ArciszewskiSenior Software Engineer - StudyBlue