$30 off During Our Annual Pro Sale. View Details »

LiveViewとpiyopiyo.exのススメ

 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/

nako@9時間睡眠

October 24, 2022
Tweet

More Decks by nako@9時間睡眠

Other Decks in Programming

Transcript

  1. LiveViewとpiyopiyo.ex
    のススメ
    2022/10/24 nako
    協力:piacere

    View Slide

  2. 自己紹介
    ● nako@9時間睡眠
    ● Elixir/Phoenix初心者コミュニティ
    『piyopiyo.ex』オーガナイザー
    ● 会社員。Webサービスのサーバサイ
    ドエンジニア
    ● Elixir10周年のお祝いにSnapCamera
    エフェクトを作りました:D

    View Slide

  3. LiveViewとは?

    View Slide

  4. LiveViewとは?
    ● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。
    ● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。
    SPA?
    WebSocket??
    ??

    View Slide

  5. SPAって何?
    ??

    View Slide

  6. SPAって何?
    ● SPAは「Single Page Application」の略。
    ● 1つのWebページの中だけで、ページ遷移させず、ページ内のパーツの表示や入
    力エリアの切替をします。
    ● スマホアプリのような、ユーザー体験
    を提供するWebアプリケーションが
    構築できます。
    ● 必要なコード(HTML、CSS、
    JavaScript)は、最初にまとめて読み
    込むか、ユーザー操作に応じて動的
    にサーバーから随時、通信して読み
    込みを行います。
    従来のWebアプリケーション:画面遷移する
    SPA:画面遷移させず、ページ内のパーツだけ変える

    View Slide

  7. 一般的なSPAの構成
    ● SPAを開発する場合、以下2つのパートが必要です。
    ○ ブラウザ表示を受け持つフロントエンド(
    React、Vue.js等)
    ○ フロントとデータのやり取りをするバックエンド
    API(Node.js、Rails、PHP等)
    ● React、Vue.jsといったJavaScriptフレームワークの場合、axiosというライブラリで
    HTTP通信を行い、APIとデータの受け渡しを行います。
    ● SPAというフロント開発のために、別途APIを開発する必要があります。
    ○ ReactやVue.jsだとフロント側でのデータ管理が必要なため、サーバ側データと二重管理
    になりがちです。
    ○ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開
    発する必要があります。

    View Slide

  8. WebSocket?
    ??

    View Slide

  9. LiveViewを支える、WebScoketとは?
    ● WebSocketとは、WebサーバーとWebブラウザの間で双方向通信できるようにす
    る技術仕様です。
    ● Webコンテンツの配信に使われるHTTPは通常、フロントからの要求(リクエスト)に
    サーバーが応答(レスポンス)を返すという形でしか通信できないですが、
    WebSocketでは一旦接続を確立した後はフロント側からもサーバー側からも能動
    的にメッセージを送信することができます。
    ○ 通信に使用するTCPポートやプロトコル(通信規約)、メッセージの形式などは
    HTTPの仕
    様をそのまま使い、HTTPで確立したコネクションをWebSocketに切り替え(アップグレー
    ド)ることでWebSocket用の通信路を確保します。

    View Slide

  10. WebSocketの利用例
    ● 前提として、フロントとサーバー間でリアルタイム通信したい場合に使用します。
    ● 利用例
    ○ チャットアプリ
    ○ Web会議
    ○ オンラインゲーム
    ○ リアルタイムのアクセス解析
    ○ 通知
    ○ etc

    View Slide

  11. LiveViewの
    ススメ

    View Slide

  12. 改めてLiveViewとは?
    ● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。
    ● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。

    View Slide

  13. LiveViewが叶えること
    ● ReactやVue.jsのようなフロントエンドFWに劣らないリッチなUI体験
    ● フロントエンドとバックエンドの分離の解消
    ○ 別々の言語やFWではなく、同じ言語で実装できます
    ○ バリデーションを二重に実装しなくて済みます
    ● 双方向通信(WebSocket)の実装がより容易に
    ● Elixirエコシステムの恩恵をフロントからバックエンドまで
    ○ テスト
    ○ Doc作成など
    ● 特に作り込まなくても、あるフロントで行われた入力/操作が、全てのフロントにシ
    ンクロされるので、マルチユーザ利用のアプリを作るときに便利
    ○ 複数人で一緒に聴いたり、操作できる音楽プレイヤーや動画プレイヤーなど
    ○ MMORPGやGoogleDoc、Figma、VScodeのようなアプリもカンタンに作れる

    View Slide

  14. LiveViewで叶えるSPA開発
    ● SPAを開発する場合でも、以下1つで終わりです。
    ○ Elixirが「ブラウザ表示フロント」と「バックエンド」を同時に提供するので、サーバサイド開
    発のみで完結します。
    ● SPAというフロントの開発をAPI無で済ませます。
    ○ SPAのためにAPIを作らなくて良くなります。
    ● フロント側も、「axiosでAPIを呼ぶ」といったコードは不要です。
    ○ フロント側とサーバ側で、変数を同じにすれば、自動的に同期されます。
    ○ つまり、サーバー側のデータ操作だけで、フロント表示切り替えが済み、入力に合わせた
    リアルタイム処理もサーバー側で簡単に書けます。
    ● ReactやVue.jsだとフロント側でのデータ管理が必要ですが、LiveViewは不要で、
    サーバとデータが重複しなくなります。
    ○ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開
    発しなければなりませんが、LiveViewは不要です。

    View Slide

  15. LiveViewの
    おすすめ書籍

    View Slide

  16. LiveViewおすすめ書籍 1/2
    WEB+DB PRESS vol.127
    2022/2/24発売
    Programming Phoenix Liveview
    2022/7/19発売
    Phoenixの基本から
    LiveViewまで把握し
    たい方に。
    初心者にも。
    LiveViewでのシス
    テム設計、マルチ
    パートアップロード
    などの機能や、ライ
    ブビューを総合的に
    テストする方法な
    ど。

    View Slide

  17. LiveViewおすすめ書籍 2/2
    Building Table Views with Phoenix
    LiveView
    2022/08/23
    ページネーション、並べ替え、フィル
    タリング、無限スクロールなどの高
    度な機能を使用して、技術者以外
    のユーザーがデータをすぐに利用
    できるようにする方法を説明。
    eBook。
    中級者向け。

    View Slide

  18. LiveViewの
    関連技術

    View Slide

  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」を開催予定。

    View Slide

  20. さて、LiveViewの
    説明ができたので…

    View Slide

  21. 今回題材になる、
    piyopiyo.ex紹介

    View Slide

  22. piyopiyo.exとは
    piyopiyo.exは、プログラミング言語Elixirと、Elixirで記述されたWeb開発フレームワーク
    Phoenixを扱う、初心者向けコミュニティです。
    『Elixir/Phoenixをゼロから学び、ちょっとずつ出来ることを増やし、その過程を楽しんで
    いきましょう!』をモットーに掲げています。

    View Slide

  23. 今回のお題:piyopiyo.ex感想投稿サイト
    ● piyopiyo.exが過去のイベントで作成したポータルサイト。
    ● https://piyopiyoex-portal.gigalixirapp.com/
    ● 今回のLiveViewJPでは、それをリファインし、誰でも同じものを作成できるようにし
    てくださったそうです。感謝!

    View Slide

  24. ご清聴ありがとうござ
    いました!

    View Slide