Slide 1

Slide 1 text

XFLAG STUDIO Phoenix1.4とVue.jsによる サービス構築のノウハウ 2019.06.01 Tsuyoshi Yamaguchi 株式会社ミクシィ

Slide 2

Slide 2 text

Phoenix1.4とVue.jsによる サービス構築のノウハウ ⾃⼰紹介 はじめに PhoenixとVue.jsのノウハウ 最後に 3 5 11 21 2

Slide 3

Slide 3 text

⾃⼰紹介 3

Slide 4

Slide 4 text

あなたは誰︖ だれ︖ • ⼭⼝ 強 • 北海道出⾝ どんな⼈︖ • 2018年5⽉にミクシィ⼊社 • Elixir/Phoenixを⽤いたバックエンド開発 • JavaScript/TypeScript/Vue.jsを⽤いたフロントエンド開発 よく使う⾔語は︖ • Elixir, JavaScript, TypeScript 好きなものは︖ • Game of Thrones, スノーボード 4

Slide 5

Slide 5 text

はじめに 5

Slide 6

Slide 6 text

今⽇話すこと 現在開発中のプロダクトでは、⼀部機能でPhoenixとVue.jsを⽤いたWeb ページを提供します。本⽇は、それらの開発時に得られた知⾒についてお話し ます。 6 Phoenix Vue.js ×

Slide 7

Slide 7 text

Vue.jsとは • WebのUIを構築するJavaScriptフレームワーク • 再利⽤可能なコンポーネント、双⽅向データバインディグ、仮想DOM などの特徴を持つ • 開発中プロダクトでは、ユーザーインタラクションに伴って動的にペー ジ内のUIを変更するために利⽤ 7

Slide 8

Slide 8 text

Phoenixとは 省略 8

Slide 9

Slide 9 text

PhoenixとVue.jsでできること • クライアント(ブラウザ)側における、動的なコンテンツの更新 • ページをまたいだ同⼀コンポーネントの再利⽤ 9

Slide 10

Slide 10 text

ディレクトリ構成例 10 "dependencies": { … "vue": "^2.6.10" }, "devDependencies": { … "vue-loader": "^15.7.0" } module: { rules: [ ... { test: /\.vue$/, loader: "vue-loader" }, ] }, plugins: [ new VueLoaderPlugin(), ... ], Phoenix 1.4からはwebpackがデフォルトの バンドラとなった (以前はBrunch)

Slide 11

Slide 11 text

PhoenixとVue.jsのノウハウ 11

Slide 12

Slide 12 text

Digestを使おう (1/3) Digestとは︖ Phoenixが提供する静的ファイルの処理機能。 Digest機能を使うことで、JavaScriptファイルに以下の処理することができ る • ファイルの圧縮: • ダウンロードするファイルの量の削減 • ファイル名へのハッシュの追加: • 古いファイルのキャッシュを読み込まなくなる 参考: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Digest.html 12

Slide 13

Slide 13 text

Digestを使おう (2/3) 13 $ cd asset && npm run deploy $ cd ../ && mix phx.digest 1. Vueを含むJavaScriptファイルのビルド 2. Digest処理の実⾏

Slide 14

Slide 14 text

Digestを使おう (3/3) 14 phx.digest により⽣成されたマニフェスト ファイル。 リクエストされるファイルとハッシュを含んだ ファイルとの対応関係を定義する。

Slide 15

Slide 15 text

Vueに値を渡してみよう(1/3) 15 ⽅法1: グローバルスコープを介して値を渡す page_controller.ex index.html.eex page.js

Slide 16

Slide 16 text

Vueに値を渡してみよう(2/3) 16 ⽅法2: input hiddenを介して値を渡す page_controller.ex index.html.eex page.js

Slide 17

Slide 17 text

Vueに値を渡してみよう(3/3) 17 メリット デメリット グローバルスコープを介して 値を渡す - 実装は比較的シンプル - JavaScriptのグローバルスコープを汚染する Input hiddenを介して 値を渡す - グローバルスコープを汚染しない - プリミティブな値しか渡すことができない ただし、いずれの⽅法も処理内容を分散させることになり、.exファイ ル、.eexファイル、.jsファイルが密な結合になりやすい

Slide 18

Slide 18 text

ファイルを分割しよう(1/3) 18 page1.html.eex page2.html.eex import import page1.js page2.js compiled.js <script src=“compiled.js”> Build by webpack ダウンロードするファイルが肥⼤化する xxx.vue yyy.vue aaa.vue bbb.vue 大

Slide 19

Slide 19 text

ファイルを分割しよう(2/3) 19 page1.html.eex page2.html.eex import import page1.js page2.js page2.js <script src=“page2.js”> Build by webpack ページごとのJSファイルを⽣成する page1.js xxx.vue yyy.vue aaa.vue bbb.vue

Slide 20

Slide 20 text

ファイルを分割しよう(3/3) 20 Webpackのエントリーポイントをページ単位で指定する 参考: https://webpack.js.org/concepts/entry-points/

Slide 21

Slide 21 text

最後に 21

Slide 22

Slide 22 text

PhoenixとVue.jsを使ってみて - PhoenixテンプレートとVue.jsを⽤いる場合、⼀程度の規模の処理をさせ ようとするとコードが複雑になりがち。またテストが困難 - Vue.jsのようなJavaScriptフレームワークを使う場合、Phoenixテンプ レートと⼀緒に⽤いない⽅が良いかも - Phoenix側はAPIサーバーとし、Vue.jsはAjax通信によって得られたデー タを扱う作りとした⽅がシンプルな構造にできる - これからはLiveViewという選択肢も…? 22

Slide 23

Slide 23 text

23