Devfest09 Cschalk Gwt

1,697 views

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,697
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×