ES6, Ractive, SystemJS and Rollup

So I have this little project, and I wish to use Ractive with ES6. Looking through my options, there were many... too many. Entry barriers in JS is getting higher and higher lately. I remember a few years ago, that I just needed jQuery and Bootstrap and boom! Instant awesome webapp. Now, it seems like you I to download a ton of packages, run a dozen commands, know a bunch of keystrokes, and only then would I actually start writing your app. That shouldn't be. So here's a zero-to-hero setup to get up and running with Ractive and ES6.

Module System

The first problem was choosing the module system. AMD is out because I don't want to write the wrapper. Gulp, Grunt and Gobble-based tooling is also out, because I don't want to download a ton of tools and run tasks. I just need a text editor and browser. This leaves me with SystemJS, which allows me to just drop in a few scripts, and wallah! ES6 and modules!

<script src="libs/es6-promise/promise.js"></script>
<script src="libs/fetch/fetch.js"></script>
<script src="libs/traceur/traceur.js"></script>
<script src="libs/system.js/dist/system.js"></script>
<script>
  System.transpiler = 'traceur';
  System.import('main.js');
</script>

Retiring loaders with ES6 modules and template strings

Now while Ractive components are so easy to build, there's a slight problem: It probably needs a loader. That's because the components files need to be parsed into Ractive constructors. Before ES6, it wasn't so beautiful, particularly when markup and styling all had to be jammed into a string. That's going to change with template strings. I can now write the markup and styles in the constructor in elegant multi-line fashion. Forget the loader. That's one less tool to worry about.

export default Ractive.extend({
  // What's normally written in markup, now inlined
  template: `
    <div>
      <span>Hello {{ worldText }}!</span>
    </div>
  `,
  css: `
    span {
      color: red;
    }
  `,
  data: {
    worldText: 'World'
  }
});

Bundling

So there's been news going around in the JS community with bundling. The problem was that with the current solutions, it wasn't efficiently removing dead code from bundled modules. Also, the embedded dependency management code accounts for much of the size of the bundle. That's about to change with RollUp.

With Rollup (and code written in ES6), it takes bundling a little further by analyzing imports, and removing those that are not actually used. It also has a very simple CLI tool. All I need is to feed in the main.js file, and out comes an optimized bundle. I can take it a step further by piping the output to a minifier, and we're all set.

Conclusion

Dependencies

# Development
bower install --save ractive es6-promise fetch system.js traceur uglify-js

# Deployment
npm install -g rollup uglify-js

Development

<script src="libs/es6-promise/promise.js"></script>
<script src="libs/fetch/fetch.js"></script>
<script src="libs/traceur/traceur.js"></script>
<script src="libs/system.js/dist/system.js"></script>
<script>
  System.transpiler = 'traceur';
  System.import('main.js');
</script>

Deployment

rollup -f iife main.js | uglify - -o main.min.js

Then remove the development code above from the page and put main.min.js instead.