Let's start Dart with brilliant WebStorm10

Friday, April 3, 2015
WebStorm 10 has been released! This is the most important update for Dart users since Dart Analysis Server has been integrated into WebStorm.
Here is the quick start guide to set up WebStorm 10 and latest Dart ver 1.9.1.

Install Dart and Dartium

Assuming you are using Mac, the easiest way is to install using Homebrew.


If you have not installed Homebrew yet, go and and install it.

Install Dart

$ brew tap dart-lang/dart
$ brew install dart
You will see latest Dart(1.9.1) installed in /usr/local/bin/, yay.

Install Dartium

$ brew install dartium
That's it.

Install WebStorm 10

Go to and download and install it.
Note, WebStorm is paid app with free 30-day trial. I'm pretty sure it's worth paying. If you don't want to pay, you can also try InteliJ IDEA community edition with Dart plugin for free.

Dart project setting.

Ensure Dart is correctly set in WebStorm as follows.


Create a Dart project (File -> New Project -> Dart), I recommend "Web Application" template, then you will see initial project files.

pub get

Do "pub get" by right click on pubspec.yaml.

pub serve

Open "Terminal" by clicking "Terminal" button in WebStorm and You will see the root directory of the preject, then type
$ pub serve

Open Dartium

In another terminal window, type
$ dartium --checked
Go the site (http://localhost:8080 by default) to see the content.


To debug Dart project on WebStorm IDE you have to set up a few things as follows.

Install JetBrains IDE Support Chrome Extension

Open in Dartium, and install the extension.

Set Up Debugger for Dartium

Select "Run -> Edit Configurations...", then set new "JavaScript Debug" as follows.

Open Dartium window with WebStorm debugging.

Select "Run -> Debug"
Then you should be able to use the debugger. You will see "JetBrains IDE Support is debuggeng this tab" message above the Dartium window. You can see stack trace and logs on the console, set break points, step over, step into, etc...

Live Analysis

Dart finally releases Dart Analysis Server and WebStorm 10 has already integrated it. Click "Dart Analysis" button and you will see on-the-fly code analysis result automagically. This is huge improvement!

Dash plugin

WebStorm has Dash plugin to open definition in Dash instantly. Install the plugin via Preferences -> Plugins. Then Tools -> Search in Dash to open definiton in Dash. You can also set shortcut. Default: cmd+shift+D.
Note, you can also open docs in by shift+F1.

WebStorm becomes the best Dart development IDE. It's good time to start Dart development with latest Dart(1.9.1) and WebStorm 10. Let's have fun!

Read more ...

Exploring Latest PolymerDart SPA using Custom Elements

Thursday, April 2, 2015

Recently, PolymerDart team has released its version 0.1.6, and they have published another sample: the SPA example. It is based on PolymerJS SPA Example, and it is pretty nice starting point to build practical SPA in Dart. So I have been exploring the sample to understand the architecture and found some parts of what I wanted to add and modify to make it a bit more practical for me. I am not sure it is the right way, but try to share what I have done here.

Add custom page element for every page.

The original sample only shows content of every page name by <div>{{}}</div> in the main pane. For real app I want to use custom element to handle the entire page content.

There are five pages in the sample(#one, #two, #three, #four, #five), so I also create five corresponding custom elements(one-page, two-page, three-page, four-page, five-page).


// Page elements
export 'package:polymer_spa_example/one_page.dart';
export 'package:polymer_spa_example/two_page.dart';
export 'package:polymer_spa_example/three_page.dart';
export 'package:polymer_spa_example/four_page.dart';
export 'package:polymer_spa_example/five_page.dart';


library one_page;

import 'package:polymer/polymer.dart';

class OnePage extends PolymerElement {

  OnePage.created() : super.created();



<polymer-element name="one-page" layout vertical center-center fit>
    <link rel="stylesheet" href="one_page.css">

Of course we will need to consider directory structure for custom elements when a project code grows.

Insert custom element at route change.

Then I try to insert a page element whenever user enters a new route. And make sure contents are cleared before the insertion.


/// Updates [route] whenever we enter a new route.
void enterRoute(RouteEvent e) {
  route = e.path;
  /// Ensure to clear page element, and add the page element corresponding to route.
  if (route != null && route != "") {
          ..add(new Element.tag("${route}-page"));

I create a convention that the custom element name must be ${route}-page (new Element.tag("${route}-page")). This is a quick hack and looks a little dirty. I modify this part in the later section.

Handling custom page elements between page transition animation.

I think there might be some edge cases, but usually in SPA, on moving to new page, the previous page content is expected to be deleted from DOM tree to lighten its load.

But simply deleting page content immediately after the page transition start works but disrupts the smooth transition animation between pages. This is bad for UX. To fix it, it needs to keep leaving page's content until the page transition animation finishes showing a new page. So I add var _previousRoute; to keep leaving page's route, and also add the code to handle corePage's onTransitionEnd event for the timing to delete. (Borrowing the idea from erikringsmuth/app-router)

void handlePageElementsOnRouteTransition() {
  // Clear previous route's content on the transition end.
  // Following app-router's idea.
  // TODO: This doesn't work well when another transition starts before a transition ends. Needs another tweak.
  corePages.onTransitionEnd.listen((TransitionEvent e) {
    if (_previousRoute != null && _previousRoute != route) {

It works.


Make it more explicit.

As I said in previous section, "${route}-page" looks a little hacky. I prefer more explicit way so I add customTag attribute and Element create() => new Element.tag("$customTag"); in Page class to handle corresponding custom page element with page instance itself.


/// Simple class which maps page names and custom tags to paths.
class Page {
  final String name;
  final String path;
  final String customTag;
  final bool isDefault;

  const Page(, this.path, this.customTag, {this.isDefault: false});

  // Consider some conventions. For example, custom tag name is expected to be same as the name...
  Element create() => new Element.tag("$customTag");

  String toString() => '$name';

/// The list of pages in our app.
final List<Page> pages = const [
  const Page('Single', 'one-page', 'one-page', isDefault: true),
  const Page('page', 'two-page', 'two-page'),
  const Page('app', 'three-page', 'three-page'),
  const Page('using', 'four-page', 'four-page'),
  const Page('Polymer', 'five-page', 'five-page'),

/// Updates [route] whenever we enter a new route.
void enterRoute(RouteEvent e) {
  route = e.path;
  if (selectedPage == null) selectedPage = pages.firstWhere((page) => page.path == route);
  // Ensure to clear page element, and add the page element corresponding to route.
  if (route != null && route != "") {

Non hash fragment mode (HTML5-mode by Angular)

If you prefer to delete # in the url (means to change to non hash fragment mode, or 'HTML5-mode' by Angular), you can simply change the Router's useFragment option to false (new Router(useFragment: false);). Note, it needs some reverse proxy server (like Nginx) settings to handle routes.


You can see the whole source code on Github

Read more ...

Using Sass (Scss) in Dart project

Friday, June 20, 2014

Recently I'm trying to configure Dart development environment like everyday I do with JS Grunt (or Gulp).

Dart has a default tool to get the work done -- Pub. Pub is not just for Package manager like bower. The `pub serve` and `pub build` are like `grunt serve` and `grunt build`.

In the grunt tasks you can define actual sequences of tasks. While Pub has a more conventional way to get the similar stuff done. The Pub Transformer can process some transformations in the build. Dart to JS transformation is the typical one as explained the introduction of Pub on CSS preprocessing is another typical one and I'd like to introduce the example in this post.

There are two popular CSS pre-processors -- Sass(Scss) and Less. Here I'd like to introduce Sass example.
There is already a nice Sass(Scss) transformation package and the examples at my github repo  You can try and confirm how it works.

You get the git clone, and do `pub serve` where pubspec.yaml exists. Then open http://localhost:8080 on your Dartium. The transformer runs on the startup and you can see the "Build completed successfully" message on your console.
You don't see any output CSS files in the directories, since they are included into the pub dev server, but not put in the project directories.

And don't worry, every time you save the source code, Pub watches the changes and automatically runs the transformation again.

That's it. Pretty easy.

By the way, actually I prefer to use Less for my development, not Sass. So next time I would try Less transformation.
Read more ...

Web Worker and current Dartlang

Friday, June 13, 2014
Recently I've been researching WebAudio and WebRTC getUserMedia for my personal project.
I googled, then I found the library which really fits my need. aaaa
The library uses WebWorker for audio recording and mp3 conversion to (I guess and probably true) offload the CPU intensive works. I want to write webapp in Dartlang, and it's not serious project, so I'm trying to port this JS library to Dart for my study. (Yes, you know, probably I can (should?) just use this library by dart:js.) So I have a chance to try Web Worker in Dart.
Without much thought, I tried the porting, wrote the WebWorkers in Dart, and I stumbled into that a WebWorker itself should be written in JS, not Dart.
Here is the simple sample code.
The JS version WebWorker should work normally, and Dart version raises an error (in Dartium).
I found the article mentioned about it.
What if you have a compute-intensive task to run? To keep your app responsive, you should put the task into its own isolate or worker. Isolates might run in a separate process or thread, depending on the Dart implementation. In 1.0 we don’t expect web apps to support isolates or Dart-language workers. However, you can use the dart:html Worker class to add a JavaScript worker to a Dart web app.
Please anyone tell me if I'm misunderstanding something.
Read more ...

Start diving into Google App Engine

Friday, April 25, 2014

When Google App Engine was first announced its launch, I was thrilled and sympathized with the advertised benefit so much. Focusing on application development on Google Cloud, so I didn't need to take time for the server scaling and maintenance, and didn't need to hire server engineers? Great. It's what I had wanted.

But I was silly, I had not invested even a bit part of my time to research and practice GAE, just because I felt I might as well wait until the experiences of GAE and its DataStore (BigTable) has stocked on the web blogs/forums, and I had even made excuses that Python was not so popular (!) in Japan (yes, I'm Japanese).

In the mean time I had been mostly satisfied with RubyonRails ecosystem. (Ah, I now feel I want to express my love and hate to RoR, but  this is not the right place to say it). Then I preferred Heroku, the great PaaS and it's also provides the maintenance free infrastructure. Thanks to the service I can sleep well at night.

Nevertheless, unfortunately I confess after I learned Ruby well and experienced several projects over several years, I couldn't love it because of mainly its overly flexible and casual meta programming culture. I felt it didn't meet my preference, especially after reading "Zen of Python"( I often prefer something by its philosophy and ideology. So I have gradually increased time to write code by Python instead of Ruby.

By the way I also do love Dartlang's language design. I love terse, simple and explicit design, but also have appropriate flexibility. I've been investing my time to switch my browser side development language from JavaScript to Dartlang. While I still feel I have to use JavaScript in my production with its great ecosystem like Angular, Grunt, and other abundant libraries, it's been my another great experience ongoing.

Getting back to the topic, then I watched recent Google Platform Live
( And its promotions, especially announcing Managed VM ( triggered me off seriously thinking of GAE and its Google Cloud Platform again.

So I walked through the feature list and videos, it looks GAE Python environment has greatly matured (well, I hope) and the documents seem pretty improved.

Plus, as far as I read official videos and articles and many articles on the web about DataStore, I can feel quite optimistic to handle it. While I'm still not sure how to express "Many to Many association" used in RDB (certainly needs a mental switch). So I will try to do some implementation.

You may worry about vendor lock-in? Ah, yes, I will accept the risk. I'm going to rely on Google Cloud Platform and it would be a great deal to me because I want to 100% focus on app development and service management, and don't want to spend time to worry about the server stuff like scaling, security fix, server and other infrastructure monitoring, provisioning, deployment, hiring and communicating server guys as a service grows...

Heroku is also definitely great (convenient, and expensive!) service, and AWS is the most popular choice. But currently GAE and GCP services get my interest and motivation for learning.

But it is NOT urgent priority, since I've already had the production service under development, but already built 95% for the first release. It's served on Heroku and AWS (EC2). Time span would be 6 months or 1 year, even if I decide to migrate to GAE (GCP). Even I'm not sure how to migrate data in the RDB to DataStore (BigTable) or should compromise to use Cloud SQL.

At any rate, I believe passion and craftsmanship are keys to eventually produce great products. Delegating server stuff to the reliable vender is a significant factor for a startup product in order to focus the service itself.

* It would be something like the Holy Grail eventually when Dartlang will be supported in the future.

* I want to hire passionate Dartisans (mumbling...).

Read more ...

Symbol Literal - I'm probably abusing it

Friday, October 25, 2013

Yesterday suddenly I felt I wanted to implement ancient famous programming stuff, Game of Life's_Game_of_Life.
I had sought something suitable for polymer.dart experience with having fun. Firstly I decided not to use polymer then later on tried to use it in order to compare them. I've enjoyed the implementing (except that I got confused from mysterious error output repeatedly on console about build.dart, still not resolved but works).
You can clone it, then run on Dartium.

Through writing the code, as you can see in index.dart, I use symbol literals like #live, #dead.
Symbol literal is just short version of const Symbol(‘id’) which you may have seen in mirror based codes. Recently the symbol literal have been added to Dartlang, so I felt I wanted to use the new expression instead of String.
It workd as I expected. But when I felt I wanted to use switch statements instead of if-else statements, I stumbled on a error.

From the if-else

    if (_currentState == #dying) {
      _currentState = #dead;
    } else if (_currentState == #aboring) {
      _currentState = #live;
    } else {
      // do nothing

To the switch statements

    switch (_currentState) {
      case #dying:
        _currentState = #dead;
      case #aboring:
        _currentState = #live;

     -> // Error: type class of case expression must not implement operator == case 

I confirmed the error was reproduced in a simple example as below.

  pass() {
    var a = 'a';
    var b = 'b';
    switch (a) {
      case 'a':
      case 'b':
    // -> 'a'
  error() {
    var a = #a;
    var b = #b;
    switch (a) {
      case #a:
      case #b:
    // Error: type class of case expression must not implement operator == case #a:
  main() {

I was curious about it, so I referred dart language specification.
It explains concisely about the use case of symbol -- reflection and minification, also explains the handy syntax becomes addictive. Yes, I did. Should I use String instead of Symbol literal in the case? Probably yes, I think.

Read more ...

How to retrieve metadata using dart:mirror in Dartlang

Wednesday, October 16, 2013

Dartlang provides Metadata feature, which is similar to Annotations in Java(

Dartlang tutorial introduces package:meta and its two members, @deprecated and @overrides (package:meta also provides @proxy).

DartEditor recognise the metadata as shown at above tutorial. The tutorial also explains how to create custom metadata and retrieve it. But there is no code sample on how to retrieve it, so I'm curious about the way.

Through reading some implementations such as @published metadata in Polymer.dart, I find the way. Actually It's easy once I understand the use of dart:mirrors.

Here is the sample code. Pretty simple and easy to read, isn't it?

import 'dart:mirrors';

class todo {
  final String who;
  final String what;

  const todo(this.who, this.what);

@todo('akira', 'add something')
class Foo {
  @todo('naoto', 'do something')
  String fooVariable = 'a';

  @todo('kitano', 'change the name')
  void fooMethod() {


void main() {
  InstanceMirror im = reflect(new Foo());
  ClassMirror classMirror = im.type;
  // ClassMirror
  classMirror.metadata.forEach((metadata) {
    print(metadata.reflectee.who); // -> akira
    print(metadata.reflectee.what); // -> add something

  // VariableMirror   
  for (VariableMirror variable in classMirror.variables.values) {
    print(variable.metadata.first.reflectee.who); // -> naoto
    print(variable.metadata.first.reflectee.what); // -> do something

  // MethodMirror
  classMirror.methods.values.forEach((MethodMirror method) {
    print(method.metadata.first.reflectee.who); // -> kitano
    print(method.metadata.first.reflectee.what); // -> change the name

Read more ...