• Like
GWT - Building Rich Internet Applications Using OO Tools
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

GWT - Building Rich Internet Applications Using OO Tools


5/9/2012 Presentation by Benjamin Arciszewski to Madison Java Users Group on the Google Web Tookit

5/9/2012 Presentation by Benjamin Arciszewski to Madison Java Users Group on the Google Web Tookit

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @j_p_quinn

    We also expose our application through an API for our native mobile clients to use. The back end is very service-oriented in this regard, so the service oriented nature of the RPC was a good fit. In addition, the application, is not CRUD-heavy. We have a handful of objects, but none are particularly large or complex. In applications where you have large records and a lot of row-based displays, I can see the RequestFactory working quite well.
    Are you sure you want to
    Your message goes here
  • Did you consider using RequestFactory instead of RPC? Why or why not?
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Google Web Toolkit- Build Rich WebApplications withOO ToolsBenjamin ArciszewskiSenior Software Engineer - StudyBlue
  • 2. Todays Agenda● Introduce GWT and talk about what it is, why its 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. PurposeTo get you excited about GWT and to build alarge community of GWT users in Wisconsin soStudyBlue has a large pool of qualifieddevelopers to choose from as we grow...
  • 4. Something to think about...How many Java LOC are in the StudyBlue Webapplication (method used is Eclipse metricsplugin, only com.sb.* packages)?
  • 5. 10 Second History of the Web● Web pages● Interactive Web pages● Web applications● Rich Internet Applications
  • 6. Traditional Frameworks● MVC ○ Struts ○ Struts II● Component-based ○ JSF ○ Tapestry● SOUI (AJAX) ○ Ext JS ○ DOJO ○ jQuery
  • 7. Difficulty of traditional MVCframeworks● 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 WebFrameworks, continued● Complex project setups ○ Server-side code ○ Client side code ○ Templates ○ Static files ○ JavaScripts
  • 9. Ultimate Issue?● They all treat Rich Internet Applications as Web Pages!
  • 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 developmenttoolkit for building and optimizing complexbrowser-based applications. GWT is used bymany products at Google, including GoogleAdWords and Orkut. Its open source,completely free, and used by thousands ofdevelopers around the world.From:https://developers.google.com/web-toolkit/
  • 12. What is GWT?GWT, aka the Google Web Toolkit, or "Gwit" as their teamlikes to say (which is a stupid pronunciation), is a Java skinon the Javascript language. It allows objected oriented,strictly-typed programming fans to work seamlessly withpixel perfect, anal retentive HTML/CSS gurus. In addition itprovides tons of optimizations for code efficiency,internationalization, resource bundling, etc. Finally, itsflexible enough that you can bake it into any type of webapplication, using any type of server-client communicationFrom:Chris Klunt, President andCo-Founder - StudyBlue
  • 13. What is GWT?GWT is a client-side framework fordeveloping rich internet applications inJava, taking advantage of all of thetools that come with a high-levellanguage 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 dont 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● Its 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)
  • 21. Project Structure
  • 22. Organization - Config
  • 23. Organization - src
  • 24. Organization - war
  • 25. Interaction - Host Page - JavaScript<script type="text/javascript" language="javascript" src="jugsampleapp/jugsampleapp.nocache.js"></script>
  • 26. 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>
  • 27. Interaction - Execution Start● EntryPoint.onModuleLoad● In our sample: JugSampleApp
  • 28. Interaction - RPC● CardService (client)● CardServiceAsync (client)● CardServiceImpl extends RemoteServiceServlet implements CardService(server)
  • 29. Sample Project
  • 30. Bring it together - Cardwall
  • 31. Bring it all together - Preview
  • 32. Bring it all together - Edit
  • 33. Bring it all together - Flip
  • 34. Bring it all together - Quiz
  • 35. How many LOC are in our app?
  • 36. Answer: About 66,000
  • 37. StudyBlueAny questions?Benjamin ArciszewskiSenior Software Engineer - StudyBlue