Vue Fes Japan 2018 Reject Conference
https://gyazo.com/67fd323b04e5f42f244d1236b1a2d38a
CFPの応募は40名（倍率8倍）
不採用になったものでもぜひ聞いてみたい！
その中でも厳選させてもらった
Web Components
HTML Template
Shadow DOM
customElements
ES Modules
Browser Support
https://gyazo.com/67de3aed31cc0fb110d8c07a17127815
問題点
素のものだとattributeが変更された時にDOMが再描画されてしまう
その欠点をおぎなう
Hot Module Replacement（HMR）が効かない
ファイルを変更してもブラウザ上のDOMは変更されない
Vue.jsでWeb Componentsを使う
例：vaddin-button
importしてcomponents登録すると使える
Vue.jsでWeb Componentsを作る
vue-cli 3
メリット
VueコンポーネントをそのままWeb Componentsが生成できる
HMRが有効化で開発できる
再描画されるので素手作るよりもパフォーマンスがよい
デメリット
Vue.jsで内包しているため、ファイルサイズが重くなる
Micro Frontendsとは
マイクロサービスの考え方をフロントエンドに拡張
UIコンポーネントをWeb Componentsで配布することで
流用できる
各部署で使いまわしができる
WebComponetnsを使用していると
内部で使用することができるので将来的なアーキテクチャ変更があったときもUIが負債になりづらい
とはいえVueやReactの環境下でSPAやwebアプリを開発していたらそのまま構築しておいたほうがいい
wired Elements
感想
Vueの開発がなれていたら気軽にWebComponentsを提供できそう
Vueでのサポートが厚い
Reactではあまりないらしい
他のライブラリ・フレームワークを使用するより速くやれる
Identity Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装 きっかけ
フロントとバックエンドを分離させたい
認証処理を自分で作ってますか？
便利だが
SDKをつかっているだけだと中身が気になる
base64で認証コードが返ってくる
Open ID Connect
最近のクラウドサービスはこれがほとんど使われている
Identity Provider Keycloak
Identity Provider
認証を外部にまかせる
SNSアカウントでログイン
Identity ProviderはIdentity Provider内で必要な情報だけを管理する
Identity Provider as a Serviceはお高め
1Active Userあたり
自分でプロバイダをたてるとき
Keycloak
Java
機能が豊富
Web API
CLI
JS Cliがついてる
コンソールからセッションオフ機能
KeyCloack JS Adaptor
Nuxtとライフサイクルと噛み合わない
Implicit Flow
AdapterからTokenは取れるが、タイミング次第で生成されてない場合がある
別にOIDC Clientを使う
デモ
問題点
loginはできるがsignupがない
Access Tokenには有効期限がある
ある程度の時間になったら切れる（ログアウト）
デフォルトは15分
ユーザー体験がよくない
Silent Refresh
Access Tokenを更新して上書き
axiosでのAPIリクエスト時にAuthorizationヘッダをつける
Javaでは馴染みのある作法
リダイレクト問題
Nuxtのmiddlewareで認証したときある問題
ページが一瞬表示される
return Promiseを返すと消える
まとめ
OpenID Connectはやや難しい
難しい部分をSDKにうまく隠蔽されている
Auth0のドキュメントはわかりやすいのでおすすめ
Identity Provider Keycloakは機能が豊富
自分で立てるときは有力
単に認証だけだとオーバーキル感がある
Keycloakは、OpenIDのプロトコルがあるところだと、色々使える
Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ Riotz Works
ハッカソン制作作品
全国規模のモバイルアプリ開発ハッカソン
共演者２名での動画中継と感染者への同時配信
リアルタイム
採用した経緯
普段の開発
サーバーレス開発
ハッカソンでは当時話題に上がり始めたPWAへの挑戦 PWAに挑むに当たりVue.jsを使う
Nuxtが便利
そのほか使用技術
Notification
Nuxt.js
型定義ファイル
機能
バトルを募集
バトルを開始
対戦・観戦ルームのURLが発行
対戦
STARTを押して、対戦者が入場したら対戦開始
観戦
対戦者が揃ったら観戦開始
メッセージでやじも飛ばせる
NuxtのPWA対応
@nuxtjs/pwa
WebRTCのリアルタイム通信
P2Pが基本
SFU（Selective Forwarding Unit）によって端末やネットワーク負荷を抑えられる
サーバーを立てる
SkyWay Javascript SDK
Firebaseのリアルタイムデータ同期
Realtime Database
スピード
シンプル
モバイル最適
プレゼンスライドのCI・CD
GitHub Pages
静的ホスティング
CI/CDが簡単に回せるのがPWAの強み
ハッカソンではこういった仕掛け・仕組みが有用
remark.js
GitPitch, reveal.js
スライド内でiframeでデモ画面が連携できる
データが時系列で保存されるので書き換えられない
いわゆる著作権のようにそこになにがあったかのように証明できる
暗号通貨、公的文書などに利用
ブロックチェーンとフロントエンドの関わり
技術
バックエンド
インフラ
ブロックチェーン
Blockchain Ethereum
フロントエンドから直接アクセスできる
改ざんさせる余地を与えないためにブロックチェーンのアプリはサーバー通さないため
フロントエンド
Vue.js
TS
データが格納されたら改ざんは不能
データを格納する前であれば改修できそう
クライアントから叩く場合
改ざんされてはいけないデータ
改ざんが問題ないデータ
お金と機能面で分けたい
自分だけのブロックチェーンアプリを作る
Ethereum
Contractと呼ばれるプログラムをブロックチェーンに格納
自動実行させることができる
開発環境
npm i -g truffle
truffle init
仮想通貨を簡単に作れる
全世界に公開
Ethereumネットワークにデプロイ
プライベートネットワーク
AWSのBlockChain Templateにデプロイ
ローカル
Ganacheでテスト
VueとTSで動かす
ブロックチェーンへのアクセスはWeb3を使う
axios
vue-router
actionsで非同期処理
型定義ファイル（TS用）
Non-DOM components with WebGL in Vue.js 受託制作
Vue＋WebGLで作ったアプリケーション
※試した例の紹介
ベストプラクティスではない
なぜWebGLで？
レンダリングパフォーマンス
アドバンスドな描画効果
WebGLとVueを切り離す
WebGLは非同期
ピュアなclassを作った
欠点
同じデータが２箇所
双方バインドで無限ループに
解決
templateのないコンポーネントをつくる
<canvas>の中にtemplateのないコンポーネントを配置
WebGL Rendererをmountedで初期化
Destoryed時に破棄
render()には記述しない
もしくはnullを返す
レンダーする
Virtual DOMには頼らない
その他やったこと
混合propsはcomputedで管理
watchで単体で管理すると複数動いてしまうので
１つのfunctionにしてその中でオブジェクト管理
非同期前提で考える
テクスチャアップロード
メッシュ情報
レンダリング
DOM使えないかを再検討
DOMインスペクターが使えないので
開発が大変になる
手動マウント
テスト用にやってみた
Vue 3.0
Custom render API
WebGL向けのカスタムレンダラー作れそう？
レガシーアプリケーションのリニューアルにNuxt.jsで戦う
リニューアルプロジェクトについて
医師・薬剤師のキャリア支援の企業向け画面
10年前の技術スタック
独自Java FW
IE 6.0以上推奨
IE10でうまく動かない…
リニューアル後
APIサーバー
Nuxt.js（フロント）
開発チームとはべつでリニューアルチームを発足
コードや出力するSQLログよりフルスクラッチ
Viewの画面構成自体はそのまま
なぜNuxtを使うか
Rails + Vue.jsの経験はあり
SPAではなくマルチページアプリケーション
メリット
セッション管理はRailsにまかせられる
サーバーサイド中心なのでキャッチアップしやすい
デメリット
エコシステムに乗り切れない
責務が曖昧になってくる
そこでNuxtをつかってみる
リリース中はβ版だったが1.0に
メリット
実用的なアプリケーションがすぐできる
設計のベストプラクティスに乗れる
ドキュメントが豊富
フロントの開発レールに乗れた
セットアップが爆速でできる
SPA開発のコストが下げられた
開発におけるTips
TypeScript
サーバーサイドのロジックをできるだけ変えたくない
サーバーサイドのレスポンス・リクエスト追従するのはつらい
そういうサーバーサイド連携するために使用したい
サーバーサイドからTSクライアントを自動生成
Swagger Codegen
レスポンスのプロパティが自動補完されている
Nuxt公式でサンプルあり
ビルドの設定のみ
型定義は自前で拡張
公式の型定義が近々出そう？
2.5からTSサポート強化
fork-ts-checker-webpack-pluginで型チェックを別プロセスにするとビルドが早くなる
eslint-plugin-vue + typescript-eslint-parser
メリットは多かったが、テンプレートにも型が欲しい
components/配下の管理
ElementUIのデメリット
Edgeだけパフォーマンスがわるい
Win + Chromeのみの不具合
管理画面・業務アプリ色の強いアプリケーションで使えるコンポーネントが多い
input周り以外はほぼ問題なし
SSR
環境の違いを意識しないとハマりポイントあり
fetchAPIをcookieでやっているとき
サーバーとクライアントでheaders付与の仕方が違う
windowとdocumentへのアクセス
ssr:falseで解決
結局やるのは途中でやめた
mode:spaに切り替え
テスト
componentsとpagesの棲み分けを理解する
componentsでマウントしただけでアクセスするコンポーネントがあるとテストしづらい
pagesは薄く保っておく
yamanoku.icon 感想
まさかブロックチェーンの話が聞けるとは思わなかった
みんなTypeScript頑張ってる感じで「徹底的に」付き合っていこうという姿勢が見られた