Hello, world!

Welcome to the Ractive.js tutorials. This is a set of interactive tutorials which you can take at your own pace. Each tutorial consists of a number of steps – first up is step 1 of the 'Hello world!' tutorial.

At any time you can start or reset a step by clicking its Start button.

Step 1

Try creating a new Ractive by executing the JavaScript in the script tab of the playground by hitting the ▶ button on the top right-hand corner of the playground.

In later steps, if you can't get it to work (or if you're just lazy!) you can click the Fix Code button, if there is one available, next to the Start button to insert working code as though you'd followed the instructions exactly.

Throughout the tutorials, boxes like this will contain technical notes and asides, for the particularly nerdy or curious.

Step 2

That's not very exciting. Let's make our template more templatey – replace the hard-coded text in the template with some variables:

<p>{{greeting}} {{name}}!</p>

Then, add some data to it, by adding a data initialisation option to our code on the script tab so that it looks like this:

var ractive = Ractive({
  target: output,
  template: template,
  data: { greeting: 'Hello', name: 'world' }
});

Execute the code (with the ▶ button). It should look exactly as it did before.

Step 3

Here's where Ractive differs from other templating libraries. Normally, if you wanted to change the data, you would have to re-render the entire view, which would have the effect of discarding the DOM nodes you'd already created. That's wasteful.

Instead, we can manipulate views we've already created. Try running this code - click the ▶ button in the top-right corner:

ractive.set('greeting', 'Bonjour');

And now this:

ractive.set('name', 'tout le monde');

Ooh la la! Even better, we could set both properties in one go. Let's do it in Mandarin this time:

ractive.set({
  greeting: '你好',
  name: '世界'
});

What's happening here is that the contents of the <p> element are split into four text nodes – one for {{greeting}}, one for the comma and space characters, one for {{name}}, and one for the !. Ractive stores references to the nodes that correspond to the variables, and updates them when the data changes, leaving everything else untouched.

Surgically updating text nodes is much faster than replacing elements, particularly when you only need to change part of your ractive.

Note that due to the way the tutorials interact with the playground, the eval blocks above are actually running after the entire example is reloaded in the output pane. That's why running the last eval before running the next to last eval doesn't leave the Mandarin greeting intact. Under normal circumstances, the entire example wouldn't need to be re-run, which would leave the Mandarin greeting intact.

Edit this page Next