Vue.js は裏切らない / UIT#5

Slide 1

Slide 1 text

Vue.js は裏切らない 2018/11/29 UIT#5 Yuji Yamaguchi

Slide 2

Slide 2 text

自己紹介 ▸ 名前 ▸ ヤマグチユウジ ▸ 職種 ▸ フロントエンドエンジニア ▸ 経歴 ▸ 2011年04月通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発 ▸ 横断フロントエンドチーム 2

Slide 3

Slide 3 text

3 今日話すこと

Slide 4

Slide 4 text

飲食店向け予約台帳アプリ：レストランボード 4

Slide 5

Slide 5 text

5 独自フレームワークを Vue.js で置き換えている話

Slide 6

Slide 6 text

Vue.js で置き換えている話 ▸ 独自フレームワークについて ▸ Vue.js 導入前にやったこと ▸ 良かったこと / 悪かったこと ▸ まとめ 6

Slide 7

Slide 7 text

どんな独自フレームワーク？ ▸ jQuery 製、2014年末頃に誕生 ▸ Babelify で ES2015 化、  MorphDOM で差分レンダリングを実現 ▸ Template に Model を渡すとレンダリングし、   Selector と Function を渡すとバインドする MVVM 7

Slide 8

Slide 8 text

入力値を表示する場合 8

Slide 9

Slide 9 text

9 完成度は高いが今後の継続性に不安...

Slide 10

Slide 10 text

まずは足元を整えることから開始 ▸ Browserify を webpack に ▸ Grunt を Gulp / npm script に ▸ JSLint を ESLint / Prettier に ▸ Mocha を Jest に ▸ $.Deferred を Promise（bluebird）に ▸ and more... 10

Slide 11

Slide 11 text

開発の歴史 11 2014/12 2016/10 2017/10 2018/10 2015/4 独自FW誕生レストランボード  開発開始脱Browserify 脱Grunt ESLint Jest Prettier Promise Vue.js async / await 足元の整理に二年弱くらい

Slide 12

Slide 12 text

Vue.js 導入時に心掛けたこと ▸ 小さく移行する ▸ Drastic に変えない ▸ 画面毎や部品毎、 Molecules や Atoms から導入 ▸ 案件で触る部分だけ、リファクタリングの粒度にとどめる ▸ 移行で I/F が変わらないことが大事 ▸ レガシーコードのロジックは資産、できるだけそのまま使う 12

Slide 13

Slide 13 text

13 導入による大きなインシデントはいまのところなし！

Slide 14

Slide 14 text

Vue.js 導入で良かったこと ▸ 学習曲線が緩い ▸ バックエンドからの転向組でも立ち上がりがスムーズだった ▸ template, script, style の SFC はわかりやすい ▸ 誰が書いてもそれなりに書ける ▸ 人材が少ない中で誰でもそれなりはすごく嬉しい 14

Slide 15

Slide 15 text

Vue.js 導入で難しかったこと ▸ 自由にできすぎる... ▸ watch or computed ? created or mounted ? ▸ ついでに新しい技術等も一緒に入れようとして影響が肥大化する ▸ やらないことを決めるのが大事 ▸ 秩序とは制約の上に成り立つ 15

Slide 16

Slide 16 text

現状の導入比率 16 59% 41% 60画面中25画面で導入済み

Slide 17

Slide 17 text

17 まとめ

Slide 18

Slide 18 text

まとめ利益を出しているサービス開発において継続性はものすごく重要で誰でもそれなりに使えるFWはありがたいやらないことを決めるのがすごく難しいが新旧が共存しながら移行できるのは Vue.js の柔軟性があってこそ 18