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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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年

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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 …

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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 …

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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 …