Reactive programming

Ractive.jsを使ってみました。

The Reactive Manifesto (v2.0)によるとキーワードは以下のようです。

・Responsive : 高応答性
・Resilient : 耐障害性
・Elastic : スケーラビリティー
・Message Driven : メッセージ駆動

* 日本語版(2013/09)はこちら

Reactive Programmingではイベントに反応したモデルデータの流れと変更を自動的に伝搬する仕組みをどのように実現できるかが主題のひとつです。
わかり易いメリットとして、インタラクティブなシステムを直感的に書きやすくすることができます。

要するにあるセルを書き換えると他のセルに影響するExcelをイメージするとわかり易いです。

Ractive.jsを使ってみた

Ractive.jsはReactive Programmingを支援する軽量なlibraryでAngularより簡潔に書けそうです。
templateエンジンの記法はmustacheを採用していますが,ejs等選択可能にして欲しいところです。

動作の仕組みはこちらを参考に。

まずは Hello, World からです。

<!doctype html>
<html lang='ja'>
<head>
  <meta charset='utf-8'>
  <title>Ractive example</title>
</head>
<body>
  <div id='container'></div>

  <script src='https://cdn.ractivejs.org/latest/ractive.min.js'></script>
  <script>
    var ractive = new Ractive({
        el: 'container',
        template: '<p>Hello, {{name}}!</p>',
        data: { name: 'World'}
    });
  </script>
</body>
</html>

two-way data-bindingの雰囲気を味わってみます。

  <div id='container'></div>

  <script id="template" type='text/ractive'>
  <label>
    Enter your name :
    <input value='{{name}}'>
  </label>

  <p>Hello, {{name}}</p> 
  </script>

  <script src='https://cdn.ractivejs.org/latest/ractive.min.js'></script>
  <script>
    var ractive = new Ractive({
        el: 'container',
        template: '#template',
        data: { name: '' }
    });
  </script>

配列と制御文を試します。jsで配列を操作することでGUI上でli要素が自動的に追加されることがわかります。
push, unshiftの結果,black, red, blue, yellow, greenの順で表示されます。

  <div id='container'></div>

  <script id="template" type='text/ractive'>
  <ul>
  {{#data}}
    <li>{{this}}</li>
  {{/data}}
  </ul>
  </script>

  <script src='https://cdn.ractivejs.org/latest/ractive.min.js'></script>
  <script>
  var list = [ 'red', 'blue', 'yellow' ]
    var ractive = new Ractive({
        el: 'container',
        template: '#template',
        data: { data: list }
    });

  // append data
  list.push( 'green' );
  // move to front
  list.unshift( 'black' );
  </script>

pluginを使ってみます。使ったのはtapによってbuttonを変化させるevents-tap-pluginです。

  <div id='container'></div>

  <script id="template" type='text/ractive'>
  {{#if visible === 1 }}
    <button on-tap='show:2'>Click me!</button>
  {{/if}}

  {{#if visible === 2 }}
    <button on-tap='show:3'>And me!</button>
  {{/if}}

  {{#if visible === 3 }}
    <button on-tap='show:1'>Now click me!</button>
  {{/if}}
  </script>

  <script src='https://cdn.ractivejs.org/latest/ractive.min.js'></script>
  <script src='https://raw.githubusercontent.com/ractivejs/ractive-events-tap/master/ractive-events-tap.js'></script>
  <script>
    var ractive = new Ractive({
        el: 'container',
        template: '#template',
    data: { visible: 1 }
    });

  ractive.on({
    show: function ( event, which ) {
      console.log(which)
      this.set( 'visible', which )
    }
  });
  </script>

例えばバックエンドのtemplateエンジンがejsだけど,Ractivejs使いたいみたいな時は記法が競合してしまうのでmustacheを別ファイルを作っておきajaxで呼び出す方法があります。

$.get('template.html').then( function(template) {
 	var task_ractive = new Ractive({
		el: 'container',
		template: template,
		data: { data: {}}
	});
})

FPRのlibraryとしてBacon.jsやFRLのElmがあります。特にElmはJS, CSS, HTMLをまとめて生成するという冒険的な言語だけど, Haskellベースの文法という事もあり今後も注目していきたい。

タグ: Reactive programming

【Reactive】Ractive.jsを使ってみた

Reactive Programming

Ractive.jsを使ってみた