はじめに
Vue.js Advent Calendar 2018の16日目です。
Vue Fes Japan および Reject Conference の両方に参加してきましたので、
自分の整理用にもまとめてみようかと思います。
💚 Vue Fes Japan 2018
タイムテーブル
| セッション名 |
|---|
| キーノート 🗒 / 📺 |
| Platinum スポンサーセッション |
| Next-level Vue Animations 🗒 / 📺 |
| Vue.js と Web Components のこれから 🗒 / 📺 |
| Vue Designer: デザインと実装の統合 🗒 / 📺 |
| Unit testing a Vuex store 🗒 / 📺 |
| Atomic Design のデザインと実装の狭間 🗒 / 📺 |
| Nuxt.js 2.0 📺 |
| A deep dive in SFC compilation 🗒 / 📺 |
| note のフロントエンドを Nuxt.js で再構築した話 🗒 / 📺 |
| Vue CLI 3 and its Graphical User Interface 🗒 / 📺 |
| 1年間単体テストを書き続けた現場から送る Vue Component のテスト 🗒 / 📺 |
視聴メモ
✅ キーノート
- より速く、より小さく、メンテナンスしやすく、ネイティブ向けに！
- 仮想DOM部分を書き直し
- プロキシを用いた監視に
✅ Platinum スポンサーセッション
- KARTEがVue.jsで作られているというお話
✅ Vue.js と Web Components のこれから
- Web Componentsとは・・・Webの標準技術でカプセル化、EdgeとIE以外では動く
-
Custom Elements、ShadowDOM、HTML Template、ES Modules -
HTML Modulesという仕様が議論中・・・HTMLをJSの中に直接importできるようにする仕様 -
CSS Modulesも議論されている - Vue CLI 3 Build Targets・・・
--target wcオプションを付けるとVue.jsのコンポーネントをWeb Componentsに変換してくれる -
@vue/web-component-wrapperを使用
なぜWeb Componentsを使うようにしたほうがいいのか
- 同じコンポーネントをどんなライブラリでも使えるように
- フレームワークを途中から買えた場合などに使える
- 外部公開しやすい
- 完全にScoped・・・GlobalのCSSに影響されない実装がしたいなど、ShadowDOMを使えば影響を外側から受けない実装が可能
Web Componentsを使うデメリット
- 属性にStringしか渡せない
- 外部から渡されるイベントのハンドリングが難しい
- 生のDOMの取り回しが面倒
- 深い階層を指定しているようなCSSの指定が使えなくなるので全体の見直しが必要
Micro Front Endとは
- Webサイト等は独立した機能の集合体だと考える
- それぞれの機能は、それぞれの機能に影響を与えないように作る・・・ShwdowDOMやCustom Elementsは他に影響を与えない変更に柔軟なものを作るのに良い
Web Componentsを使うメリット
- 特定のフレームワークに依存し続けるのはよくない・ずっとあるわけじゃない → フレームワークの移行が必要 → めっちゃ大変 → 将来の負債を少なくする
- 負債をためないためにWeb標準を使ったほうが良い
将来どうなるか
- Vue.jsはWeb Componentsに置き換えられていくのか → NO（Web Componentsと共存していく）
- Web ComponentsはHTMLをカプセル化するためのもので、アプリケーションを作るためのものではない
- Vue.jsはWebアプリケーションを作るためのもので、UIだけじゃない…という違い
まとめ
- Web Componentsにはまだまだ課題が多い
- UIをWeb Componentsに任せることで負債を減らせる
- マテリアルデザインのWeb Components化は着々と進んでいて、将来それを組み込めばフレームワークの違いにかかわらず使えるようになる未来も近い
質問コーナー
- Web Componentsの強いところ、Web標準が変わるスピードはどんなものか・・・スパンは長く、破壊的な変更は短いスパンではなかなかない
- Web Components初心者・中級者に有用なサイトがあるか・・・WebComponents.orgに基本的な情報がある／W3Cに仕様が載ってる／おすすめの書籍は自分の出している本だが、「よくわかるWeb Componentsの仕組み」という本もオススメ／Polymer JapanがWeb Componentsに関するイベントをやっているので参加してほしい
✅ Unit testing a Vuex store
-
vue-testはまだベータ版なので正式リリースを目指している - 3.0でリリース予定
- DOMを使用しない、もうちょっと速くなる
- 単体テストはブラックボックステストでよい、インプットとアウトプットさえあっていれば良いと思う
- カバレッジ100％でなくてもいいと思う、ほんとにテストをやりたいことを見極めるべき
- そんなにテストファーストでなくてもいいんじゃないか
✅ Nuxt.js 2.0
- CLIの改善
- ビルドが高速に
- コードスプリッティングの制御
- バンドルの分離・・・クライアントとサーバーの分離
- nuxt-start・・・ランタイム限定、起動速度2倍
- ESM対応・・・ESモジュールをサーバーミドルウェアやnextconfig.jsに直接
- Nuxt.js v2.3.0 comming soon
- モダンブラウザ向けビルド （npm build --modern）
- 質問：次のバージョンのVue.jsがくるがそこらへんの対応は気にしなくてもどんとこい！という感じか・・・3.0へのアップデートは問題なく、Nuxt.js3.0はVue.js3.0より先に出る
✅ note のフロントエンドを Nuxt.js で再構築した話
- 当初はAngularJSを使っていた・・・ネイティブアプリ展開を予定していた
- 一度過去に挫折した
Storybookの採用・・・移行の初期なのに把握できてないという問題／視認性が悪化したほうが心理的負債が…と考えた - StorybookとNuxt用にwebpackの設定を用意する必要がある
- AngularJSにVue.jsのコンポーネントをロードできるライブラリがある
✅ 1年間単体テストを書き続けた現場から送る Vue Component のテスト
質問コーナー
- REG-SUIT CIでイメージ作成して比較にどれくらい時間がかかるか・・・100枚くらいで10分位（CIすべての時間）かかる／zusuiというのが高速に動いているので増えてもそんなにかからないんじゃないか
- E2Eのサイプレスを検討したことはないか・・・E2Eより簡単に色々なパターンを洗濯しているのでこのやり方を選んだ
💛 Vue Fes Japan 2018 Reject Conference
タイムテーブル
| セッション名 |
|---|
| Vue.js with web components |
| Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装 |
| Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ |
| Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに |
| Non-DOM components with WebGL in Vue.js |
| レガシーアプリケーションのリニューアルにNuxt.jsで戦う |
視聴メモ
✅ Vue.js with web components
- コミケで技術系同人誌を発売予定
素のWeb Components
- attributeを変更すると、すべてを再描画されてしまうという欠点が
- それを補うために
lt-htmlなどの仮想DOMを用いる - Custom Elementsの破棄やアップデートができない
Vue.jsのWeb Components
- vaadin-button
- Vue.jsでWeb Componentsを作れる
- メリット：HMRを有効化した状態でWeb Componentsが作れる
- デメリット：Vue.jsが入っている分ファイルサイズが重い
その他
- 楽天さんもWeb Componentsを使っている
- Micro Front End・・・マイクロサービスの考え方をフロントエンドに
- すでにSPAフレームワークを使っているなら、素直にVue ComponentsやReact Componentsを使ったほうが良いのでは
- wired element・・・参考になったやつ
質問コーナー
- Web Componentsを使い回すことは現実的なのか・・・現状はあまり現実的ではないと思うが、どこまでそこに投資できるかだと思う
- どういうモチベーションでWeb Componentsを触っているのか・・・同人誌を書くときに取り上げてそのモチベーションで
- ReactでWeb Componentsを生成する機能は無いと思う
✅ Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装
- フロントエンドとサーバーサイドが分離した構成
- 認証処理を自分で作りたくない
- Firebase、Google OpenID など
Firebase Authentication
- Firebase Authentication・・・とても便利。Open ID Connectが使われている
- ID Token
- FirebaseのJWTを確認・・・これをクライアントがVerifyすることによって認証
Identity Provider
- 認証を外部サービスに任せる（Twitterなど
- Identity Provider as a Service はお高い
- Identity Providerを自前で立てる・・・立てるときはopenidcertificationというページで探す
Keycloak
- Identity Providerの一つ
- Nuxtのライフサイクルと合わなくてそのまま使えなかった
- 他のOIDC Clientを使用することにした
- Silent Reflesh・・・アイフレームを用いている
- axiosのAPIリクエストの際にAuthorizationヘッダーをつける
- Nuxt使用したときのリダイレクト問題・・・return promiseやると解消する（詳細はブログにまとめた
まとめ
- Auth0のドキュメントが丁寧でおすすめ
- NuxtMeetUp#6
質問コーナー
- keycloakはGoogleとか他の認証サービスと連携可能
- 認証機能を作り直すというところで検証を行った
- implicit flowでSilent Refreshは多分大丈夫・・・？
✅ Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ
- モバイルアプリのハッカソンに参加できて優勝できた
- Riotz Worksとして活動している
- ラップ、タップ、アップというアプリを作った
なんでNuxt使ったのか
- 普段はRiot.jsをフロントで使っていた
- PWAが流行っていた
- VueにPWAのサポートがある
- Reactよりは生産性が高そう
構成
- ビデオのところはSkyWayというのを使っている（SFU・・・WebRTC
- Nuxt.js
- PWA
- TypeScript
PWA
- Androidのほうがいろんな機能（位置情報とか）が使える
WebRTC
- P2P通信が基本だが、SFU（サーバー経由）も可能
- SkyWay・・・JSのSDKが用意されている
- SafariではJSのSDK使えないのが現状
Firebase
- Realtime Database・・・リアルタイムで同期が取れる、実装が簡単
- 色々幅広くサーバーレスで作れる
CI
- Circle CI / Github
質問
- 普段からWebRTC触ってたのか？・・・その時思いついた
- Vue/Nuxtではまった点・・・PWA組み合わせるところでハマった
- NuxtでTypeScript使うの難しくない？・・・その場で型定義を作ってやった
✅ Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに
ブロックチェーン
- ネットワークに参加する全ノードが共有するデータベースみたいなもの
- P2P
- データが時系列順に保存されていて誰にも書き換えることができない
- 著作権のようにそこにあったことの証明になる
ブロックチェーンとフロントエンドの関わり
- フロントから直接ブロックチェーンにアクセスしている
- 書き換えてブロックチェーンに保存することはできそう→それはよくない
- 全部ブロックチェーンにすればいいのでは→お金と機能面
- ブロックチェーン動かすお金がかかる、Webアプリケーションより発展しているわけではない、検索機能が充実しているわけでもない
自分だけのブロックチェーンアプリケーション
- Ethereum・・・おすすめ
- Truffleというフレームワークを使う
- ビットコインを作って全世界にデプロイも可能
- ビットコインを作ってプライベートで使う場合は、AWSのブロックチェーンテンプレートというのがあるのでそれ使ったらよさそう
- ローカルの場合はGanacheにデプロイ
- Web3・・・ブロックチェーンにクライアント側からアクセス
質問コーナー
- 通信の安全性・・・ブロックチェーン自体が見れる場所にある、ハッシュ化して送られているから、基本的に盗み取られるものはなさそう
✅ Non-DOM components with WebGL in Vue.js
- Tシャツのデザインツールを作った
なぜWebGL
- 高速なレンダリングパフォーマンス
- CSSでできない描画
✅ レガシーアプリケーションのリニューアルにNuxt.jsで戦う
- m3.com
- REST APIサーバー・・・Kotlin、Spring Boot
- IE6以上対応、10以上だと正しく動作しない可能性がｗ
- TypeScript・・・サーバーサイドとの連携に型が欲しい
- Swagger
- TypeScript使ったほうが型あるメリットのほうが大きかった
- Atomic Designの考え方でコンポーネントを整理
- ElementUI
- SSRはやめた
- コンポーネントのテストをどうするか→Vue Fesの資料みて
質問コーナー
- リニューアル期間・・・半年くらい
- リリース・・・ちょっとずつじゃなくて一気に
おわりに
Vue Fesはいっぱい人がいて、とても活気がある感じでした！
Vue.js3.0は2019年リリース予定だと言っていたと思いますが、楽しみです。
時間が経って、自分でPCにメモったものが既に見返しててもなんのこっちゃって感じの部分も多かったので、早めに整理するのが大事だなと思いました。