0
Google Web Toolkit: A technical overview
Chris Schalk

Con: Gabriel Praino


DevFest 2009
November 17th, 2009
Agenda

    •  AJAX: what it is and why it's important
    •  Introducing GWT
    •  GWT advantages
    •  GWT 2.0 feature...
AJAX... uh... what?

    •  Also known as Asynchronous JavaScript And XML
    •  JavaScript can issue asynchronous server ...
The AJAX architectural shift




5
The AJAX slippery slope

    •  Experiment with “a bit of script”
    •  Everybody loves it! More!
    •  When did we beca...
GWT’s Mission




     "GWT's mission is to radically improve
        the web experience for users by
      enabling devel...
Google Web Toolkit at a glance
    •  Write code in the JavaTM language using your favorite Java
       IDE
    •  Debug a...
What is GWT?




9
How it works




     Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200
           Code against Java UI libraries


...
How it works




       Code against Java UI libraries




                                The compiler translates Java so...
How it works




                                                                               Generates browser-complian...
Key concepts




Productivity for you

                       Performance for your users
Custom JavaScript per browser
Demo: Getting started building
GWT apps
GWT Advantages
GWT Advantages – Faster Ajax applications
       Faster-than-you-would-write-by-hand code
       •  The efficient code you...
GWT Advantages – Faster Ajax applications

       Faster-than-you-would-write-by-hand code
         –  Another variation:
...
GWT Advantages – Faster Ajax applications

        Faster-than-you-would-write-by-hand code
           –  Another variatio...
GWT Advantages – Faster Ajax applications

      Deferred binding
       •  Why give the user more than they asked for?
  ...
GWT Advantages – Faster Ajax applications

      Deferred binding


      •  A technique that lets the compiler make diffe...
GWT Advantages – Faster Ajax applications

      Deferred binding illustrated




22
GWT Advantages – No more memory leaks

     Preventing memory leaks
     •  Provided you only code in GWT
     •  Chances ...
GWT Advantages – History support

            History support for your GWT applications
            •  GWT offers History ...
GWT Advantages – Faster development

      Faster development with IDEs and code support


      •  Code refactoring with ...
GWT Advantages – Faster development

     Faster development with IDEs and code support


     •  You can also thoroughly ...
GWT Advantages – Debugging in bytecode

      Debugging with hosted mode

     •  Debugging in hosted mode allows for rapi...
Summary of development advantages

     •  Optimized, high performance Ajax applications
     •  As a developer, you don’t...
GWT Tools and Widgets
Google Plugin for Eclipse




 http://code.google.com/eclipse/
Widget libraries


•  GWT (http://code.google.com/webtoolkit/)
•  Incubator (http://code.google.com/p/google-web-toolkit-i...
New features coming in GWT 2.0
GWT 2.0: More advantages

     •  Hosted mode becomes “development mode”
     •  Code splitting
     •  Client bundle
    ...
Code Splitting: Big scripts, big problems

     •  Problem: Initial download can be slooooow
        –  Some apps becomes ...
Developer-guided code splitting with runAsync

                         public void onMySettingsLinkClicked() {

       Sp...
runAsync() Helps Apps Startup More
                                           Quickly
                                    ...
ImageBundle revisited

     •  Each <img> tag is one HTTP roundtrip
     •  Bundle them up!




     •  11 HTTP roundtrips...
Declarative UIs with UiBinder

     •  Build your UI in declarative XML

<!-- UserDashboard.ui.xml -->
<ui:UiBinder xmlns:...
Who's using GWT?
Google Wave
Google Health
Mobile
Large GWT Apps - Lombardi Blueprint




                  Google Web Toolkit
Large GWT Apps – ContactOffice




                 Google Web Toolkit
Large GWT Apps - scenechronize




                 Google Web Toolkit
Many more in the GWT App Gallery
http://gwtgallery.appspot.com/




                                                  46
 ...
Learn more
code.google.com/webtoolkit
Muchas Gracias!




      Q&A
Devfest09 Cschalk Gwt
Upcoming SlideShare
Loading in...5
×

Devfest09 Cschalk Gwt

1,449

Published on

This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,449
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Devfest09 Cschalk Gwt"

  1. 1. Google Web Toolkit: A technical overview Chris Schalk Con: Gabriel Praino DevFest 2009 November 17th, 2009
  2. 2. Agenda •  AJAX: what it is and why it's important •  Introducing GWT •  GWT advantages •  GWT 2.0 features •  Who’s using GWT •  Q&A 3
  3. 3. AJAX... uh... what? •  Also known as Asynchronous JavaScript And XML •  JavaScript can issue asynchronous server requests •  JavaScript can manipulate the user interface 4
  4. 4. The AJAX architectural shift 5
  5. 5. The AJAX slippery slope •  Experiment with “a bit of script” •  Everybody loves it! More! •  When did we became an AJAX shop? •  Attempt to port to something other than Internet Explorer •  Wait... this is hard! •  Result: “A tangled mess!” 6
  6. 6. GWT’s Mission "GWT's mission is to radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser." 7
  7. 7. Google Web Toolkit at a glance •  Write code in the JavaTM language using your favorite Java IDE •  Debug as bytecode against a special browser (hosted mode) •  Cross-compile into standalone optimized JavaScript (web mode) •  No browser plugins / no obligatory server-side machinery •  Includes extensive cross-browser libraries •  User interface (DOM, widgets, ...) •  Client/server communication (XHR, RPC, JSON, ...) •  App infrastructure (history, timers, unit testing, i18n, a11y, ...) •  External services (Gadgets, Gears, Google Maps, ...) •  JavaScript integration •  JavaScript Native Interface (JSNI) •  Fully open source under Apache 2.0 8
  8. 8. What is GWT? 9
  9. 9. How it works Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200 Code against Java UI libraries 10
  10. 10. How it works Code against Java UI libraries The compiler translates Java source to highly-optimized JS 11
  11. 11. How it works Generates browser-compliant JS + HTML files Code against Java UI libraries The compiler translates Java source to highly-optimized JS 12
  12. 12. Key concepts Productivity for you Performance for your users
  13. 13. Custom JavaScript per browser
  14. 14. Demo: Getting started building GWT apps
  15. 15. GWT Advantages
  16. 16. GWT Advantages – Faster Ajax applications Faster-than-you-would-write-by-hand code •  The efficient code you wish you could write, but will get slammed by cross-browser issues for trying to run it E.g. public static void onModuleLoad(){ Button b = (new Button()).Button(); b.setText("Click me!"); } –  a variation for IE6 would be: public static final void onModuleLoad(){ final Button b = Button.$Button(new Button()); DOMImplIE6.$setInnerText(b.element, ”Click me!"); } 17
  17. 17. GWT Advantages – Faster Ajax applications Faster-than-you-would-write-by-hand code –  Another variation: function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, 'Click me!'); } 18
  18. 18. GWT Advantages – Faster Ajax applications Faster-than-you-would-write-by-hand code –  Another variation function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, ’Click me!'); } •  You could have written this by hand, but: –  You would have to change it for every other browser 19
  19. 19. GWT Advantages – Faster Ajax applications Deferred binding •  Why give the user more than they asked for? •  Users only download what they need to run your application •  Made possible through the technique of deferred binding 20
  20. 20. GWT Advantages – Faster Ajax applications Deferred binding •  A technique that lets the compiler make different bindings for your application at compile-time and choose the right one later •  The application bootstrap process selects the correct binding when loading your application 21
  21. 21. GWT Advantages – Faster Ajax applications Deferred binding illustrated 22
  22. 22. GWT Advantages – No more memory leaks Preventing memory leaks •  Provided you only code in GWT •  Chances are, you may need to write a small bit of JavaScript Native Interface (JSNI) or interoperate with JavaScript code •  In those cases, you can prevent memory leaks by being careful –  See Joel Webber’s article on “DOM events, memory leaks, and you”‫‏‬ –  http://code.google.com/p/google-web-toolkit/wiki/DomEventsAndMemoryLeaks •  In every other case, GWT has got your back 23
  23. 23. GWT Advantages – History support History support for your GWT applications •  GWT offers History support (RSH implementation)‫‏‬ E.g. tabPanel.add(new HTML("<h1>Page 1 Content</h1>"), " Page 1 "); tabPanel.add(new HTML("<h1>Page 2 Content</h1>"), " Page 2 "); tabPanel.addTabListener(new TabListener() { @Override public void onTabSelected(SourcesTabEvents sender, int tabIndex) { // Push an item onto the history stack History.newItem("page" + tabIndex); } History.addHistoryListener(new HistoryListener() { public void onHistoryChanged(String historyToken) { if(tokenIsValid(historyToken)) { tabPanel.selectTab(getTabIndex(historyToken)); } } }; 24
  24. 24. GWT Advantages – Faster development Faster development with IDEs and code support •  Code refactoring with IDE tools greatly improve developer speed! Google Plugin for Eclipse – Support both GWT and App Engine 25
  25. 25. GWT Advantages – Faster development Faster development with IDEs and code support •  You can also thoroughly test your Ajax application using a combination of: –  Standard JUnit TestCase –  GWTTestCase –  HTMLUnit tests –  Selenium tests 26
  26. 26. GWT Advantages – Debugging in bytecode Debugging with hosted mode •  Debugging in hosted mode allows for rapid testing •  Running against JS bytecode in memory 27
  27. 27. Summary of development advantages •  Optimized, high performance Ajax applications •  As a developer, you don’t have to worry about: –  Browser quirk headaches –  Memory leaks –  History support •  Code reuse through design patterns •  Faster development using IDEs and other Java tools •  Debugging in bytecode 28
  28. 28. GWT Tools and Widgets
  29. 29. Google Plugin for Eclipse http://code.google.com/eclipse/
  30. 30. Widget libraries •  GWT (http://code.google.com/webtoolkit/) •  Incubator (http://code.google.com/p/google-web-toolkit-incubator/) •  Smart GWT (http://code.google.com/p/smartgwt/) •  GWT-Ext (http://code.google.com/p/gwt-ext/) •  IT Mill Toolkit (http://www.itmill.com/) •  GWT mosaic (http://code.google.com/p/gwt-mosaic/) •  Ext GWT (http://extjs.com/products/gxt/) •  Advanced GWT Components (http://advanced-gwt.sourceforge.net/)
  31. 31. New features coming in GWT 2.0
  32. 32. GWT 2.0: More advantages •  Hosted mode becomes “development mode” •  Code splitting •  Client bundle •  Declarative UI in XML (UiBinder) •  … and much more 33
  33. 33. Code Splitting: Big scripts, big problems •  Problem: Initial download can be slooooow –  Some apps becomes bigger over time –  Parsing through initial script can cause UI to hang –  Current day browsers have a two connection limit •  Solution: Split up the script! 34
  34. 34. Developer-guided code splitting with runAsync public void onMySettingsLinkClicked() { Split point GWT.runAsync(new RunAsyncCallback() { Runs after a short (but improbable) delay public void onSuccess() { new MySettingsDialog().show(); } Runs if required script public void onFailure(Throwable ohNo) { cannot be downloaded // indicate that something went wrong, // usually a connectivity or server problem } 35
  35. 35. runAsync() Helps Apps Startup More Quickly 1500 1400 KB Size of Initial JavaScript Download (KB) 1125 1125 750 7x Decrease In Initial Download Size with runAsync() 375 200 KB 0 26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
  36. 36. ImageBundle revisited •  Each <img> tag is one HTTP roundtrip •  Bundle them up! •  11 HTTP roundtrips become 1 37
  37. 37. Declarative UIs with UiBinder •  Build your UI in declarative XML <!-- UserDashboard.ui.xml --> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:my='urn:import:com.my.app.widgets' > <g:HTMLPanel> <my:WeatherReport ui:field='weather'/> <my:Stocks ui:field='stocks'/> <my:CricketScores ui:field='scores' /> </g:HTMLPanel> </ui:UiBinder> 38
  38. 38. Who's using GWT?
  39. 39. Google Wave
  40. 40. Google Health
  41. 41. Mobile
  42. 42. Large GWT Apps - Lombardi Blueprint Google Web Toolkit
  43. 43. Large GWT Apps – ContactOffice Google Web Toolkit
  44. 44. Large GWT Apps - scenechronize Google Web Toolkit
  45. 45. Many more in the GWT App Gallery http://gwtgallery.appspot.com/ 46 Google Web Toolkit
  46. 46. Learn more code.google.com/webtoolkit
  47. 47. Muchas Gracias! Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×