GWT@Jazoon08 - Part 1/6 - First Impressions Count

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites & 1 Group

    GWT@Jazoon08 - Part 1/6 - First Impressions Count - Presentation Transcript

        • # 1
        • first impressions count.
    1. checking in at a hotel ...
    2. choosing a puppy ...
    3. unboxing your iPhone ...
    4. unboxing your iPhone ...
    5. unboxing your iPhone ...
        • start fast.
        • “ Every web usability study I have
        • conducted since 1994 has shown
        • the same thing: Users beg us to
        • speed up page downloads.”
        • - Jakob Nielsen
        • human attention.
        • 0.1 seconds - perceived as instantaneous
        • 1 second - maintains the feeling that a single task is being carried out
        • 10 seconds - limit for keeping user’s attention
        • annoying.
        • slow apps are annoying
        • buggy apps are annoying
        • slow, buggy apps are not worth using
        • irrelevant.
        • source code elegance and maintainability
        • how much fun it is to develop
        • choice of programming language
        • GWT manifesto.
        • “ 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 .”
        • page load.
        • 1. download resources
        • 2. run JavaScript startup code
        • 3. render layout
    6.  
        • resource issues.
        • 50kb = 1200ms
        • 25kb = 950ms
        • 2 x 25kb = 2 x 950 ms
        • 50kb = 1900ms
      ms kb
        • startup issues.
        • lazy loading
        • lazy loading
        • lazy loading
        • lazy loading
        • lazy loading
        • rendering issues.
        • GWT
        • to the rescue
        • goal.
        • reduce # HTTP request by reducing file count
        • cache until the sun explodes
        • cross browser, cross platform at no cost
        • min usability compromises due to impl changes
        • extreme JavaScript code optimizations
        • compiler.
        • “ Seperate maintainability of the source code
        • from the effectiveness of the executable.”
        • - Bruce Johnson
        • compiler.
        • handwritten JavaScript has a conflict of interest
        • long, useful identifiers = bigger, slower apps
        • nice formatting = bigger, slower apps
        • comments = bigger, slower apps
        • zero-cost abstraction
        • compiler.
        • user feedback and usability testing are vital
        • you will never get it right the first N times
        • being able to iterate quickly is key
        • developers need tools with lots of leverage
        • compiler.
        • again, JavaScript has a conflict of interest
        • JavaScript = difficult to refactor
        • refactoring difficulty = maintenance worry
        • maintenance worry = the need to “get it right” the first time (framework-itis)
        • stop!
        • no more GWT introduction stuff
        • please...
        • so what makes
        • GWT so fast?
    7. is it magic?
        • deferred binding.
        • only pay
        • for what you see
    8.  
        • right code.
        • user agent
        • locale
        • debug vs. production
        • network characteristics
        • logging
        • debug id on html elements
        • anything that can make a difference for the user
        • modularize.
      DOMImplIE6 DOMImplMozilla DOMImplSafari DOMImpl … DOM
        • problems.
        • dynamic modules over HTTP suck
        • slow to start
        • awful network utilization
        • slow to execute
        • requires polymorphic dispatch at runtime
        • impossible to eliminate dead code
        • hard to maintain
        • “ DLL Hell” for the web
        • magic.
        • DOMImpl dom = GWT.create (DOMImpl.class);
        • generates permutations at compile time:
        • DOMImpl dom = new DOMImplMozilla();
        • DOMImpl dom = new DOMImplIE6();
        • DOMImpl dom = new DOMImplSafari();
        • DOMIMPL EXAMPLE
          • abstract class DOMImpl {
          • abstract void setInnerText(Element e, String s);
          • }
          • public class DOMImplMozilla extends DOMImpl {
          • native void setInnerText(Element e, String s)
          • /*-- { e.textContent = s; } --*/
          • }
          • public class DOMImplIE6 extends DOMImpl {
          • native void setInnerText(Element e, String s)
          • /*-- { e.innerText = s; } --*/
          • }
        • advantages.
        • right code
        • smaller code
        • better optimizations
        • fewer network roundtrips
        • metaprogramming
        • BETTER OPTIMIZATIONS
          • example
          • Label label = new Label(“test”);
          • output (not obfuscated)
          • Firefox e.textContent = s;
          • IE6 e.innerText = s;
        • deferred binding.
        • [ dependency injection ]
        • CREATE AN INTERFACE / BASE CLASS
          • public interface Animal {
          • String makeSound();
          • }
        • CREATE IMPLEMENTATIONS
          • public class Dog implements Animal {
          • public String makeSound() { return “bark”; }
          • }
          • public class Cat implements Animal {
          • public String makeSound() { return “miauuwww”; }
          • }
        • USE IT
          • Animal animal = GWT.create(Animal.class);
          • Window.alert(animal.makeSound());
        • DECLARE REBIND RULES
          • <replace-with class=“org.animal.Cat”>
          • <when-type-is class=“org.animals.Animal”/>
          • </replace-with>
        • DECLARE PROPERTY / ENUMERATED SET OF VALUES
          • <define-property name=“animal” values=“cat,dog”/>
        • DECLARE REBIND RULES
          • <replace-with class=“org.animal.Cat”>
          • <when-type-is class=“org.animals.Animal”/>
          • <when-property-is name=“animal” value=“cat”/>
          • </replace-with>
          • <replace-with class=“org.animal.Dog”>
          • <when-type-is class=“org.animals.Animal”/>
          • <when-property-is name=“animal” value=“dog”/>
          • </replace-with>
        • DECLARE REBIND RULES (other conditions)
          • <when-type-is class=“...”/><when-type-assignable class=“...”/>
          • <when-property-is name=“...” value=“...”/><any><all><none>
        • EXTEND PROPERTY VALUES (optional / inheritance)
          • <extend-property name=“animal” values=“fish”/>
        • SET DEFAULT PROPERTY VALUE (optional)
          • <set-property name=“animal” values=“dog”/>
        • SET PROPERTY VALUE AT RUNTIME (optional)
          • <property-provider name=“animal”><!CDATA[
          • return isCat(document.cookie) ? “cat” : “dog”/>
          • ]]></property-provider>
        • deferred binding.
        • [ generators ]
        • CREATE A NEW GENERATOR
          • public class CatGenerator extends Generator {
          • public String generate (TreeLogger logger, GeneratorContext ctx, String requestedClass) {
      • PrintWriter pw = ctx.tryCreate(logger, “test”, “ EvilCat ”);
      • pw.println(“package test;”);
      • pw.println(“public class EvilCat implements Animal {“);
      • pw.println(“public String makeSound() { return “Gshhh”; }”);
      • pw.println(“}”);
      • return “test.EvilCat”;
          • }
        • DECLARE REBIND RULES
          • <generate-with class=“org.animals.CatGenerator”>
          • <when-type-is class=“org.animals.Animal”/>
          • </generate-with>
        • DECLARE REBIND RULES (other conditions)
          • <when-type-is class=“...”/>
          • <when-type-assignable class=“...”/>
          • <when-property-is name=“...” value=“...”/>
          • <any>
          • <all>
          • <none>
        • GWT REFLECTION VS JAVA REFLECTION
          • TypeOracle oracle = generatorContext.getTypeOracle();
        • deferred binding.
        • [ demystified ]
        • runtime.
        • request generated selection script .nocache.js
        • property providers run to decide prop values
        • property values imply a permutation:
        • map([‘de, ‘ie6’, …], ‘blabla.cache.html’)
        • map([‘nl’, ‘ie6’, …], ‘ababab.cache.html’)
        • map([‘nl’, ‘safari’, …], ‘xyxyxy.cache.html’)
        • strongName = answers[computePropValue(‘locale’)]
        • [computePropValue(‘’user.agent)]
        • permutations.
        • .cache.html allows for perfect caching
        • cache until the sun explodes
        • never fail to get the newest when updated
        • never ask if it hasn’t been updated
        • not even an If-Modified-Since check
        • disk space is cheap
        • bandwith and user attention is expensive
        • deferred binding.
        • [ use case: form generation ]
        • GOAL
        • less boilerplate code
        • no more listener overhead / memory leaks
        • alternative for traditional MVC + GWTX (PropertyChangeListener)
        • DATA OBJECT + FORM ANNOTATIONS
        • @form.service (value=“com.WishService”)
        • public class Wish implements FormDataObject {
        • @form.field (length = 50, label = “name”, order = 2, required = true)
        • private String name;
        • @form.field (length = 200, label = “description”, order = 1, required = true)
        • private String description;
        • }
        • BINDING
        • <generate-with class=“ com.FormGenerator ”>
        • <when-type-assignable class=“ com.FormDataObject ”/>
        • </generate-with>
        • USAGE
        • public void onModuleLoad() {
        • Form wishForm = GWT.create(Wish.class);
        • RootPanel.get().add(wishForm);
        • }
        • deferred binding.
        • [ pages versus modules ]
    9. SEARCH 100% SEARCH EDIT 95% ACCOUNT 5%
        • extreme graphics.
        • problems.
        • DOM operations are slow
        • CANVAS bails out at 1000 - 10000 DIV moves
        • JavaScript VM no match for JVM
        • solutions.
        • display lists (OpenGL concept)
        • recorded + compiled sequence of calls
        • replay sequence like a macro
        • fastest method to draw static data
        • compiler can do performance optimizations
        • cache results as bitmap where possible
        • solutions.
        • dual compile
        • measure average client side threshold
        • if too slow render on server
        •  bare HTML (StringBuffer) / Java2D
        • SVG / VML / flash
        • solutions.
        • small enhancements
        • replace DOM.setStyleAttribute with CSS files
        • don’t use widgets when all you need is HTML
        • avoid many listeners
        • single listener on root -> DOM.sinkEvents
        • MAARTENVOLDERS. com
        • PASSIONATE ABOUT PEOPLE AND TECHNOLOGY

    Maarten VoldersMaarten Volders, 7 months ago

    custom

    1280 views, 2 favs, 0 embeds more stats

    A presentation about GWT which I presentaed at Jazo more

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 1280
      • 1280 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 39
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories

    Groups / Events