GWT Linkers target HTML5 Web Workers, Chrome Extensions, and moreMatt Mastracci (matthew@mastracci.com, @mmastrac)May 19, 2010

View live notes and ask questions about this session on Google Wavehttp://bit.ly/io2010-gwt4

Agenda

LinkersHow GWT loads codeWhat is a linker?ArtifactsLinkers and chainsSelectionScriptLinker and Web Worker linker

Demo: build a linker

Advanced linkersCode splittingDevelopment modeUpcoming features

What is a linker?

How GWT Loads Code

Four step process:Load the host pageLoad the selection scriptLoad the permutation scriptLoad any runAsync fragments (on-demand)

How GWT Loads Code (2)

How GWT Loads Code (3)

How GWT Loads Code (4)

How GWT Loads Code (5)

What is a Linker?

Shapes the output Javascript into different formsSame input code, different packagingMakes GWT more flexible!

What is a Linker?

Three output forms for your application:IFrameLinker (default)XSLinkerSingleScriptLinker

Each form is a linker!

Switching Linkers (2)

<add-linker name="linker-name" />

Switching Linkers (3)

Switching Linkers (4)

Artifacts

Q: Why not use Ant?

A: Metadata.

Artifacts

Products of the compilation processProvenance metadata: browser/language permutations

public abstract class Artifact<C extends Artifact<C>> implements Comparable<Artifact<?>>, Serializable {

Artifacts

Can be created by:scripts and styles specified in module XMLfiles in the module's public paththe compiler (script artifacts)generators (via GWT.create)

Gives you a channel to send messages to a linker from a generator (more on this later)

Artifact Sets

Artifacts passed from compiler and through linker chain in ArtifactSets

Sorted collection of artifactsType-aware find()

Artifact Types

Final output composed of EmittedArtifacts from the artifact setAn artifact that not a subclass of EmittedArtifact is not written to disk

But linkers can still find and act on them!

Artifact Flow

Output consists of emitted artifacts from the artifact set

Artifact Flow (2)

File in the public path are added directly

Artifact Flow (3)

Generators contribute binary and other artifactsCompiler contributes CompilationResults

Artifact Flow (4)

Linkers consume and contribute artifacts

Linkers

Linker Order

public enum LinkerOrder.Order { POST, PRE, PRIMARY; }

Order.PRIMARY

Responsible for the overall "shape" of the outputControls how the generated Javascript is packaged and runThere can be only one!

Examples:

IFrame and cross-site linkersFirefox extension linkerHTML5 Web Worker linkerChrome extension linker

Order.PRIMARY (2)

Caveats:Bootstrap sequence and global variables required by GWT change between versions"Soft Permutations" are coming soon, will require some changes to linkers

Order.PRE

Processes artifacts before the primary linker runsIdeal place to post-process generator artifacts and turn them into a concrete, emitted file

Example:GWT's RpcPolicyManifestLinker

Gathers RpcPolicyFileArtifact generated at compile time by ProxyCreatorSummarizes the policy files into one RPC policy manifest

Order.POST

Post-processing/decoration for generated primary artifactsRepackage, rename, transcode, augment

Example:Offline application manifest (demo)

SelectionScriptLinker

Most primary linkers will subclass SelectionScriptLinkerDoes the heavy lifting for permutations

Outputs:the selection script file: mymodule.nocache.js one strongly-named compilation result per permutation any per-compilation-result deferred fragments

Example: Web Worker Linker

LinkerOrder.PRIMARYSubclass of SelectionScriptLinkerWritten by the Speed Tracer teamhttp://code.google.com/p/speedtracer/

Load GWT module as an HTML5 Web Worker!

new Worker('module.nocache.js')

Example: Web Worker Linker

Linker: DedicatedWorkerLinker.java@LinkerOrder(Order.PRIMARY)public class DedicatedWorkerLinker extends SelectionScriptLinker { getDescription() { return "Dedicated Web Worker Linker"; } getCompilationExtension(logger, linkerContext) { return ".cache.js"; } getModulePrefix(logger, linkerContext, strongName) { return ""; } getModuleSuffix(logger, linkerContext) { return ""; } getSelectionScriptTemplate(logger, linkerContext) { return "DedicatedWorkerTemplate.js"; }}

Example: Web Worker Linker

Selection script: DedicatedWorkerTemplate.jsfunction __MODULE_FUNC__() { var strongName; try { // __PERMUTATIONS_BEGIN__ // Permutation logic // __PERMUTATIONS_END__ } catch (e) { // intentionally silent on property failure return; } importScripts(strongName + ".cache.js"); gwtOnLoad(undefined, '__MODULE_NAME__', '');}

__MODULE_FUNC__();

Demo

HTML Offline Manifest

Allows applications to run without an internet connection

Spec: http://www.w3.org/TR/offline-webapps/

<html manifest="my.manifest">

HTML Offline Manifest

my.manifest:

CACHE MANIFESTindex.htmlhelp.htmlstyle/default.cssimages/logo.pngimages/backgound.png

Demo

Advanced Linkers

Code Splitting

New in GWT 2.0Compiler splits fragments across GWT.runAsync() callsrunAsync() call delegated to a LoadingStrategy

Code Splitting

Default XhrLoadingStrategy will handle nearly all cases

Learn more:

com.google.gwt.core.client.impl.AsyncFragmentLoader

Development Mode

New in GWT 2.0Subtle differences for linking in development mode

Learn more:GWT source: Linker.link() vs. Linker.relink()User discussion group

Upcoming Linker Features

Coming soon:Shardable linkers-distributed linking for a distributed compileSoft permutations-permutations switched at runtime

Wrap Up

Wrap Up

Linkers package, analyze and decorate compiled scriptsMore structured approach to your outputEasy to write most linkersMakes GWT more than just a simple web application compiler

User discussion group:http://groups.google.com/group/Google-Web-Toolkit

View live notes and ask questions about this session on Google Wavehttp://bit.ly/io2010-gwt4