CiklumJavaSat15112011:Andrew Mormysh-GWT features overview
Upcoming SlideShare
Loading in...5
×
 

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

on

  • 746 views

 

Statistics

Views

Total Views
746
Views on SlideShare
746
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview CiklumJavaSat15112011:Andrew Mormysh-GWT features overview Presentation Transcript

  • GWT Features Overview
    Andrey Mormysh
    Java Developer
    a.mormysh@gmail.com
    October 15, 2011
    www.ExigenServices.com
  • GWT
    Google Web Toolkit
  • GWT/ˈɡwɪt /
    Google Web Toolkit
    View slide
  • GWT-based projects
    View slide
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
    • Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
    • Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
    • Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
    • Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
    • Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
    • Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
    • Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
    • Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
    • Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
    • Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commercials
  • GWT-based projects
    • Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
    • Odnoklassniki (http://www.odnoklassniki.ru) - social network
    • Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
    • Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
    • Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
    • Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commercials
    • Whirled (http://www.whirled.com/) -social virtual world website which includes multi-player games
    • etc…
  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • Features
    Cross-browser
    Object-oriented programming
    Dev-mode
    GUI debugging
    Wigets and declarative UI
    Client Bundle
    Simple localization
    Code optimization
    Code splitting
    RPC, JSON/XML
    UI Designer
    HTML5

  • ?
  • JSNI
    Java Script Native Interface
    Access JS code from Java code and vice versa
  • JSNI
    Java Script Native Interface
    Access JS code from Java code and vice versa
    Wrap your own or third-party JS-widgets with JSNI:
    • Google Maps
    • Flash objects
    • etc.
  • JSNI
    Java Script Native Interface
    Access JS code from Java code and vice versa
    Wrap your own or third-party JS-widgets with JSNI:
    • Google Maps
    • Flash objects
    • etc.
    Example 1:
    public static native void alert(String msg)
    /*-{
    $wnd.alert(msg);
    }-*/;
  • JSNI
    Example 2:
    package mypackage;
    public MyClass{
    public static int foo()
    { ... }   
    public static native void exportStaticMethod()
    /*-{
    $wnd.foo = $entry(@mypackage.MyClass::foo());
    }-*/;
    }
  • Deferred binding
    It is a pluggable compile-time type substitution and code generation mechanism.
  • Deferred binding
    It is a pluggable compile-time type substitution and code generation mechanism.
    Example:
    Static binding
    Foo f = new Foo();
     
    Dynamic Binding
    Class c = Class.forName(fooImplName);
    Foo f = (Foo) c.newInstance();
     
    Deferred Binding
    Foo f = (Foo) GWT.create(Foo.class);
  • Deferred binding
    Goal - send exactly the right code to client, depending on
    • User’s browser
    • Locale
    • Mode (debug / production)
    • Network characteristics
    • etc.
  • Deferred binding
    Goal - send exactly the right code to client, depending on
    • User’s browser
    • Locale
    • Mode (debug / production)
    • Network characteristics
    • etc.
    Facilities
    • Make fewer Http Requests
    • Eliminate dead code
    • Avoid polymorphic dispatch
    • Avoid synchronous XHR
    • Avoid spaghetti code (if-s in JS-code)
    • Try to use only inline code “elem.innerText = str”
    • etc.
  • Permutations
  • Permutations
    Example:
    Input:
    DOMImpl dom = GWT.create(DOMImpl.class);
  • Permutations
    Example:
    Input:
    DOMImpl dom = GWT.create(DOMImpl.class);
    Implementations:
    DOMImplInternetExplorer
    DOMImplMozilla
    DOMImplOpera
      Property:
    user_agent = “IE”
  • Permutations
    Example:
    Input:
    DOMImpl dom = GWT.create(DOMImpl.class);
    Implementations:
    DOMImplInternetExplorer
    DOMImplMozilla
    DOMImplOpera
      Property:
    user_agent = “IE”
    Output:
    DOM dom = new DOMImplInternetExplorer();
  • Permutations
    Example:
  • Perfect Caching
  • Perfect Caching
    Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.
     
    <module>.nocache.js - small
    <md5>.cache.js – big
  • Perfect Caching
    Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.
     
    <module>.nocache.js - small
    <md5>.cache.js – big
     
    Apache HTTP server .htaccess configuration:
     
    <Files *.nocache.*>
    ExpiresActive on
    ExpiresDefault "now"
    Header merge Cache-Control "public, max-age=0, must-revalidate"
    </Files>
    <Files *.cache.*>
    ExpiresActive on
    ExpiresDefault "now plus 1 year"
    </Files>
  • Monilithic Compilation
  • Monilithic Compilation
    “The fastest code that which does not run”,
    --Joel Webber, GWT co-creator
  • Monilithic Compilation
    “The fastest code that which does not run”,
    --Joel Webber, GWT co-creator
    Example:
    Shape shape = new Square(4);
    1) int area = shape.getArea();
  • Monilithic Compilation
    “The fastest code that which does not run”,
    --Joel Webber, GWT co-creator
    Example:
    Shape shape = new Square(4);
    1) int area = shape.getArea();
    2) int area = Shape_getArea(shape);
  • Monilithic Compilation
    “The fastest code that which does not run”,
    --Joel Webber, GWT co-creator
    Example:
    Shape shape = new Square(4);
    1) int area = shape.getArea();
    2) int area = Shape_getArea(shape);
    3) int area = shape.len * shape.len;
  • Monilithic Compilation
    “The fastest code that which does not run”,
    --Joel Webber, GWT co-creator
    Example:
    Shape shape = new Square(4);
    1) int area = shape.getArea();
    2) int area = Shape_getArea(shape);
    3) int area = shape.len * shape.len;
    4) int area = 16;
  • Image Bundling
  • Image Bundling
    Problem:
    HTTP 1.1 limit: 2 outgoing connections per domain/port
  • Image Bundling
    Problem:
    HTTP 1.1 limit: 2 outgoing connections per domain/port
    HTTP request has to be sent to the server for each resource (e.g. image)
  • Image Bundling
    Problem:
    HTTP 1.1 limit: 2 outgoing connections per domain/port
    HTTP request has to be sent to the server for each resource (e.g. image)
    Request for status 304 ("Not Modified")
  • Image Bundling
    Solution:
    interface Resources extends ClientBundle {
    @Source("logo.png")
    ImageResource logo();
     
    @Source("arrow.png")
    @ImageOptions(flipRtl = true)
    ImageResource pointer();
    }
     
  • Image Bundling
    Solution:
    interface Resources extends ClientBundle {
    @Source("logo.png")
    ImageResource logo();
     
    @Source("arrow.png")
    @ImageOptions(flipRtl = true)
    ImageResource pointer();
    }
     
    Resources resources = GWT.create(Resources.class);
    Image img = new Image(resources.logo());
  • Code Splitting
    public class Hello implements EntryPoint {
    public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
    public void onClick(ClickEvent event) {
    Window.alert("Hello, AJAX");
    }
    });
     
    RootPanel.get().add(b);
    }
    }
  • Code Splitting
    public class Hello implements EntryPoint {
    public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
    public void onClick(ClickEvent event) {
    Window.alert("Hello, AJAX");
    }
    });
     
    RootPanel.get().add(b);
    }
    }
  • Code Splitting
    public class Hello implements EntryPoint {
    public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
    public void onClick(ClickEvent event) {
    GWT.runAsync(new RunAsyncCallback() {
    public void onFailure(Throwable caught) {
    Window.alert("Code download failed");
    }
    public void onSuccess() {
    Window.alert("Hello, AJAX");
    }
    });
    }
    });
    RootPanel.get().add(b);
    }
    }
  • HTML5 Features Support
  • HTML5 Features Support
    • Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents
  • HTML5 Features Support
    • Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents
    • Canvas – Add visualizations using Canvas
    • Audio – Use Audio widgets
    • Video – Use Video widgets
  • HTML5 Features support
  • To be continued…
    • Client-server communication (RPC, JSON/XML)
    • MVP framework (Activities and Places)
    • DevMode (code-test-debug cycle)
    • Modules (properties, rules)
    • Generators (meta-programming)
    • UiBinder
    • Cell Widgets (CellTable, CellTree, CellBrowser)
    http://www.exigenservices.by/webinars