10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6

Vue.js Tokyo v-meetup #6 での発表資料です！

github（サンプルプロジェクト）はこちら
https://github.com/maeharin/kotlin-dvd-rental-dev

Transcript

1. 10年前のレガシーシステムを Vue.js TypeScript Elementで フルリニューアルしている話 #vuejs_meetup6 2017/12/13 Vue.js Tokyo v-meetup #6 エムスリー株式会社 前原 @maeharin
2. • 前原 秀徳 • @maeharin（まえはりん） • エムスリー株式会社 • エンジニアチームリーダー、グループ会社取締役等を歴任 • 好きな言語等：Kotlin、Ruby、Vue.js • 好きな漫画：ベルセルク（心の支え。悩んだら読む） • 自慢：ブログ記事が、はてぶ1200超えた ◦http://maeharin.hatenablog.com/ 自己紹介
3. 背景 • 10年前のレガシーをリニューアル中 • 詳しくは以下のスライドをご覧ください！
4. postgresql ElasticSearch メインサイト サテライトサイト postgresql 管理画面(3種) Java 10年もの Java 7年もの 生Lucene 生Lucene リニューアル前の技術スタック 約100 テーブル 重複
5. postgresql ElasticSearch メインサイト サテライトサイト postgresql 管理画面(3種) Java 10年もの Java 7年もの 生Lucene 生Lucene リニューアル前の技術スタック 約100 テーブル 重複 廃止 フルリプレイス
6. postgresql ElasticSearch メインサイト サテライトサイト 管理画面(3種) APIサーバー リニューアル後の技術スタック
7. postgresql ElasticSearch メインサイト サテライトサイト 管理画面(3種) APIサーバー リニューアル後の技術スタック 今回の話
8. 旧管理画面（10年もの） Javaの 独自FW 古の技術XSLT… 旧管理画面（10年もの） 独自FW・jQuery のコンボ...
9. 新管理画面 新管理画面 ElementとTypeScriptが活 躍！ 旧管理画面（10年もの） Javaの 独自FW
10. • Vue.jsのデスクトップUIフレームワーク • 最新ver: 2.0.8（2017/12/13現在） ◦ 2017/10/27に2.0.0リリース ◦ TypeScript型定義がバンドルされた • フォームやボタンなど、大量のUIコンポーネントあり Element
11. UIコンポーネントの例
12. 人気 npmダウンロードトレンド Element
13. i18n（日本語対応）
14. Vetur（VSCodeプラグイン）もサポート
15. 個人的に重宝しているパーツ
16. Dialog
17. el-dialogの visibleに booleanのdataを バインドするだけ
18. Date Range
19. el-date-pickerで typeをdaterangeに する
20. Select(Option Filtering)
21. el-selectにfilterable をつけるだけ
22. Validation
23. rulesに バリデーションルールを セット
24. バリデーションルールを記載 * yiminghe/async-validatorの記法
25. 他にも大量のパーツあり！ ・少ない手数でリッチなUIを実装できる ・管理画面の開発にマッチ
26. TypeScript
27. Vue.js 2.5でTypeScript対応が強化された • Vue.js 2.5（2017/10/13 リリース） • オブジェクト型の構文でもthisの型が推論されるように
28. Vue.js 2.5以前 • オブジェクト構文ではthisの型が推論されなかった • vue-class-component等を用いてクラス構文にする必要があった
29. Vue.js 2.5以降 • オブジェクト構文でもthisの型が推論される！
30. コミッタの方々、ありがとうございます！
31. 私達のプロジェクト：APIの型定義が欲しい • 業務用管理画面 • APIの1エンドポイントのプロパティが50個とか • エンドポイントに対するTypeScript型定義が欲しい ◦ プロパティの補完・タイポ削減 APIサーバー フロントサーバー ※セッションを管理するプロキシとして動 作。VueとKotlinの間で リクエスト内容を変換することはない
32. Kotlin&Spring Boot (APIサーバー） API定義ファイル(json) SpringFoxで API定義ファイル生成 API定義ファイルを利用 swagger-codegen コマンド Rubyクライアント 自動生成 swagger-codegenで自動生成 • SpringFoxでswagger definition(json)を生成 • そのjsonをswagger-codegenに食わせる TypeScript型定義
33. githubにあげてます サンプルプロジェクトあります https://github.com/maeharin/kotlin-dvd-rental-dev
34. postgresql ElasticSearch customer-front admin-front api APIクライアント swagger-codegenで自動生成 サンプルプロジェクトの構成 API型定義
35. 開発の流れ
36. APIサーバーのエンドポイントを書く
37. swagger-codegenを実行（ビルド時に自動実行）
38. RubyとTypeScriptコードが自動生成される Ruby * Gem TypeScript * npmライブラリ
39. Rubyのコードを書く
40. Vue.jsのコードを書く（TypeScript） APIのプロパティ 補完。捗る!
41. • 特に管理画面の開発で、Elementはよい選択肢と思う • Vue.js 2.5でTypeScript強化されて嬉しみが増した ◦まだテンプレート部分には型補完が効かない模様 ◦今後効くようになったら最高 • swagger-codegenでTypeScriptの型定義生成はあり まとめ
42. ご清聴 ありがとうございました!