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

Transcript

1. 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
2. All Rights Reserved. | CONFIDENTIAL ©︎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
3. All Rights Reserved. | CONFIDENTIAL ©︎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より再掲
4. All Rights Reserved. | CONFIDENTIAL ©︎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より再掲
5. All Rights Reserved. | CONFIDENTIAL ©︎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より再掲
6. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopでスマホ開発するメリット／デメリット • メリット ◦ サーバサイド開発に慣れたエンジニアがスマホアプリ可能 ◦ LiveViewのWebアプリがそのままスマホアプリ化できる ◦ API Hellに陥らずサーバサイドと同期可能 (LiveView由来) ◦ シングルLiveViewソースでデュアル開発を叶える • デメリット ◦ LiveView同様、オフライン利用が不可能 ▪ 現代のスマホアプリでオフライン対応が徹底されるケース はそこまで多く無いため、デメリットと言い切れない ◦ 同時接続多発時に通信ネックになりやすい ◦ 入門ドキュメントが少ない (が不要な位、タダのLiveView) • 接続規模が膨大なスマホアプリでも無い限り、デメリットよりも メリットの方が明らかに大きいと捉えて良いと思う
7. All Rights Reserved. | CONFIDENTIAL ©︎2021 AndroidにおけるElixirDesktopのアーキテクチャ • スマホ：ElixirアプリがElixirDesktop経由でMainActivityと通信 • UI：WebView上でLiveView (WebSocket) によるリアクティブ
8. All Rights Reserved. | CONFIDENTIAL ©︎2021 下記からお試しください https://github.com/elixir-desktop/android-example-app Androidで動作するElixirDesktopアプリ この後のtorifukuさんLTにて
9. All Rights Reserved. | CONFIDENTIAL ©︎2021 iOSにおけるElixirDesktopのアーキテクチャ • スマホ：ElixirアプリがElixirDesktop経由でContentViewと通信 • UI：WebView上でLiveView (WebSocket) によるリアクティブ
10. All Rights Reserved. | CONFIDENTIAL ©︎2021 下記からお試しください https://github.com/elixir-desktop/ios-example-app iOSで動作するElixirDesktopアプリ haigoさんがそのうちLTで…
11. All Rights Reserved. | CONFIDENTIAL ©︎2021 Webフロントサイド向け言語／FW【2022年版】 北九州工業専門学校 特別講義 2022年8月より転載 11 Webフロント開発用 サーバ開発と兼任 スマホ開発用 ～2013年 ～2014年 ～2012年 ～2016年 ～2011年 ～2014年 ～2015年 ～2017年 ～2012年 ～2014年 ～2016年 Android／iPhone (iOS) の同時開発が可能 ～2006年
12. All Rights Reserved. | CONFIDENTIAL ©︎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の運用性の高さが武器になる
13. All Rights Reserved. | CONFIDENTIAL ©︎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 …
14. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopアプリの開発の流れ 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
15. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopアプリの開発の流れ 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
16. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopアプリの開発の流れ 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 …
17. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopアプリの開発／動作デモ 実際にElixirDesktop でアプリ開発を 行ってみます
18. All Rights Reserved. | CONFIDENTIAL ©︎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 …
19. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopアプリのScaffold開発／動作デモ 実際にElixirDesktop でアプリ開発を 行ってみます
20. All Rights Reserved. | CONFIDENTIAL ©︎2021 ElixirDesktopでスマホ開発するメリット／デメリット • メリット ◦ サーバサイド開発に慣れたエンジニアがスマホアプリ可能 ◦ LiveViewのWebアプリがそのままスマホアプリ化できる ◦ API Hellに陥らずサーバサイドと同期可能 (LiveView由来) ◦ シングルLiveViewソースでデュアル開発を叶える • デメリット ◦ LiveView同様、オフライン利用が不可能 ▪ 現代のスマホアプリでオフライン対応が徹底されるケース はそこまで多く無いため、デメリットと言い切れない ◦ 同時接続多発時に通信ネックになりやすい ◦ 入門ドキュメントが少ない (が不要な位、タダのLiveView) • 接続規模が膨大なスマホアプリでも無い限り、デメリットよりも メリットの方が明らかに大きいと捉えて良いと思う
21. All Rights Reserved. | CONFIDENTIAL ©︎2021 That’s all for my talk Thank you very much