ElixirConfJP 2019 小倉城のLT枠で使用したプレゼンテーション資料です。 Single Page Application (SPA) 開発に Ruby on Rails と Vue.js を組み合わせた場合と Phoenix LiveView を採用した場合を比較し、長所と短所をまとめました。 特に、アプリケーションの「状態(state)」がブラウザ側とサーバー側のどちらに置かれるか、に着目して解説しました。 また、プレゼンテーションの冒頭で、Phoenix LiveView を利用して開発中の新サービス Teamgenik と、東京港区田町で行った Elixir 勉強会について紹介しました。

1. Single Page Application (SPA) development
using Phoenix LiveView
~ Phoenix LiveViewを利用したSPA開発
1
2019/09/07
Coregenik Inc.
Tsutomu Kuroda
黒田 努

2. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Now, we are developing...
~ 私たちは、いまこれを開発しています…
Using Phoenix LiveView!!
チームジェニック

3. ElixirConfJp 小倉城
2019/09/07 (Sat.)
What is Teamgenik?
~ Teamgenikとは？
1.You can create web apps on the browser.
~ ブラウザ上でWebアプリを作れます。
2.All you need is an idea and a mouse!!
~ 必要なのはアイデアとマウスだけ！！
3.Also, you can trade apps on the marketplace.
~ Webアプリをマーケットプレイスで売買することもできます。

4. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Just by operating the mouse?
~ マウス操作だけで？

5. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Roadmap to release teamgenik
~ teamgenikリリースまでのロードマップ
December
2019
March
2020
Preview version will be released!
Version 1.0 will be released!!
→ https://teamgenik.com

6. ElixirConfJp 小倉城
2019/09/07 (Sat.)
At our last month's study session...
~ 先月の勉強会で…
https://daimon-ex.connpass.com

7. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Traditional SPA using Rails and Vue.js
~ RailsとVue.jsを利用した伝統的なSPA
Browser Server / DB
“state”
Virtual
DOM
DOM
User Input Vue.js Server
DB
JSON
ajax

8. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Modern SPA using Phoenix LiveView
~ Phoenix LiveViewを利用した現代的なSPA
Browser Server / DB
DOM
User Input
phoenix
live_view
.js
Virtual
DOM
“state”
DB
LiveView
Web Socket
updates
events

9. ElixirConfJp 小倉城
2019/09/07 (Sat.)
“State” was stored on the Browser
~ 「状態」はブラウザ側に保管されていた
Browser Server / DB
DB
Server
“state”
Virtual
DOM
DOM
User Input Vue.js
JSON
ajax

10. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Now, “state” gets stored on the Server
~ いまや、「状態」はサーバー側に保管される
Browser Server / DB
DOM
User Input phoenix_
live_view
.js
Virtual
DOM
“state”
Live View
DB
Web Socket
updates
event

11. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Pros for Phoenix LiveView
~ Phoenix LiveViewの長所
1.No need to write JavaScript.
~ JavaScriptを書く必要がない。
2.The amount of code can be reduced.
~ コード量を減らせる。
3.Web app’s implementation can be hidden.
~ Webアプリの実装を隠せる。

12. ElixirConfJp 小倉城
2019/09/07 (Sat.)
Cons of Phoenix LiveView
~ Phoenix LiveViewの短所
1.Cannot be used offline.
~ オフラインでは使えない。
2.Some browser events are not supported.
~ サポートされていないブラウザイベントがある。
3.Extra load on the network and the server.
~ ネットワークとサーバーに余分な負荷がかかる。

13. Thank you!
~ ありがとうございました！
13