ElixirDesktop入門：Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験【ElixirImp#22】

All Rights Reserved. | CONFIDENTIAL
©︎2021
ElixirImp #22 Wednesday, Jul. 20, 2022
ElixirDesktop入門
Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験
Introduction to ElixirDesktop
Web and smartphone development that can be built with single source
& development experience without getting stuck in API hell
Jul. 20, 2022 ver 0.9 created
Happy Elixir
10th Anniversary

View Slide

©︎2021 All Rights Reserved. | CONFIDENTIAL
©︎2021
my favotite technologies & implements
Twitter／NeosVR：@piacere_ex
Github／Qiita：@piacerex
I've been a programmer for 40 years.
I can write 158 programming languages.
And I met Elixir 7 years ago.
I own 3 companies that develepment
software, and I’m a tech advisor at 2
other companies.
I founded DigiDock Consulting Ltd,
a consulting and development company
specializing in Elixir last year.
In all of them, I make heavy use of Elixir
and Phoenix.
Masakazu Mori / piacere
“piacere” is an Italian word, means “Joy”
==
==
Real Online VR / AR

View Slide

©︎2021
これからのElixir採用におけるキーファクター
① ElixirDesktop … スマホネイティブアプリもElixirで提供
② LiveView … React／NextやVue.js／Nuxt → Elixir／LiveView
③ Nx+Axon … AI・MLもElixirで可 (ピュアPython部の高速化も)
④ エッジコンピューティング … クラウド無でクラウド同等を構築
⑤ Nerves … IoT開発をC++よりフレンドリーなエコシステムで
⑥ NWサーバ … Web3とメタバースに接続する高性能サーバ提供
⑦ Wasmex … Web3／Ethereum開発と3Dグラフィックが変わる
⑧ DID／VC … Web3を含む「脱中央集権」のコアにElixirを配置
⑨ チーム開発の本質 ← プログラミングの本質／データ処理の本質
ElixirImp#21より再掲

View Slide

©︎2021
①ElixirDesktop …スマホネイティブアプリもElixirで提供
● 大局観と課題
○ スマホネイティブアプリ需要は、10年は生き延びる想定
○ 一方で、Kotlin／Swiftデュアル開発の工数／マルチPF統制の
負荷と両方できるエンジニア調達困難で、API乱立問題も
○ React NativeやFlutterといった選択肢は、サーバエンジニア
からは距離があり、やはりAPI乱立問題は避けられない
● Elixirによるソリューションとビジョン
○ LiveViewベースのElixirDesktopは、サーバエンジニアが入り
やすく、マルチPF開発が可能で、API乱立が回避可能
○ SlackのようなPCデスクトップアプリも同時開発可能
○ iOS対応が安定してくるであろう今年中に前線配備が可能に
○ 今後のスマホ案件：ElixirDesktopでPoCし、イベントで共有
LiveView JP#7より再掲

View Slide

©︎2021
ElixirDesktopでスマホ開発するメリット／デメリット
● メリット
○ サーバサイド開発に慣れたエンジニアがスマホアプリ可能
○ LiveViewのWebアプリがそのままスマホアプリ化できる
○ API Hellに陥らずサーバサイドと同期可能 (LiveView由来)
○ シングルLiveViewソースでデュアル開発を叶える
● デメリット
○ LiveView同様、オフライン利用が不可能
■ 現代のスマホアプリでオフライン対応が徹底されるケース
はそこまで多く無いため、デメリットと言い切れない
○ 同時接続多発時に通信ネックになりやすい
○ 入門ドキュメントが少ない (が不要な位、タダのLiveView)
● 接続規模が膨大なスマホアプリでも無い限り、デメリットよりも
メリットの方が明らかに大きいと捉えて良いと思う

View Slide

©︎2021
AndroidにおけるElixirDesktopのアーキテクチャ
● スマホ：ElixirアプリがElixirDesktop経由でMainActivityと通信
● UI：WebView上でLiveView (WebSocket) によるリアクティブ

View Slide

©︎2021
下記からお試しください
https://github.com/elixir-desktop/android-example-app
Androidで動作するElixirDesktopアプリ
この後のtorifukuさんLTにて

View Slide

©︎2021
iOSにおけるElixirDesktopのアーキテクチャ
● スマホ：ElixirアプリがElixirDesktop経由でContentViewと通信
● UI：WebView上でLiveView (WebSocket) によるリアクティブ

View Slide

©︎2021
下記からお試しください
https://github.com/elixir-desktop/ios-example-app
iOSで動作するElixirDesktopアプリ
haigoさんがそのうちLTで…

View Slide

©︎2021
Webフロントサイド向け言語／FW【2022年版】
北九州工業専門学校特別講義 2022年8月より転載
11
Webフロント開発用
サーバ開発と兼任
スマホ開発用
～2013年
～2014年
～2012年
～2016年
～2011年
～2014年
～2015年
～2017年
～2012年
～2014年
～2016年
Android／iPhone (iOS) の同時開発が可能
～2006年

View Slide

©︎2021
スマホ開発以外のElixirDesktopの強み
● シングルLiveViewソースで下記クアッド開発を叶える
○ Web、PCデスクトップアプリ、Androidアプリ、iOSアプリ
● そもそもフロントとサーバを別々に開発する必要が無い
○ Web：React／Vue.jsはサーバAPI開発が必須
○ スマホ：
■ React Native／Flutter：サーバAPI開発が必須
■ Kotlin／Swift：サーバAPI開発必須＋両PF開発負荷がある
○ PCデスクトップ：ElectronはサーバAPI必須では無いが…
■ クラウドやエッジサーバと連携すればAPI開発が必須
● Elixirコードは、下記への分散 (オフロード) がカンタンに可能
○ クラウド、エッジサーバ、エッジ (IoT)
● これらを整理すると、ElixirDesktopの大幅な開発／保守工数の
削減効果と、Elixir／LiveViewの運用性の高さが武器になる

View Slide

©︎2021
ElixirDesktopアプリの開発の流れ
1. LiveView PJ作成 (mix phx.gen.live利用時はsqlite3等を指定)
○ mix phx.new basic --database sqlite3
2. mix.exsにElixirDesktopアプリ起動設定とライブラリを追加
○ 通常LiveView (Phoenix) はApplicationを使うのを変更
1. ライブラリ導入／DB作成
○ mix deps.get && mix ecto.create
defmodule Basic.MixProject do
…
def application do
[
# mod: {Basic.Application, []}, # <-- comment-out here
mod: {Basic, []}, # <-- add here
…
defp deps do
[
{:desktop, "~> 1.4"}, # <-- add here
…

View Slide

©︎2021
4. ElixirDesktop用メインを作成
○ DesktopWindow Supervisor配下にPubSub用Supervisor
と、Repo用Supervisorを置く
defmodule Basic do
@app Mix.Project.config()[:app]
def config_dir(), do: Path.join([Desktop.OS.home(), ".config", "basic"])
def start(:normal, []) do
{:ok, repo} = Supervisor.start_link([Basic.Repo], name: __MODULE__, strategy: :one_for_one)
{:ok, _} = Supervisor.start_child(repo, BasicWeb.Sup)
{:ok, _} = Supervisor.start_child(repo, {Desktop.Window, [
app: @app, id: BasicWindow, title: "BasicApp", size: {600, 500},
# icon: "icon.png", menubar: Basic.MenuBar, icon_menu: Basic.Menu,
url: &BasicWeb.Endpoint.url/0]
})
end
end

View Slide

©︎2021
5. PubSub用Supervisorを作成
○ ElixirDesktopは、Cookieでは無く、ETSでセッションを保持
defmodule BasicWeb.Sup do
use Supervisor
def start_link([]), do: Supervisor.start_link(__MODULE__, [], name: __MODULE__)
def init([]) do
children = [{Phoenix.PubSub, name: Basic.PubSub}, BasicWeb.Endpoint]
:session = :ets.new(:session, [:named_table, :public, read_concurrency: true])
Supervisor.init(children, strategy: :one_for_one, max_restarts: 1000)
end
end

View Slide

©︎2021
6. エンドポイントの以下を変更
○ OTPをPhoenixからElixirDesktopに変更
○ セッション設定をETSに変更
6. Phoenix起動により、ElixirDesktopアプリ起動
○ iex -S mix phx.server
defmodule BasicWeb.Endpoint do
# use Phoenix.Endpoint, otp_app: :basic # <-- comment-out here
use Desktop.Endpoint, otp_app: :basic # <-- add here
…
@session_options [
# store: :cookie, # <-- comment-out here
# key: "_todo_key", # <-- comment-out here
# signing_salt: "vbd9uGw6" # <-- comment-out here
store: :ets, # <-- add here
key: "_basic_key", # <-- add here
table: :session # <-- add here
…

View Slide

©︎2021
ElixirDesktopアプリのScaffold開発の流れ
1. Scaffold
○ mix phx.gen.live Blogs Blog blogs titile:string body:text
○ mix ecto.migrate
2. router.exに上記LiveViewエンドポイントを「/」として追加
defmodule BasicWeb.Router do
…
scope "/", BasicWeb do
pipe_through :browser
live "/", BlogLive.Index, :index
live "/new", BlogLive.Index, :new
live "/:id/edit", BlogLive.Index, :edit
live "/:id", BlogLive.Show, :show
live "/:id/show/edit", BlogLive.Show, :edit
# get "/", PageController, :index
…

View Slide

©︎2021
ElixirDesktopでスマホ開発するメリット／デメリット
● メリット
○ サーバサイド開発に慣れたエンジニアがスマホアプリ可能
○ LiveViewのWebアプリがそのままスマホアプリ化できる
○ API Hellに陥らずサーバサイドと同期可能 (LiveView由来)
○ シングルLiveViewソースでデュアル開発を叶える
● デメリット
○ LiveView同様、オフライン利用が不可能
■ 現代のスマホアプリでオフライン対応が徹底されるケース
はそこまで多く無いため、デメリットと言い切れない
○ 同時接続多発時に通信ネックになりやすい
○ 入門ドキュメントが少ない (が不要な位、タダのLiveView)
● 接続規模が膨大なスマホアプリでも無い限り、デメリットよりも
メリットの方が明らかに大きいと捉えて良いと思う

View Slide

ElixirDesktop入門：Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験【ElixirImp#22】

ElixirDesktop入門：Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験【ElixirImp#22】

piacerex

More Decks by piacerex

Other Decks in Technology

Featured

Transcript

ElixirDesktop入門：Web＋スマホを1つのソースで ＆ API Hellに陥らない開発体験【ElixirImp#22】

ElixirDesktop入門：Web＋スマホを1つのソースで ＆ API Hellに陥らない開発体験【ElixirImp#22】

piacerex

More Decks by piacerex

Other Decks in Technology

Featured

Transcript

ElixirDesktop入門：Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験【ElixirImp#22】

ElixirDesktop入門：Web＋スマホを1つのソースで＆ API Hellに陥らない開発体験【ElixirImp#22】