Phoenix1.4とVue.jsによるサービス構築のノウハウ

 Phoenix1.4とVue.jsによるサービス構築のノウハウ

https://elixir-fest.jp/
Erlang & Elixir Fest 2019の発表資料です。

B16717ef4b7aab0b253d933c3934f280?s=128

mixi_engineers

June 01, 2019
Tweet

Transcript

  1. 4.

    あなたは誰︖ だれ︖ • ⼭⼝ 強 • 北海道出⾝ どんな⼈︖ • 2018年5⽉にミクシィ⼊社

    • Elixir/Phoenixを⽤いたバックエンド開発 • JavaScript/TypeScript/Vue.jsを⽤いたフロントエンド開発 よく使う⾔語は︖ • Elixir, JavaScript, TypeScript 好きなものは︖ • Game of Thrones, スノーボード 4
  2. 10.

    ディレクトリ構成例 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)
  3. 13.

    Digestを使おう (2/3) 13 $ cd asset && npm run deploy

    $ cd ../ && mix phx.digest 1. Vueを含むJavaScriptファイルのビルド 2. Digest処理の実⾏
  4. 17.

    Vueに値を渡してみよう(3/3) 17 メリット デメリット グローバルスコープを介して 値を渡す - 実装は比較的シンプル - JavaScriptのグローバルスコープを汚染する

    Input hiddenを介して 値を渡す - グローバルスコープを汚染しない - プリミティブな値しか渡すことができない ただし、いずれの⽅法も処理内容を分散させることになり、.exファイ ル、.eexファイル、.jsファイルが密な結合になりやすい
  5. 18.

    ファイルを分割しよう(1/3) 18 page1.html.eex page2.html.eex import import page1.js page2.js compiled.js <script

    src=“compiled.js”> <script src=“compiled.js”> Build by webpack ダウンロードするファイルが肥⼤化する xxx.vue yyy.vue aaa.vue bbb.vue 大
  6. 19.

    ファイルを分割しよう(2/3) 19 page1.html.eex page2.html.eex import import page1.js page2.js page2.js <script

    src=“page1.js”> <script src=“page2.js”> Build by webpack ページごとのJSファイルを⽣成する page1.js xxx.vue yyy.vue aaa.vue bbb.vue
  7. 23.

    23