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

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

piacerex
July 20, 2022

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

    View full-size slide

  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

    View full-size slide

  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より再掲

    View full-size slide

  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より再掲

    View full-size slide

  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より再掲

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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年

    View full-size slide

  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の運用性の高さが武器になる

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  17. All Rights Reserved. | CONFIDENTIAL
    ©︎2021
    ElixirDesktopアプリの開発/動作デモ
    実際にElixirDesktop
    でアプリ開発を
    行ってみます

    View full-size slide

  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

    View full-size slide

  19. All Rights Reserved. | CONFIDENTIAL
    ©︎2021
    ElixirDesktopアプリのScaffold開発/動作デモ
    実際にElixirDesktop
    でアプリ開発を
    行ってみます

    View full-size slide

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

    View full-size slide

  21. All Rights Reserved. | CONFIDENTIAL
    ©︎2021
    That’s all for my talk
    Thank you very much

    View full-size slide