Search code examples
ractivejs

How to track the time RactiveJS took to parse my templates?

I'm going for a pre-parsed ractiveJS templates system and I'm wondering if it's worth the work.

As far as I've seen templates don't get parsed until it's actually rendered, which is smart, but I guess if it's a big template, I'll get bigger parse times, so, how can I track that ? Or if it's not work tracking, is it a performance improvement to send them already parsed ?

Asking because I'm on NodeJS now and it's quite easy to use gulp and parse them when server starts.

Solution

  • You can parse templates manually with Ractive.parse(template):

    var start = window.performance.now();
var parsed = Ractive.parse( `
  <h1>Hello {{name}}!</h1>
  <p>We're using Ractive.js version {{version}}. This template was parsed in {{time.toFixed(2)}}ms</p>
` );
var time = window.performance.now() - start;

var ractive = new Ractive({
  el: 'main',
  template: parsed,
  data: {
    name: 'world',
    version: Ractive.VERSION,
    time: time
  }
});
    <script src='http://cdn.ractivejs.org/edge/ractive.js'></script>
<main></main>

    Parsed templates are a little bit larger than unparsed templates (typically around 30-40% larger), so it's a trade-off – less work, more bytes. FWIW I always pre-parse my templates.