Google Web Toolkit- Build Rich WebApplications withOO ToolsBenjamin ArciszewskiSenior Software Engineer - StudyBlue
Todays Agenda● Introduce GWT and talk about what it is, why  its different and why you should use it● Talk about good/bad ...
PurposeTo get you excited about GWT and to build alarge community of GWT users in Wisconsin soStudyBlue has a large pool o...
Something to think about...How many Java LOC are in the StudyBlue Webapplication (method used is Eclipse metricsplugin, on...
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  ○ j...
Difficulty of traditional MVCframeworks● Mixed languages  ○ Server    ■ java, ruby, php, C#,...    ■ templates (HTML,XML, ...
Difficulty of Traditional WebFrameworks, continued● Complex project setups  ○   Server-side code  ○   Client side code  ○ ...
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)● ...
What is GWT?Google Web Toolkit (GWT) is a developmenttoolkit for building and optimizing complexbrowser-based applications...
What is GWT?GWT, aka the Google Web Toolkit, or "Gwit" as their teamlikes to say (which is a stupid pronunciation), is a J...
What is GWT?GWT is a client-side framework fordeveloping rich internet applications inJava, taking advantage of all of the...
How GWT is Different● Code is in Java (mostly)● compiled to js/html● No need for   ○ page templates   ○ glue languages   ○...
Practical Description of GWT● Set of tools that turn Java into html/js.  ○ Eclipse Plugin  ○ Project Generator  ○ J2SE pro...
Advantages for doing it this way...● Code is optimized for each browser during  compile (read: optimization)● Full OO abst...
Disadvantages● Compile can be slow (especially w/ i18n)  ○ One version for each browser, for each language,    exponential...
Anatomy of a GWT Project● Java code   ○ client - compiled to js/html and run in browser   ○ server - compiled to java and ...
GWT - RPC● Its like magic   ○ Define an Interface   ○ Define an implementation in server   ○ Define an implementation w/ c...
UI code● Widgets (Java objects)  ○ Your code creates views via Extension and/or      Composition●   Customizable●   Config...
Project Structure
Organization - Config
Organization - src
Organization - war
Interaction - Host Page - JavaScript<script type="text/javascript" language="javascript" src="jugsampleapp/jugsampleapp.no...
Interaction - Host page - Elements  <h1>JUG Sample Application</h1> <div id="searchWrapper">    <div id="editor"><!-- GWT ...
Interaction - Execution Start● EntryPoint.onModuleLoad● In our sample: JugSampleApp
Interaction - RPC● CardService (client)● CardServiceAsync (client)● CardServiceImpl extends  RemoteServiceServlet implemen...
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
StudyBlueAny questions?Benjamin ArciszewskiSenior Software Engineer - StudyBlue
Upcoming SlideShare
Loading in …5
×

GWT - Building Rich Internet Applications Using OO Tools

1,292 views

Published on

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

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • @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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did you consider using RequestFactory instead of RPC? Why or why not?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,292
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

GWT - Building Rich Internet Applications Using OO Tools

  1. 1. Google Web Toolkit- Build Rich WebApplications withOO ToolsBenjamin ArciszewskiSenior Software Engineer - StudyBlue
  2. 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. 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. 4. Something to think about...How many Java LOC are in the StudyBlue Webapplication (method used is Eclipse metricsplugin, only com.sb.* packages)?
  5. 5. 10 Second History of the Web● Web pages● Interactive Web pages● Web applications● Rich Internet Applications
  6. 6. Traditional Frameworks● MVC ○ Struts ○ Struts II● Component-based ○ JSF ○ Tapestry● SOUI (AJAX) ○ Ext JS ○ DOJO ○ jQuery
  7. 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. 8. Difficulty of Traditional WebFrameworks, continued● Complex project setups ○ Server-side code ○ Client side code ○ Templates ○ Static files ○ JavaScripts
  9. 9. Ultimate Issue?● They all treat Rich Internet Applications as Web Pages!
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Project Structure
  22. 22. Organization - Config
  23. 23. Organization - src
  24. 24. Organization - war
  25. 25. Interaction - Host Page - JavaScript<script type="text/javascript" language="javascript" src="jugsampleapp/jugsampleapp.nocache.js"></script>
  26. 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. 27. Interaction - Execution Start● EntryPoint.onModuleLoad● In our sample: JugSampleApp
  28. 28. Interaction - RPC● CardService (client)● CardServiceAsync (client)● CardServiceImpl extends RemoteServiceServlet implements CardService(server)
  29. 29. Sample Project
  30. 30. Bring it together - Cardwall
  31. 31. Bring it all together - Preview
  32. 32. Bring it all together - Edit
  33. 33. Bring it all together - Flip
  34. 34. Bring it all together - Quiz
  35. 35. How many LOC are in our app?
  36. 36. Answer: About 66,000
  37. 37. StudyBlueAny questions?Benjamin ArciszewskiSenior Software Engineer - StudyBlue

×