先日、Vue Fes Japan 2018 Reject Conferenceに参加してきました。
その模様を一部紹介します。
Contents
Vue.js with Web Components
内容
web componentは、エッジをのぞいてモダンブラウザで使用可能
web componentは、Attributeを変更すると再描画されてしまう
リスト一部の変更しかない場合もリスト全体がすべて変更されてしまう
lit-htmlやhyper-html（小さな仮想DOM）やvue.jsで解決可能。
HMR(Hot Module Replacement)がきかない
カスタムエレメントを更新や破棄ができない
vue.jsなら解決可能
vue-cli3からカステムエレメントを生成することができるreactにはない。
HMRが有効化された状態で生成される。
差分描画されるので、パフォーマンスがよい。
ファイルサイズが重たくなるのがデメリット
他部署のUIを流用したり、ガイドラインに沿ったUIを作成する
アーキテクチャに依存しないコンポーネントが作れる
時間的コストがかかるからvue componentがあるなら使った方がいい
wired Elementがweb componentの勉強になる
関連ツールや技術リンク
Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装
内容
お金も時間もかかるので認証機能をイマドキ自分で作成しない
Firebaseなど優れたサービスがたくさん存在する
独自要件があったので自作してみた
OpenIDコネクトの仕様で作成されている
iframeの中でリフレッシュしてくる。
毎回、リクエストの度に認証走らせるのはダサいaxiosのインターセプター(interceptors)を使う。
ページが一瞬表示されてしまう問題をreturn promiseをしてあげることで解消できる
関連ツールや技術リンク
Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ
内容
Riot.jsよりPWAのサポートが強い。
Skywayでリアルタイムの動画配信を実現。
ただし、safari未対応
GitHubページを利用。プロダクション化するなら、S3に置いてcloudfrontを使う
PWA＋スライド（remark.js）でプレゼンスライド上でアプリを動かす
関連ツールや技術リンク
Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに
内容
ブロックチェーンとフロントの関係は思ったより、深い
ブロックチェーンとフロントは直接アクセスすることが一般的。
サーバをハックされた場合や管理者がハックすることができる。たからこそ、ブロックチェーン。
改竄されたくないデータは直接ブロックチェーンに格納する
ブロックチェーンアプリケーションを使うには手数料がある
ブロックチェーンを始めるならイーサリアムがおすすめ
truffleというフレームワークでnpm install でインストール可能
全世界に仮想通貨を公開したいならEthureumネットワーク
プライベートで仮想通貨を発行するならAWSのBlockchain
ローカルで仮想通貨を発行するならganache
web3を使ってイサーリアム環境にアクセスする
関連ツールや技術リンク
Non-DOM components with WebGL in Vue.js
内容
WebGLは、CSSではできない表現ができる
最初、vueとwebglをわけたが、vuexとwebGLで双方向バインドが無限ループした
関連ツールや技術リンク
レガシーアプリケーションのリニューアルにNuxt.jsで戦う
-
内容
- vue.jsをrailsテンプレートを使った
- nuxt+typescriptは、swaggerのcode-genでtypescriptの型定義を自動生成
- eslint-plugin-vueをtypescriptで使う。
- atomic desginにしたがって、コンポーネントの粒度に応じて開発
業務コンポーネントでも作れるほどelementUIは拡張性が高い - SSRはやめた
-
関連ツールや技術リンク
補足
デモとかで出てきたエディタがvscodeが多かった！
