Using ractive.runtime.js

Ractive-runtime.md

If you're able to parse templates on the server, or as part of a build process, you can use ractive.runtime.js instead of ractive.js in your app. It's slightly smaller, and it means that browsers are spared having to parse templates on the client (though this is a very quick process for all but the most complex templates).

In effect, instead of doing this...

var ractive = new Ractive({
  el: 'body',
  template: '<h1>Hello {{name}}!</h1>',
  data: { name: 'world' }
});

...you're doing this:

var ractive = new Ractive({
  el: 'body',
  template: {v:1,t:[{t:7,e:"h1",f:["Hello ",{t:2,r:"name"},"!"]}]},
  data: { name: 'world' }
});

An easy way to automate this process is to use a component loader such as rvc for RequireJS, or ractify for Browserify, or broccoli-ractive.

Questions:

1. Does this mean I need to use rvc (rather than just rv) to use the runtime version?
2. Do I need to swap between using ractive.js and ractive.runtime.js in my build.js file? And, if so, how do I do that?

My main.js config file (for development) is using ractive.js at the moment:

"ractive": "../vendor/ractive/ractive"

If I swap this to ractive.runtime I get an error when I load the development (i.e. non-optimised) page. So I tried adding:

"paths": { "ractive": "../vendor/ractive/ractive.runtime" }

to my build.js file, so that the development site gets the full version and the build gets the runtime version, but then the r.js build step doesn't work.

Thanks!