Vue Fes Japan 2018 Reject Conference
https://gyazo.com/67fd323b04e5f42f244d1236b1a2d38a
https://vuejs-meetup.connpass.com/event/97557/
会場提供:株式会社プレイド
CFPの応募は40名(倍率8倍)
不採用になったものでもぜひ聞いてみたい!
その中でも厳選させてもらった
Vue.js with Web Components
Twitter.icon https://twitter.com/hirodeath
GitHub.icon https://github.com/takahiro-saeki
https://speakerdeck.com/takahirosaeki/vue-dot-js-with-web-components
Web Components
HTML Template
Shadow DOM
customElements
ES Modules
Browser Support
https://gyazo.com/67de3aed31cc0fb110d8c07a17127815
Edge以外はStable
問題点
素のものだとattributeが変更された時にDOMが再描画されてしまう
その欠点をおぎなう
lit-html
hyperHtml
Vue.js
Hot Module Replacement(HMR)が効かない
webpackやparcel環境で開発していると
ファイルを変更してもブラウザ上のDOMは変更されない
Vue.jsが解消してくれる
Vue.jsでWeb Componentsを使う
例:vaddin-button
npm.icon https://www.npmjs.com/package/@vaadin/vaadin-button
GitHub.icon https://github.com/vaadin/vaadin-button
importしてcomponents登録すると使える
Vue.jsでWeb Componentsを作る
vue-cli 3
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
メリット
VueコンポーネントをそのままWeb Componentsが生成できる
HMRが有効化で開発できる
再描画されるので素手作るよりもパフォーマンスがよい
デメリット
Vue.jsで内包しているため、ファイルサイズが重くなる
Micro Frontendsとは
マイクロサービスの考え方をフロントエンドに拡張
UIコンポーネントをWeb Componentsで配布することで
流用できる
各部署で使いまわしができる
WebComponetnsを使用していると
VueやReact.jsなどライブラリ・フレームワークの対応にもよるが
内部で使用することができるので将来的なアーキテクチャ変更があったときもUIが負債になりづらい
とはいえVueやReactの環境下でSPAやwebアプリを開発していたらそのまま構築しておいたほうがいい
wired Elements
https://wiredjs.com/
感想
Vueの開発がなれていたら気軽にWebComponentsを提供できそう
Vueでのサポートが厚い
Reactではあまりないらしい
他のライブラリ・フレームワークを使用するより速くやれる
Identity Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装
Twitter.icon https://twitter.com/onigra_
GitHub.icon https://github.com/onigra
きっかけ
フロントとバックエンドを分離させたい
サーバー:Kotlin
認証処理を自分で作ってますか?
Firebase Authentication
便利だが
SDKをつかっているだけだと中身が気になる
https://jwt.io/
base64で認証コードが返ってくる
Open ID Connect
https://openid.net/connect/
最近のクラウドサービスはこれがほとんど使われている
Identity Provider Keycloak
https://www.keycloak.org/docs/3.3/server_admin/topics/identity-broker/oidc.html
Identity Provider
認証を外部にまかせる
SNSアカウントでログイン
Identity ProviderはIdentity Provider内で必要な情報だけを管理する
Identity Provider as a Serviceはお高め
1Active Userあたり
自分でプロバイダをたてるとき
https://openid.net/certification/
Keycloak
https://www.keycloak.org/
Java
機能が豊富
Web API
CLI
JS Cliがついてる
コンソールからセッションオフ機能
KeyCloack JS Adaptor
https://www.keycloak.org/docs/3.0/securing_apps/topics/oidc/javascript-adapter.html
Nuxtとライフサイクルと噛み合わない
Implicit Flow
AdapterからTokenは取れるが、タイミング次第で生成されてない場合がある
別にOIDC Clientを使う
https://github.com/IdentityModel/oidc-client-js
デモ
https://github.com/onigra/vue-fes-japan-reject-con-demo
問題点
loginはできるがsignupがない
改善:https://github.com/onigra/keycloak-signup-url
Access Tokenには有効期限がある
ある程度の時間になったら切れる(ログアウト)
デフォルトは15分
ユーザー体験がよくない
Silent Refresh
Access Tokenを更新して上書き
axiosでのAPIリクエスト時にAuthorizationヘッダをつける
https://github.com/axios/axios#interceptors
Javaでは馴染みのある作法
リダイレクト問題
Nuxtのmiddlewareで認証したときある問題
ページが一瞬表示される
return Promiseを返すと消える
https://www.yo1000.com/posts/2018-05-26-nuxt-spa-redirect.html
まとめ
OpenID Connectはやや難しい
難しい部分をSDKにうまく隠蔽されている
Auth0のドキュメントはわかりやすいのでおすすめ
Identity Provider Keycloakは機能が豊富
自分で立てるときは有力
単に認証だけだとオーバーキル感がある
Keycloakは、OpenIDのプロトコルがあるところだと、色々使える
Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ
Twitter.icon https://twitter.com/lulzneko
GitHub.icon https://github.com/lulzneko
Twitter.icon https://twitter.com/lopburny
GitHub.icon https://github.com/lopburny
Riotz Works
https://riotz.works/
https://riotz.works/slides/?2018-vue-fes-reject-con#1
GitHub.icon https://github.com/riotz-works/rap-tap-app
ハッカソン制作作品
全国規模のモバイルアプリ開発ハッカソン
共演者2名での動画中継と感染者への同時配信
リアルタイム
採用した経緯
普段の開発
サーバーレス開発
Java、TypeScript、Webが中心
モバイルアプリはAndroidネイティブ
フロント開発はRiot.js
ハッカソンでは当時話題に上がり始めたPWAへの挑戦
PWAに挑むに当たりVue.jsを使う
Nuxtが便利
vue-cliは開発経験が少なく苦戦
そのほか使用技術
Firebase
Notification
Web Socket
AWS
REST API
SkyWay
WebRTC
CircleCI
GitHub deploy
GitHub build
Nuxt.js
TypeScript
型定義ファイル
Github.icon https://github.com/riotz-works/rap-tap-app/tree/source/types
機能
バトルを募集
バトルを開始
対戦・観戦ルームのURLが発行
対戦
STARTを押して、対戦者が入場したら対戦開始
観戦
対戦者が揃ったら観戦開始
メッセージでやじも飛ばせる
NuxtのPWA対応
@nuxtjs/pwa
WebRTCのリアルタイム通信
P2Pが基本
SFU(Selective Forwarding Unit)によって端末やネットワーク負荷を抑えられる
サーバーを立てる
SkyWay Javascript SDK
Safariの対応状況がまだ利用できない
Firebaseのリアルタイムデータ同期
Realtime Database
スピード
シンプル
モバイル最適
プレゼンスライドのCI・CD
GitHub Pages
静的ホスティング
CI/CDが簡単に回せるのがPWAの強み
ハッカソンではこういった仕掛け・仕組みが有用
remark.js
GitPitch, reveal.js
Markdownで記述
スライド内でiframeでデモ画面が連携できる
Vue.js × TypeScript × Blockchain Ethereumで作るアプリケーションをはじめからていねいに
GitHub.icon https://github.com/anneau
株式会社エイチーム引越し侍
ブロックチェーンの特徴
データが時系列で保存されるので書き換えられない
いわゆる著作権のようにそこになにがあったかのように証明できる
暗号通貨、公的文書などに利用
ブロックチェーンとフロントエンドの関わり
技術
バックエンド
Ruby on Rails
インフラ
MariaDB
docker
Nginx
ブロックチェーン
Blockchain Ethereum
フロントエンドから直接アクセスできる
改ざんさせる余地を与えないためにブロックチェーンのアプリはサーバー通さないため
フロントエンド
Vue.js
TS
データが格納されたら改ざんは不能
データを格納する前であれば改修できそう
クライアントから叩く場合
改ざんされてはいけないデータ
改ざんが問題ないデータ
お金と機能面で分けたい
自分だけのブロックチェーンアプリを作る
Ethereum
Contractと呼ばれるプログラムをブロックチェーンに格納
自動実行させることができる
開発環境
npm i -g truffle
truffle init
Solidity
仮想通貨を簡単に作れる
全世界に公開
Ethereumネットワークにデプロイ
プライベートネットワーク
AWSのBlockChain Templateにデプロイ
ローカル
Ganacheでテスト
VueとTSで動かす
ブロックチェーンへのアクセスはWeb3を使う
axios
vue-router
Vuex
actionsで非同期処理
型定義ファイル(TS用)
Non-DOM components with WebGL in Vue.js
Twitter.icon https://twitter.com/yomotsu
GitHub.icon https://github.com/yomotsu
株式会社ピクセルグリッド
受託制作
https://ff-wear.com/
Vue+WebGLで作ったアプリケーション
※試した例の紹介
ベストプラクティスではない
なぜWebGLで?
レンダリングパフォーマンス
アドバンスドな描画効果
GLSL
データの流れはVue.js
WebGLとVueを切り離す
WebGLは非同期
ピュアなclassを作った
欠点
同じデータが2箇所
双方バインドで無限ループに
解決
templateのないコンポーネントをつくる
GitHub.icon https://github.com/yomotsu/vue-webgl-non-dom-component-example
<canvas>の中にtemplateのないコンポーネントを配置
WebGL Rendererをmountedで初期化
Destoryed時に破棄
render()には記述しない
もしくはnullを返す
レンダーする
Virtual DOMには頼らない
その他やったこと
混合propsはcomputedで管理
watchで単体で管理すると複数動いてしまうので
1つのfunctionにしてその中でオブジェクト管理
非同期前提で考える
テクスチャアップロード
メッシュ情報
レンダリング
DOM使えないかを再検討
DOMインスペクターが使えないので
開発が大変になる
手動マウント
テスト用にやってみた
Vue 3.0
Custom render API
WebGL向けのカスタムレンダラー作れそう?
レガシーアプリケーションのリニューアルにNuxt.jsで戦う
Twitter.icon https://twitter.com/suusan2go
GitHub.icon https://github.com/suusan2go
エムスリー株式会社
https://speakerdeck.com/suusan2go/regasiapurikesiyonfalseriniyuaruninuxt-dot-jsdezhan-u-number-vuefes-reject
リニューアルプロジェクトについて
医師・薬剤師のキャリア支援の企業向け画面
10年前の技術スタック
独自Java FW
XSLT
IE 6.0以上推奨
IE10でうまく動かない…
リニューアル後
Kotlin + Spring Boot(サーバー)
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を使っていったが、コンポーネントが増えてくると粒度が大きくなる
Atomic Designの考え
ElementUIのデメリット
Edgeだけパフォーマンスがわるい
Win + Chromeのみの不具合
管理画面・業務アプリ色の強いアプリケーションで使えるコンポーネントが多い
input周り以外はほぼ問題なし
SSR
環境の違いを意識しないとハマりポイントあり
fetchAPIをcookieでやっているとき
サーバーとクライアントでheaders付与の仕方が違う
windowとdocumentへのアクセス
ssr:falseで解決
結局やるのは途中でやめた
mode:spaに切り替え
テスト
componentsとpagesの棲み分けを理解する
componentsでマウントしただけでアクセスするコンポーネントがあるとテストしづらい
pagesは薄く保っておく
yamanoku.icon 感想
Vue Fes Japan 2018と比較すると、より実用的というか実務における知見などがより詰められていた感じ
まさかブロックチェーンの話が聞けるとは思わなかった
みんなTypeScript頑張ってる感じで「徹底的に」付き合っていこうという姿勢が見られた