event

Vue Fes Japan 2018 Reject Conferenceに参加してきた

vue fes 2018 reject con

先日、Vue Fes Japan 2018 Reject Conferenceに参加してきました。
その模様を一部紹介します。

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が多かった!

ABOUT ME
アバター
ロッピー
コンサルタントから2018年にエンジニアに転向。年収400万円のサラリーマンエンジニアから、半年で月収100万円を稼ぐエンジニアになった。 Python、Golangなど単価の高い言語を得意とする。