Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

piacerex

July 20, 2022
Tweet

More Decks by piacerex

Other Decks in Technology

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