Back to Blog

Writing D3.js apps in Purescript

23 May 2016

I’m evaluating Purescript recently. It is a statically typed, pure functional language that compiles to Javascript as such it allows to create front-end stuff. Why bother with yet another Javascript transpiler? Well, the reason is simple: because it’s almost Haskell. Despite a few differences like strict evaluation, writing objects in more JSON style, it has also higher kinded types, typeclasses and the same simple and elegant syntax as its predecessor. How awesome is that?

Application starter

So I’m going to rewrite some DSP charts to Purescript. Fortunately, there is no need to give up on D3.js as Purescript nicely integrates with existing libraries and there are D3.js bindings already. First off, I created application starter, very similar to that one I prepared initially for Javascript. The idea is the same: having small app stub already configured for browser auto-refresh every time source code changes. It actually contains also the same sample code, translated to PS. The project is in this repo. Just download, install npm and bower dependences, run gulp and that’s it.

You can check gulpfile.js to see how it is configured. I use Atom and it runs make step automatically on file save that’s why browserSync watches only for output changes to make a bundle. If you want to have whole build to be done automatically you may want to change watched file(s) to 'src/Main.purs' instead of 'output/Main/index.js' and change dependency for js-reload from bundle to build, so the bottom part of gulpfile.js should looks like this:

gulp.task('serve', ["build"], function() {
  browserSync({
    server: {
      baseDir: 'dist'
    }
  });
	gulp.watch(['dist/**/*.html'], {cwd: '.'}, browserSync.reload);
  gulp.watch(['src/Main.purs'], {cwd: '.'}, function(){
      return gulp.start('js-reload')
  });
});
gulp.task('js-reload', ["bundle"], browserSync.reload);
gulp.task("default", ["serve"]);