巨大化したSPAのフレームワークを少しづつVueに移行しはじめたお話

→stackblitzで見る

// Modelとしてデータ格納先を用意
const BbModel = Backbone.Model.extend({
  defaults: {
    text: '',
  },
});

const BbView = Backbone.View.extend({
  // （略）
  initialize() {
    this.model = new BbModel();
    // Modelにchangeイベントがおきたらrenderを実行
    this.listenTo(this.model, 'change', this.render);
  },
  render() {
    // 対象DOMを丸ごと再描画
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
  onSubmit(e) {
    //（略）
    this.model.set('text', val); // changeイベントがおきる
  },
});

View から参照されるデータを Model として用意し、Model の変更を見てレンダリングを行います。実際には Marionette.js で書かれていたり、他 View との連携があったりと異なりますが、こういった View の組み合わせでページ編集機能は作られています。

子→親の順番でViewを移行していく

前述のように View はツリー構造になっており必ず関連する他 View が存在します。そのため影響範囲が少ない末端から移行していくと作業範囲を狭くしていくことができます。子を移行したら子の兄弟を移行し、子が一通り移行されたら親を移行、親が移行されたら親の兄弟を〜と徐々に登っていきます。

冗長な修正になってくる箇所もありますが、常に差し込みで改修が入るリスクを考えると、スピード感を持って随時リリースできた方が安全だと考えました。

なお UI やコード量によってはある程度のまとまりで作業した方がやりやすい事も多いため、「末端」はどこからを指すかは場所によって柔軟に判断しています。

異なるフレームワークでできたViewの連携を実現する

さて移行時には Backbone と Vue でできた View の連携をどうするかという問題が出てきます。データだったりイベントだったり View 間でのやり取りはまず発生します。

Vue の中に Backbone を登場させることもできなくはないですが（逆も然り）、それをやってしまうと結局お互いが強く関心を持ってしまい、改修難易度が倍増してしまいます。

そこで採用したのがACL（Anti corruption layer：腐敗防止層）というアプローチです。異なるフレームワーク間でやり取りをする際には必ず専用の変換ファイルを通し、お互いの関心を最小限に抑えるようにします。ACL 経由で Vue を参照すると今までの Backbone と同じ様なアウトプットが提供されるイメージです。

なお Vue の範囲は段階的に変化していくため、ACL はそのつど役割が変わってきます。子だけが移行されたら子専用の ACL が増え、親も移行されたら子の ACL は不要になり親専用 ACL が必要に〜といった次第です。

「基本的に」ModelはViewと合わせて移行する

Vue で作成するには、データはリアクティブで管理されていなければなりません。そのため Backbone Model も同時に移行する必要があります。ところが Model と View が１対１になっていない UI というものが存在します。大きく分けると以下２パターンありました。

• 同じ Model を複数 View でシェアしている
• 巨大なシングルトンになっており複数 View で参照している

Model に依存する View の数が多く、結局同時に複数の View を移行しないとリリースできないのはリスクが高くなりがちです。そこで危険を感じた場合は、無理せずに Model は一旦そのまま、関連 View が全て移行してから改めて取り掛かることも許容しました。

このケースも ACL が活躍してくれます。ACL を通すことで Model からリアクティブなデータに変換して取り出し Vue で扱える形にします。

（もちろん Model が複数 View でシェアされているなら、それらの View はまとめて移行の方がやりやすい、という場合もあります。Model の構造が対象範囲を決める材料にもなってきます）

戦術まとめ

• 移行は小さく段階的に
• Backbone と Vue をつなぐ処理は ACL という変換レイヤーを通す
• Model と View は一緒に移行したいが無理はしない

サンプルコードでイメージを補完

ここからはサンプルコードを用いて移行のイメージをお伝えしていきます。

Backbone View で Vueを利用する

Vue のイベントを検知して Backbone で UI を操作するサンプルです。子のみを先に移行し、そこから親や兄弟と整合性を合わせるパターンを想定しています。

import VueApp from './VueApp';

export default class {
  constructor(element) {
    // 呼び出し側でイベントハンドラが設定できるようobserverパターンを組み込む
    this.observers = {};
    createApp(VueApp, {
      // Vueコンポーネントで 'blur' がemitされると呼ばれる
      onBlur: (value) => this.emit('blur', value),
    // レンダリング
    }).mount(element);
  }

  emit(name, ...args) {
    if (name in this.observers) {
      this.observers[name].forEach((cb) => cb(...args));
    }
  }

  on(name, cb) {
    if (!(name in this.observers)) {
      this.observers[name] = [];
    }
    this.observers[name].push(cb);
    return this;
  }

  // offを用意することも
}

import BackboneView from './BackboneView';
import VueAppACL from './VueAppACL';

const backboneView = new BackboneView({ el: '#app-backbone' });
const vueApp = new VueAppACL('#app-vue');

backboneView.render();

// Vueでblurが発生したときのイベントハンドラ
vueApp.on('blur', (text) => {
  // backboneに変更とデータを伝える
  backboneView.model.set('text', `Model 「${text}」`);
});

// modelはシングルトンの想定
import model from './BackboneModel';

export default class {
  constructor() {
    // Backbone.Model.toJSON()を利用し、データを取り出しreactive（proxy）オブジェクトを作成
    // [補足]
    // Backbone Model では値が変更された後にchangeイベントが発火されるため、
    // オブジェクト参照が切れていないと、reactiveが反応してくれません（changed時にはthis.stateが変わっている）
    this.state = reactive(model.toJSON());

    // Backboneのchangeイベントを利用しリアクティブ値を同期する
    model.on('change', (model) => {
      Object.keys(model.changed).forEach((k) => {
        if (k in this.state) {
          this.state[k] = model.changed[k];
        }
      });
    });
  }
}

<script>
import Store from './BackboneModelACL';

export default defineComponent({
  name: 'vue component',

  setup() {
    const store = new Store();
    return {
      state: store.state,
    };
  },
});
</script>