Vue Fes Japan に参加してきました
2018.11.03 にあった、「Vue Fes Japan」に参加してきました。
素晴らしいイベントでした。
セッションだけでなく、ランチとかディナーもすごく評判が良かったみたいです。
スピーカーの皆様、スタッフの皆様、ありがとうございました。
Keynote
vuefes.jp Vue.js の作者である Evan YouさんによるKeynoteでした。
英語がすごく聞き取りやすかったです。
全部は理解が追いつけなかったので、英語勉強したいと思いました。
内容はVue.3.0についての紹介で、3.0でものすごくパフォーマンスが向上するという感じでした。本当にすごいとしか言いようがない。
以下はメモ内容をそのまま載せていますが、書き間違いなど多々ありそうです。
Vue 3.0 についてのキーノートのメモ（書き間違いあり）
より速く、ちいさく、メンテしやすく、よりネイティブ向けに作りやすく
よりあなたのコードを保守しやすく
仮装DOMの実装をフルスクラッチで作り直し mount, patchの処理が最大100%向上
proxyを用いた監視で完全な言語レベル 速度向上
通知の仕組みを作ることができる ES5のGetterやSetterを使っているが、かわりにproxy機能を使うことになる プロパティの追加や削除についても知ることができる
Object.definePropertyはさようなら インスタンスのproxyという概念も登場
- 実行時のオーバーヘッド削減のため、コンパイル時にヒントを追加
template is static analyzable テンプレートからのコンパイル コンポーネント探索の高速化 子要素数０であることをコンパイラ出力し、スキップする
Just in time optimization
- スロット生成の最適化
インスタンスが依存関係を正しくトラッキングできるように 不要な親子のレンダリングを回避 Lazy Funcitonという仕組みを取り入れ、 子関数は必要に応じて呼び出される
- Hoisting (巻き取り）
- Static Tree Hoisting
- Static Props Hoisting ノード全体への適用はしない
- Inline Handler Hoisting
パフォーマンスが2.5から3.0protoで倍以上向上
Tree-shaking ビルトインのコンポーネント (keep-alive, transition)
カスタムrendererAPI Canvas, iOS, などネイティブ向けの出力を出すために作った
コードのメンテナンス性向上 リアクティビティAPI
Render Track
子コンポーネント countをprop インスタンスを見るとどのようなキーがあり、mutateされたかわかる
- TSXによるTypeScriptサポートの強化 型によるwarningが表示される
(TypeScriptよさそう)
hooksはreact.jsのDanさんのプレゼンを聞いて
Vue.js と Web Components のこれから
speakerdeck.com スピーカーはTakanori Okiさんです。 FOLIOに所属しており、ウェブフォントが大好きとのこと。
Web ComponentsはEdge以外でほぼ実装が進んでおり、一気に普及していく見込みとのこと。
Vue.jsとWeb Componentsとの共存方法などについてのお話でした。
Webアプリケーションを作る上で、Vue.jsだけでなく将来的な移行も考えてUIのフレームワークを考える場合、Web ComponentsやAtomic Desginなどの考え方は非常に有用だと感じさせられました。
とても面白かったです。
この講演についてのメモ （書き間違いなどあり）
web標準技術 EDGE以外では動く polyfillを使わなくてもうごかせる
Custom Elements
独自の機能や見た目を持ったHTML Elementを定義できる
Shadow DOM
shadowRoot グローバルのCSS, JSSは影響できない
HTML Template
HTML Modules
HTMLをJavaScriptをimportできる まだGitHubで議論中 CSS Modulesも
どうやって
来週のVue.js with Web Componentsの勉強会が参考になりそう
Build with Vue.js
Vue CLI 3 BUild Targets
vue/web-component-wrapper
Vueコンポーネントをラップしてカスタム要素として登録する
Example
UIフレームワークを統一したい JavaScriptフレームワークごとに切り替える、とかは効率が悪い
Scopeを制限したい -> Shadow DOM CSS
Demerit
属性値にStringsのみ 外部から渡されるイベントハンドリングが難しい DOM要素の取り回しが面倒 CSSの設計を大幅に見直す必要がある
いまのところ
Vue.jsの機能でコンポーネントを作ったほうがよい
Micro frontend
機能の集合体だとみなす
frontend モノリシック
フレームワークの移行
Web Components UIフレームワーク
Vue.sj = Webアプリケーションを構築するためのフレームワーク UIを作るためのものだけではない
Summary
Web componentsはpoduction ready Vue.jsとWeb Componentsは共存できる UIをWebComponentsに任せることで負債を減らすことができる
Q and A
有用な情報は？
- Takanori OKiさんによる技術書典本
- webcomponents.org
- よくわかるWebComponents せんすいさん
Vue Designer: デザインと実装の統合
Katashinさん自身が開発している、Vue Designerについての紹介
Vueのコンポーネントの見た目のデザインがVSCode上でプレビューしたり、chrome devtoolのようにCSSいじったりできるみたいでものすごく便利そう。
これを使うと、デザイナーさんと一緒に開発するフローで革命が起きる感じがします。
この講演についてのメモ （書き間違いなどあり）
作っているVue Designerはまだプロトタイプ
デザインと実装が分かれている photoshop, adobe xd, sketch
デザイナー
UX, 情報設計、アクセシビリティ、スタイルガイド
開発者
コード設計 状態管理 レスポンシブ アニメーション
デザインと実装が分かれることでおきる問題
デザインはsketch, photoshop 開発は vueファイル
単純に二度手間
検索フォームをデザインせずに実装 デザインに戻すのを忘れると、、、
静的なモックアップ ウィンドウの幅 リキッドにするのか、固定にするのか
Dreamweaver デザインビュー
Vueegg
一回プロトチイプとしてデザインしたものが、Vueにつかえる Vueからは戻せない
FramerX
組み立てたUIはReactのコンポーネントになる Reactから戻せそう
ほしいデザインツール
SFCが実装、かつ、デザイン 長期開発、運用
デザイナー向けにするとUIを作りこむのが大変
直近の目標
まずは開発者が使って便利なもの GUI完結ではなくコードを併用
vscode上でVueコードを表示
GUI上であたっているスタイルを編集できる コード上に反映
データを入れて確認もできる 例：ボタンのコンポーネントはlabelというpropsを持っている labelに"test label"を入れた場合
サーバー側にSFCを持っている SFCをパーサーでASTに変更 WebSocketでクライアントに渡す クライアント上でレンダラーでVSCodeのGUIに表示
GUI操作はWebcomponentsから逆パーサーにわたし、コードに反映
プレビュー上でデザイン デザインが動的
SFCの静的解析
パーサー自体は自前じゃない
vue-eslint-parser
babel/parser -> jsのブロックを解析 TypeScriptにも対応
postcss
AST プレビューのレンダリング 意味解析 props / data 当たっているスタイル importしているコンポーネント GUI上の操作と対応づけ コード編集・生成
プリプロセッサ
TypeScriptのみサポート
Vue Designerはオープンソースでやっている
プレビューはVueのレンダラーを再実装している Vueのテンプレートコンパイラーと同じことをやっている 描画するだけじゃなくて、任意の処理を挟めるようにしたい ドラッグ&ドロップなど 要素間のマージンのピクセル数を表示したい なので、再実装
たいへん
意外にエッジケースが多い Vueのレンダラを使う方法も模索したい
Vue3.0カスタムレンダラ を使いたい
サーバークライアント構成
プレビュー上で何か操作したら、コードに反映
VSCodeのWebViewが想定していない使い方 エディタの中のプロセスとコミュニケーションをとるのがリッチじゃない サーバーとクライアントにして、WebScoketで通信するほうが楽だった 今はVScodeのWebViewはもっと使いやすくなっている
debugがらく Chrome dev toolsつかえる
開発者が使って便利なものにしたい
1.0.0にむけて
レイアウトできるツールにしたい 大まかなレイアウトを作るときはVue上でやりたい
npm installするだけでデザインを組み立てられる elment-vuetify quasar-framework vuesax
デザイナーと開発者がGitHubで同じコードを編集 すごく楽しい
コンポーネントカタログ 自動生成 右側から出てきたドロワーに一覧があった
Nuxt.js 2.0
Nuxt.jsの開発者である Sébastien Chopinさん自身によるNuxt.js2.0の紹介でした。 こちらもすごかった。 日本語での通訳も出ていたんですが、もっと英語勉強して普通に聞き取れるようになりたいと感じました。
内容としてはデモが非常に多く、ついていくだけで精一杯であまりメモは取れなかった感じです。
この講演についてのメモ （書き間違いなどあり）
Nuxt.jsを使うパターンの紹介
- REST APIパターン
ブラウザー:リクエスト -> Nuxtサーバー:リクエスト-> APIサーバー
APサーバー:json -> Nuxtサーバー:HTML -> ブラウザ
serverside rendering and client navigation
静的ファイルの生成パターン
ブラウザ リクエスト サーバー HTML+js
- SPAパターン
Nuxt.js 2.0
webpack4 + babel7
CLIを改善
Webpack Bar DEBUG=nuxt consola
より速いBuild
コードスプリッティングの制御
build.splitChunksを利用
バンドルの分離
クライアントサーバーを分離できる
Nuxt-start
ランタム限定 軌道速度２倍
ESM対応
ESMモジュールサーバー ミドルウェア
Nuxtjs 2.3.0 coming soon
モダンブラウザー向けビルド
nuxt build --modern
内部リファクタ
note のフロントエンドを Nuxt.js で再構築した話
noteをRails とAngular.js 1系のSPAから、BFF を Nuxt.js（Vue.js）に移行していっているお話でした。
RailsをAPIのみにとどめて, RederとclientナビゲーションをNuxt.jsとVue.jsに置き換える話は自分のやっていきたい開発としても、とても参考になる感じです。
AtomicDesignを活かしてコンポーネントを開発していく話もあり、過去に一旦挫折したStorybookをまた復活させたという話が響いた人も多かった模様でした。
この講演についてのメモ （書き間違いなどあり）
（メモよりもリンク先のスライドを読んでいただく方がいいと思います。）
noteを最初に開発した当時、react, vue はversion 1にもなっていなかったためAgular.jsを採用
課題
- SSRをサポートしていない
- 表示速度
フレームワークリニューアル
Vueを選んだ理由
Vue.jsのエキスパートがコンサルに
@kitak - 実装のQA - 設計サポート - ハンズオン開催
Nuxtのきっかけ
VueでSSRするのに簡単
pages配下にコンポーネントを置く
asynccData()/ fech()で必要なデータを定義取得する
開発体制
- エンジニア３名
- デザイナー２名
現時点でのパフォーマンス比較
Lighthouse 3 -> 41
のこりは画像の最適化が大半WebPageTest
開発環境
- Nuxt 2.2.0
- Jest
- Eslint
- Prettier (formatter)
- Circle CI
- Sentry
Vuexの主なルール
- モジュールモード
- mutation/actions/gettersのタイプには定数を使用
- 状態管理に秩序
Vuexモジュールの肥大化
Nuxt.jsの新モジュールでリファクタ 半分以上がactions
機能単位でモジュール分割
Atomic Design
アトミックデザインの書籍 と 菅原さん Vue.jsからみたAtomic Designの記事が参考になる
Atomic Desginの課題
- コンポーネントの数が多くなってしまう
Storybookを使っている
Nuxt.jsと設定周りを合わせるのが大変で 過去に挫折 廃止したものを復活した
Storybook webpack4対応 Nuxt2.0でいける
（挫折した時点より使えるようになっていた）
ユニバーサルJavaScript
- クライアントでもサーバーでもどちらでも実行できるJavaScript
- SSRは対応必須
DocumentAPIを使っているもの
ssrを使うときだけjsdomをグローバルに入れる
SSのライフサイクル
サーバーサイド、クライアントサイドどちらも通るライフサイクルを押さえる
Polyfill
Polyfill.io UserAgentごとに必要なpolyfillを選べる FastlyのCDN
Serverless
AWS Lambdaの上でNuxtを動かしている
Serverless Framework
過去の構成：EC2 + Node.js + pm2
ぜか突然pm2がおちる
Lambda + Nuxt
LambdaでExpressが動かせる nuxtはExpressのミドルウェアとして動かせる
クラウドフロントでリクエストを受けて ELB経由でRailsに飛ばすか、APIGateway経由でLambdaに飛ばす
まとめ
- パス(URL)ベースで小さく移行するのは有効
- SSRの導入は簡単
導入は簡単だが、学習運用コストは上がる
環境基盤のサポート、規約が非常に強力
技術的制約
- 採用して良かった
#### 内容と関係ないですが
この講演のあとに、Yatteiki.fmの@9mさんに声をかけていただきました。ありがとうございました。 たまたま自分がYatteikiパーカー着ていたのですが、となりに@9mさんが座ってました。。。全然気づかなかった。
1年間単体テストを書き続けた現場から送る Vue Component のテスト
土屋 和良さんによる発表でした。 Atomic DesignのStorybookも活用しながら、Vue ComponentをVisual Testingするのが最高という内容だったと思います。
この講演についてのメモ （書き間違いなどあり）
（メモよりもリンク先のスライドを読んでいただく方がいいと思います。）
何をテスト
Componentのテストもそうでないテストも考え方は一緒
@t_wada プライベートメソッドはテストする必要がない 外部から見た振る舞いのテストじゃない
テストするとき マウントするのか、シャドウマウントするのか
Snapshotテスティング DOMの変更 差分がなければ通る
フェイルした後に意図的な変更ならば、そのスナップショットを新しいExpectedに
Visual Testing
CSSもテストしたい
Visual TestingはSnapshotTestingの画像版
私が採用した最高のtesting
Visual Testing
Storybookを使う スクリーンショットはzisui 比較はreg-suit
vuexに依存しているcomponentはstoreを準備するのが面倒
対応策は
- PresentationalとContainer Componentにわける
- 汎用的なmockを用意していく
Storybookがあるとvisualtestしやすくなる
QAでのE2Eもやらないのか、ということについての質問
CypressなどのE2Eでエッジケースまで対応するのは大変 APIをどうするかなどの問題を回避するためにもコンポーネント単位でテストをしたい、とのこと
