Replace View of Backbone with Vue

[Event detail]
Vue.js Tokyo v-meetup #8
https://vuejs-meetup.connpass.com/event/95678/

[Description(Blog)]
https://blog.tanaka.world/vuejs-tokyo-v-meetup-8/

Transcript

1. Replace View of Backbone.js with Vue.js Vue.js Tokyo v-meetup #8 2018/08/28
 @_tanakaworld
2. About Me Yutaro Tanaka GitHub: tanakaworld
 Twitter: @_tanakaworld Software Engineer / Merpay, Inc.
 Vue.js / Nuxt / TypeScript
 
 Ruby / Rails / Python / Docker / AWS
3. 履履歴書の Web 管理理+共有サービス開発してます
 Vue.js でのフロントエンドリニューアルを検討中
 
 リリース: Tech Crunch (tcrn.ch/2wbmfcq) https://proff.io PR
4. 突然ですが
5. [Q] Backbone.js で
 SPA 開発したことある⽅方 ?
6. Backbone.View ツラくありませんか？
 （2018 年年現在）
7. データバインディング ツラい backbone.stickit (NYTimes 製)，Rivets.js, etc...
 無理理⽮矢理理感
8. UI の再利利⽤用が難しい Backbone.View に分割 → Template が空に JavaScript から個別にレンダリング
 ⾒見見通し悪い
9. 3rd Party Module の枯渇 メンテされていない
10. Backbone.js
 飽きていた
11. Vue.js で開発したい !!!
12. Backbone.js SPA の⼀一部を Vue.js で書いたら 幸せになった話 Vue.js Tokyo v-meetup #8 2018/08/28
 @_tanakaworld
13. ※ 仮の「Mind Map」 
 SPA アプリケーションを題材に
 説明します
14. 〇〇 + Vue.js アーキテクチャ事例例
15. • Backbone.js SPA • JointJS • Diagram 系の UI をつくれる • UI パーツが Backbone.Model と対応 • 有償版の Rappid で⾼高機能な GUI を実現
 https://www.jointjs.com/ とあるプロジェクト
16. 構成 イメージ • D&D で要素を追加 • 線でつなげたり， 場所を移動できる • 要素を選択すると， 詳細のプロパティ を編集できる GUI Editor Property Editor
17. ( Demo )
18. ( Demo ) GUI Editor Property Editor Demo
19. UI リニューアル
20. ⼤大幅にリニューアル •タブ UI で表示切り替え •⼦子 Item (Form) の追加・削除 •Input / Button / Dropdown Select / Radio •WYSIWYG Editor •Dropdown 要素の CRUD •⼊入⼒力力状態によって表示を動的に切り替え •インタラクティブなバリデーション •DBデータ構造変更更
 
 etc…
21. 複雑な UI
23. Backbone.js で 実装できる⾃自信ない
25. • Vue.js は、より柔軟で⾃自⼰己を主張しな いライブラリ • Vue では⾃自分の好みのやり⽅方でアプリ を構築できる • 本格的な SPA を作成せずとも、イン ターフェイス・レイヤーとしてページ 内に軽度の機能実装を実現できる v1 「他のフレームワークとの⽐比較」より抜粋
 https://v1-jp.vuejs.org/guide/comparison.html
26. Vue.js を採⽤用 ! !
27. 完成 イメージ GUI Editor Property Editor
28. ポイント 1. 使える資産はそのままに 2. Vue Component をラップするクラス 3. Store に Backbone.Model をもたせる 4. jQuery + Vue Component
29. 1. 使える資産はそのままに
30. •既存構成はそのまま • Backbone.Router • Backbone.Model • Backbone.View (ページの表示) • JointJS (GUI Editor) • gulp / Browserify / babel •追加スタック • vueify (Browserifyで.vueファイルをコンパイル) • Vue • Vuex • 3rd party component
 ※ Vue Router は使わない フルリプレイスしたい気持ちをグッとこらえる
31. 2. Vue Component をラップするクラス
32. this.nodeEditor = new NodeEditor({el: '.MindMap__NodeEditor'});
33. export default class NodeEditor { constructor({el}) { this.vm = new Vue({ el, store, data: { show: false }, components: { App }, methods: { ...mapGetters([ GETTERS.getModel ]), showEditor() { this.show = false; this.$nextTick(() => { this.show = true; }); }, hideEditor() { this.show = false; } }, template: `<div v-if="show && getModel()"><App :id="getModel().get('id')" :title="getModel().get('title')" :color="getModel().get('color')" /></div>` }); } ••• }
34. export default class NodeEditor { ••• render(model) { store.commit(MUTATIONS.setModel, {model}); this.vm.showEditor(); } close() { store.commit(MUTATIONS.clearModel); this.vm.hideEditor(); } } データのやりとりはインスタンスメソッド経由のみ
35. 3. Store に Backbone.Model を もたせる
36. Action で Backbone.Model の処理理を使う export default new Vuex.Store({ state: { model: null }, ••• mutations: { [MUTATIONS.setModel](state, {model}) { state.model = model; }, [MUTATIONS.clearModel](state) { state.model = null; } }, actions: { [ACTIONS.SAVE_MODEL]: ({commit, dispatch, state}, {title, color}) => { state.model.save({title, color}); // PUT /models/:id が実⾏行行される }, [ACTIONS.DELETE_MODEL]: ({commit, dispatch, state}) => { state.model.destroy({ // DELTE /models/:id が実⾏行行される success: () => commit(MUTATIONS.clearModel) }); } }
37. Vue Component の任意イベントで Action を dispatch <script> import {mapActions} from 'vuex'; import {ACTIONS} from './store'; export default { ••• methods: { ...mapActions([ ACTIONS.SAVE_MODEL, ACTIONS.DELETE_MODEL ]), onBlurTitle() { this.SAVE_MODEL({ title: this.tmpTitle, color: this.tmpColor }); }, onClickDelete() { this.DELETE_MODEL(); } }, •••
38. 4. jQuery + Vue Component
39. • Backbone.js では jQuery 依存のライブ ラリを使っていることが多い • Vue Component 内では Vue のライブ ラリを使いたい • しかし完全対応していないケースも • 例例）At.js Vue Component 内で jQuery を使う
40. Demo
41. import 'at.js'; import 'at.js/dist/css/jquery.atwho.min.css'; import $ from 'jquery'; export default { ••• mounted() { const $el = $(this.$refs['WYSIWYG']); $el.atwho({ at: "@", •••, callbacks: { // jQuery による変更更を検知 beforeInsert: (value) => { setTimeout(() => { this.emitChange(); }, 300); return value; } } }); }, methods: { emitChange() { const $el = $(this.$refs['WYSIWYG']); this.$emit('input', $el.html()); } } jQuery による DOM 更更新は Vue Component のライフサイクル外 • mounted 内で， $refs を 使い DOM を取得 • jQuery による DOM 更更新 を Vue は検知しない • 変更更を伝える処理理を記述
42. リリースは完了了
43. まとめ
44. ポイントおさらい 1. 使える資産はそのままに フルリプレイスしたい気持ちをグッとこらえる 2. Vue Component をラップするクラス データのやりとりはインスタンスメソッド経由のみ 3. Store に Backbone.Model をもたせる Action で Backbone.Model の処理理を使う 4. jQuery + Vue Component Vue Component 内で jQuery を使う
45. Backbone.js + Vue.js 導⼊入結果 • 既存ライブラリに⼲干渉しなかった • ⼩小さく部分的に始められる • UI パーツの Component 化で効率アップ • UI パーツを毎に共通コンポーネントを実装 • UI の仕様変更更にも柔軟に対応できた • モデル・通信周りは Backbone.Model が やってくれて楽
46. 注意したい点 • バンドルサイズ • 圧縮 + gzipして約 2.6 MB • ライフサイクル • jQuery の DOM 変更更は Vue.js のライフサイクル外 • 混ぜるな危険 • 境界線は明確に • 結局カオス化する
47. Source Code • Mind Map
 stack: webpack/Backbone.js/Vue.js/Vuex/Express/Realm 
 https://github.com/tanakaworld/replace-view-of-backbone-with-vue • Vue.js と At.js を組み合わせる
 https://github.com/tanakaworld/vue-with-atjs
 https://blog.tanaka.world/vue-wysiwyg-editor-with-atjs/
48. Thanks Vue.js !!
49. Thanks !!