Dart Developer Summit Highlights – Day 2

Hi again Dartisans. Here’s the second post I promised you. For those of you who haven’t seen the first post, I made a summary of the Dart Developer Summit 2015.

Keynote: Ads

Ferhat Buyukkokten and Ted Sander highlight how Google’s Ads team uses Dart to build their web applications. This is a good demonstration of how Dart can interoperate with other existing systems. It’s also a nice confirmation that Google is dedicated to Dart for its new projects.

  • Updating a CRM system
    • Change the back-end in flight
  • Before Dart, there was frustration
    • Changes were slow and hard to implement
  • They really didn’t want to try languages without types at Google
  • Fast, even as JS
    • Dart is just as fast as handwritten js for several benchmarks
    • Sometimes faster and sometimes slower, but not by a lot
  • Batteries included
    • Great tooling
    • Package manager
  • Internal/External libraries were easy to use
  • dart-mockito is their mocking library – it just works
  • Large-scale applications with good performances
    • observatory helped diagnosing where the pain points were
    • low and stable memory usage
  • Communicate through different apps using a JavaScript event bus
    • AdWords is built with multiple apps – GWT, Dart, etc. and they talk to each other
  • Divide and conquer
    • Even if you could start of scratch, it’s still a good idea to keep your application in modules
  • Google Ads are committed to Dartcommitment


Mathieu Lorber and François Saulnier from Instill.io explain how they managed to build their video creation web application with Dart as their front-end technology. Yet another good example of how Dart can be used with other technologies (in this case Java) for the back-end. They also explain in details how they transitioned from Angular.Dart to Polymer during their development. It’s interesting to see how they did it, because I personally did the opposite (moving from Polymer to Angular).

  • Why Dart?
    • All about productivity. They had a debate on whether they should start with technologies they know, after a long discussion they agreed that Dart presented all the advantages of the technologies they knew, and they decided to start with Dart.
  • Architecture
    • Dart front-end
    • Java back-end
      • CQRS + event-sourcing
    • Movie rendering layer
    • Publishing layer
    • Message queuearchitecture
  • The Java back-end can be painful when coming back from Dart
  • They use Angular.Dart for their application framework
    • It was hard in Angular.Dart 1.0 to create small isolated components
    • It was hard to programmatically add a component
  • They now use Polymer for their components instead of Angular
    • They can now reuse small components
    • They now use Polymer elements as DOM elements in their Angular application
    • Angular controllers are now stateful Polymer components
    • Routing is now a Polymer component too
  • What they miss from Angular.Dart
    • Injection and services
      • Dependency injection can be reused independently. They created an @Inject() annotation
    • The Scope
      • Communication between components
      • Internal change tracking
        • Polymer data-binding
      • Communication between non-related components
    • Routing
      • They didn’t really miss it, they introduced a notion of Places. However you can still use Angular.dart routing package independently.

Building Production Dart Apps with an Open Source Workflow

Devon Carew and Luke Church built DartPad, an IDE for Dart in the browser, as open source and with open source. In this session, they show you how to unit test, measure code coverage, trigger Continuous Integration, and deploy to the cloud, all with open-source tools and libraries. The most interesting part about the tools they presented here, is how they leverage the power of Google Cloud Platform with AppEngine, the Managed VMs and the Memcache.

  • How they built DartPad
  • Continuous integration for unit tests
    • Travis CI
    • Drone.io
    • AppVeyor (windows)
  • Functional Testing
    • Sauce Labs
    • test/web_integration.dart with WebDriver
  • Code coverage
    • Package dart_coveralls and coveralls service
      • Get notifications on specific threshold
  • Web hosting and scaling
    • They use AppEngine
    • UI Server serves static files & redirect
    • dart-services in AppEngine
  • Dart on AppEngine
    • The Dart app deployed on AppEngine routes to a Dart process in a Managed VM
    • The process in the ManagedVM uses the rpc package
    • Making it fast
      • Memcache
      • Keeping the VM warm
        • Reusing Dart VM
        • Uptime monitoring
  • Hosted metrics
    • Librato – hosted metrics and logging service
  • Uptime monitoring
    • Pingdom – update reports services
  • DartPad is now 1.0!

Panel with Dart Engineers

I decided not to put all questions and answers because some of them were a bit too specific, but here are my favorite ones, which I think will be of interest to more people.

  • Q: How does type annotation impact performances?
  • A: On the VM specifically, it doesn’t matter at all whether you type your variables or not. When the code is parsed (unless in checked mode), we throw the types away. The optimizations are based on collected types that you see at runtime, and it works well; they know exactly what are the potential subclasses that can be used.
  • Q: Is there any plans on doing code hot-swapping in Dart?
  • A: It would probably work well already in the VM, but there are plans to find good solutions to that in the following months.
  • Q: DartEditor vs Webstorm?
  • A: We’re moving away from DartEditor, and going with WebStorm. The other goal is to provide a good UX to people who are already familiar with other tools via plugins (Eclipse, Sublime, etc). For the “try-dart” experience that DartEditor was giving, we suggest going with DartPad now, where you can try things with low friction, share snippets and make things run. WebStorm is the primary focus.
  • Q: What’s the roadmap with Polymer.Dart?
  • A: We’re waiting for the Polymer team to stabilize. It’s coming pretty soon. When they reach Polymer 1.0, we’re going to provide Polymer.Dart 1.0. Second thing is with dev_compiler and jsinterop, you will be able to share your components/libraries with other developers (dart/js).
  • Q: What will happen if Fletch gets out of experimental?
  • A: We will ship it this year.
  • Q: Dart vs ES6? Does ES6 provide all what Dart does?
  • A: Dart still has an advantage. ES6 is still JavaScript, and you don’t fix all problems by adding classes. The types in Dart still make programs easier to read and easier to maintain.

Google Fiber and Dart

Jason Daly shows how they created the UI of Google Fiber with Dart, and how it integrates with other languages in their infrastructure. With all the other alternatives to Dart, he also explains why they still picked it, and what they got out of it. It’s a good example of how Dart can be used on embedded devices, not without good challenges.

  • How they created the UI with HTML5/CSS3 and Dart
  • They have Dart-VM-based services interacting with native code
  • Their new solution
    • They wanted to move lots of data on the cloud instead of on the boxes in households
  • Why Dart?
    • Looks and feels like many other languages
      • Classes, generics, strict type checking (when you want it), libraries and imports
    • Still has the dynamic and asynchronous features that web apps need
    • Not limited to browser and web apps
    • Development wins
      • Easier to pick up than JavaScript
      • Dartium makes prototyping easy
      • Allows on-the fly rendering of UI tweaks
  • Deployment wins
    • Deploy to a url for the UI
    • Server-side can be updated without deploying a new firmware image
  • Challenges
    • No pointing device (no mouse) — had to develop their own widgets
    • Limited physical resources
    • Dynamic fetching
    • Interfacing with the hardware
  • The browser cannot do everything
    • Interactions with the disk
  • DVR Service
    • Runs in the Dart VM on the Google Fiber Storage Box
    • Interacts with the TV UI running in Chromium on the TV Box
  • Dart works well on embedded hardware

Dart for the Internet of Things

Dennis Khvostionov of DGLogik shows their new IoT platform called DSA, and how they implemented it end-to-end with Dart. We can see their WYSIWYG IoC application editor (DGLux) built on top of their Open Source platform (DSA).

  • DGLogik
  • DGLux – Drag and drop WYSIWYG Visual Application Development
    • > 200k Dart LOC
    • > 1k deployments globally
  • Why Dart
    • Rapid developement
    • Rapid testing
    • Rapid fixing
  • dart2js has never been problem for them
  • DSA – Open Source Platform & Toolkit for IoT
  • A bunch of demos, should watch them.
  • He shows us a game called “performanceTest” that allows us to see the whole thing in action, it runs pretty smoothly!

Moving from Node.js to Dart

Faisal Abid tells how he ported the API of his native Android stock simulator game Market Wolf from Node.js to Dart. Since Node.js is so popular, many people probably asked themselves whether Dart or Node.js would be the best choice. Here Faisal explains why he went to Dart, and what’s been beneficial for him since then.

  • Why?
    • Tooling & debugging support for node.js is a pain
    • Node.js didn’t seem to be the right answer
    • Node and Dart are pretty similar
  • Differences
    • Different paradigm
    • Multiple cores
    • Node – multiple VMs needed
    • Dart – Isolates
  • Pros and cons to moving to Dart
    • Pros
      • Better profiling and debugging with Observatory
      • Syntax and language features
      • Organization of code is better and enforced
      • Support for major databases on pub.dartlang.org
    • Pro/Con
      • Shift in thinking
    • Con
      • Missing support for esoteric and very new database. But most protocols are JSON based, so it’s easy to port it
  • Finding alternatives to what he was using in Node.js
    • Express
      • Redstone
        • Actively developed by community
        • Very express-y
        • Good support for plugins/middlewares
      • Shelf
        • Written by Google
        • The base for Redstone
        • Minimal
        • Use middleware for routing
        • Redstone’s middlewares come from Shelf
        • Simple API
      • RPC
        • The newest
        • Enables you to write RPC style Dart API’s easily
        • Self documenting API
        • Uses annotations
        • Bit more verbose
        • Very clear API
        • Can generate client side libraries in Java, Python and others
    • Socket.io
      • Dart comes natively with WebSockets
  • Thinking in Dart
    • It’s easy to replicate Node.js, but you must think in Dart
    • Simplify architecture by using Isolates
  • Isolates are very low on memory footprint
    • He used to have 3 node.js VMs + 1 message broker, now he has 3 isolates @ 1.5MB of memory each
  • Deployment
    • Anything that supports Docker supports Dart
    • Codeship + AWS Beanstalk
  • Worth it?
    • Yes. No question about it
    • Dart language, language features, observatory, etc.
  • Missing anything from Node.js?
    • Absolutely not.
  • Amount of lines of code shrunk dramatically. Easier to debug, deploy, less dependencies to worry about.

moving from node

Dart for Mobile

Kasper Lund presents a demo of Fletch, an experimental runtime for Dart that makes it possible to implement highly concurrent programs in the Dart programming language. He shows how it can make native applications run on Android and iOS.


  • Why do people want to use Dart on mobile?
    • Modern and light stack
    • Developer productivity
    • Code sharing across multiple client apps
      • Use same model but different UIs
  • Fletch — Dart runtime for mobile
    • Still early stage
    • Small and elegant runtime system
    • Supports on-the-fly program changes
    • Runs on iOS through interpretation
    • Light
      • Extremely fast startup (~2ms)
      • Low memory overhead (~200K binary size)
    • Interactive
      • Atomic program changes over wire protocol
    • Concurrent
      • Blocking an isolate is simple and cheap
      • Easily scales to 100k concurrent isolates
  • Fletch SDK
    • Command line
    • Breakpoints
    • Live code editing in your editor and apply changes with the command line
  • Roadmap
    • Q3 – Fletch SDK Beta
    • Q4 – Fletch SDK 1.0
    • Q4 – Dart for mobile 1.0
      • Will contain the toolkit for Presentation, Services and Runtime
  • Interop
    • Intermediate language declaring services in low level
    • Implement them in Dart
    • Fast messaging
      • Messages are transferred as binary
      • No expensive encoding/decoding
  • It’s not the fastest thing ever as it’s interpreting code, but it’s most of the time way enough for real things.

Sky: An Experiment Writing for Android with Dart

Eric Seidel presents Sky. Sky is an experimental, high-performance UI framework for mobile apps. Sky helps you create apps with beautiful user interfaces and high-quality interactive design that run smoothly at 120 Hz. This presentation contains multiple demos, and gives us a little sneak peek of the a functional programming style inspired by React that Sky uses. It will be fun to see how in the future Sky and Fletch will interact (if they will).


  • Sky Demo on Google Play
  • Android app all written with Dart (even the UI) Native
  • Best mobile experience
  • Looking for performance
    • 120Hz or bust
  • Platform agnostic
    • Android, iOS and more
  • Full Access
    • Fully priviledged applications
  • Fast development
    • Edit, Refresh, Profit
  • Continuous deployment, it’s always up-to-date
  • Rich & flexible layout & painting
  • Still early stage
  • Hello world live coding demo
  • Sky Framework
    • Written in Dart
    • Big bag of widgets (Material Design)
    • Entirely non-blocking API
    • Functional reactive style (Stateless components)
    • Opinionated part of Sky that knows on what kind of device the application is running on
    • Integrated tools
      • Chrome tracing
      • Observatory in the device (can connect remotely)

Joel Trottier-Hebert

Dart Developer Summit Highlights – Day 1

Update: The highlights of the day 2 are out!

Hello Dartisans, I’ve had the chance to watch the Dart Summit live streams and I’ve been a good student. For all of you who don’t have time, or are just interested to remember what was said, I’ve taken notes during all the presentations.

Disclaimer: These are my personal notes, to the best of my comprehension. If you find anything wrong with them please let me know and I’ll update this post. Also, if you feel I missed some important information, let me know, I’ll update this.

So I’ve structured the highlights by talk, stating what I found the most interesting or thought was the most important. I’ve noted most of the information as bullet points.

This first post only contains notes about the first day of the summit. A second will come in the next days, with all my notes for Day 2.

For all of you who want to watch the whole talks, there’s now a Youtube Playlist available. Enjoy!

Keynote: Dart Today & Tomorrow

Dart co-founders Lars Bak and Kasper Lund who are Software Engineers at Google, tell us what’s coming in the next year for Dart and its ecosystem. I like how they’ve put emphasis on how Dart is there to stay for a long time, and how Google uses it.

  • IDE
    • WebStorm is now the new IDE of choice for Dart development.
  • Mobile
    • They showed 3 native mobile apps having a dart model and different UIs. (iOS and Android and also a dart console app.)
    • Fletch: A Dart runtime for iOS
      • Only adds ~200K to the size of your native app
      • Supports on-the-fly program changes
    • Parallel programming
      • People like the idea of isolates, but don’t like to use isolates
        • Features like Parallel.run() should come
      • Research directions
        • Synchronous operations
        • Zero-copy message passing
        • Lightweight isolates
    • Dart LTS
      • Google is already relying on Dart for many projects including: Google Ads, Google Fiber, Google Express, Google’s internal CRM app.
      • They are committed to building their next-gen web apps with Dart
      • Dart is for the long run.
      • lts
    • Web Frameworks
      • Angular 2.0 will be the preferred web application framework for Dart
        • Smaller generated Javascript output
        • Faster execution (x3 faster than 1.0)
  • SDK Roadmap
    • May 2015 : Migration to GitHub
    • 1.11 – Retire DartEditor, and put in front WebStorm as IDE (and plugins)
    • 1.12 – Http2 + Google RPC
    • Q3 – Fletch (beta)
    • Q4 – Fletch (final)
    • Q4 – Dart Mobile Services
    • 2.0 – Dart Dev Compiler
  • roadmap
  • Breaking Changes
    • Future SDK version should all be backward compatible. If a breaking change is introduced, they will provide a migration tool to migrate your code.

Async in Dart

Florian Loitsch, Software Engineer at Google presents Dart’s asynchronous features. He makes a very good introduction to async/await and its derivatives for Iterables. He also presents the package stack_trace to get more useful information from stack traces for asynchronous code.

  • Async/Await now work out of the box
    • Also works with dart2js web applications
  • async types
  • Stack traces are noisy and contain not-so-useful information for the normal Dart developer
    • The package stack_trace makes it easier to get relevant information in stacktraces with async-await

Space-Frugal Reflection

Erik Ernst, Software Engineer at Google shows how using traditional reflection might not always be a good choice, especially for Web applications in Dart. He then brings on the table a solution to the problem of increasing code size: the new package Reflectable.

  • Traditionnal reflection in Dart is expensive
    •  For dart2js web applications, code size explodes because of tree-shaking
  • dart:mirrors
    • Compiler-integrated
    • Uses nice, compact reprensation
    • Control size with MirrorsUsed(…) annotation
    • Includes more code, not compositional
    • In practice, it is difficult to tune, large output
  • Reflectable
    • New package for reflection
    • Essentially the same interface
    • Without the size explosion
    • Still early stage
  • Traditional vs Reflectable
    • Traditionnal: mapping between original names and generated ones
    • Reflectable: write more code, but the generated code will be replaced with static code

Dart at 60FPS

Ross Smith and Arturs Vitols of Willowbrite tell us their story of how they made a mobile game with Dart. They present us what their biggest challenges were, and how they succeeded. I couldn’t resist buying the game to try it. Ends up being pretty fun! Get it here. I was also very impressed by their home made editor.

  • Challenges
    • run on old devices
    • < 20mb
    • performances
    • unique look & feel
  • How they did it
    • Vector images –> ask device to process instead of using disk space.
    • Midi sound –> ask device to process instead of using disk space.
    • Short refresh cycles with webgl.
  • They made an editor – very impressive.

Debugging and Profiling Dart Programs with Observatory

John McCutchan and Todd Turnidge, Software Engineers at Google give us an overview of the Observatory in Dart. This is probably my biggest surprise of the day. I didn’t know much about the Observatory, but wow, I’m surprised at how advanced it is, and at how much it can do. I’ve taken a lot of notes here, you really should watch the whole demo.

  • Hosted by the VM
    • Providing suite of program inspection and analysis tools.
  • New link in JS console
  • View class code
    • View code coverage
    • Find live instances of specific classes
    • Invoke/edit live code (classes/instances (add methods to instances/changes values))
  • Allocation profile
    • Per class allocation statistics
    • Per heap space garbage collection statistics
    • User controllable accumulator
  • CPU profile
    • Find spots in code that use a lot of CPU
  • Debugger
    • Command line debugger
      • Provides live debugging in observatory
    • Tab completion (functions, scripts)
    • Lets spy on variables (visually)
    • Lets you edit variable content
  • Multiuser
    • Multiple users can connect to the same observatory, just share the URL
  • Always available –> Runs on its own, and always collects
    • Easier to diagnose problems that happened in the past.
  • Profiler now understands functions inlining
  • Now provides metrics/graphs
  • Roadmap
    • Improved debugger
    • Timeline of important events
    • Allocation call sites (where do I allocate class Foo)
    • Display source code as live, hyperlinked view
  • Available wherever the VM is available.
    • Server/Command-line
    • Sky applications
    • Web applications in Dartium

Dart for the Web: State of the Union

Dan Grove and Kevin Moore, Software Engineers at Google tell us what the current state of Dart is, and in which direction the Dart team will go for the next year. This was probably the talk I wanted to watch the most because of the recent changes related to the Dart team’s objectives (with the VM not going in Chrome). There were great announcements during this talk.


  • Embrace the web instead of replace the web
  • Things have changed in the web (ES6)
  • Javascript everywhere
  • Changed the focus from integrating the VM in Chrome to embrace JS and target all other browsers
    • Development & deployment/production were too divergent
  • Dev compiler vs Production compiler
    • Dev compiler should contain settings for development/deployment to keep a fast refresh cycle for dev.
  • Dev Compiler
    • Its aims to include the following:
      • A static checker based on stricter-than-standard-Dart type rules.
      • A modular Dart-to-ES6 transpiler for Dart programs that statically check.
      • Under 1 second compile
      • Would produce small, readable, clean, efficient JS code.
  • Export your Dart library in JavaScript (SYODLAJ: Ship your own Dart Library as JavaScript)
    • Someone shouldn’t notice you’ve written your lib in Dart
  • They still want to ship Dartium for now, but are working in parallel on getting Dart Dev Compiler out.
  • Test package will be the future of testing in Dart
    • The test package uses stack_trace out of the box
    • Supports multiple platforms (vm, browsers, chrome, safari, dartium, content_shell, phantom-js)
  • Frameworks
    • Angular2 is now in Dev preview (It is still marked as alpha-21, but Angular Team consider it as Dev Preview) (website is now angular.io)
    • Should wait for Polymer to be stabilized
  • Webstorm IntelliJ is now the “De-facto” IDE.
  • Coming soon
Angular 2.0 is now in Developer Preview

Angular 2.0 is now in Developer Preview

Getting the Most Out of dart2js

Stephen Adams, Software Engineer at Google shows us how static analysis and type inference work in dart2js. He also gives tips to help dart2js producing smaller, faster JavaScript code. This should be watched by anyone who is confused (or are not sure) about how the type system works in Dart.

  • How dart2js currently works
    • Compile dart types to JS primitives where possible.
    • In checked mode, the types will be checked at runtime. Checked mode works like assertions on types. It asserts “is this a String or null” (for a String annotated variable)
    • In production mode, those assertions are turned off.
  • This talks explains how dart2js works in technical details (how type inference works for example)
  • Things to do in production, but are OK to use for testing
    • Avoid dart:mirrors, use code generation instead (e.g: smoke, reflectable, polymer)
    • Avoid noSuchMethod, otherwise it will produce slower and bigger Javascript (adding more two-level dispatch/more indirections)
      • If you use dart2js -v … you will see what those classes implementing noSuchMethod are.
    • Avoid o.runtimeType -> defeats type erasure optimization
  • What’s coming next?
    • Looking at ways to improve type analysis
    • Looking at ways to make better use of inferred types
    • Looking into making two level dispatch cheaper

Switching to Dart

John Ryan of Workiva explains how they switched to Dart in an existing big scale application. He presents us why they switched, what they got out of it and how they did it. This should convince people who think that Dart doesn’t scale well or that it doesn’t blend well with other technologies.

  • They switched from ActionScript
  • They tell their experience of porting an existing application to Dart
  • After switching
    • Faster ramp up time
    • Better dev experience
    • Less focus on tools
    • Code easier to share
  • Why they switched
    • Build large scale apps
    • JavaScript tools are difficult to compose
    • Dart is a complete solution
  • The old application
    • over 1 million lines of code
    • 2-8 mins to compile
  • How they switched
    • React components –> React Dart
    • Unit tests –> Jasmine Tests –> Guinness –> unittest
    • Convert the existing Javascript into a working application, and then write idiomatic Dart
  • The Dart VM
    • Debugging is fast, predictable
    • Switching branches is cheaper (with pub)
  • Checked code
  • REPL in Dartium
  • Continuous integration
    • Their docker file for it
      • Should be modified a bit for the new test package, but it has useful things, like a script to install content_shell
    • WebDriver for functional testing
      • WebDriver.dart – Looks pretty good with async/await
    • Tests are written in Dart

Migrating Trustwave’s Large Customer Portal to Dart

Eric Woerner, Director of Software Architecture at Trustwave tell us their story of migrating their customer portal to Dart. We learned what they discovered, what frameworks they use, and how they leverage the power of each of them. I was surprised at how they integrated Dart to an existing Flex application.

  • They tell their history of migrating Trustwave Portal to Dart (Flex to Dart)
  • They serialize data to and from existing Java back-end services
  • What they discovered
    • Increased productivity
    • RPC style calls with Dart
    • Application development with Angular and components in Polymer
      Dart and Flex interop
  • What they now use
    • Application framework: Angular Dart
      • Deferred loading
      • Routing
      • Views
    • UI Components: Polymer
    • What’s next?
      • Angular 2.0
      • Polymer 1.0

Joel Trottier-Hebert

Gwt-Platform event best practices (revisited)

Not too long ago, I started using GWT and GWTP and found it pretty hard to understand its event system.

I still can’t find much recent information about it, so I am writing this post to hopefully help others. Disclaimer: There many ways to achieve what I do in this post, but this is the way I prefer.

All right! Let’s demonstrate how events and the event bus work by creating a CSI-Hacking Dashboard. You can get the code on GitHub.


We have ComputerPresenter, a HackerPresenter and a root Presenter that holds/creates other widgets. We also have a ComputerHackedEvent and ComputerHackedHandler. The event will be raised to signal that the computers got hacked, and the handler code will be executed after that.

Here’s the classic implementation of a GWT event. Our event will only carry the hacker’s name.

public class ComputerHackedEvent extends GwtEvent<ComputerHackedEvent.ComputerHackedHandler> {
    public interface ComputerHackedHandler extends EventHandler {
        void onSystemHacked(ComputerHackedEvent event);

    public static final Type<ComputerHackedHandler> TYPE = new Type<>();

    private final String hackerName;

    public ComputerHackedEvent(String hackerName) {
        this.hackerName = hackerName;

    public static void fire(String hackerName, HasHandlers source) {
        source.fireEvent(new ComputerHackedEvent(hackerName));

    public String getHackerName() {
        return hackerName;

    public Type<ComputerHackedHandler> getAssociatedType() {
        return TYPE;

    protected void dispatch(ComputerHackedHandler handler) {

I usually declare my handler as a nested interface in the event declaration. That’s only a matter of personal preference though.

Next we have to raise the event. That will be done by our HackerPresenter. A really simple way of becoming a computer hacker, is by adding a button to the screen and pressing it, right CSI?

Here’s the code of the view and the presenter.

public class HackerView extends ViewWithUiHandlers<HackerUiHandlers>
        implements HackerPresenter.MyView {
    interface Binder extends UiBinder<Widget, HackerView> {

    Button hackThePlanet;

    HackerView(Binder binder) {

    public void initiateHacking(ClickEvent event) {
public class HackerPresenter extends PresenterWidget<MyView>
        implements HackerUiHandlers {
    public interface MyView extends View, HasUiHandlers<HackerUiHandlers> {

    private final String hackerName;

            EventBus eventBus,
            MyView view,
            @Assisted String hackerName) {
        super(eventBus, view);

        this.hackerName = hackerName;


    public void onInitiateHacking() {
        ComputerHackedEvent.fire(hackerName, this);

So we have a button, and when we click on it, it raises an event. There are a couple of ways to raise an event, but the one I usually use, is the static fire() method on the event. (I’ll talk about the other ways of firing an event later on.)

Now we have to handle the event somewhere. We want to know when the computers get hacked, so we’ll represent the computers with the ComputerPresenter. Its role will be to print in the console when it gets hacked, and by which hacker. Here’s the presenter code:

public class ComputerPresenter extends PresenterWidget<MyView>
        implements ComputerHackedEvent.ComputerHackedHandler {
    public interface MyView extends View {
        void setComputerName(String computerName);

        void displayStatus(String computerName, String hackerName);

    private final String computerName;

            EventBus eventBus,
            MyView view,
            @Assisted String computerName) {
        super(eventBus, view);

        this.computerName = computerName;


    protected void onBind() {

        addRegisteredHandler(ComputerHackedEvent.TYPE, this);

    public void onSystemHacked(ComputerHackedEvent event) {
        getView().displayStatus(computerName, event.getHackerName());

This way, when a hacker clicks on the “start hacking” button, all the computers that are listening to the event will print something. As you can see, the ComputerPresenter registers itself as a handler for the ComputerHackedEvent through the addRegisteredHandler method.

This is a convenience method provided by GWTP. Using this method instead of registering directly on the EventBus will make the event registration part of GWTP’s lifecycle and unbind the event handler when the presenter is unbound. That means that if the presenter is unbound and rebound, you’ll have to re-register event handlers. This is why the onBind method is a good place to register handlers.

Here’s the code of the root presenter:

public class RootPresenter extends Presenter<RootPresenter.MyView, RootPresenter.MyProxy> {
    interface MyView extends View {

    interface MyProxy extends ProxyPlace<RootPresenter> {

    public static final Object SLOT_COMPUTERS = new Object();
    public static final Object SLOT_HACKERS = new Object();

    private final WidgetsFactory widgetsFactory;

            EventBus eventBus,
            MyView view,
            MyProxy proxy,
            WidgetsFactory widgetsFactory) {
        super(eventBus, view, proxy, ApplicationPresenter.SLOT_SetMainContent);

        this.widgetsFactory = widgetsFactory;

    protected void onBind() {

        HackerPresenter zeroCool = widgetsFactory.createHacker("Zer0C00L");
        HackerPresenter acidBurn = widgetsFactory.createHacker("AcidBurn");

        addToSlot(SLOT_HACKERS, zeroCool);
        addToSlot(SLOT_HACKERS, acidBurn);

        ComputerPresenter computerA = widgetsFactory.createComputer("A");
        ComputerPresenter computerB = widgetsFactory.createComputer("B");

        addToSlot(SLOT_COMPUTERS, computerA);
        addToSlot(SLOT_COMPUTERS, computerB);

We just create one hacker named Zer0C00L and 2 computers to hack. And now the view:

public class RootView extends ViewImpl
        implements RootPresenter.MyView {
    interface Binder extends UiBinder<Widget, RootView> {

    HTMLPanel computers;
    HTMLPanel hackers;

    RootView(Binder uiBinder) {

    public void addToSlot(Object slot, IsWidget content) {
        super.addToSlot(slot, content);

        if (slot == RootPresenter.SLOT_COMPUTERS) {
        } else if (slot == RootPresenter.SLOT_HACKERS) {

    public void removeFromSlot(Object slot, IsWidget content) {
        super.removeFromSlot(slot, content);

        if (slot == RootPresenter.SLOT_COMPUTERS) {
        } else if (slot == RootPresenter.SLOT_HACKERS) {


Nice! When I click on “Hack the planet!” I see the following result in the Javascript console:

I got hacked. (A) by Zer0C00L
I got hacked. (B) by Zer0C00L

I should start writing in l33tsp33k now.

Now what if you remove one of the ComputerWidgets from the DOM by calling removeFromSlot(SLOT_COMPUTERS, computerB); and still try to hack the planet?

If you read the output of the console you will see:

I got hacked. (A) by Zer0C00L
I got hacked. (B) by Zer0C00L

Wait… What? The handler for the computer B is still registered, the presenter wasn’t unbound, it was only removed from the DOM.

What if we want computer B to stop listening to the events when it’s not present in the DOM? Well that’s a job for addVisibleHandler. So instead of registering the handler using addRegisteredHandler we’ll use addVisibleHandler that will handle this for us. This way, when a presenter is considered “not visible” in GWTP’s lifecycle perspective (read: not visible as in “visible in the DOM”), the event will not reach the handler. The new output should now be:

I got hacked. (A) by Zer0C00L

There’s still a problem though. What if there were too many computers for a single hacker? I think at some point we’ll have to add someone to the team. Let’s do it!

// in the RootPresenter's OnBind method
HackerPresenter acidBurn = widgetsFactory.createHacker("AcidBurn");
addToSlot(SLOT_HACKERS, acidBurn);

You should see 2 buttons saying “Hack the planet!” and when you click them both, the output is:

I got hacked. (A) by Zer0C00L
I got hacked. (B) by Zer0C00L
I got hacked. (A) by AcidBurn
I got hacked. (B) by AcidBurn

All computers are reacting to every hacker, which is not what we want. This is happening because of the way we registered the handlers earlier. What we want is for the computers to react a specific hacker’s ComputerHackedEvent.

Since we can have a reference to the said hacker, that is pretty easy to accomplish. We have to delegate the handler registration to the concerned presenter. From the RootPresenter we’ll delegate the task, but first let’s create an interface :

import com.google.web.bindery.event.shared.HandlerRegistration;

public interface HasComputerHackedHandlers {
    HandlerRegistration addComputerHackedHandler(ComputerHackedEvent.ComputerHackedHandler handler, Object source);

We can then let ComputerPresenter implement it.

public HandlerRegistration addComputerHackedHandler(ComputerHackedEvent.ComputerHackedHandler handler, Object source) {
    HandlerRegistration hr = getEventBus().addHandlerToSource(ComputerHackedEvent.TYPE, source, handler);
    return hr;

Note that instead of registerHandler() you can also use registerVisibleHandler().

And finally, when you click on both buttons, the output should be:

I got hacked. (A) by Zer0C00L
I got hacked. (B) by AcidBurn

All right! We’re ready to hack the planet! Are we?


Remember when I said I would talk about the ways of firing events? If you are new to GWT and GWTP, you might have noticed that there are multiple methods available to fire events and register handlers.

// GWT
eventBus.addHandler(eventType, handler)
eventBus.addHandlerToSource(eventType, source, handler)

eventBus.fireEventFromSource(event, source)

presenterWidget.addHandler(eventType, handler) // deprecated
presenterWidget.addRegisteredHandler(eventType, handler)
presenterWidget.addVisibleHandler(eventType, handler)


Confused yet? I can say I was after seeing this. If you dig down you can see that a presenter widget gets an event bus injected and delegates most of its job to it. The only difference is that GWTP manages the handler registrations with its lifecycle (i.e: when a presenter gets unbound, the registered handlers get cleared). Also, if you dig for the fireEvent method, you’ll see GWTP delegates to eventBus.fireEventFromSource(). You may want to call the original fireEvent() if you want to match the following case (taken from the javadoc) “Fires the event from no source. Only unfiltered handlers will receive it”. Honestly, I’ve never faced that situation.

Here’s my cheat sheet of events in GWTP:

– Do I need to fire an event globally on the event bus? (i.e: everything registered to the event will handle it)
Y: presenterWidget.addRegisteredHandler() + SomeEvent.fire()
N: Go next

– Do I need to filter the handlers by the visibility of the handler?
Y: presenterWidget.addVisibleHandler() + SomeEvent.fire()
N: Go next

– Do I need specific handlers to handle events from a specific source?
Y: Create an interface called HasXXXHandlers and make your handling presenter implement it. GWTP gives PresenterWidget the capability to register handlers via registerHandler() and registerVisibleHandler(). Finally, fire the event with SomeEvent.fire()
N: That’s it. I usually don’t need more options, so the decision tree ends here. If you have another situation that doesn’t fit, let me know!