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/
LiveViewとpiyopiyo.exのススメ2022/10/24 nako協力：piacere
View Slide
自己紹介● nako@9時間睡眠● Elixir/Phoenix初心者コミュニティ『piyopiyo.ex』オーガナイザー● 会社員。Webサービスのサーバサイドエンジニア● Elixir10周年のお祝いにSnapCameraエフェクトを作りました:D
LiveViewとは？
LiveViewとは？● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。SPA？WebSocket？？？？
SPAって何？？？
SPAって何？● SPAは「Single Page Application」の略。● １つのWebページの中だけで、ページ遷移させず、ページ内のパーツの表示や入力エリアの切替をします。● スマホアプリのような、ユーザー体験を提供するWebアプリケーションが構築できます。● 必要なコード（HTML、CSS、JavaScript）は、最初にまとめて読み込むか、ユーザー操作に応じて動的にサーバーから随時、通信して読み込みを行います。従来のWebアプリケーション：画面遷移するSPA：画面遷移させず、ページ内のパーツだけ変える
一般的な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だとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開発する必要があります。
WebSocket？？？
LiveViewを支える、WebScoketとは？● WebSocketとは、WebサーバーとWebブラウザの間で双方向通信できるようにする技術仕様です。● Webコンテンツの配信に使われるHTTPは通常、フロントからの要求（リクエスト）にサーバーが応答（レスポンス）を返すという形でしか通信できないですが、WebSocketでは一旦接続を確立した後はフロント側からもサーバー側からも能動的にメッセージを送信することができます。○ 通信に使用するTCPポートやプロトコル（通信規約）、メッセージの形式などはHTTPの仕様をそのまま使い、HTTPで確立したコネクションをWebSocketに切り替え（アップグレード）ることでWebSocket用の通信路を確保します。
WebSocketの利用例● 前提として、フロントとサーバー間でリアルタイム通信したい場合に使用します。● 利用例○ チャットアプリ○ Web会議○ オンラインゲーム○ リアルタイムのアクセス解析○ 通知○ etc
LiveViewのススメ
改めてLiveViewとは？● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。
LiveViewが叶えること● ReactやVue.jsのようなフロントエンドFWに劣らないリッチなUI体験● フロントエンドとバックエンドの分離の解消○ 別々の言語やFWではなく、同じ言語で実装できます○ バリデーションを二重に実装しなくて済みます● 双方向通信（WebSocket）の実装がより容易に● Elixirエコシステムの恩恵をフロントからバックエンドまで○ テスト○ Doc作成など● 特に作り込まなくても、あるフロントで行われた入力／操作が、全てのフロントにシンクロされるので、マルチユーザ利用のアプリを作るときに便利○ 複数人で一緒に聴いたり、操作できる音楽プレイヤーや動画プレイヤーなど○ MMORPGやGoogleDoc、Figma、VScodeのようなアプリもカンタンに作れる
LiveViewで叶えるSPA開発● SPAを開発する場合でも、以下１つで終わりです。○ Elixirが「ブラウザ表示フロント」と「バックエンド」を同時に提供するので、サーバサイド開発のみで完結します。● SPAというフロントの開発をAPI無で済ませます。○ SPAのためにAPIを作らなくて良くなります。● フロント側も、「axiosでAPIを呼ぶ」といったコードは不要です。○ フロント側とサーバ側で、変数を同じにすれば、自動的に同期されます。○ つまり、サーバー側のデータ操作だけで、フロント表示切り替えが済み、入力に合わせたリアルタイム処理もサーバー側で簡単に書けます。● ReactやVue.jsだとフロント側でのデータ管理が必要ですが、LiveViewは不要で、サーバとデータが重複しなくなります。○ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開発しなければなりませんが、LiveViewは不要です。
LiveViewのおすすめ書籍
LiveViewおすすめ書籍 1/2WEB+DB PRESS vol.1272022/2/24発売Programming Phoenix Liveview2022/7/19発売Phoenixの基本からLiveViewまで把握したい方に。初心者にも。LiveViewでのシステム設計、マルチパートアップロードなどの機能や、ライブビューを総合的にテストする方法など。
LiveViewおすすめ書籍 2/2Building Table Views with PhoenixLiveView2022/08/23ページネーション、並べ替え、フィルタリング、無限スクロールなどの高度な機能を使用して、技術者以外のユーザーがデータをすぐに利用できるようにする方法を説明。eBook。中級者向け。
LiveViewの関連技術
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」を開催予定。
さて、LiveViewの説明ができたので…
今回題材になる、piyopiyo.ex紹介
piyopiyo.exとはpiyopiyo.exは、プログラミング言語Elixirと、Elixirで記述されたWeb開発フレームワークPhoenixを扱う、初心者向けコミュニティです。『Elixir／Phoenixをゼロから学び、ちょっとずつ出来ることを増やし、その過程を楽しんでいきましょう！』をモットーに掲げています。
今回のお題：piyopiyo.ex感想投稿サイト● piyopiyo.exが過去のイベントで作成したポータルサイト。● https://piyopiyoex-portal.gigalixirapp.com/● 今回のLiveViewJPでは、それをリファインし、誰でも同じものを作成できるようにしてくださったそうです。感謝！
ご清聴ありがとうございました！
nako_sleep_9h
bells17
rmatsuoka
ivargrimstad
codemountains
pospome
inoichan
atinfinity
okuramasafumi
seike460
ykws
azukiazusa1
gregonnet
brettharned
lara
3n
carmenintech
rmw
schacon
jasonvnalue
aki_iinuma
tammielis
michaelherold
danielanewman
lynnandtonic