LiveViewとpiyopiyo.exのススメ

10/25開催の下記勉強会のスライドです。

LiveView JP#11：はじめてのLiveView…piyopiyo.ex投稿SPAを題材に
https://liveviewjp.connpass.com/event/262072/
piyopiyo.ex#10：感想投稿サイト1時間半で作れる？！LiveViewJPとSPA実装
https://piyopiyoex.connpass.com/event/262598/

Transcript

1. LiveViewとpiyopiyo.ex のススメ 2022/10/24 nako 協力：piacere
2. 自己紹介 • nako@9時間睡眠 • Elixir/Phoenix初心者コミュニティ 『piyopiyo.ex』オーガナイザー • 会社員。Webサービスのサーバサイ ドエンジニア • Elixir10周年のお祝いにSnapCamera エフェクトを作りました:D
3. LiveViewとは？
4. LiveViewとは？ • JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。 • LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。 SPA？ WebSocket？？ ？？
5. SPAって何？ ？？
6. SPAって何？ • SPAは「Single Page Application」の略。 • １つのWebページの中だけで、ページ遷移させず、ページ内のパーツの表示や入 力エリアの切替をします。 • スマホアプリのような、ユーザー体験 を提供するWebアプリケーションが 構築できます。 • 必要なコード（HTML、CSS、 JavaScript）は、最初にまとめて読み 込むか、ユーザー操作に応じて動的 にサーバーから随時、通信して読み 込みを行います。 従来のWebアプリケーション：画面遷移する SPA：画面遷移させず、ページ内のパーツだけ変える
7. 一般的なSPAの構成 • SPAを開発する場合、以下２つのパートが必要です。 ◦ ブラウザ表示を受け持つフロントエンド（ React、Vue.js等） ◦ フロントとデータのやり取りをするバックエンド API（Node.js、Rails、PHP等） • React、Vue.jsといったJavaScriptフレームワークの場合、axiosというライブラリで HTTP通信を行い、APIとデータの受け渡しを行います。 • SPAというフロント開発のために、別途APIを開発する必要があります。 ◦ ReactやVue.jsだとフロント側でのデータ管理が必要なため、サーバ側データと二重管理 になりがちです。 ◦ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発する必要があります。
8. WebSocket？ ？？
9. LiveViewを支える、WebScoketとは？ • WebSocketとは、WebサーバーとWebブラウザの間で双方向通信できるようにす る技術仕様です。 • Webコンテンツの配信に使われるHTTPは通常、フロントからの要求（リクエスト）に サーバーが応答（レスポンス）を返すという形でしか通信できないですが、 WebSocketでは一旦接続を確立した後はフロント側からもサーバー側からも能動 的にメッセージを送信することができます。 ◦ 通信に使用するTCPポートやプロトコル（通信規約）、メッセージの形式などは HTTPの仕 様をそのまま使い、HTTPで確立したコネクションをWebSocketに切り替え（アップグレー ド）ることでWebSocket用の通信路を確保します。
10. WebSocketの利用例 • 前提として、フロントとサーバー間でリアルタイム通信したい場合に使用します。 • 利用例 ◦ チャットアプリ ◦ Web会議 ◦ オンラインゲーム ◦ リアルタイムのアクセス解析 ◦ 通知 ◦ etc
11. LiveViewの ススメ
12. 改めてLiveViewとは？ • JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。 • LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。
13. LiveViewが叶えること • ReactやVue.jsのようなフロントエンドFWに劣らないリッチなUI体験 • フロントエンドとバックエンドの分離の解消 ◦ 別々の言語やFWではなく、同じ言語で実装できます ◦ バリデーションを二重に実装しなくて済みます • 双方向通信（WebSocket）の実装がより容易に • Elixirエコシステムの恩恵をフロントからバックエンドまで ◦ テスト ◦ Doc作成など • 特に作り込まなくても、あるフロントで行われた入力／操作が、全てのフロントにシ ンクロされるので、マルチユーザ利用のアプリを作るときに便利 ◦ 複数人で一緒に聴いたり、操作できる音楽プレイヤーや動画プレイヤーなど ◦ MMORPGやGoogleDoc、Figma、VScodeのようなアプリもカンタンに作れる
14. LiveViewで叶えるSPA開発 • SPAを開発する場合でも、以下１つで終わりです。 ◦ Elixirが「ブラウザ表示フロント」と「バックエンド」を同時に提供するので、サーバサイド開 発のみで完結します。 • SPAというフロントの開発をAPI無で済ませます。 ◦ SPAのためにAPIを作らなくて良くなります。 • フロント側も、「axiosでAPIを呼ぶ」といったコードは不要です。 ◦ フロント側とサーバ側で、変数を同じにすれば、自動的に同期されます。 ◦ つまり、サーバー側のデータ操作だけで、フロント表示切り替えが済み、入力に合わせた リアルタイム処理もサーバー側で簡単に書けます。 • ReactやVue.jsだとフロント側でのデータ管理が必要ですが、LiveViewは不要で、 サーバとデータが重複しなくなります。 ◦ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発しなければなりませんが、LiveViewは不要です。
15. LiveViewの おすすめ書籍
16. LiveViewおすすめ書籍 1/2 WEB+DB PRESS vol.127 2022/2/24発売 Programming Phoenix Liveview 2022/7/19発売 Phoenixの基本から LiveViewまで把握し たい方に。 初心者にも。 LiveViewでのシス テム設計、マルチ パートアップロード などの機能や、ライ ブビューを総合的に テストする方法な ど。
17. LiveViewおすすめ書籍 2/2 Building Table Views with Phoenix LiveView 2022/08/23 ページネーション、並べ替え、フィル タリング、無限スクロールなどの高 度な機能を使用して、技術者以外 のユーザーがデータをすぐに利用 できるようにする方法を説明。 eBook。 中級者向け。
18. LiveViewの 関連技術
19. LiveViewの関連技術 • ElixirDesktop ◦ LiveViewの開発さえすれば、Android／iOSの両対応ネイティブアプリが開発でき るフレームワーク。 ◦ 気になる方は、Discordの「elixirスマホ開発」チャンネルをご覧ください。 ▪ 以前、ElixirImpで開催したYouTube動画をアップしています。 ▪ 今後のイベントもアナウンスするので、ぜひサーバーへ！ • Nx＋Axon ◦ NX：Elixirで行列計算を高速実行できるフレームワーク（GPUやTPUも可）。 ◦ Axon：Nxによるディープラーニング開発のためのフレームワーク。 ◦ これらを使えば、LiveViewやElixirDesktopでAI・ML開発が体験できます。 ◦ 気になる方は、Discordの「elixirで機械学習」チャンネルをご覧ください。 ▪ 11/22(火)にLiveView JP#12「はじめてのElixir AI・ML」を開催予定。
20. さて、LiveViewの 説明ができたので…
21. 今回題材になる、 piyopiyo.ex紹介
22. piyopiyo.exとは piyopiyo.exは、プログラミング言語Elixirと、Elixirで記述されたWeb開発フレームワーク Phoenixを扱う、初心者向けコミュニティです。 『Elixir／Phoenixをゼロから学び、ちょっとずつ出来ることを増やし、その過程を楽しんで いきましょう！』をモットーに掲げています。
23. 今回のお題：piyopiyo.ex感想投稿サイト • piyopiyo.exが過去のイベントで作成したポータルサイト。 • https://piyopiyoex-portal.gigalixirapp.com/ • 今回のLiveViewJPでは、それをリファインし、誰でも同じものを作成できるようにし てくださったそうです。感謝！
24. ご清聴ありがとうござ いました！