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 2 Is Smarter Than You


Published on

Summary of GWT 2.0 features

Published in: Technology
  • Follow the link, new dating source: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here

GWT 2 Is Smarter Than You

  1. 1. GWT 2.0 is Smarter than You Robert “kebernet” Cooper Internap Network Services Inc. GWT in Practice (
  2. 2. GWT 1.x <ul><li>Desktop Style UI APIs
  3. 3. Smart Java -> JavaScript compilation </li><ul><li>Deferred Binding
  4. 4. Code pruning/staticification/inlining/etc </li></ul><li>Google Institutional Knowledge </li><ul><li>Cache Strategy (Out of the Box)
  5. 5. I18n Strategy (Out of the Box)
  6. 6. Image DL optimization (Out of the Box)
  7. 7. Two iterations of compression optimization </li></ul><li>Testing, Packaging, Client/Server modules </li></ul>
  8. 8. GWT 1.x: Progress <ul><li>Compiler, Compiler, Compiler </li><ul><li>Multi-threaded
  9. 9. SOYC
  10. 10. New Compression Naming (15% better!) </li></ul><li>Java 1.5 Language Features (Generics)
  11. 11. JavaScriptObject Overlays </li><ul><li>OMGWTFBBQ awesome sauce </li></ul><li>Handler rather than Listener (Easy Cleanup)
  12. 12. Jetty/Pluggable servers </li><ul><li>Only really used for GAE right now </li></ul></ul>
  13. 13. GWT 2.0 <ul><li>Out of Process Hosted Mode (OOPHM/DevMode) </li><ul><li>No more platform browser!
  14. 14. XB testing on one device
  15. 15. Yay Swing! (No more SWT nightmare) </li></ul><li>Compiled Stylesheets </li><ul><li>Takes ImageBundle to the next level
  16. 16. Browser-specific CSS options
  17. 17. Templates for Sprites, etc. </li></ul></ul>
  18. 18. GWT 2.0 <ul><li>UIBinder </li><ul><li>Declarative UI support
  19. 19. Integrates better with standard methodology
  20. 20. Can make UI binding easier </li></ul><li>Developer Guided Code Pointcuts </li><ul><li>runAsync allows for jit code loading inside an application </li></ul><li>LayoutPanel </li><ul><li>Absolutely positioned with CSS-driven size hinting (awesome sauce) </li></ul></ul>
  21. 21. OOPHM <ul><li>No more SWT Browser
  22. 22. Driven by NPAPI plugin for all browsers </li></ul>
  23. 23. Demo
  24. 24. Compiled Styesheets <ul><li>ImageResource replaces ImageBundle </li><ul><li>Inlining as data:// URLs, rather than windowed images
  25. 25. One HTTP Request! </li></ul><li>Reusable constant values </li><ul><li>Fix your colors once! </li></ul><li>CSS ClassName compilation </li><ul><li>Make your stuff smaller! </li></ul><li>Code-Compile works with Point Cuts </li></ul>
  26. 26. Compiled Stylesheets (Examples) MyModule.css: @def smallText 10px; @def baseText #00CCCC; .myLabelText { font-size: smallText; Color: baseText; } .myUnderline { Border-bottom: 1px solid baseText; }
  27. 27. Compiled Stylesheets (Examples) interface MyModuleCss extends CssResource { String myLabelText; @ClassName(“myUnderline”) //Optional (name) String myUnderlineClass; }
  28. 28. Compiled Stylesheets (Examples) /* @if (compile property) (match value)... */ @if user.agent msie msie8 { .halfOpaque { filter: alpha(opacity = 50); } } @ else { .halfOpaque { opacity: 0.5; } }
  29. 29. Compiled Stylesheets (Examples) @sprite .myEditButton { border: 1px outset silver; background: silver; Gwt-image: “edit-icon”; }
  30. 30. Compiled Resource <ul><li>Easy inclusion of CSS/Images/Etc into module
  31. 31. I18n of all resources based on naming
  32. 32. One-line compile-time optioning off all resources </li></ul>
  33. 33. Compiled Resources (Examples) interface MyResources extends ClientBundle { @Source(“MyModule.css”) @Strict Css myCss; // Depends on below! @Source(“MyEditIcon.png”) ImageResource editIcon; @Source(“SomeTextFile.txt”) //LOAD FROM WEB! ExternalTextResource configFile; }
  34. 34. Compiled Resources <ul><li>I18n select order: </li><ul><li>@Source() +”.[ln]_[cc]” (EN_us, EN_au, FR_ca)
  35. 35. @Source() +”.[ln]” (EN, FR)
  36. 36. @Source() </li></ul></ul>
  37. 37. UIBinder <ul><li>Declarative UIs </li><ul><li>Work from XHTML source
  38. 38. Easy process integration with designers </li></ul><li>New HTML DOM classes </li><ul><li>Easier to work with native DOM without user.ui.* classes </li></ul><li>Namespacing in XML allows for easy use of GWT widgets
  39. 39. (Better than Android :/)
  40. 40. Cleaner than using Widgets everywhere </li></ul>
  41. 41. UIBinder (Examples) MyWidget.xml: <!DOCTYPE ui:UiBinder SYSTEM &quot;;> <ui:UiBinder xmlns:ui='' xmlns:g=''> <g:HTMLPanel> <span ui:field=”label”/> <g:ListBox ui:field='listBox' visibleItemCount='1'/>. </g:HTMLPanel> </ui:UiBinder>
  42. 42. UIBinder (Examples) class MyWidget extends Widget { //Or UIObject interface Binder extends UIBinder<Widget, MyWidget>{} // forces compile generation; private static final Binder BINDER = GWT.create(Binder.class); @UiField SpanElement label; @UiField ListBox listBox;
  43. 43. UIBinder (Examples) (cont): public MyWidget(String label,String... options){ setElement(BINDER.createAndBindUI(this)); for(String option : options){ this.listBox.addItem(option); } this.label.setInnerText(label); } }
  44. 44. Developer Guided Pointcuts <ul><li>GWT 2.0 is the first compiler I have ever seen that does this!
  45. 45. Super Simple Syntax
  46. 46. All Memory References Remain in Place
  47. 47. Some Dev Planning Needed for Optimal Use </li></ul>
  48. 48. How Compiled GWT Works <ul><li>Standard Linker compiles into iframe with parent Window and Document objects injected
  49. 49. Anonymous classes follow Java spec of custom <init> based on final availability as constructor args and Pass-By-(Pointer-)Value states
  50. 50. Statics held on Prototypes : no global JavaScript context </li></ul>
  51. 51. How GWT 2.0 Pointcuts Work <ul><li>A call is made to GWT.runAsync(Runnable r)
  52. 52. GWT proxies the current pointer references into a callback JavaScript method
  53. 53. A separate JavaScript file is loaded into the current runtime
  54. 54. The callback method is invoked with the current pointer set
  55. 55. Subsequent calls simply invoke the callback method directly once the code is loaded. </li></ul>
  56. 56. GWT 2.0 Pointcuts Caveats <ul><li>Shared code compiles to the root project </li><ul><li>If PC(a) and PC(b) share core, it goes to root unless you package a PC(c) with shared code for a and b
  57. 57. Try and break code as cleanly as possible
  58. 58. Core libs still go to the root if where needed (doesn't save you core collections, etc) </li></ul><li>Can be slower if abused! </li><ul><li>Still better to get as much as possible on the first request
  59. 59. Caching strategies don't span pointcuts </li></ul></ul>
  60. 60. GWT 2.0 Layout Panel <ul><li>Problem: To many layouts with GWT Panels don't work the way you want them to. </li><ul><li>Desktop GUI panels default to 100% fill
  61. 61. Math between fixed pixel size panels and “rest” isn't cleanly supported by CSS and requires .reflow() handlers
  62. 62. Doesn't work well for DIP displays and new mobile awesome (Droid) </li></ul><li>Solution: New GWT panels support a “CSS Accellerated” flow system based on absolutes </li></ul>
  63. 63. GWT 2.0 LayoutPanel <ul><li>Classic Example: DockPanel </li><ul><li>Implemented with a 5 cell <table>
  64. 64. Sizes determined by internal elements, not the wrapper
  65. 65. Window resizes require rescaling of defaults </li></ul><li>New version: DockPanel </li><ul><li>Takes a layout unit default
  66. 66. Provides default fill for unsized elements
  67. 67. Control is in the panel, not the elements </li></ul></ul>
  68. 68. GWT 2.0 LayoutPanel (Examples) DockLayoutPanel p = new DockLayoutPanel(Unit.EM); p.addNorth(new HTML(&quot;header&quot;), 2); p.addSouth(new HTML(&quot;footer&quot;), 2); p.addWest(new HTML(&quot;navigation&quot;), 10); p.add(new HTML(content));
  69. 69. GWT 2.0 LayoutPanel (Examples) <ul><li>“Content” is now liquid fill
  70. 70. Changing EM to PCT doesn't alter the fill for “Content”
  71. 71. Internals use CSS to handle fill sizes, so OpenGL/PDF/Whatever rendering systems apply and doesn't require a separate eventing chain
  72. 72. FAST! </li><ul><li>Compare to Objective-J, etc </li></ul></ul>
  73. 73. GWT 2.0 Summary <ul><li>CSS is downloaded in second HTTP call, compiled to iteration
  74. 74. Compiled CSS iteration includes all images Base64, but Gziped if done right
  75. 75. Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
  76. 76. New Layout system is faster and requires less “onAttach()/onWindowResize()” hackery
  77. 77. New developer toolchain is easier to use </li></ul>
  78. 78. PostScript SpeedTracer <ul><li>SpeedTracer is a new UI to the GWT performance hooks from 1.7
  79. 79. Is Chrome specific </li><ul><li>May not reflect real-world timings in MSIE/FF/Opera because of Chrome's (awesome) V8 JavaScript engine </li></ul><li>Shouldn't replace DebugPanel from 1.7 </li></ul>