Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Phoenix1.4とVue.jsによるサービス構築のノウハウ
Search
MIXI ENGINEERS
PRO
June 01, 2019
Programming
2
2.7k
Phoenix1.4とVue.jsによるサービス構築のノウハウ
https://elixir-fest.jp/
Erlang & Elixir Fest 2019の発表資料です。
MIXI ENGINEERS
PRO
June 01, 2019
Tweet
Share
More Decks by MIXI ENGINEERS
See All by MIXI ENGINEERS
【D2-5】MIXI SREの最新事例まるわかり! 〜 各事業のSRE活動にかかわるエンジニアに本音を聞く | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
3
71
【D2-7】共闘ことばRPG コトダマンの自律分散型QA組織 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
22
【D2-S1】MIXIオンプレミス設備のこれまでとこれから~そして印西へ~ | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
50
【D2-6】モンスト10周年における真獣神化実装担当者が10年分の形態変化の設計をイチから作り直した話 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
68
【D2-8】WordPressのヘッドレス運用化 〜minimo roomのJamstack構成移行プロジェクト〜 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
32
【D2-S2】Kotlin と Flutter を愛であう会 for Android開発 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
54
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
230
【D1-3】フィギュアスケートにおける自動追尾カメラ開発 - 位置情報+AI画像解析 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
250
【D1-6】netkeibaにおける機械学習を用いた競馬オッズ予測手法の開発とその変革 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
220
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
740
ゆるい個人開発のススメ
kuroppe1819
10
950
Ruby Pattern Matching
bkuhlmann
0
920
Code Reviews
bkuhlmann
4
880
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.9k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
790
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Milestoner
bkuhlmann
1
400
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
41
12k
4 Signs Your Business is Dying
shpigford
175
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
RailsConf 2023
tenderlove
2
530
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Code Review Best Practice
trishagee
54
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Docker and Python
trallard
33
2.7k
What's new in Ruby 2.0
geeforr
337
31k
Transcript
XFLAG STUDIO Phoenix1.4とVue.jsによる サービス構築のノウハウ 2019.06.01 Tsuyoshi Yamaguchi 株式会社ミクシィ
Phoenix1.4とVue.jsによる サービス構築のノウハウ ⾃⼰紹介 はじめに PhoenixとVue.jsのノウハウ 最後に 3 5 11 21
2
⾃⼰紹介 3
あなたは誰︖ だれ︖ • ⼭⼝ 強 • 北海道出⾝ どんな⼈︖ • 2018年5⽉にミクシィ⼊社
• Elixir/Phoenixを⽤いたバックエンド開発 • JavaScript/TypeScript/Vue.jsを⽤いたフロントエンド開発 よく使う⾔語は︖ • Elixir, JavaScript, TypeScript 好きなものは︖ • Game of Thrones, スノーボード 4
はじめに 5
今⽇話すこと 現在開発中のプロダクトでは、⼀部機能でPhoenixとVue.jsを⽤いたWeb ページを提供します。本⽇は、それらの開発時に得られた知⾒についてお話し ます。 6 Phoenix Vue.js ×
Vue.jsとは • WebのUIを構築するJavaScriptフレームワーク • 再利⽤可能なコンポーネント、双⽅向データバインディグ、仮想DOM などの特徴を持つ • 開発中プロダクトでは、ユーザーインタラクションに伴って動的にペー ジ内のUIを変更するために利⽤ 7
Phoenixとは 省略 8
PhoenixとVue.jsでできること • クライアント(ブラウザ)側における、動的なコンテンツの更新 • ページをまたいだ同⼀コンポーネントの再利⽤ 9
ディレクトリ構成例 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)
PhoenixとVue.jsのノウハウ 11
Digestを使おう (1/3) Digestとは︖ Phoenixが提供する静的ファイルの処理機能。 Digest機能を使うことで、JavaScriptファイルに以下の処理することができ る • ファイルの圧縮: • ダウンロードするファイルの量の削減
• ファイル名へのハッシュの追加: • 古いファイルのキャッシュを読み込まなくなる 参考: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Digest.html 12
Digestを使おう (2/3) 13 $ cd asset && npm run deploy
$ cd ../ && mix phx.digest 1. Vueを含むJavaScriptファイルのビルド 2. Digest処理の実⾏
Digestを使おう (3/3) 14 phx.digest により⽣成されたマニフェスト ファイル。 リクエストされるファイルとハッシュを含んだ ファイルとの対応関係を定義する。
Vueに値を渡してみよう(1/3) 15 ⽅法1: グローバルスコープを介して値を渡す page_controller.ex index.html.eex page.js
Vueに値を渡してみよう(2/3) 16 ⽅法2: input hiddenを介して値を渡す page_controller.ex index.html.eex page.js
Vueに値を渡してみよう(3/3) 17 メリット デメリット グローバルスコープを介して 値を渡す - 実装は比較的シンプル - JavaScriptのグローバルスコープを汚染する
Input hiddenを介して 値を渡す - グローバルスコープを汚染しない - プリミティブな値しか渡すことができない ただし、いずれの⽅法も処理内容を分散させることになり、.exファイ ル、.eexファイル、.jsファイルが密な結合になりやすい
ファイルを分割しよう(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 大
ファイルを分割しよう(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
ファイルを分割しよう(3/3) 20 Webpackのエントリーポイントをページ単位で指定する 参考: https://webpack.js.org/concepts/entry-points/
最後に 21
PhoenixとVue.jsを使ってみて - PhoenixテンプレートとVue.jsを⽤いる場合、⼀程度の規模の処理をさせ ようとするとコードが複雑になりがち。またテストが困難 - Vue.jsのようなJavaScriptフレームワークを使う場合、Phoenixテンプ レートと⼀緒に⽤いない⽅が良いかも - Phoenix側はAPIサーバーとし、Vue.jsはAjax通信によって得られたデー タを扱う作りとした⽅がシンプルな構造にできる
- これからはLiveViewという選択肢も…? 22
23