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
   

   View Slide

2. ● 前原 秀徳
   ● @maeharin（まえはりん）
   ● エムスリー株式会社
   ● エンジニアチームリーダー、グループ会社取締役等を歴任
   ● 好きな言語等：Kotlin、Ruby、Vue.js
   ● 好きな漫画：ベルセルク（心の支え。悩んだら読む）
   ● 自慢：ブログ記事が、はてぶ1200超えた
   ○http://maeharin.hatenablog.com/
   自己紹介
   

   View Slide

3. 背景
   ● 10年前のレガシーをリニューアル中
   ● 詳しくは以下のスライドをご覧ください！
   

   View Slide

4. postgresql
   ElasticSearch
   メインサイト
   サテライトサイト postgresql
   管理画面(3種)
   Java
   10年もの
   Java
   7年もの
   生Lucene
   生Lucene
   リニューアル前の技術スタック
   約100
   テーブル
   重複
   

   View Slide

5. postgresql
   ElasticSearch
   メインサイト
   サテライトサイト postgresql
   管理画面(3種)
   Java
   10年もの
   Java
   7年もの
   生Lucene
   生Lucene
   リニューアル前の技術スタック
   約100
   テーブル
   重複
   廃止
   フルリプレイス
   

   View Slide

6. postgresql
   ElasticSearch
   メインサイト
   サテライトサイト
   管理画面(3種) APIサーバー
   リニューアル後の技術スタック
   

   View Slide

7. postgresql
   ElasticSearch
   メインサイト
   サテライトサイト
   管理画面(3種) APIサーバー
   リニューアル後の技術スタック
   今回の話
   

   View Slide

8. 旧管理画面（10年もの）
   Javaの
   独自FW
   古の技術XSLT…
   旧管理画面（10年もの）
   独自FW・jQuery
   のコンボ...
   

   View Slide

9. 新管理画面
   新管理画面
   ElementとTypeScriptが活
   躍！
   旧管理画面（10年もの）
   Javaの
   独自FW
   

   View Slide

10. ● Vue.jsのデスクトップUIフレームワーク
    ● 最新ver: 2.0.8（2017/12/13現在）
    ○ 2017/10/27に2.0.0リリース
    ○ TypeScript型定義がバンドルされた
    ● フォームやボタンなど、大量のUIコンポーネントあり
    Element
    

    View Slide

11. UIコンポーネントの例
    

    View Slide

12. 人気
    npmダウンロードトレンド
    Element
    

    View Slide

13. i18n（日本語対応）
    

    View Slide

14. Vetur（VSCodeプラグイン）もサポート
    

    View Slide

15. 個人的に重宝しているパーツ
    

    View Slide

16. Dialog
    

    View Slide

17. el-dialogの
    visibleに
    booleanのdataを
    バインドするだけ
    

    View Slide

18. Date Range
    

    View Slide

19. el-date-pickerで
    typeをdaterangeに
    する
    

    View Slide

20. Select(Option Filtering)
    

    View Slide

21. el-selectにfilterable
    をつけるだけ
    

    View Slide

22. Validation
    

    View Slide

23. rulesに
    バリデーションルールを
    セット
    

    View Slide

24. バリデーションルールを記載
    * yiminghe/async-validatorの記法
    

    View Slide

25. 他にも大量のパーツあり！
    ・少ない手数でリッチなUIを実装できる
    ・管理画面の開発にマッチ
    

    View Slide

26. TypeScript
    

    View Slide

27. Vue.js 2.5でTypeScript対応が強化された
    ● Vue.js 2.5（2017/10/13 リリース）
    ● オブジェクト型の構文でもthisの型が推論されるように
    

    View Slide

28. Vue.js 2.5以前
    ● オブジェクト構文ではthisの型が推論されなかった
    ● vue-class-component等を用いてクラス構文にする必要があった
    

    View Slide

29. Vue.js 2.5以降
    ● オブジェクト構文でもthisの型が推論される！
    

    View Slide

30. コミッタの方々、ありがとうございます！
    

    View Slide

31. 私達のプロジェクト：APIの型定義が欲しい
    ● 業務用管理画面
    ● APIの1エンドポイントのプロパティが50個とか
    ● エンドポイントに対するTypeScript型定義が欲しい
    ○ プロパティの補完・タイポ削減
    APIサーバー
    フロントサーバー
    ※セッションを管理するプロキシとして動
    作。VueとKotlinの間で
    リクエスト内容を変換することはない
    

    View Slide

32. Kotlin&Spring Boot
    (APIサーバー）
    API定義ファイル(json)
    SpringFoxで
    API定義ファイル生成
    API定義ファイルを利用
    swagger-codegen
    コマンド
    Rubyクライアント
    自動生成
    swagger-codegenで自動生成
    ● SpringFoxでswagger definition(json)を生成
    ● そのjsonをswagger-codegenに食わせる
    TypeScript型定義
    

    View Slide

33. githubにあげてます
    サンプルプロジェクトあります
    https://github.com/maeharin/kotlin-dvd-rental-dev
    

    View Slide

34. postgresql
    ElasticSearch
    customer-front
    admin-front
    api
    APIクライアント
    swagger-codegenで自動生成
    サンプルプロジェクトの構成
    API型定義
    

    View Slide

35. 開発の流れ
    

    View Slide

36. APIサーバーのエンドポイントを書く
    

    View Slide

37. swagger-codegenを実行（ビルド時に自動実行）
    

    View Slide

38. RubyとTypeScriptコードが自動生成される
    Ruby
    * Gem
    TypeScript
    * npmライブラリ
    

    View Slide

39. Rubyのコードを書く
    

    View Slide

40. Vue.jsのコードを書く（TypeScript）
    APIのプロパティ
    補完。捗る!
    

    View Slide

41. ● 特に管理画面の開発で、Elementはよい選択肢と思う
    ● Vue.js 2.5でTypeScript強化されて嬉しみが増した
    ○まだテンプレート部分には型補完が効かない模様
    ○今後効くようになったら最高
    ● swagger-codegenでTypeScriptの型定義生成はあり
    まとめ
    

    View Slide

42. ご清聴
    ありがとうございました!
    

    View Slide