Seth Ladd's Blog

Lazy Load Libraries in Dart

2013-04-23T22:47:00.001-07:00

Dart is a statically analyzable language, and its tree-shaking compiler does a good job of eliminating dead code and producing a single, optimized application file. However, sometimes developers need to control when certain libraries are loaded and thus need to control which libraries are included in the main application file. To help, the dart2js compiler, which converts Dart code into JavaScript code, now supports lazy-loaded libraries.

Lazy Load

As an example, consider an application that has many different screens. Some screens are more obscure than others, and aren't required for the application to start. A developer should be able to say "I don't need these screens now, but pull them in when I do need them." This lazy-loading is a common deployment strategy for web apps, because small initial loads means faster application startup.

You can mark a library as "lazy", and the dart2js compiler will output a separate JavaScript file for that library. Note that dart2js still performs tree shaking (aka dead code elimination) across the entire app (technically, across the entire isolate). This means that only the functionality required from the lazy-loaded library will actually be compiled into the separate file.

The lazy-loaded library is still part of the application structure, and must exist and be available to dart2js when the program is compiled. This is not "dynamic loading", per se, because the application must statically import all libraries (lazy or not).

(Note: as of the time of this writing, dart2js emits at most one other JavaScript file. This restriction will be removed and you will be able to emit multiple files for a single application. Please track Dartbug 3940 to learn more.)

DeferredLibrary Example

The main application can mark a library with an @lazy metadata. Then, it declares an instance of DeferredLibrary that points to the outputted JavaScript file.

import 'dart:html';

import 'dart:async';

@lazy

import 'reverser.dart';

const lazy = const DeferredLibrary('reverser', uri: './part.js');

void main() {

lazy.load().then((_) {

print('library loaded');

query("#sample_text_id")

..text = "Click me!"

..onClick.listen(reverseText);

});

}

void reverseText(MouseEvent event) {

query("#sample_text_id").text =

reverse(query("#sample_text_id").text);

}

Notice how the library doesn't come into existence until after the Future from lazy.load() completes. Only then can you call into the library.

The runtime throws NoSuchMethodError if you try to access functionality from a library that it not yet loaded.

More to come

The lazy-load functionality of dart2js is just the beginning. In the future, you will be able to mark multiple libraries as "lazy", and really control how you deploy and load your web application.

Also, this functionality only currently works with dart2js. Please star Dartbug 10171 if you are interested in seeing the same lazy-loading for the VM and Dartium.

Please try this out, we look forward to your feedback!

(Photo Credit: Marcus Hansson licensed under cc)

Dynamically Load Code with Dart

2013-04-23T21:17:00.000-07:00

Rejoice! Dartium, a build of Chromium with the Dart VM, can now spawn a new isolate from a URI. This means your Dart apps have a new option for more modular code.

Isolates

In Dart, an isolate is an abstraction for an "isolated memory heap". Isolates do not share memory (variables, statics, etc), they are essentially self-contained applications. Isolates communicate by sending and receiving messages over ports.

Why Isolates Matter

Dart programs are static, in that their shape and structure do not change after they are compiled. A static program is great for optimizations like tree shaking (aka dead code elimination), type-inferencing compilers, and more.

However, modular apps often require a way to dynamically load code. Configurable and modular apps need a way to, at run time, pull in new functionality. If Dart apps have a static structure, how can they dynamically alter their behavior?

Isolates to the rescue! The structure inside of an isolate is static, but a Dart program is free to dynamically load other isolates. This means that libraries can be loaded into isolates at run time.

Your First Isolate

This simple reverser isolate listens on its port, receives messages, reverses them, and send the reversed text back to the sender.

// reverser.dart

import 'dart:isolate';

main() {

port.receive((msg, SendPort replyTo) {

var reverse = msg as String;

var buffer = new StringBuffer();

for (var i = reverse.length - 1; i >= 0; i--) {

buffer.write(reverse[i]);

}

replyTo.send(buffer.toString());

});

}

The main application (which itself is an isolate), is responsible for instantiating the reverser isolate. Use the spawnUri() function from dart:isolate to spawn a new isolate from some file.

// main.dart

SendPort reverser;

void main() {

query("#sample_text_id")

..text = "Click me!"

..onClick.listen(reverseText);

var serviceFile = 'reverser.dart';

if (identical(1, 1.0)) { // XXX: horrible hack to detect if we're in JS

serviceFile = 'reverser.dart.js';

}

reverser = spawnUri(serviceFile);

}

Notice the horrible hack to detect if this code is running in the Dart VM or JavaScript. I don't know a better way to do it, but I don't recommend this.

When the text from #sample_text_id is clicked, the reverseText function is run:

void reverseText(MouseEvent event) {

var text = query("#sample_text_id").text;

reverser.call(text).then((reversed) {

query("#sample_text_id").text = reversed;

});

}

Notice how the reverser isolate is sent a message via call(), which returns a Future. When the Future completes, the callback registered with then() is run.

Support

Dartium supports spawnUri since at least version 28.0.1478.0 (194114). Dart2js compiles spawnUri() into a Web worker.

Note that each isolate is its own app, so dart2js must compile the same bootstrap code into each isolate file.

6 Dart FAQs - Answered!

2013-04-18T13:09:00.001-07:00

Calvin Prewitt wrote some good questions about Dart via G+. It might be hard to find his questions and my answers, so I hoisted them here. Enjoy!

Q) Could you also detail compatibility and which JavaScript APIs are fully or partially supported for Dart2JS production code?

A) All JavaScript APIs supported by Chrome should be available to Dart. See http://www.dartlang.org/articles/improving-the-dom/

Q) It appears Dart is aiming to eventually replace it? The FAQ says it only targets modern browser versions.

A) Dart's aim is to give developers like you a very productive experience, and give your users a very fast experience. Dart targets IE9+, plus the modern versions of Firefox, Chrome, Safari, mobile safari, and Chrome for Android. Basically, modern browsers.

Q) Is there a way to have fine grained control over the JS code like in Closure?

A) Dart2js can emit a single file, plus up to one other lazily loaded library. In the future, we want to give you more control. Here's the bug: https://code.google.com/p/dart/issues/detail?id=10023 Please note, dart2js's output is already smaller thanks to tree-shaking.

Q) I've noticed a lot of similarities to Closure Library. Has some or all of the Closure Library code been ported?

A) I'm unaware of an "official" port from the closure libraries. In general, though, you shouldn't need it. Dart's core libraries are pretty comprehensive. Check out http://api.dartlang.org

Q) Is Dart ready for production use? Specifically for generating JS code. If not, what's missing or where are the sore spots?

A) Dart's M4 release just came out, promising no more breaking changes to the core libs. Hurray! There's still work to do, but the platform just got much more stable. If you see something missing, let us know: http://dartbug.com/new

Q) Finally, where can I help? Closure is nowhere near a productive environment. If Dart is aiming to make building complex web apps easier than working with Closure, I'd like to contribute to that goal.

A) Yes, we're "aiming to hit a productivity and performance bullseye" (groan :) We'd love help. Dart is open source, so check out http://dartbug.com/ and out Github presence athttp://github.com/dart-lang Join our Dartisans community in G+, too

First Look at Dart Mixins

2013-03-25T21:34:00.001-07:00

You can use mixins to help inject behavior into your classes without using inheritance. Use a mixin when you have shared functionality that doesn't fit well in a is-a relationship.

Dart supports a basic form of mixins as of the M3 release in early 2013. The language designers expect to expand on mixins' abilities in future versions of the language.

Surprisingly, you've been using the concept of a mixin all along. Dart considers a mixin as the delta between a subclass and its superclass. That is, every time you define an is-a relationship with the extends keyword, you are really defining a delta between the new class and its parent class. In other words, a subclass definition is like a mixin definition.

Given that short description, it should come as no surprise that an abstract class (with a few restrictions) is itself a mixin. Here is an example of a Persistance mixin:

 abstract class Persistence {  
  void save(String filename) {  
   print('saving the object as ${toJson()}');  
  }  
    
  void load(String filename) {  
   print('loading from $filename');  
  }  
    
  Object toJson();  
 }

Restrictions on mixin definitions include:

Must not declare a constructor
Superclass is Object
Contains no calls to super

You can use the mixin with the with keyword. Here is an example:

 abstract class Warrior extends Object with Persistence {  
  fight(Warrior other) {  
   // ...  
  }  
 }  
   
 class Ninja extends Warrior {  
  Map toJson() {  
   return {'throwing_stars': true};  
  }  
 }  
   
 class Zombie extends Warrior {  
  Map toJson() {  
   return {'eats_brains': true};  
  }  
 }

In the above example, both Ninja and Zombie extend from Warrior. This makes sense, they are both warriors, so the is-a relationship applies. All warriors can be persisted and loaded from a database, but this is purely behavior and the statement Warrior is-a Persistence simply doesn't make sense. Inheritance does not apply here, but we can use a mixin to inject the functionality.

 main() {  
  var ninja = new Ninja();  
  ninja.save('warriors.txt');  
    
  var zombie = new Zombie();  
  zombie.save('warriors.txt');  
 }

A class that uses a mixin is also a member of the mixin's type:

 print(ninja is Persistence); // true!

Mixins are fairly new to Dart, so they aren't widely deployed. We're curious to see how you use mixins. Let us know on the Dart mailing list, and please file any bugs you may encounter. Thanks!

(Photo courtesy of http://www.flickr.com/photos/58871905@N03/5406671277/)

Dart on FLOSS Weekly from TWiT Network

2013-03-20T17:10:00.001-07:00

Today I had the pleasure of chatting about Dart with Randal Schwartz and Aaron Newcomb on FLOSS Weekly (part of the TWiT network). We talked about the Dart language, its developer ecosystem, and the future of the project.

You can watch the entire video of the interview, embedded below for easy viewing:

Thanks to Randal and Aaron for a lively discussion. They are awesome hosts and I highly recommend you tune in.

Have Dart questions? Join us on the mailing list or the Dartisans G+ Community. We love feedback!

Solving Boggle with Dart

2013-03-19T09:00:00.000-07:00

My friends at work and I have been playing a lot of Scramble with Friends. It's a "tile based word searching game" where you find words on a 4x4 grid of letters. Being a good Dart hacker, I wanted to try writing a small library to find all possible words on the board. Here's how I did it!

Dart, not trad. :)

First off, props to danvk.org and his helpful posts (such as this one) on solving Boggle.

Old 'n busted

My first attend was the naive version. The following code simply tried every possible combination, in a depth-first search. It works, but it's slow. So very slow.

class Solver {  
  final Map _words;  
  final List<List<String>> _grid;  
  final List<List> _visited = new List.generate(4, (_) => new List.filled(4, false));  
  final List _found = new List();  
    
  Solver(this._words, this._grid);  
    
  _solve(int x, int y, [String word = '']) {  
   _visited[x][y] = true;  
     
   final newWord = '${word}${_grid[x][y]}';  
     
   if (_words.containsKey(newWord)) {  
    _found.add(newWord);  
   }  
     
   for (var _x = -1; _x < 2; _x++) {  
    final nX = x + _x;  
    if (nX < 0 || nX > 3) continue;  
    for (var _y = -1; _y < 2; _y++) {  
     if (_x == 0 && _y == 0) continue;  
     final nY = y + _y;  
     if (nY < 0 || nY > 3) continue;  
     if (_visited[nX][nY] == true) continue;  
     _solve(nX, nY, newWord);  
    }  
   }  
     
   _visited[x][y] = false;  
  }  
    
  Iterable<String> findAll() {  
   for (var x = 0; x < 4; x++) {  
    for (var y = 0; y < 4; y++) {  
     _solve(x, y);  
    }  
   }  
     
   return _found;  
  }  
 }

Some notes for the code above:

Real classes!
Use _ to mark names as private to the library.
Final variables can't be reassigned after they are initialized. This leads to safer code.
The third parameter to _solve is an "optional positional parameter". It has a default value of an empty string.

Full recursion across all possible combinations?!? Surely we can do better!

New hotness

Enter a data structure called a Trie. A trie is an efficient data structure for dictionaries, because the nodes in the tree are letters that spell words.

From http://en.wikipedia.org/wiki/File:Trie_example.svg

Here is the code I used for the Trie. Thanks to Ladislav Thon for the initial inspiration.

library trie;  
   
 import 'dart:collection';  
   
 class Trie<T> {  
  T value;  
  final Map<int, Trie<T>> map;  
   
  Trie() : map = new Map<int, Trie<T>>();  
   
  T operator [](String key) {  
   var node = this;  
   for (int i = 0; i < key.length; i++) {  
    int char = key.codeUnitAt(i);  
   
    node = node.map[char];  
    if (node == null) {  
     return null;  
    }  
   }  
   return node.value;  
  }  
    
  Trie<T> nodeFor(String character) {  
   return map[character.codeUnitAt(0)];  
  }  
   
  void operator []=(String key, T value) {  
   var node = this;  
   for (int i = 0; i < key.length; i++) {  
    int char = key.codeUnitAt(i);  
   
    var current = node;  
    node = node.map[char];  
    if (node == null) {  
     current.map[char] = node = new Trie<T>();  
    }  
   }  
   node.value = value;  
  }  
 }

A couple notes about the code above:

A trie is a tree of strings to values, so I use Dart's generics (aka parameterized types) to clearly annotate that a Trie can hold a specific kind of value T (to be specified by the consumer of this trie).
Dart classes can define [], the index access operator.
Dart supports libraries, so I placed this code into its own library.

Here is the new Solver, that uses the Trie:

 library solver;  
   
 import 'dart:math';  
 import 'package:tilebasedwordsearch/trie.dart';  
 export 'package:tilebasedwordsearch/trie.dart' show Trie;  
   
 class Solver {  
  final Trie _words;  
  final List<List<String>> _grid;  
  final List<List> _visited = new List.generate(4, (_) => new List.filled(4, false));  
  final List _found = new List();  
    
  Solver(this._words, this._grid);  
    
  _solve(int x, int y, Trie inProgress) {  
     
   final Trie nextStep = inProgress.nodeFor(_grid[x][y]);  
     
   if (nextStep != null) {  
    if (nextStep.value != null) {  
     // FIXME: add real word  
     _found.add(nextStep.value);  
    }  
   
    _visited[x][y] = true;  
      
    for (var _x = -1; _x < 2; _x++) {  
     final nX = x + _x;  
     if (nX < 0 || nX > 3) continue;  
     for (var _y = -1; _y < 2; _y++) {  
      if (_x == 0 && _y == 0) continue;  
      final nY = y + _y;  
      if (nY < 0 || nY > 3) continue;  
      if (_visited[nX][nY] == true) continue;  
      _solve(nX, nY, nextStep);  
     }  
    }  
   
    _visited[x][y] = false;  
   }  
     
  }  
    
  Iterable<String> findAll() {  
   for (var x = 0; x < 4; x++) {  
    for (var y = 0; y < 4; y++) {  
     _solve(x, y, _words);  
    }  
   }  
     
   return _found;  
  }  
 }

The real interesting part to me is that the Trie can act as the dictionary as well as the "in progress" tracking. As the solver walks through the tiles on the board, it looks to see if the current node in the tree has a child node for the adjacent tile. If not, the solver simply bails out immediately. No more searching all possible combinations! The new implementation above also does not build the potential word by concatenating strings, character by character. Instead, it just walks the tree until it it finds a word (the word is stored as a value on the left node) or a dead-end.

In action

Here's how I use it in a very simple web app. I was mostly concerned about benchmarks, so there's no UI.

 import 'dart:html';  
 import 'package:tilebasedwordsearch/solver.dart';  
   
 main() {  
  var timeToParseFiles = query("#time-to-parse-file");  
  var numWords = query('#num-words');  
  var resultsWords = query('#results-words');  
  var resultsLength = query('#results-length');  
  var time = query('#time');  
    
  const List<List<String>> grid = const [  
   const ['A', 'B', 'C', 'D'],  
   const ['E', 'F', 'G', 'H'],  
   const ['I', 'J', 'K', 'L'],  
   const ['M', 'N', 'O', 'P']  
  ];
    
  Trie words = new Trie();  
    
  HttpRequest.getString("../assets/dictionary.txt")  
   .then((contents) {  
    var start = window.performance.now();  
    contents.split("\n").forEach((line) => words[line] = line);  
    var stop = window.performance.now();
    var readFilesTime = stop - start; 
      
    var solver = new Solver(words, grid);  
      
    start = window.performance.now();  
    List<String> results = solver.findAll().toList();  
    stop = window.performance.now();
    var findAllTime = stop - start;  
      
    timeToParseFiles.text = '$readFilesTime';  
    resultsWords.text = '$results';  
    resultsLength.text = '${results.length}';  
    time.text = 'Found in $findAllTime ms';  
   })  
   .catchError((e) => print(e));  
 }

The above Solver and Trie runs in about 1ms on my local machine (finding 33 words in the test board, using my dictionary), which is good enough for me. This is very much a fun weekend project, not meant to be production code. Hopefully it helps you learn a bit of Dart!

I Shrunk my Dart-to-JS code by 11X and So Can You

2013-03-14T13:20:00.003-07:00

Dart, the structured and scalable programming language for web apps, compiles to JavaScript thanks to dart2js. This means Dart apps run across the modern web. When you compile to JavaScript, you want to ensure dart2js generates the smallest amount of bytes. Less bytes means smaller bandwidth bills, and faster load times, and longer battery life. All good things! Read on to learn how to minify your generated JavaScript.

For this example, I will use the offline-enabled Todo app that I built to highlight Lawndart, my easy library for browser storage. The Todo app uses quite a few libraries:

dart:html
Lawndart
WebSQL
IndexedDB
Local storage
Web UI

The original generated JavaScript output size was 612,249 bytes. Minified, it became 289,840 bytes. Minified and gzipped it became 56,496 bytes. That's about 11X smaller than the original output!

(Measuring the original size of the code is tricky. Do I count the lines that I wrote? Do I count the lines generated by the Web UI compiler? I count 9,313 bytes of generated Dart code from the Web UI compiler, which is the code that would be shipped down to Dartium during development. This does not count the size of the packages required. Also, most developers would run a tree-shaking tool on the Dart code if they want to ship pure Dart in production. When I ran dart2dart to generate a single file that contained all the Dart code required for the app, I ended up with 44,860 bytes unminified and ungzipped.)

Let's learn how to get compiled JavaScript output as small as possible.

Step One: Turn on Minification

The editor does not ship with minification turned on by default. Say what?! Fear not, we can fix that.

Right click on your project
Select properties
Select Dart Settings
Add --minify to "Additional flags:"
Embrace the smallification

See this in action:

(Here's a bug that requests to make this easier, please star!)

If you don't use Dart Editor, you can also minify from the command line. Here is an example:

dart2js --minify --out=app.js app.dart

The file shrinks to 289,840 bytes with minification, a 2.1X shrinkage!

Step Two: Compress the file on-the-fly

Most web servers will compress your files for you, on the fly! See your web server's configuration for more details.

The file shrinks to 56,496 bytes with gzip, a 11X shrinkage from the original!

Step Three: There is no step three!

Yup, just use --minify with dart2js and be sure your server has turned on compression/gzip.

To be sure, we're not yet happy with the output size and we're working hard to generate even smaller code. However, minification really helps and you should use it today. Please file bugs and feature requires at dartbug.com. Thanks!

Exploring Dart's Async Library

2013-02-18T21:52:00.004-08:00

(Warning: work in progress...)

Use Dart's async library to keep work off the main UI thread and help your users have a smooth and performant experience. The dart:async library contains classes for timers, futures, streams, and more. Effective use of dart:async keeps your apps easier to understand and your UI snappy.

Telling the future is easier when you have all the data.

The event loop

Or, why this all matters.

Dart programs, just like JavaScript, have no shared-state threads. The UI and the program use the same thread of execution, so when the UI is updating the program isn't running. Conversely, when the programming is running, the UI isn't updating. Keeping work off of the main thread means more time for the UI to respond to user input, which means the UI feels snappy and responsive.

The runtime maintains an event loop and a queue of work to perform. The event loops pops work items off of the queue, one after another. While one work item is handled, the other work items sit in the queue patiently.

Examples of work items can include callbacks for mouse move, mouse click, scroll events, database fetches, window resizes, and programatic callbacks. That is, all of the events and callbacks registered by your program or generated by the browser end up in the queue to be processed by the event loop. It's clear that keeping the individual work items small is key to a performant application and UI.

(Note, in Dart you can create new isolates if you want concurrent program execution. In JavaScript, you can create new Web Workers to achieve the same effect.)

Async programming

As an analogy, consider these two scenarios:

1) Send an email, stop doing any work at all until you hear a response.
2) Send an email, continue on your day and handle the response when you get it.

Scenario #1 is synchronous. Scenario #2 is asynchronous.

Here is an example of a synchronous API:

 print('at the beginning');  
 var file = new File('config.txt');  
 var contents = file.readAsStringSync(); // program blocks until all contents are read  
 print(contents);  
 print('at the end');

This program will print:

at the beginning
[config file contents]
at the end

The above code runs as you would expect, line by line. The file contents can be used immediately in the line after readAsStringSync().

However, if the file is large, the entire program is blocked waiting for the file to be read into memory. For simple command-line scripts this is usually acceptable, but for client-side apps or for server programs, blocking is totally not cool. Surely, we can do better!

To write responsive and asynchronous programs, you should not block on work but instead ask to be notified when the work is complete. Here is an example of an asynchronous API:

 print('at the beginning');  
 var file = new File('config.txt');  
 Future future = file.readAsString(); // returns immediately  
 future.then((String contents) {  
  print(contents); // prints only when the file contents are ready  
 });  
 print('at the end');

This program will print:

at the beginning
at the end
[config file contents]

On the first event loop iteration, three things happen:

print 'at the beginning'
queue up work to read the file contents
print 'at the end'

When the file is completely read into memory:

The future's callback is fired with the file contents as the value

As you can see, printing the file contents happens "in the future". The program is not blocked waiting for the file to be read, as demonstrated by 'at the end' printed before the file contents.

As an aside, you could write the code like this:

 print('at the beginning');  
 var file = new File('config.txt');  
 file.readAsString().then((String contents) {  
  print(contents); // prints only when the file contents are ready  
 });  
 print('at the end');

Or even more simply:

 print('at the beginning');  
 var file = new File('config.txt');  
 file.readAsString().then(print);  
 print('at the end');

To summarize, asynchronous programming is the art of not blocking the main thread. Writing an asynchronous program can be tricky, because the program doesn't execute in what seems to be linear order. Strong abstractions and object models can help put an object-oriented interface on top of hard-to-follow asynchronous code.

The dart:async library

To help manage asynchronous programs, Dart bundles the dart:async library. Inside, you will find:

Future, for handling values returned later
Completer, to help create and finish Futures
Timer, for repeating tasks, and tasks scheduled for later
Stream, for streams of events
StreamController, to help create and manage a stream

Let's take a look at each of these classes.

Future and Completer, aka Producing values from the future

If an asynchronous method or function returns a single value (e.g. readAsString() returns one thing, the file contents), it should return a Future. A Future represents a value not yet available, with the expectation that the value will be available in the future. If a function needs to perform some work before generating a value, the function should return a Future instead of taking a callback parameter.

A Completer can help manage the creation, and completion, of a future value. It is recommended to use a Completer, instead of trying to work with a raw Future.

Here is an example method that uses a Completer to return and complete a Future.

 Future<Account> getAccount(String id) {  
  var completer = new Completer();  
  database.query('SELECT id FROM accounts', (results) {  
   var account = new Account.fromDb(results.first);  
   completer.complete(account);  
  }, (error) => completer.completeError(error));  
  return completer.future;  
 }

(Note, the database API is fictional.)

The database.query() method takes a SQL query and a callback function to handle any results. Thanks to lexical scope, the callback has access to the completer, so it can complete the future with the expected value.

The second callback is run when the database driver encounters an error. Notice how you can complete a Future with an error. If you create a future, be sure to complete it with either a value or an error.

The getAccount() method immediately returns the completer's future, before it queries the database. Sometime in the future, after all the network I/O and database protocol handling, the results are generated and the the completer completes.

When a completer completes, the future generated by the completer gets a value, and code waiting for a value is notified.

A client can use the getAccount() method like this:

 Future future = getAccount('234532');  
 future  
  .then((account) => account.login())  
  .catchError((e) => print(e));

Notice how catchError() is chained off of then(). This works because then() actually returns a Future.

Creating futures with values that exist now

Sometimes, you need to conform a synchronous API to an asynchronous API. That is, you might have a value available right now, however you need to wrap it in a Future. Luckily, there's a constructor for that.

Use new Future.immediate(value) to create a future whose value is available on the next event-loop iteration. Here is an example:

 Future<bool> isOnline() {  
  return new Future.immediate(true);  
 }

It's rare that you have the value immediately available, especially when the API was originally designed to be asynchronous. Another use for immediate is to push the work that would be done on a value to the next event-loop cycle.

Similar to Future.immediate() is Future.of(), which runs a function, collects the result, and makes it available on the next event-loop iteration. Here is an example:

 bool checkConnection() {  
  // ...  
 }  
   
 Future<bool> isOffline() {  
  return new Future.of(checkConnection);  
 }

The function is run now, but the value isn't made available until the next event-loop iteration.

If you have a value available now, but you want to delay the completion of a Future, you can use Future.delayed(). The value is generated now, but the future waits before completing. Here is an example:

 Future simulateNetworkLatency(int delayMillis) {  
  return new Future.delayed(delayMillis, () => makeRandomBytes());  
 }

If an error occurred, and you need to immediately complete a Future with an error, you can use Future.immediateError.

 Future isOnline() {  
  if (!isConnected) {  
   return new Future.immediateError(new StateError('not connected'));  
  } else {  
   return new Future.immediate(true);  
  }  
 }

The above code is rare, most of the time a function that returns a Future is also interacting with an asynchronous API.

Protip: Always return a Future from a method that uses a Future. This allows the calling code to properly catch errors that might occur.

Consuming Futures

The previous section looked at producing a Future, either with a Completer or with the various constructors on Future. This section will focus on consuming Futures produced by an API.

Tip: To learn more about the basics of consuming Futures, read Using Future based APIs from dartlang.org.

For robust synchronous code, you should expect and handle errors. Here is a typical example:

 DatabaseConnection db;  
 try {  
  db = openDatabase();  
  var results = db.query();  
 } catch (e) {  
  print(e);  
 } finally {  
  if (db != null) db.close();  
 }

The intended code runs inside the try block, errors and exceptions are handled inside the catch block, and the finally block is run no matter what.

You can achieve the same type of code organization with Future-based asynchronous code. Here is an example:

 DatabaseConnection db;  
 Future future = openDatabase();  
 future  
  .then((_db) {  
   db = _db;  
   db.query();  
  })  
  .catchError(print)  
  .whenComplete(() => if (db != null) db.close());

In the above example, the intended code runs inside then(), errors and exceptions are handled inside catchError(), and whenComplete() is run no matter what.

It's very important to chain catchError() and whenComplete() from the original future object. Do not do this:

 // bad, don't do this  
 Future future = openDatabase();  
 future.then((_) => /* ... */);  
 // this only catches errors from openDatabase(), not from then()  
 future.catchError(print);

The above example will not catch errors thrown by then(). You must chain then(), catchError(), and whenComplete() to full handle errors.

You can chain Futures if you want them to run in order, one after another. Here is an example:

 db.open()  
  .then((_) => db.nuke())  
  .then((_) => db.save("world", "hello"))  
  .then((_) => db.save("is fun", "dart"))  
  .then((_) => db.getByKey("hello"))  
  .then((value) => query('#text').text = value)  
  .catchError((e) => print(e));

Notice how there is one catchError() at the end of the chain. The last catchError() handles any error or exception thrown from anywhere in the chain.

[Moe coming soon!]

(Photo credit: http://www.flickr.com/photos/49848582@N08/5911302478/, CC)

Lawndart helps you write offline web apps

2013-02-14T16:21:00.001-08:00

I'm happy to announce my new Lawndart library for Dart, which helps you build offline-enabled modern web apps. Using Lawndart, you can use a consistent and easy interface no matter what underlying storage mechanism is supported.

These things are seriously dangerous. The toy, not the source code.

Lawndart was initially inspired by lawnchair, a JavaScript library that helps to provide a consistent interface across client-side storage. However, Lawndart evolved and adopted a Future based API for more composable methods.

Available in version 0.2.0:

Unified API for in-memory, local storage, indexed db, and websql
Future-based APIs
Tests
Example Web UI app with IndexedDB

Here is an example of using Lawndart to open, clear, save, and retrieve data:

 var store = new IndexedDbAdapter('teststore', 'testdb');  
 store.open()  
  .then((_) => store.nuke())  
  .then((_) => store.save(id, "hello"))  
  .then((_) => store.save("is fun", "dart"))  
  .then((_) => store.getByKey("hello"))  
  .then((value) => query('#$id').text = value);

Thanks to Futures, the APIs can be chained. All methods in Lawndart return a Future for asynchronous behavior.

You can install Lawndart from pub, Dart's package manager. Simply add a dependency to lawndart in your pubspec.yaml file:

 name: your_cool_app  
 dependencies:  
  lawndart: any

Lawndart is open source and hosted on Github. Pull requests are much appreciated, as are bugs and feature requests.

Please try Lawndart and let me know what you think!

Photo Credit: im.no.hero cc

Slides from JFokus talk on Dart and Web Components

2013-02-11T10:30:00.000-08:00

I had the pleasure of presenting "Web Components Now: Dart and Web UI" at JFokus 2013. In this presentation, I covered the new hotness coming to the web platform and how Dart helps to bring much of to modern browsers today. Encapsulation, templates, custom elements, and dynamic data-driven views are made available thanks to Dart's Web UI library (heavily inspired by Web Components and Model-Driven Views).

The slides are now available. WARNING: You might need Chrome Canary to see all the demos in action.

In the presentation, I covered topics such as:

Web Components
Shadow DOM
Custom elements
Dart language and libraries
Dart's toolchain
Dart's Web UI library (a polyfill for Web Components and MDV-esque behavior)

If you're interested in these topics, you can learn more about Dart and Web UI.

JFokus was a blast. Great conference, friendly crowd, excellent A/V setup! As an old Java developer, it felt good showing off the hotness of modern web development and structured web languages to a "hometown" crowd. Check out this Photosphere pick of the conference room, thanks to Alexis Alexis Moussine-Pouchkine.

Thanks to everyone who came to the presentation!

Big props to Mr. Eric Bidelman for some of the slides, and the awesome <x-gangam-style> tag.

Bite-sized Dart videos

2013-02-08T14:24:00.004-08:00

For the past month I've been working with Marakana to film and produce short, bite-sized introduction videos for the Dart language and libraries. After filming lots of various videos and formats, I've noticed that viewer retention is difficult. It's so easy to simply click away at any time. Our long-form videos are difficult to watch all the way through. So, we're swinging over to the other end of the spectrum with super-short, targeted videos. The result: Dart Tips, for when you have only 5 minutes to learn something new about Dart.

From "Functions are Fun, pt 1"

Six videos have been released so far. Topics include:

You can see the entire playlist for Dart Tips for all the episodes.

For a taste, here's "Functions are fun, pt 1":

Marakana has been great to work with. They are professional, fun, and like to experiment with new techniques. They have a strong training operation, providing classes on Android, HTML5, and hopefully soon Dart. :)

More videos are on their way. What do you want to see next?

Minification is not enough, you need tree shaking

2013-01-29T10:41:00.001-08:00

In which the virtues of automated mechanical arboreal pruning are extolled over quaint manual labor, as applied to web development build processes.

The setup

Ever notice how the primary bit of marketing for many traditional web programming libraries is their download size? Why is that?

Check this out:

Why does size matter so much for these libraries? Your first instinct is probably, "because the more bytes you shuttle across the wire, the slower the app starts up." Yes, this is true. I'd also say you're wrong. The primary reason that size matters for these libraries is because traditional web development has no intelligent or automated way to prune unused code so you can ship only the code that is used over the wire.

The web is full of links, yet web dev has no linker

The web development workflow is missing a linking step. A linker's job is to combine distinct project files into a single executable. A smart linker will only include the symbols and code that are actually used by the application, thus pruning unused code. The traditional web developer does not have an intelligent linker.

It's 2013, and the job of micro-managing web development libraries is still being done by humans. Humans: the same people that brought you this little gem. Web developers need machines and tools to take care of linking and minifying so they can get back to comparing traditional web development libraries based on actual feature sets instead of how femto they are.

I want my web programming language to offer enough structure and intelligent tools to take care of pruning, minification, and more. This is why I dig Dart, because it has the structure (classes, libraries, packages, type annotations, metadata, etc) and the tools (dart2js) for a modern development workflow.

Don't just prune unused code, shake it off

Dart tools support tree shaking, a technique to "shake" off unused code, thus shrinking the size of the deployed application. I can import rich libraries chock full of useful goodness into my application, but only the functions I actually use will be included in my generated output. Awesome!

Real code example, shaken not stirred

Consider this simple Dart library, ironically named embiggen. There are two top-level functions in this library, embiggen and unembiggen.

 library embiggen;  
   
 String embiggen(String msg) {  
  if (msg == null) {  
   throw new ArgumentError("must not be null");  
  }  
    
  return msg.toUpperCase();  
 }  
   
 String unembiggen(String msg) {  
  if (msg == null) {  
   throw new ArgumentError("must not be null");  
  }  
    
  return msg.toLowerCase();  
 }

Here is the main program, which uses only embiggen:

 import 'package:embiggen/embiggen.dart';  
   
 main() {  
  var args = new Options().arguments;  
  if (args.length == 0) {  
   print("Usage: dart embiggen.dart phrase");  
   return;  
  }  
    
  var phrase = args[0];  
    
  print(embiggen(phrase));  
 }

I love embiggen, but I'm less entralled with unembiggen and will never use it. Do I have to search for nano-embiggen?! Nay! Let the linker do it's tree-shaking magic.

Run the main application through the dart2js tool, which supports tree-shaking for both JavaScript and Dart outputs. Note there is no command-line option for tree shaking, because dart2js is always tree shaking. For simplicity's sake, let's generate Dart.

 dart2js --output-type=dart embiggen.dart

Gaze into the tree-shook generated output (reformatted to make it easy to read):

main() {
  var args=new Options().arguments;
  if (args.length == 0) {
    print("Usage: dart embiggen.dart phrase");
    return;
  }
  var phrase=args[0];print(embiggen(phrase));
}

String embiggen(String msg) {
  if (msg == null) {
    throw new ArgumentError("must not be null");
  }
  return msg.toUpperCase();
}

(note: The actual output is actually all on one line, with white space removed. I reformatted the code above to make it easy to read.)

Notice how the embiggen function is included, but unembiggen is nowhere to be seen, even though I imported the library. The tree, it is shaken!

But is this the best we can do? The dart2js tool also supports minification with the --minify flag.

 dart2js --minify --output-type=dart embiggen.dart

The minified, single-line, tree-shook generated output:

 main(){var A=new Options().arguments;if(A.length==0){print("Usage: dart
embiggen.dart phrase");return;}var C=A[0];print(B(C));}
B( A){if(A==null){throw new ArgumentError("must not be null");}
return A.toUpperCase();}

Both outputs have unused code eliminated, and the minified version also replaces variable names. This is exactly the kind of help I want from my tools.

Why this works

The structure of Dart programs cannot change after compilation. In other words, Dart does not support altering class structure during runtime. Dart also does not have extreme dynamism like eval(). Dart compilers and linkers can assume more about the structure of the program, and thus can be more aggressive about tree shaking and minifications.

Moral of the story

I believe that web developers need a better workflow that automates tree shaking, dead code elimination, minification, and more. Stop caring how big a library is, and instead let a tool or build step produce the smallest output possible for you, ideally by tree shaking the application.

One option to consider is Dart, with its structured language and intelligent tools, like a tree-shaking and minifying compiler. With dart2js, you can import entire libraries, regardless of size, and generate only the code that is required to run the program.

Regardless of what language you use, demand more from your tools.

Acknowledgements

Thanks to Bob Nystrom's OSCON presentation from 2012, from which I humbly embraced-and-extended the setup of this post.

Holy Cow, Dart Unit Tests are Easy

2013-01-28T22:38:00.001-08:00

Dart provides a rich unit test library out of the box. Inspired by testing libraries like Hamcrest and dartmatch, the dart:unittest library provides test groups, numerous matchers, and more. Read on to learn how easy it is to write your first Dart unit tests!

You, too, can create tests this pretty.

Test subject

To illustrate, I've just created the soon-to-be massively critical embiggen library. This library will bigify your text. It's very advanced.

Of course, I made a pub package for this library:

The contents of embiggen.dart are:

 library embiggen;  
   
 String embiggen(String msg) {  
  if (msg == null) {  
   throw new ArgumentError("must not be null");  
  }  
    
  return msg.toUpperCase();  
 }

I'll let that sink in for a while, it's pretty intense.

Add the unit test package

You can use pub to get the unit test package and link it into your project. Simply declare the unittest dependency in your pubspec.yaml:

 name: embiggen  
 description: Turns small things into big things.  
   
 dependencies:  
  unittest: any

Dart Editor will automatically run "pub install" when it detects a change to pubspec.yaml. If you are using the command-line tools, you can run "pub install" manually. This step will find the unittest package in your local pub cache, or it will download it from pub.dartlang.org. Once found, pub will set up the proper symlinks to make unittest available to your project.

Set up the tests

The pub package layout convention dictates that tests should be placed inside a "test" directory. Create a new file named "embiggen_test.dart" and place it inside "test".

Import both the embiggen library and the unittest library. You need to import embiggen because your test needs to access the actual embiggen function.

Here is embiggen_test.dart so far:

 library embiggen_test;  
   
 import 'package:embiggen/embiggen.dart';  
 import 'package:unittest/unittest.dart';

(Note: you may need to run "pub install" again, which will configure symlinks in your "test" directory.)

Write a test

Dart is a language without much ceremony, so let's dive into it. Create a main() function and place the first test inside. A test takes a name (or, a very short description) and an anonymous function that itself contains the test condition.

Here is embiggen_test.dart with a simple test:

 library embiggen_test;  
   
 import 'package:embiggen/embiggen.dart';  
 import 'package:unittest/unittest.dart';  
   
 main() {  
  test("bigifies text", () {  
   expect(embiggen("hello"), equals("HELLO"));  
  });  
 }

Use "expect(actualValue, expectedValueMatcher)" to perform the actual test. The "expectedValueMatcher" is dynamic, it can be a simple value or a matcher that can test for a wide variety of values. In the above example, equals("HELLO") returns a simple matcher that matches on equality. More on matchers shortly.

Run the test

Choosing to place the tests inside main() was deliberate, it enables the Dart file to act as its own test runner. Simply run the embiggen_test.dart file, either from the command line or via Dart Editor.

Here is the output on the console:

 unittest-suite-wait-for-done  
 PASS: bigifies text  
   
 All 1 tests passed.  
 unittest-suite-success

Out of the box formatting!

A failed test looks like this:

 unittest-suite-wait-for-done  
 FAIL: bigifies text  
  Expected: 'HELL'  
     but: was 'HELLO'.  
    
  #0   DefaultFailureHandler.fail (package:unittest/src/expect.dart:86:5)  
  #1   DefaultFailureHandler.failMatch (package:unittest/src/expect.dart:90:9)  
  #2   expect (package:unittest/src/expect.dart:55:29)  
  #3   main.<anonymous closure> (file:///Users/sethladd/dart/embiggen/test/embiggen_test.dart:8:11)  
  #4   TestCase.run (package:unittest/src/test_case.dart:83:11)  
  #5   _nextBatch._nextBatch.<anonymous closure> (package:unittest/unittest.dart:808:19)  
  #6   guardAsync (package:unittest/unittest.dart:767:19)  
    
   
 0 PASSED, 1 FAILED, 0 ERRORS

Test for exception

Passing null to embiggen() will throw an ArgumentError, so let's not forget to test for the error condition. First, be sure to wrap the condition to test inside an anonymous function. This ensures that any exceptions thrown by the condition are properly caught. There are plenty of pre-built matchers to help with exceptions, from the simple "throws", which tests that anything was thrown, to specific matchers like "throwsArgumentError".

Here is embiggen_test.dart with a test for an exception:

 library embiggen_test;  
   
 import 'package:embiggen/embiggen.dart';  
 import 'package:unittest/unittest.dart';  
   
 main() {  
  test("bigifies text", () {  
   expect(embiggen("hello"), equals("HELLO"));  
  });  
    
  test("null throws ArgumentError", () {  
   expect(() => embiggen(null), throwsArgumentError);  
  });  
 }

What's next

This post barely scratches the surface. Dart's unit test library has support for setup/teardown, test groups, nested groups, a very extensive matchers library, and even mocks/stubs. Dart also has various test outputs, ranging from VM to HTML (which you can see an example of in the top of this post).

Further reading

Unit testing with Dart article
Writing unit tests for pub packages in Dart blog post
Unit test, Part 1 screencast

Summary

Unit tests come out of the box with the Dart SDK. They are simple to write, compose well, and have many matchers. Simply create a "test" directory, add Dart test scripts, and BOOM you're making ice cream.

(Nerd cow credit: http://www.flickr.com/photos/toastersarts/6893702709/)

Do This One Thing Or Your Dart Web App Will Break

2013-01-12T15:50:00.000-08:00

This is not link bait, this is a serious call to action for our Dartisans. If you do nothing, your Dart web app will stop working in a few weeks. Luckily, the fix is easy. To learn how to keep your Dart web app working, read on!

Background

Almost all Dart web apps use a small, but crucial, JavaScript file to bootstrap. While strictly not required, this dart.js file contains the necessary logic to turn on the Dart VM, swap out Dart code for JavaScript code if the VM isn't available, enable Dart-JavaScript interop, and more.

Most Dart web apps have this line at the bottom of their HTML file:

The Problem

There are a few problems with the current arrangement.

The Google Code SVN server is not a CDN, and is not optimized for acting as a CDN.
Relying on a public HTTP link makes it impossible to work without a network connection. Hacking on Dart on a plane is difficult unless you plan ahead.
The dart.js file cannot move inside the SVN repo, making it difficult to refactor directory layouts in our repository.
Dart web apps start slower that normal because the SVN server is not an optimized static asset server.

It's clear we needed to do something better, especially before Dart 1.0.

The Solution (aka Do This Now!)

Luckily, Dart ships out of the box with pub, our package manager. Pub helps you use third-party libraries with ease, and it turns out it works just as well with static assets like, you guessed it, JavaScript files.

We put dart.js into a pub package named browser and hosted it on pub.dartlang.org. Pub is now the canonical location for dart.js.

Step 1 - Add the browser package to your app

Create a pubspec.yaml file for your project (if you haven't already), and add the browser dependency:

dependencies:

browser: any

The browser package contains the dart.js file. Learn more about the pubspec.yaml file.

Step 2 - Run pub install

Now run pub install to download the browser package and link it to your application. This command can be run from the command line via the Dart SDK, or via Dart Editor (from the Tools menu). You'll know this works when the packages directory contains a symlink to the browser package.

Step 3 - Update links to dart.js

Comb through your HTML files and replace:

~~<script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>~~

with

Step 4 - Put web assets into web/ (optional)

The pub convention says to put all your web assets, like HTML, CSS, etc, into a web/ directory inside your pub package. Though not strictly required, we expect to be able to offer more helpful utilities if pub packages conform to conventions. Learn more about pub package layouts.

Summary

The dart.js file, probably used in your Dart web app today, will be deleted from SVN in a few weeks. You should install the browser package and update your <script> tags to point to the new location of dart.js.

You can send feedback to the original thread on the mailing list, where we look forward to your comments. We know these changes are disruptive, and we appreciate your help as we refactor quickly on the road to Dart 1.0.

Known Issues

Pub likes symlinks. A lot. Symlinks can be tricky to deploy, and now that dart.js is pulled in by a symlink, deployment of a Dart Web App is now a bit more complication. This is a very well know issue and we expect to have an answer for Dart web app deployments soon.

Video from my Dart talk at Devoxx 2012

2012-12-20T11:02:00.003-08:00

I had the pleasure of presenting Dart to Devoxx 2012 in Antwerp, Belgium. This conference had perhaps the best A/V setup of any conference that I have been to. Bonus points: the questions at the end were excellent, the audience was clearly engaged and interested. Thanks to the organizers and all the attendees!

Now, you can watch the video and slides. It's free!

4 New Simplifications from Dart Web UI

2012-12-10T00:38:00.001-08:00

The Dart Web Components package has been renamed to Dart Web UI to better reflect the wide range of functionality found in the library. Also, syntax has been simplified based on feedback from users. This post covers some of the new features and gives tips on how you can migrate your code.

A frost covered spider's web.

Dart Web UI provides polyfills and compilers for Web Components (making them available to today's browsers), dynamic templates, and live data binding inspired by Model Driven Views. You can use Dart Web UI to build modern client-side web apps. For more information, read my blog posts about Dart Web UI or study the detailed article on the subject.

Shorter package names

Old: ~~package:web_components/web_components.dart~~

New: package:web_ui/web_ui.dart

Your pubspec.yaml now looks like this:

 dependencies:  
  web_ui: any

Simpler two-way data binding for input fields

Old: ~~data-bind="attribute:dartAssignableValue"~~

New: bind-attribute="dartAssignableValue"

For example:

 <input type="text" bind-value="superlative" placeholder="Enter superlative">

Simpler declarative event handlers

Old: ~~data-action="click:handleClick"~~

New: on-click="handleClick()"

Notice how the on-action form declares an expression (complete with parentheses). You can pass the event to the handler by using handleClick($event).

For example:

 <select name="language" on-change="chooseExample($event)">  
  <option value="">-- Choose one --</option>  
  <option value="js">JavaScript</option>  
  <option value="java">Java</option>  
 </select>

Simpler conditional templates

Old: ~~<template instantiate="if securityClearance == 'top'">~~

New: <template if="securityClearance == 'top'">

For example:

 <template if="langChoice != null && !langChoice.isEmpty">  
  <div>  
   <h3>{{ langChoice }}</h3>  
   <code><pre>{{ example }}</pre></code>  
  </div>  
 </template>

Template tag no longer required

Option A: <template if="securityClearance == 'top'">

Option B: <div template if="securityClearance == 'top'">

For example:

 <div template if="langChoice != null && !langChoice.isEmpty">  
  <h3>{{ langChoice }}</h3>  
  <code><pre>{{ example }}</pre></code>  
 </div>

Summary

The Dart Web Components package is now the Dart Web UI package. The name was changed to better reflect the breadth of features available, including polyfills for Web Components, dynamic templates, and live data binding. Recent feedback has helped to simplify some of the syntax around event handlers, conditional templates, and more.

You can discuss Dart Web UI at web-ui@dartlang.org mailing list, or ask questions on Stack Overflow. You can follow the open source Dart Web UI project on Github.

(Picture courtesy of http://www.flickr.com/photos/foxypar4/2124673642/)

Your First Loop with Dart Web Components

2012-11-25T22:16:00.002-08:00

In which the trusty and powerful loop is given its time to shine in Dart Web UI. Thus far, we've looked at data binding, conditionals, and even custom components with Dart Web UI. But you can't get very far without needing to iterate through a collection and render a template for each element. Not to worry! In this post, I'll show you how to bind a collection to a template in Dart Web UI.

Many loops.

Prerequisites

You may want to read Your First Model Driven View with Dart, which contains more information on getting started and configure the necessary tools. This post assumes you've read my previous posts on Web Components and Dart.

Overview

You can render a <template> tag for each item in a collection. Whenever the collection is modified, the <template> tag is reapplied for every item in the collection (note: we think this will be optimized in future versions of Dart Web UI).

Keeping with the style of Web Components, this iteration is declarative. To bind a collection to a <template>, you can use the iterate attribute. Here is an example:

    <template iterate="fav in userFavorites">  
     <li><span>{{ fav }}</span></li>  
    </template>

For every item in userFavorites, a new <li> tag will be created.

Example

This example displays a list of language features found in Dart, each with a checkbox. The user can select their favorite language features, which will be printed out in a second, sorted list. This example shows off templates, data binding, event handling, and iteration.

The Dart Code

Here is the Dart code, which sets up the list of language features (the features variable), the collection of favorite features chosen by the user (the userFavorites variable), and the event handler when a user chooses a feature (the addToFavorites function).

 import 'dart:html';  
   
 List<String> features = const <String>['lexical scope',  
                     'closures',  
                     'getters and setters',  
                     'isolates',  
                     'top-level functions',  
                     'optional static types',  
                     'one-line functions',  
                     'familiar syntax',  
                     'map and list literals',  
                     'generics'];  
   
 // TODO try a Set when it can be watched  
 List<String> userFavorites = new List<String>();  
   
 addToFavorites(Event e) {  
  InputElement checkbox = e.target;  
  var fav = checkbox.value;  
    
  if (checkbox.checked) {  
   userFavorites.add(fav);  
  } else if (!checkbox.checked) {  
   var index = userFavorites.indexOf(fav);  
   userFavorites.removeAt(index);  
  }  
    
  userFavorites.sort();  
 }  
   
 main() { }

The HTML code

Here is the HTML code with the Dart Web Components declarations.

   <ul>  
    <template iterate="feature in features">  
     <li>  
      <label>  
       <input type="checkbox" value="{{ feature }}"  
           on-click="addToFavorites($event)">  
       <span>{{ feature }}</span>  
      </label>  
     </li>  
    </template>  
   </ul>  
     
   <h3>Your favorite features</h3>  
     
   <ul>  
    <template iterate="fav in userFavorites">  
     <li><span>{{ fav }}</span></li>  
    </template>  
   </ul>

Working demo

Here is an embedded live demo for you to try. It has been compiled to vanilla JavaScript and HTML so that it works in all modern browsers.

(If you can't see the above embedded demo, you can try this direct link.)

Summary

You can declaratively iterate through collections with the <template> tag in Dart Web Components. The collection is bound to the template, which updates any time the collection is updated.

You can see the source for this and more Dart Web Components samples on Github. Meanwhile, read more about Dart Web Components. Have fun!
(Image courtesy of http://www.flickr.com/photos/jenny-pics/3196346379/)

Your First Conditional Template with Dart Web Components

2012-11-21T22:48:00.002-08:00

As if data binding and custom elements with Dart Web UI isn't enough, you can also conditionally render blocks of elements via simple declarative attributes! The conditionals are "live" and are re-evaluated when data changes, keeping your page dynamic and up-to-date.

(You may want to read Your First Model Driven View with Dart, which contains more information on getting started and configure the necessary tools. This post assumes you've read my previous posts on Web Components and Dart.)

Conditionals templates

With Dart Web UI, you can conditionally display elements. For example, you can declaratively say "If the checkbox is checked, then display the thank you notice." Here's an example:

 <template if="acceptLicense">  
  <h2>Thanks!</h2>  
  <p>We'll send you an activation key to your email.</p>  
 </template>

In the above example, the <h2> and <p> will only be added to the DOM if the acceptLicense variable becomes true. If acceptLicense becomes false, the template contents are removed from the DOM.

A <template> is an inert set of elements, which is parsed but not activated and not immediately added to the DOM. To render the elements in a template, the conditional in the if must become true. You can use any Dart code that results in a boolean for the conditional.

Full example

Here is a complete Dart Web UI page with a conditional template. The below example also demonstrates data binding with a checkbox.

 <!DOCTYPE html>  
   
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Simple Conditional</title>  
   <link rel="stylesheet" href="App.css">  
  </head>  
  <body>  
   <h1>Simple Conditional with Data Binding</h1>  
     
   <p>  
    <label>  
     <input type="checkbox" id="accept-license" bind-checked="acceptLicense">  
     I accept the license  
    </label>  
   </p>  
     
   <template if="acceptLicense">  
    <h2>Thanks!</h2>  
    <p>We'll send the activation key to your email.</p>  
   </template>  
   
   <script type="application/dart">  
    bool acceptLicense = false;  
    main() { }  
   </script>  
   <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
  </body>  
 </html>

To compile the above file into vanilla JavaScript and HTML, learn more about the Dart Web Components tools.

Working example

Enjoy this fully working example, compiled to JavaScript.

Summary

Use conditional templates with data binding to control the display of blocks of elements. Use a <template if="some_boolean_expression"> to conditionally render elements to a page. The conditional template is "live" and is re-evaluated when data changes.

You can see the source for this and more Dart Web Components samples on Github. Meanwhile, read more about Dart Web Components. Have fun!

(image courtesy of http://www.flickr.com/photos/84987970@N00/4981201339/)

Your First Input Field Binding with Web Components and Dart

2012-11-17T23:21:00.003-08:00

Updating a web page when the data changes is cool. Updating the data when the web page changes is even cooler. Read on to learn how to create a live data binding between form fields, data, and your web page with Web Components, Model Driven Views, and Dart.

Artful binding.

(You may want to read Your First Model Driven View with Dart, which contains more information on getting started. This post assumes you've read my previous posts on Web Components and Dart.)

What do I mean, binding?

In the context of user interfaces, data binding is the technique of keeping both data and the view in sync. If the data changes, update the view. If the view changes, update the data. It's the later scenario (view changing the data) that I discuss in this post.

The HTML

HTML views can update data via input fields. Input fields can be bound to data, both displaying the data and updating the data. Use the data-bind attribute on input fields such as text, textarea, and select.

 <p>MDV is {{ superlative }}</p>  
 <div>  
  <input type="text" bind-value="superlative" placeholder="Enter superlative">  
 </div>

The above code sample shows two data bindings. The first, {{ superlative }}, we saw in my previous post. The second, data-bind, is how you declare a binding for an input field.

Specifically, bind-value="superlative" is saying "bind the superlative variable found in Dart code to the value attribute of this input field". The Dart Web Components document calls this "two-way binding", because the input field itself is bound in two ways: reading and writing the variable.

The Dart

In this simple example, the Dart code only declares the variable and defines the main method.

 String superlative = '';  
 main() { }

One of the main benefits of Web Components is that everything is very declarative, so the need for glue code or explicit event handlers is diminished.

The results

Best to show this off live, so you can see the live data binding.

Notice how the display is updated as the user types in the input field. To make this happen, almost no code was created, and everything was simply declared in the HTML. Awesome!

Summary

Use the data-bind attribute on input fields to declare live "two-way" data binding. When the variable's value is changed, the input field changes. When the user updates the input field, the variable's value changes.

Read the Dart Web Components documentation or check out my other blog posts on Dart Web Components. The code from this post, and other examples of Dart Web Components, is available on Github.

Thanks!

(Binding image courtesy of http://www.flickr.com/photos/ruthbleakley/3098090721/)

Dart Up & Running book now available

2012-11-13T01:46:00.001-08:00

Achievement unlocked: Published an O'Reilly book!

Dart Up & Running, a quick and easy guide for learning Dart, is now ready for shipping. A huge thanks to my co-author Kathy Walrath and our many reviewers. We hope you enjoy reading this book and using Dart to build modern web apps!

Buy Dart Up & Running printed and e-books at O'Reilly or Amazon.

In the book, you'll learn about the Dart language, libraries, and tools such as Dart Editor and our pub package manager. There's even an application walk-through, looking at a client-side and server-side Dart app.

As you learn Dart, be sure to join our mailing list and ask questions on Stack Overflow.

Your First Model Driven View with Dart

2012-11-12T03:38:00.003-08:00

Packed inside the Dart Web UI project is inspired by Model Driven Views (also known as MDV). While Web Components provides encapsulation and reusability, it doesn't say much about linking your data and models with your views. MDV is a set of techniques to help you bind your data to your views, and just like Web Components, you can use Dart with MDV-esque behavior today.

Everything you are about to read works across modern browsers, because Dart compiles to JavaScript.

The binding.

Intro

The MDV behavior of Dart Web UI (hereafter referred to as Web UI) helps you bind your data and models to the view in a declarative manner. Binding usually means "when the data changes in one location, change it in another." Typically, web frameworks can wire together the necessary callbacks to keep the view (any text or input fields) in sync with the models (the Dart objects that contain the state of the application).

Setup

Remember, you'll need a pubspec.yaml that included the web_components package:

 name: App  
 description: A sample application  
 dependencies:  
  web_ui: any

If you're new to Dart Web Components, you might want to read my Your First Web Component with Dart post, or the Dart Web Components article. Just like Dart Web Components, for MDV to work you need to get the web_components package, which contains the dwc compiler. The compiler is what converts the MVC and WC code into vanilla Dart and HTML. You can use dart2js to convert the Dart into JavaScript and run these samples across all major browsers.

Sample code

Let's look at a simple example that takes some data from Dart and displays it on a web page. We also add a button that, when clicked, updates the data which in turn updates the data on the page. Binding in action!

Here is the HTML:

 <body>  
  <h1>Hello MDV</h1>  
  <p>MDV is {{ superlative }}</p>  
  <button id="change-it" on-click="changeIt()">Change</button>  
  <script type="application/dart" src="HelloWorld.dart"></script>  
  <script src="dart.js"></script>  
 </body>

Note the {{ superlative }} is a placeholder for data, to be populated by the MDV code. The name superlative is the name of a variable in Dart code.

The on-click="changeIt()" is an attribute that tells MDV to run the changeIt method whenever the button is clicked. The name changeIt is the name of a top-level function in Dart code.

Here is the Dart code:

 import 'dart:math';  
 String superlative;  
 List<String> alternatives = const ['wicked cool', 'sweet', 'fantastic'];  
 Random random;  
 main() {  
  superlative = 'awesome';  
  random = new Random();
 }  
 changeIt() => superlative = alternatives[random.nextInt(alternatives.length)];

Note the top-level variable named superlative, which is initially set to 'awesome' in main. When the page is first displayed, you will see:

(If you can't see the embedded demo above, you can try the live demo.)

How cool is that?! Here we see simple data binding in action.

When the button is clicked, the changeIt function is run. A random alternative is chosen and assigned to the variable superlative. After the button is clicked, the view is updated.

The MDV code takes care of all the bindings and updating. The Dart code doesn't contain any code or logic to update the view when a value changed.

There's a lot more to Dart's support for MDV, which I'll cover in future blog posts. You can see this and more code at https://github.com/sethladd/dart-web-components-tests The work on Dart Web Components and MDV is just beginning, so please try it out and send feedback. Thanks!

Dart Up and Running Webcast from O'Reilly

2012-11-12T03:06:00.001-08:00

O'Reilly, our publisher for the new Dart Up & Running book by Kathy Walrath and yours truly, ran a webcast to help promote Dart and the book.

(If you can't see the embed, you can watch the video directly on YouTube)

This is the first time I used a Hangout for an entire webcast, and I admit the fonts are hard to read in this recording. Good lesson learned for next time!

Thanks to everyone who watched, and thanks to Kathy for monitoring the back channel and funneling questions from our viewers.

Dart is Breaking Open, Interview with Marakana

2012-11-08T23:48:00.000-08:00

I had a fun time at Marakana as a guest on their new show "Breaking Open". We talked about Dart and scaling web development.

"We're building Dart to help web developers start small, and grow over time to classes, and then libraries, and then tens of developers, and then hundreds of developers."

Thanks for watching!

Your First Web Component with Dart

2012-11-06T00:05:00.001-08:00

With all the power we have from HTML5 and the modern web platform, you can't easily do simple things like extend <button>. Luckily, this is changing and the web platform is undergoing a declarative renaissance. Thanks to the hard work of many groups and individuals across different browser vendors and spec committees, Web Components are emerging as the way to bring structure and encapsulation to modern web developers. The best news yet: you don't need to wait years for these new standards to be implemented, you can use Dart to build Web Components today.

Web Component basics

The component model for the web, aka Web Components, is a collection of specifications that allow developers to build reusable, encapsulated, and declarative widgets.

When people say "Web Components" they generally mean these four ideas:

templates, which define chunks of markup that are inert but can be activated for use later
decorators, which apply templates to let CSS affect rich visual and behavioral changes to documents
custom elements, which let authors define their own elements, including new presentation and API, that can be used in HTML documents
shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree

Custom elements

I'm most excited by custom elements because they allow me to build, share, and use <x-fancy-button> in my apps.

A custom element can encapsulate the structure, styles, and behavior of a user-defined tag. The structure, or all the nested divs and spaces, is hidden inside the custom element and not immediately visible to the page's DOM. The CSS styles can be scoped to just this new element, to prevent leaking through to the rest of the document. Custom behavior, via JavaScript or Dart, can be attached to further specialize the API of the element.

Data binding

Most developers want a way to update the view (aka the HTML page) when the model (aka plain old Dart objects) changes, and visa versa. This technique is called data binding, and most modern MVC-esque frameworks have some support for making this easy.

While not specifically part of the Web Components page 'o tricks, model driven views are an important aspect to the emerging modern web app stack. MDV, as it is often called, uses a declarative syntax for one-way and two-way data binding of data and views.

Using Web Components today

The Dart team has been hard at work building Web UI in Dart that builds on top of Web Components, and making them available to modern browsers today. It's easy to write your first component, let me show you how.

(The following assumes you have Dart Editor installed and working. While it's not a requirement, the editor makes things a bit easier thanks to its automated build system.)

1) Create a new project

Create a new project in Dart Editor, with both "Generate content for a basic web app" and "Add Pub support" checked.

2) Add the Web Components package

Open the pubspec.yaml file and add the dependency to the web_components package:

 name: App  
 description: A sample application  
   
 dependencies:  
  web_ui: any

3) Install dependencies

Select the pubspec.yaml file in the editor and go to Tools | Pub Install. Assuming it worked, you will see a new packages folder in your application, with web_components and all of its dependencies.

4) Add the build script

Web Components need to be compiled into vanilla Dart (and then, JavaScript) and HTML. To make this easy, the editor can run a build script whenever a file is changed. Don't worry, it's very fast.

Add this file as build.dart in the root of your application (parallel to web/ and packages/):

 import 'package:web_components/component_build.dart';  
 import 'dart:io';  
   
 void main() {  
  build(new Options().arguments, ['web/App.html']);  
 }

5) Add the custom component

This example uses a custom component for a clickable button and its output. Not exactly the most exciting thing in the world, but it's small and self contained.

Create a click.html file inside the web/ directory and add this:

 <html><body>  
  <element name="x-click-counter" constructor="CounterComponent" extends="div">  
   <template>  
    <div>  
     <button on-click="increment()">Click me</button>  
     <span>(click count: {{count}})</span>  
    </div>  
   </template>  
   <script type="application/dart">  
    import 'package:web_ui/web_ui.dart';  
   
    class CounterComponent extends WebComponent {  
     int count = 0;  
     void increment() { count++; }  
    }  
   </script>  
  </element>  
 </body></html>

The <element> tag defines the new custom element, which in this case extends the <div> element. The structure of this new element is found inside the <template> tag.

When the <button> is clicked, the increment method is called on this element. This custom behavior is defined in the Dart code inside of the <script> tag.

The {{count}} syntax is data binding between the element's count field (again, defined in the <script> code) and the DOM output. When the element's count field changes, the DOM is updated.

6) Clean up the editor's default boilerplate

Delete the following files from your project, they aren't needed for this example:

web/App.dart
App.html
App.css

7) Use the custom element

Create a web/App.html and use the following code:

 <!DOCTYPE html>  
   
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>App</title>  
   <link rel="components" href="click.html">  
  </head>  
  <body>  
   <h1>Web Components FTW!</h1>  
     
   <x-click-counter></x-click-counter>  
     
   <script type="application/dart">main() {}</script>  
   <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
  </body>  
 </html>

Notice how the Web Component itself is included into this document with the <link> tag in the <head>. My favorite part is the <x-click-counter> right in the middle of the document.

Note the empty main() function in the <script> tag, which is also required.

8) Run the app!

The build script should have generated all the code necessary, but if not you can right click on build.dart and select Run.

You should see a web/out directory, and inside of that a web/out/App.html.html file. Right click on App.html.html and select "Run in Dartium".

Here is an embedded demo:

Click the button, and the click count updates!

(If you can't see the embedded demo above, you can try the live demo.)

9) Run the app in Firefox

Sure, running Dart code natively on the VM is fun, but running a Dart app with Web Components in other modern browsers is even more fun.

Right click on App.html.html and select "Run as JavaScript". This compiles your app into JavaScript and launches your default browser. You can then copy the URL and paste it into other modern browsers. I tried it in stable Chrome, Firefox, and Safari.

Summary

There's so much more to cover, but hopefully you saw that it's easy to build Web Components with Dart and compile down to code that runs across modern browsers.

You can read more about Web Components, or more about Dart + Web Components, or more about Dart + Web Components + Tools. You can visit the open-source Dart Web UI project and even see TodoMVC built with Dart + Web Components.

Semantics Matter, 4 Examples in Dart

2012-11-03T09:50:00.001-07:00

We recently re-launched the Dart Synonym app, which provides mappings between common Dart/JavaScript/C# patterns, idioms, and snippets. If you know how to build a loop or create a function in JavaScript, this is a great way to learn how to do the same thing in Dart.

A great comment on G+, in response to the re-launch, was "I think Microsoft may have a better idea with TypeScript, which adds a syntax for declaring variable types that should make JavasScript more robust, but it still runs on top of JavaScript, cross browser."

While the Dart team welcomes TypeScript to the neighborhood, in the end TypeScript is "just JavaScript". It's great that TypeScript fosters better tooling and bigger web apps, but the same warts of JavaScript are still there with TypeScript. One of the main distinctions between Dart and TypeScript is that Dart cleans up the semantics and not just the syntax.

Don't get me wrong, syntax is important, and Dart offers familiar and easy to use syntax. Here's an example of assigning a function to a variable.

// Dart. A one-line function assigned to a variable.
var loudify = (msg) => msg.toUpperCase();

While aesthetics and syntax matter, semantics arguably matter more. Here are four examples of how Dart offers easier to understand semantics.

Index out of bounds

Consider accessing an array index that is out of bounds:

// Dart or JavaScript
var foo = ['a', 'b'];
foo[3];

In Dart, you'll get a RangeError exception. No doubts what happened there. :)

Method does not exist

What happens when you call a method that doesn't exist on an object?

In Dart, noSuchMethod() is called on your object, which means you have a chance to handle the method call. That kind of dynamism is great for frameworks and scripts.

Is a variable a string?

How do you tell if a variable is a string? In Dart, you can simply do:

obj is String

Closures in a for loop

What happens to variables closed around inside a for loop? In Dart, a new i variable is created for each loop iteration. This leads to expected behavior:

// Dart
var callbacks = [];
for (var i = 0; i < 2; i++) {
callbacks.add(() => print(i));
}

callbacks[0]() // == 0

Summary

Syntax matters, but what the language does matters more. Dart offers semantics that are more obvious, logical, and straight forward. Above all, all that really matters is that you're building awesome HTML5 apps for the modern web. Language doesn't matter, the web matters.