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

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.
http://duojs.org
  1. Require stuff directly from github — bower and npm become unneccessary
  2. Bundles your code — goodbye webpack, gulp.

Babel

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

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 = [ 
babel({
ignore: /duo_modules|node_modules/
})
];
var duo = new Duo(__dirname)
.entry(‘app.js’)
.installTo(‘./duo_modules’)
.use(plugins)
// .token(‘YOUR_GITHUB_TOKEN_MAYBE’)
duo.write(); 

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>

otherwise

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.