Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. SPAって何? • SPAは「Single Page Application」の略。 • 1つのWebページの中だけで、ページ遷移させず、ページ内のパーツの表示や入 力エリアの切替をします。 • スマホアプリのような、ユーザー体験

    を提供するWebアプリケーションが 構築できます。 • 必要なコード(HTML、CSS、 JavaScript)は、最初にまとめて読み 込むか、ユーザー操作に応じて動的 にサーバーから随時、通信して読み 込みを行います。 従来のWebアプリケーション:画面遷移する SPA:画面遷移させず、ページ内のパーツだけ変える
  2. 一般的な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だとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発する必要があります。
  3. LiveViewが叶えること • ReactやVue.jsのようなフロントエンドFWに劣らないリッチなUI体験 • フロントエンドとバックエンドの分離の解消 ◦ 別々の言語やFWではなく、同じ言語で実装できます ◦ バリデーションを二重に実装しなくて済みます •

    双方向通信(WebSocket)の実装がより容易に • Elixirエコシステムの恩恵をフロントからバックエンドまで ◦ テスト ◦ Doc作成など • 特に作り込まなくても、あるフロントで行われた入力/操作が、全てのフロントにシ ンクロされるので、マルチユーザ利用のアプリを作るときに便利 ◦ 複数人で一緒に聴いたり、操作できる音楽プレイヤーや動画プレイヤーなど ◦ MMORPGやGoogleDoc、Figma、VScodeのようなアプリもカンタンに作れる
  4. LiveViewで叶えるSPA開発 • SPAを開発する場合でも、以下1つで終わりです。 ◦ Elixirが「ブラウザ表示フロント」と「バックエンド」を同時に提供するので、サーバサイド開 発のみで完結します。 • SPAというフロントの開発をAPI無で済ませます。 ◦ SPAのためにAPIを作らなくて良くなります。

    • フロント側も、「axiosでAPIを呼ぶ」といったコードは不要です。 ◦ フロント側とサーバ側で、変数を同じにすれば、自動的に同期されます。 ◦ つまり、サーバー側のデータ操作だけで、フロント表示切り替えが済み、入力に合わせた リアルタイム処理もサーバー側で簡単に書けます。 • ReactやVue.jsだとフロント側でのデータ管理が必要ですが、LiveViewは不要で、 サーバとデータが重複しなくなります。 ◦ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発しなければなりませんが、LiveViewは不要です。
  5. LiveViewおすすめ書籍 1/2 WEB+DB PRESS vol.127 2022/2/24発売 Programming Phoenix Liveview 2022/7/19発売

    Phoenixの基本から LiveViewまで把握し たい方に。 初心者にも。 LiveViewでのシス テム設計、マルチ パートアップロード などの機能や、ライ ブビューを総合的に テストする方法な ど。
  6. LiveViewおすすめ書籍 2/2 Building Table Views with Phoenix LiveView 2022/08/23 ページネーション、並べ替え、フィル

    タリング、無限スクロールなどの高 度な機能を使用して、技術者以外 のユーザーがデータをすぐに利用 できるようにする方法を説明。 eBook。 中級者向け。
  7. 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」を開催予定。