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