oo7 Bonds

Now we have our basic dapp harness, we can start introducing more interesting functionality. Without too much ado, let’s get started. Head in to src/client/scripts/app.jsx. You will see our basic file:

1
2
3
4
5
6
7
8
9
import React from 'react'

export class App extends React.Component {
  render () {
    return (
      <div>Hello World</div>
    )
  }
}

This is a JSX file. Baiscally means that can handle embedded HTML when describing how React components should be rendered.

Your first Bond

The first thing we’ll do is introduce the oo7 library. This introduces into Javascript the notion of reactive value known as ‘bonds’. Reactive values are similar to normal variables, except that any places in which they are used will automatically upate themselves as the value changes.

The oo7 package is still very much in development, as such there might be one or two rough edges in this tutorial.

Our first example will just demonstrate how Bond can introduce effortless reactivity by dynamically replicating the contents of an editable text field into a <span>.

Import the needed components by placing three lines at the top of app.jsx

1
2
3
import { Bond } from 'oo7'
import { Rspan } from 'oo7-react'
import { InputBond } from 'parity-reactive-ui'

Next we need to introduce a new instance of a Bond. It will represent the current contents of a text field. We will initialize it in our class’s contructor. Insert these lines directly into the App class decalration.

1
2
3
4
constructor () {
  super ()
  this.bond = new Bond()
}

Your code should now look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react'
import { Bond } from 'oo7'
import { Rspan } from 'oo7-react'
import { InputBond } from 'parity-reactive-ui'

export class App extends React.Component {
  constructor () {
    super ()
    this.bond = new Bond()
  }
  render () {
    return (
      <div>Hello World</div>
    )
  }
}

Next we need to create the text entry field and the <span> element(in which the text field’s contents will be reflected). We will use a version of Semantic UI’s Input element which has been specially modified to propagate the value into a named Bond. This is called InputBond.

Similarly, for the span we will use a special ‘reactive’ version of the span element which is able to accept Bonds as children and values of certain properties. This is known as Rspan.

Change the <div>Hello World</div> line to:

1
2
3
4
<div>
  <InputBond bond={this.bond} placeholder="Go ahead and type some text" />
  <Rspan>{this.bond}</Rspan>
</div>

As you see there’s not all that much here, we just tell the text field input InputBond to place its value into this.bond and conversely tell Rspan to display that value from this.bond.

Run webpack and let it watch your files to ensure your dapp is continuously rebuilt.

1
npm start

Transforming Bonds

Bonds don’t just have to pass on data; they can also represent transformations on the data.

One example of a transform on text would be simple upper-casing. A function to upper-case text would be text => text.toUpperCase()

1
<Rspan>{this.bond.map(t => t.toUpperCase())}</Rspan>