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

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

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

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

0ff63a1cf64b2501566f37581000bd9b?s=128

Hidenori Maehara

December 13, 2017
Tweet

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. ご清聴 ありがとうございました!