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

Transcript

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

2. 自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ ▸ 職種 ▸ フロントエンドエンジニア

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

3. 3 今日話すこと

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

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

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

   悪かったこと ▸ まとめ 6

7. どんな独自フレームワーク？ ▸ jQuery 製、2014年末頃に誕生 ▸ Babelify で ES2015 化、
 MorphDOM

   で 差分レンダリング を実現 ▸ Template に Model を渡すとレンダリングし、 
 Selector と Function を渡すとバインドする MVVM 7

8. 入力値を表示する場合 8

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

10. まずは足元を整えることから開始 ▸ Browserify を webpack に ▸ Grunt を Gulp

    / npm script に ▸ JSLint を ESLint / Prettier に ▸ Mocha を Jest に ▸ $.Deferred を Promise（bluebird）に ▸ and more... 10

11. 開発の歴史 11 2014/12 2016/10 2017/10 2018/10 2015/4 独自FW誕生 レストランボード
 開発開始

    脱Browserify 脱Grunt ESLint Jest Prettier Promise Vue.js async / await 足元の整理に二年弱くらい

12. Vue.js 導入時に心掛けたこと ▸ 小さく移行する ▸ Drastic に変えない ▸ 画面毎や部品毎、 Molecules

    や Atoms から導入 ▸ 案件で触る部分だけ、リファクタリングの粒度にとどめる ▸ 移行で I/F が変わらないことが大事 ▸ レガシーコードの ロジックは資産、できるだけそのまま使う 12

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

14. Vue.js 導入で良かったこと ▸ 学習曲線が緩い ▸ バックエンドからの転向組でも立ち上がりがスムーズだった ▸ template, script, style

    の SFC はわかりやすい ▸ 誰が書いても それなり に書ける ▸ 人材が少ない中で 誰でもそれなり はすごく嬉しい 14

15. Vue.js 導入で難しかったこと ▸ 自由にできすぎる... ▸ watch or computed ? created

    or mounted ? ▸ ついでに新しい技術等も一緒に入れようとして影響が肥大化する ▸ やらないことを決める のが大事 ▸ 秩序とは制約の上に成り立つ 15

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

17. 17 まとめ

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

19. 19 Vue.js は裏切らない！

20. 20 EOF