やってみた

タイトル通り
当然ながら、別に仮想DOMフレームワークはSPA専用じゃないので普通に動く。
コンポーネントが作った実DOMを横取りして、そこに更に別のコンポーネントをマウントする
みたいなアクロバット極まりないことをやらない限りは大体大丈夫。

「素JSやjQueryで作りこんだイケてないページがあるけど、SPAに直すとか到底無理っすわ…」
という場合でも、一部分だけ仮想DOMフレームワークで読みやすくすることはできる。

メリットがあるのかは別として、ある部分はReactJS、別の部分はMithril.js、それ以外では…
みたいなフランケンな構築も可能だと思う。
（Fluxな作りならView以外の部分を協調させたりできるしね？）

なお、今回作ってみたコードはReactに付属してるサンプルのパクリです。

注意

この記事は内容が薄すぎます！
読む価値がある記事にするためにはもっと内容を厚くしてください！

ソース

sample.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>ParallelMount</title>
<body>
  <div id="box1" class="box">
  </div>
  <div id="box2" class="box">
  </div>
</body>
<script src="./mithril.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
'use strict';
const state = {
  a: m.prop(1),
  x: m.prop(1),
  b: m.prop(1),
  y: m.prop(1),
  c: m.prop(0),
  result: m.prop(),
  reculc: function() {
      this.result(
       (this.a() * Math.pow(this.x(),2))
     + (this.b() * this.y())
     + (this.c())
      );
  }
};
const Input = {
  controller: function() {
  	state.reculc();
    return {
      a: function(value) { state.a(parseFloat(value)); state.reculc(); },
      x: function(value) { state.x(parseFloat(value)); state.reculc(); },
      b: function(value) { state.b(parseFloat(value)); state.reculc(); },
      y: function(value) { state.y(parseFloat(value)); state.reculc(); },
      c: function(value) { state.c(parseFloat(value)); state.reculc(); },
    };
  },
  view: function(ctrl) {
	const BR = m.trust('<br>');
	function input(variant, callback, value) {
      return (
      	m('label', {htmlFor:variant}, [variant + ' = ',
          m('input#' + variant + '[type="number"][step="0.01"]',
          {onchange:m.withAttr('value', callback), value:value()})
        ]));
	}
    return [
      input('a', ctrl.a, state.a), BR,
      input('x', ctrl.x, state.x), BR,
      input('b', ctrl.b, state.b), BR,
      input('y', ctrl.y, state.y), BR,
      input('c', ctrl.c, state.c),
    ];      
  }
};
const Output = {
  view: function() {
  	const s = state;
    return ['((',s.a(),') * (',s.x(),')^2) + ((',s.b(),') * (',s.y(),')) + (',s.c(),') = ',s.result()];
  }
};
m.mount(document.getElementById('box2'), Input);
m.mount(document.getElementById('box1'), Output);
});
</script>
<style>
body {
  font-family: monospace;
}
input[type="number"] {
  width: 3rem;
  border-radius: 4px;
}
</style>

動作イメージ

※Firefoxのテーマについての問い合わせは受け付けかねます。予めご了承ください。