Dart dev_compiler — pre-alpha test

Things I think to be important

A few key points that I felt important about this post and the dev_compiler project:

  1. If you spot any error, inaccuracies, have ideas or want to contribute somehow, please let me know! You can find me on dartlang slack under the name of ‘vargadanis’
  2. Dart is not a replacement for JavaScript — Dart currently has to be compiled into JS in order to run your code in browsers
  3. Currently the compiled JS code using dart2js transformer will produce such ES5 code that is difficult to use from JavaScript. Exposing Dart functionality to JS is a tedious task.
  4. dev_compiler is a project to create a Dart to ES6 transpiler. To me the two most important project goals are to create readable JS code and to make sure that Dart functionality is easy to use from JS. What exactly the project goals for DDC (Dart dev_compiler) can be read on their github page.

Current state of project

As of writing this post, DDC is at a pre-alpha version — 0.1.5+1 is the highest version number. Use it in production if you feel the need for those adrenaline surges one gets when a user reports: `that stuff ain’t working! What have you done?`

Dart direction — why does dev_compiler even exist?

Watching this video can answer these question. The TL;DR version is: it is important for Dart to become a tool that integrates better with already existing and future JS/TS codebases.

The experiment

I set up a small github project that aims to implement and re-implement the same functionality in ES6, Dart and TS, compile them down to ES5, see how things would integrate, work together and examine the feasibility of such things.
Warning: the project is a mass! I was more interested in tooling than in code-quality.

  • For ES6 to ES5 compilation, Babel is used
  • For Dart to ES6, dev_compiler version 0.1.5+1 is used
  • npm, gulp, eslinter and the usual bloated toolchain for JS projects will be needed (one of the reason I like dart — I have `pub`)

Pantry-sort goal: provide an easy to use library that can sort DOM elements based on a common, predefined property. Some developers follow the anti-pattern of using the DOM asif it was a pantry, data is stored in and read from it instead of using some kind of view-model approach. Figured it was kind of funny to capitalize a library on an anti-pattern (giggle-giggle).

What works

What does not work + questions

  • compiling Dart’s ES6 code into ES5 and using it
  • the generated ES5 code is rather big, is there a way to decrease code size?
  • at this point there is no TS rewrite

While DDC compilation succeeded and the code is quite readable, I found very little information on how to actually use `my precious` library from JS. If you have any pointers on it, please let me know!