Better development workflow in 2016

Most of us already know why web apps need a build system. When we started writing large web sites/apps with 100s of JS, CSS, templates; packing them for production became hard. Module systems and build tools like webpack and AssetGraph builder then made things more easier for us.

However with popularity of compilers/transpilers right from sass, less, jade to babel and typescript, both development setup and the production build has become much more complex. Yes, plugins for build systems and module systems exist. Yet there is much configuration and moving parts.

The dream of a “zero config” workflow

A “zero config” workflow may never exist. However anything that takes configs, plugins and middlewares to a minimum is worth looking into.

Here I introduce a new promising tool that can help us achieve this - Fusile.

Fusile

Some of us are used to setting up node.js middlewares for SASS, LESS etc. I’ve personally used livestyle (until recently) which is essentially a proxy server (i.e sits between the real server and the user and listens for request on a specified port) that will compile/transpile languages and serve it on request. However when writing Cordova/Phonegap apps, livestyle cannot be used since there isn’t a server (the files are accessed directly from the app’s WebView).

Fusile is a new kind-of development setup. It creates a file system proxy that can transpile/compile languages (sass, less, typescript, babel etc) on demand when a file is read. It uses userspace filesystem to achieve this.

So lets say you have a source/ folder with app.scss file in it. One would create a filesystem proxy in a folder named serve/ like so:

fusile source/ serve/
If you check the serve/ folder you’d see app.css in it. The moment an application reads the css file, the original scss file is compiled into CSS (with sourcemap) by fusile and served.

And this didn’t need any configs. Just npm install the compiler for the language you use. Fusile supports node-sass, less, stylus, livescript, babel, coffee-script and a few more.

So now you can point your server (and build tool) to the serve/ folder rather than the source/ folder.

(You can read more about the tool on the github page. Or watch this video from JSConf.eu)

How does this help?

Fusile improves things for us:

  1. It is now easier to use existing build tools, since they only have to deal with CSS, JS and HTML, rather than dealing with an ever-increasing list of transpiled languages.
  2. One can stop using middlewares, requirejs plugins, gulp plugins etc to deal with compiling these languages. Directly point your module system paths at the js, css or html files.
  3. It now makes our workflow easier with Cordova when using transpiled languages.

Hopefully this tool will improve our workflow in 2016.

Updated on March 8, 2016
blog comments powered by Disqus