Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GWT is Smarter Than You


Published on

CodeMash 2012 version of my intro to GWT talk.

Published in: Technology
  • Be the first to comment

GWT is Smarter Than You

  1. 1. GWT is Smarter Than You Robert Cooper Code Wrangler, REACH Heath CodeMash 2012
  2. 2. Introduction <ul><li>Who is this guy? </li></ul>
  3. 3. <ul><li>I wrote this... </li></ul>
  4. 4. <ul><li>I work here… </li></ul>
  5. 5. <ul><li>I also do this stuff… </li></ul>
  6. 6. Jurassic Web <ul><li>I’ve been doing web stuff since the time before time… </li></ul>
  7. 7. Remember DCOM? Yeah. <ul><li>I have been working mostly in Java since the last millennium… </li></ul>
  8. 8. <ul><li>Then at JavaOne 2k6, I had my “Road to Damascus” experience… </li></ul>
  9. 9. What’s it all about, Alfie? <ul><li>It is my goal to convince you that </li></ul><ul><li>if you aren’t using GWT to build AJAX apps, </li></ul><ul><li>you’re doing it wrong. </li></ul>(Probably)
  10. 10.
  11. 11. <ul><li>Speed Advisory… </li></ul><ul><li>Hit me up later. </li></ul>Life moves pretty fast. If you don't stop and look around once in a while, you could miss it.
  12. 12. Who are you? <ul><li>Taking your temperature… </li></ul><ul><li>Who are you? </li></ul>Orally.
  13. 13. Elevator Pitch <ul><li>JavaScript mostly sucks </li></ul>
  14. 14. Elevator Pitch <ul><li>JavaScript mostly sucks </li></ul>
  15. 15. Elevator Pitch <ul><li>JavaScript mostly sucks </li></ul><ul><li>Gets out of hand quickly </li></ul><ul><li>Part of a larger ecosystem to which it has no relationships </li></ul><ul><li>JavaScript libraries are a pain to use and in too many cases (read: mobile) cause more harm than good. </li></ul>
  16. 16. Why You Care <ul><li>I stole this next block of stuff… </li></ul><ul><li>(Ido Green is awesome) </li></ul>
  17. 17. Mobile is teh hotness <ul><li>You will lose 13% of your users after 2sec! and 25% of your users after 4sec of load time. </li></ul><ul><li>Whatever. </li></ul><ul><li>We have all seen versions of </li></ul><ul><li>these stats since ’97. </li></ul>
  18. 18. Remember 8 sec rule on 56Kbd?
  19. 19. Speed Matters <ul><li> </li></ul>
  20. 20. I stole this slide, too.
  21. 21. Still stealing slides…
  22. 22. Why are you here? <ul><li>Get all that for free? </li></ul>
  23. 23. GWT History <ul><li>Introduced in 2006 (you knew that) </li></ul><ul><li>Cross Compiles Java to JavaScript (you probably knew that) </li></ul><ul><li>Works in all browsers (duh) </li></ul><ul><li>Used for lots of recent Google projects (Flights, Android Market, Wave (rip)) </li></ul><ul><li>Good bit of third party adoption (Lombardi/IBM, OpenNMS, Seesmic, etc) </li></ul>)
  24. 24. Stuff you may not know… <ul><li>On Day 0, GWT had: </li></ul><ul><ul><li>Multiple, targeted builds for User-Agent (UA) and i18n and more (including custom divisions) </li></ul></ul><ul><ul><li>A great caching strategy to let everything in your app have perma-cache settings </li></ul></ul><ul><ul><li>Automagical spritemaps of all the images in your application (read: 1 HTTP request for ImageBundles) </li></ul></ul><ul><ul><li>Compiler optimization (not just obfuscation) </li></ul></ul><ul><ul><li>Testing, Packaging, Modules </li></ul></ul>( )
  25. 25. Other pains <ul><li>Timestamp localization </li></ul><ul><li>XSS security issues </li></ul><ul><li>Complex X-Browser eventing (Bubble vs Sink) </li></ul><ul><li>Server messaging </li></ul><ul><li>Referential object serialization </li></ul><ul><li>Oh wait. GWT 1.0 took care of all of that too. </li></ul>(Confidential)
  26. 26. <ul><li>I can do that myself! </li></ul><ul><li>Can you really? </li></ul>( )
  27. 27. <ul><li>Monolithic compilation is an idea whose time has come again. </li></ul>(Confidential)
  28. 28. More than Cross Compilation <ul><li>Deferred Binding is the core to how GWT works </li></ul><ul><li>Handles DOM and Eventing implementations for the different browsers </li></ul><ul><li>Handles i18n issues </li></ul><ul><li>Is why building the final deployment version takes FOR-EVER. </li></ul>
  29. 29. Module.gwt.xml <ul><li>Yeah, I know. </li></ul><ul><li>It is Java so there HAS to be an XML file. </li></ul>( )
  30. 30. <ul><li>And code generation… </li></ul>
  31. 31. Look sir, Buzzwords! <ul><li>Dependency Injection! </li></ul><ul><li>Meta-Programming! </li></ul>
  32. 32. Deployable Compiles Are Slow <ul><li>Many versions! </li></ul><ul><li>Lots of time. </li></ul>SSDs and Quad i7s recommended.
  33. 33. Caches PERFECTLY <ul><li>Each build spits out a bunch of MD5 hashed filenames </li></ul><ul><li>File names based on the actual source that generated the file (AFTER UA/i18n/your stuff) </li></ul><ul><li>All of these files can be cached permanently! </li></ul><ul><li>1 “.nocache.js” bootstrap that picks the right version </li></ul><ul><li>This file can be in-lined with standard JSP @includes </li></ul>
  34. 34. Optimized! <ul><li>Unreachable code is pruned </li></ul><ul><li>Staticification </li></ul><ul><ul><li>Non-polymorphic calls are converted to “static” (global scope functions) </li></ul></ul><ul><ul><li>myCircle.computeArea() becomes computeArea(_this) </li></ul></ul><ul><ul><li>WAY, WAY faster. </li></ul></ul><ul><li>Method inlining </li></ul><ul><ul><li>Getters/setters melt away </li></ul></ul>
  35. 35.
  36. 36. Progress <ul><li>1.x line improvements </li></ul><ul><ul><li>Multi-threaded compiler </li></ul></ul><ul><ul><li>SOYC </li></ul></ul><ul><ul><li>New compress-able naming (GZIP-targeted) </li></ul></ul><ul><ul><li>Java 1.5 language features (Generics) </li></ul></ul><ul><ul><li>JavaScript Overlays (more on this next) </li></ul></ul><ul><ul><li>Handlers rather than Listeners </li></ul></ul><ul><ul><li>Pluggable dev servers </li></ul></ul>
  37. 37. JavaScriptOverlays <ul><li>Allows you to extend JavaScriptObject to work JS/JSON-P data </li></ul><ul><li>Code like this: </li></ul><ul><li>Becomes: </li></ul><ul><li>It HAS to be final because of the staticification logic. </li></ul><ul><li>That means no interface implementation for JSOs! </li></ul>
  38. 38. Could be better… <ul><li>Lots of things still sucked in 1.x </li></ul><ul><ul><li>SWT based “Development Shell” Limited you to 1 browser on a platform </li></ul></ul><ul><ul><li>No salvation from CSS Hell (nee, MSIE6) </li></ul></ul><ul><ul><li>Hard to fit into the established dev process, assuming you have a real graphic design staff </li></ul></ul><ul><ul><li>The whole block of code for an app came down at once (made doing #! type code hard) </li></ul></ul>
  39. 39. Listeners Improved <ul><li>addXHandler() returns a HandlerRegistration addValueChangeHandler( ValueChangeHanlder<String>) </li></ul><ul><li>HandlerRegistration has .removeHandler() </li></ul><ul><li>This is a lot easier to clean up than a bunch of add/removeListener() calls </li></ul><ul><ul><li>Store all your HandlerRegistrations for a state in a collection </li></ul></ul><ul><ul><li>Iterate and .removeHandler() on each of them </li></ul></ul><ul><ul><li>No need to maintain target/listener mappings </li></ul></ul>
  40. 40. Core API Improved <ul><li>Core widgets got a cleanup: </li></ul><ul><ul><li>CheckBox implements HasValue<Boolean> </li></ul></ul><ul><ul><li>TextBox implements HasValue<String> </li></ul></ul><ul><ul><li>etc </li></ul></ul><ul><li>IsWidget interface </li></ul><ul><ul><li>More flexible that extending widget </li></ul></ul><ul><ul><li>Makes using non-GWT UI easier </li></ul></ul><ul><li>XXLayoutPanel </li></ul><ul><ul><li>Improved, and CSS-accelerated layouts </li></ul></ul>
  41. 41. Heads up <ul><li>If you haven’t played with GWT in a while, now is the time to start paying attention. </li></ul>
  42. 42. GWT 2.x features <ul><li>OOPHM (or OOMPH, or DevMode, not GWTShell) </li></ul><ul><li>Image in-lining (NOT spritesheets) </li></ul><ul><li>Compiled CSS (yes, better than LESS-CSS or SASS) </li></ul><ul><li>Developer guided point cuts </li></ul><ul><li>UIBinder </li></ul><ul><li>“ MVP - Framework” </li></ul>
  43. 43. OOPHM <ul><li>Out of Process Hosted Mode (or DevMode) </li></ul>
  44. 44. One ring to rule them all <ul><li>I’m not a Windows fan, but... </li></ul><ul><li>Safari, FF, Chrome, MSIE(x), Opera </li></ul>
  45. 45. <ul><li>“ Super Draft Mode is Coming…” </li></ul>
  46. 46. I like the DevMode tooling I fear change.
  47. 47. <ul><li>CSS Best Practices </li></ul>
  48. 48. Images <ul><li>You think getting your designers to make spritesheets makes you tough. </li></ul>
  49. 49. Your designer went to art school
  50. 50. <ul><li>How many do image in-lining in their CSS? </li></ul><ul><li>Bring down all your incidental images in the same HTTP Request as your CSS! </li></ul>
  51. 51. <ul><li>GWT 2.x CssResource and ImageResource </li></ul><ul><li>Becomes: </li></ul><ul><li>(New name matches GZIP optimized naming) </li></ul>
  52. 52. <ul><li>Next, You need a ClientBundle… </li></ul><ul><li>And a CssResource… </li></ul><ul><li>And to inject it… </li></ul>
  53. 53. <ul><li>Wait, what just happened? </li></ul><ul><li>Now, your optimized CSS and all your incidental art assets are compiled into the JavaScript, GZIPped, and downloaded in the single, initial HTTP Request for your app… </li></ul><ul><li>One (1) Request, and your app is done loading . </li></ul>
  54. 54. <ul><li>How much would you pay for all this? </li></ul><ul><li>But wait, there’s more! </li></ul>
  55. 55. <ul><li>@def – Define those repeated bits </li></ul><ul><li>Now include these in your styles… </li></ul>
  56. 56. <ul><li>@if/@elif/@else – Do conditional CSS based on the compile time options </li></ul><ul><li>Works for user.agent, language, even your own custom compile options </li></ul>
  57. 57. <ul><li>@url – Lets you embed arbitrary data for all kinds of stuff </li></ul><ul><li>ClientBundle: </li></ul><ul><li>CSS File: </li></ul><ul><li>Great for Fonts, Cursors, etc… </li></ul>
  58. 58. <ul><li>@noflip – Surpresses flipping on CSS directions for automagic Right-Left i18n flipping (did I mention automagic RTL/LTR language support?) </li></ul>
  59. 59.
  60. 60. <ul><li>Maybe that is all too much to download… </li></ul><ul><li>Did you try runAsync()? </li></ul>
  61. 61. <ul><li>You want to be a good web citizen. </li></ul><ul><li>You want your app to support deep links </li></ul><ul><li>(without hash-bangs, plzkthxbai) </li></ul><ul><li>but you don’t need the whole app to render, say, one “product page” or “blog post”. </li></ul>
  62. 62. <ul><li>GWT.runAsync() allows for “developer guided point-cuts” in your compiled output. </li></ul>
  63. 63.
  64. 64. Eliminate initial code download <ul><li>All the code *only* reachable from inside the RunAsyncCallback.onSuccess() method is compiled into another set of script files </li></ul><ul><li>This can include CSS/Image/DataResources </li></ul><ul><li>It is only loaded *once* and cached properly </li></ul><ul><li>Shared code between any two callbacks OR code reachable from onModuleLoad() still makes it into the base script (core CSS, java.util.ArrayList, GWT’s UIObject, etc) </li></ul>
  65. 65. Pay attention <ul><li>Not a silver-bullet, BUT… </li></ul><ul><li>Way better than JavaScript library dependency semantics </li></ul><ul><li>Still includes the UA/i18n/Custom compile optimizations </li></ul><ul><li>For big* code bases, truly a must-have </li></ul><ul><li>Look at SOYC to see what you can tweak </li></ul>*for EXTREMELY large values of “big”
  66. 66. 99 problems, but process ain’t 1 <ul><li>OK, but what about all that SWING widgeting? I gotta work with “HTML+ designers”? </li></ul><ul><li>Use UIBinder. </li></ul>
  67. 67. UIBinder <ul><li>Lets you use XHTML files for widget templates (OR do declarative mixing with GWT widgets) </li></ul><ul><li>Toss whatever HTML you need to in there. </li></ul>
  68. 68. Two ways to do it… <ul><li>Work with the DOM directly (sucks) </li></ul>
  69. 69. Two ways to do it… <ul><li>Create GWT Widgets (rules) </li></ul>
  70. 70. Moar speed! <ul><li>Using GWT widgets lets you work with the new CSS-engine accelerated LayoutPanel stuff, and that is awesomesauce. </li></ul>
  71. 71. Framework <ul><li>GWT 1.x was decidedly “non-frameworky” </li></ul><ul><ul><li>It was a UITK at best </li></ul></ul><ul><ul><li>It was a fancy compiler/DI/MP system at worst (not that that was a bad thing) </li></ul></ul><ul><ul><li>GIN/Guice did a lot to improve this </li></ul></ul><ul><li>GWT 2.x is slightly more opinionated </li></ul><ul><ul><li>Model – View – Presenter framework </li></ul></ul><ul><ul><li>(NOT MVC) </li></ul></ul><ul><ul><li>Not a fan </li></ul></ul>
  72. 72. Places <ul><li>GWT 1.x included a “History” system </li></ul><ul><ul><li>This lets you deal with anchor slugs (“#somethings”) in the URL to allow the back button to work </li></ul></ul><ul><li>GWT 2.x encourages you to use these as “Places” (standard slugs rather than roll-your-own) </li></ul>
  73. 73. Boilerplate… Ugh… <ul><li>The “Places” System is made up of four main components </li></ul><ul><li>The PlaceHistoryMapper This is pretty much just a config file </li></ul><ul><li>The ActivityMapper This returns an Activity for a Place </li></ul><ul><li>Activities Mini-Apps that are mapped to a render area </li></ul><ul><li>HistoryObserver A Place-aware HistoryTokenListener replacement </li></ul>
  74. 74. <ul><li>PlaceHistoryMapper (gets generated) </li></ul><ul><li>The tokenizers just turn an anchor slug to a string. </li></ul>
  75. 75. <ul><li>ActivityMapper return an activity for a Place </li></ul><ul><li>.getActivity(Place,Place) here is just a big if structure, but you can do better. </li></ul>
  76. 76. <ul><li>Activities have a .start() method that takes the UI parent and a reference to the app-global EventBus. </li></ul>
  77. 77. <ul><li>Using HistoryObserver to do transitions: </li></ul>
  78. 78. <ul><li>These examples from m-gwt: </li></ul><ul><li> </li></ul><ul><li>You should use this, and maybe GWT-PhoneGap: </li></ul><ul><li> </li></ul>
  79. 79. M-GWT on Phones
  80. 80. Android Tablet
  81. 81. iPad
  82. 82. My United States of Whatever
  83. 83. Enterprise-y! <ul><li>Spring Roo integration gives you Rails-like autogen of basic app scaffolding </li></ul>Geordi not included.
  84. 84. MOAR SPEED <ul><li>SpeedTracer </li></ul><ul><li>(Even if you don’t use GWT, you should use this) </li></ul>
  85. 85. … and Enterprise-y! <ul><li>If you are using </li></ul><ul><li>Spring Server Tools/Roo or Google App Engine, </li></ul><ul><li>you can drill from the browser </li></ul><ul><li>into the the calls on the server </li></ul><ul><li>and see why your server is slow, too! </li></ul>
  86. 86. Eat it, FireBug <ul><li>SpeedTracer </li></ul><ul><li>+ </li></ul><ul><li>WebKit tools </li></ul><ul><li>= </li></ul><ul><li>Best Dev Tools Available </li></ul>
  87. 87. Drawbacks <ul><li>SpeedTracer only works in Chrome. </li></ul><ul><li>Finding exactly what is slow in Brand X browser? </li></ul><ul><li>YMMV. </li></ul>
  88. 88. Coming Soon <ul><li>SourceMaps </li></ul><ul><ul><li>Developed by Google and Mozilla </li></ul></ul><ul><ul><li>Maps compiled JavaScript to original source files </li></ul></ul><ul><ul><li>CoffeeScript, Dart, GWT, Closure </li></ul></ul><ul><ul><li>Makes “Super Draft Mode” less WTF </li></ul></ul><ul><li>Unified Compiler Infrastructure </li></ul><ul><ul><li>Google is getting Dart, GWT, and Closure on the same toolchain </li></ul></ul><ul><ul><li>Future Dart backends for GWT code </li></ul></ul>I study nuclear science. I love my classes.
  89. 89. Still more to explore <ul><li>Google Tools for Eclipse </li></ul><ul><ul><li>Instantiations purchase brought in all kinds of awesome </li></ul></ul><ul><ul><li>I still hate the plugin </li></ul></ul><ul><li>New Widgets </li></ul><ul><li>Better Browser Support </li></ul><ul><li>HTML5 Stuff </li></ul><ul><li>PlayN (formerly ForPlay) (This is totally awesome, build games for HTML5, Flash, Java, and Android with 1 codebase) </li></ul><ul><li>Third Party stuff (SmartGWT, EXT-GWT) </li></ul>
  90. 90. Summary <ul><li>GWT at launch was technically impressive, but still seemed small. </li></ul><ul><li>GWT is not small anymore. </li></ul><ul><li>GWT is filled with Google institutional knowledge. </li></ul><ul><li>GWT does all best practices. </li></ul><ul><li>GWT can build better JavaScript than you. </li></ul><ul><li>GWT future-proofs your application. </li></ul>
  91. 91. Links <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>