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

Slide 1

Slide 1 text

10年前のレガシーシステムを Vue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6 2017/12/13 Vue.js Tokyo v-meetup #6 エムスリー株式会社前原 @maeharin

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

UIコンポーネントの例

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

i18n（日本語対応）

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Dialog

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Date Range

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Select(Option Filtering)

Slide 21

Slide 21 text

el-selectにfilterable をつけるだけ

Slide 22

Slide 22 text

Validation

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

TypeScript

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

開発の流れ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Rubyのコードを書く

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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