Duo & Babel: Clean Next-Gen Frontend Development.

Front end development became absurd last year. It devours our time on the order of weeks, just to set up a front-end project. Webpack, Live Reloading, Gulp, Bower, npm… config files, gulp scripts, backend integration, websocket conficts with backend and live reloads…

No more! Stop the pain! Stop Stop! I just want ES6 generators and classes in my browser! =’(

Well… Here ya go ❤


Duo is a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.
  1. Require stuff directly from github — bower and npm become unneccessary
  2. Bundles your code — goodbye webpack, gulp.


Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.

That didn’t seem awesome at first… but it actually is.

If you’ve never used ES6, babel has a nifty sandbox to experiment with. Once you use some of the powerful libraries based on ES6, such as Koa or co. ES5 will quickly lose its appeal.

— enough babelling.

Step 1: app.js

Get creative. Here is an example of some things I do.

// Duo includes github URLs.
var _ = require(‘lodash/lodash’)
var d3 = require(‘mbostock/d3’);
var qwest = require('pyrsmk/qwest:qwest.min.js');
var co = require('tj/co');

// ES6 generators (co performs magic with promises & generators)
function* login(data) {
return yield qwest.post(‘/user/login’, data, options);

// Co in browser!
co(function *() {
// pause until asynchronous 'login' stuff is done.
var res = yield login({ user: 'bob', password: 'coffe3ness' });

console.log(`Result: ${res}`) // a template string

Step 2: Duo Build Script

I made a file in the project’s root named build.js. I still used npm for this.

npm install --save-dev duo duo-babel

Customize your build.js

var babel = require(‘duo-babel’),
Duo = require(‘duo’);
var plugins = [ 
ignore: /duo_modules|node_modules/
var duo = new Duo(__dirname)

Step 3: browser-polyfill.js

The polyfill enables ES6 in the browser, and includes the regeneratorRuntime. The polyfill must be included before your app.js.

I copied node_modules/babel/node_modules/babel-core/browser-polyfill.js into my build directory.

in the <head>
<script src=”browser-polyfill.js” charset=”utf-8"></script>
before </body>
<script src=”foo-app.js” charset=”utf-8"></script>


Uncaught ReferenceError: regeneratorRuntime is not defined

Cross your Fingers and Build!

$ node build.js

Debug it

$ DEBUG=duo* node build.js
Show your support

Clapping shows how much you appreciated Daniel Sont’s story.