- Vue Fes Japan 2018に参加してきました。
| 会場A | 会場B |
|---|---|
| キーノート Evan You |
- |
| Next-level Vue Animations Sarah Drasner |
Vue.js と Web Components のこれから Takanori Oki |
| Vue Designer: デザインと実装の統合 katashin |
Unit testing a Vuex store Edd Yerburgh |
| Atomic Design のデザインと実装の狭間 菅原 孝則 |
Nuxt.js 2.0 Sébastien Chopin |
| A deep dive in SFC compilation Rahul Kadyan |
note のフロントエンドを Nuxt.js で再構築した話 福井 烈 |
| Vue CLI 3 and its Graphical User Interface Guillaume Chau |
1年間単体テストを書き続けた現場から送る Vue Component のテスト 土屋 和良 |
キーノート~ Vue3.0 Updates ~
- Evan Youさん
Vue3.0
- より速く
- 仮想DOM再実装
- コンパイラ最適化
- より小さく
- tree shaking対応
- よりメンテナンスしやすく
- よりネイティブ向けに作りやすく
- カスタムレンダラAPI
- よりあなたのコードの保守性を向上
- tsxによるTypeScriptサポート
- HooksAPI(Experimental)
- TimeSlicing(Experimental)
より速く
- 仮想DOMの実装を作り直した
- moutとpatch処理が最大100%向上
- 後方互換性も保つ
- ネイティブプロキシを使って高速化
- コンパイルの仕組みも高速化
- => コンポーネントの初期化が最大で100%高速化する！
より小さく
- tree shaking対応
- 使われていないコードをバンドルされたファイルに含まないようにする
よりメンテナンスしやすく
- アーキテクチャの整理
- パッケージの分離
- テストセットアップの改善
よりネイティブ向けに作りやすく
あなたのコードの保守性を向上
- リアクティビティAPI
- observableメソッドでstateの変更を監視
- リアクティブの画面に反映
- コンポーネントの再描画をデバッグしやすく
- renderTriggered
- TSXによるTypeScriptサポートの強化
- render関数にtsxを書ける
- warningメッセージの改善
- HooksAPI(Experimental)
- mixinのネームスペースの問題を解決できる
- TimeSlicing(Experimental)
- 重い処理があってもブロッキングしなくなる
- 処理を分離させている
- 60fps
Vue.js と Web Components のこれから
- Takanori Okiさん
WebComponsntesとは
仕様
- Custom Elements
- 自分でHTMLのタグを作れる
- Shadow DOM
- HTML Template
- 独立したHTMLかたまりを定義できる
<templates>
- ES Modules
- JSファイルをimport/exportできる
- HTML Modules
- HTMLをJavaScriptの中に直接import可能にする仕様
どうやってWebComponentsをVueで作るか
- VueCLI3のBuildTargets
--target wcをつけるとvueのコンポーネントをWebComponentsに変換してbuildできる- これで生成されたファイルは単体でWebComponentsとして動く
- VueからWebComponentsにスムーズに移行できる
なぜWebComponentsを使うのか
- 今のところVueの機能を使ってWebComponentsを作ったほうが楽
メリット
- 同じコンポーネントをどんなライブラリとも一緒に使える
- フレームワークが変わってもUIを使い回せる
- FullScoped
- VueだけではうまくScopedに振る舞わせられるだけ
- グローバルなCSSに影響されなくなる
デメリット
- 属性にString型しか渡せない
- 外部から渡されるイベントハンドリングが難しい
Micro Frontend
- サーバサイドのマイクロサービスのようにフロントエンドもマイクロサービス化
- 外側はVueで細かいパーツはWebComponents
変更に強い柔軟なWeb
- WebComponentsならScopedなので以下のような変更が楽
- CSSの変更
- JSの変更
- ライブラリの変更
- DOMの変更
- Framework移行はとても大変
- Vueが死んでもWebComponents使ってればmigrationしやすい
- Web標準であることは強い
今後どうなるか
- VueはWebComponentsに置き換えられていく？
- No
- 共存していくもの
- WebComponents is to encapsulate HTML elements
まとめ
- WebComponentsまだ課題もある
- VueとWebComponentsは共存できる
- UIをWebComponentsに任せることで負債を減らせる
Vue Designer: デザインと実装の統合
- katashinさん
今のWebアプリ
デザインと実装が分かれている
- デザイナー
- デザイン用のツール
- 開発者
- デザインの通りに実装
- 昔よりUIや設計が複雑になってきたので分業化されてきた
- 分業することによる課題もある
デザインと実装が分かれることによる課題
- デザインのファイルと実装するファイルが違うので二度手間
- 小さな改修でのコミュニケーション問題
- デザインは静的
- => みんな解決しようとしている
ライブラリ
- vuegg
- 結局プロトタイプでしか使えなさそう
- FramerX
- Reactコンポーネントを生成できる
- SFCが実装かつデザインになるようなツールがほしい
- そこでVue Designer
Vue Designer
- VSCode上で使う
- VueアプリのプレビューがVSCode上で見られる
- windowsサイズを柔軟に変えられる
- プレビューで画面を選択するとそれに該当するコードがハイライトされる
- SFCが唯一のデータ
- デザインしたものがVueのコードになる
- 実装もデザインも同じコード
仕組み
- html
- vue-eslint-parser
- js
- @babel/parser
- babelはtsにも対応した
- css
- postcss
今後
- v1.0.0までの展望
- その先
まとめ
- デザインと実装が分かれてることによる課題がある
- 統合したい
- Vue Designer
- まずは開発者が便利に使えるツールに
- 将来的にはデザイナーも開発者も使えるツールに
Atomic Design のデザインと実装の狭間
- 菅原 孝則さん
コンポーネント
- デザイナーとエンジニアが同じ目線でコンポーネントを設計するのは難しい
- AtmicDesignでもダメ
- 知識の分断が大きい
- 大事にしていることも違う
デザイナーがやってること
- やってること
- UXデザイン
- UIデザイン
- 他にもいろいろ
- 大事なのはユーザの反応
- 綺麗に作ることも大事だけどその次
- コンポーネントはエンジニアリングの概念
デザインのツール
- コンポーネント指向のデザインツールはあまり流行ってなかった
- 最近は出てきた
- みんな慣れてないだけ
- 手段が進化したので手法も変わる
- まだまだツールのサポートが足りない
- 時間が解決するところもあるだろう
- コンポーネント指向でAtomicDesign
- Cしか知らない人にSpringBootでアプリ作れと言ってるようなもの
Design Ops
- デザインの仕事に集中できるように
- デザインプロセスをサポートする仕組み組織を作る
まとめ
- デザイナーがデザインに専念できる環境を作ろう
- やり方はまだみんな手探り
- エンジニアがそれをサポートしよう
note のフロントエンドを Nuxt.js で再構築した話
- 福井 烈さん
Nuxt移行のモチベーション
- 2013年にAngularJSで実装開始した
- UI複雑
- 2way-binding
- UI複雑
現状の課題
技術選定要件
- 要件
- SSR
- 学習運用コスト
- デザイナーもコード書く
- フロントエンド専任がいない
- デザイナーもコード書く
- 開発コミュニティの活発度
- Vueがこれらを満たすので採用
- さらにNuxtも採用
- SSRが作りやすい
- コードの規約がある
- Webpack等も入ってる
移行計画
- ベージ単位で移行
- ドックフーディング
- 一部のページはNuxt版が動いてる
- lighthouseのパフォーマンス 3点 -> 41点
- 現状残っている指摘は画像の最適化
技術
コンポーネント設計
- Vuex
- AtomicDesign
- atomsとmoleculesはvuex参照禁止
- organismsはvuex参照可
- Storybook
- Nuxtとの設定互換がつらい
- v4で改善
- Nuxtとの設定互換がつらい
ユニバーサルJS
- SSRするから対応必須
- サーバサイドからはwindowやdocumentが見えないから改修しないといけない
- ライブラリが使ってるとどうしようもない
- jsdomを使って対応
ファイルサイズの圧縮
nuxt build --analyze- highlight.js(コードに色つけるやつ)言語絞ってサイズ削減
- moment.jsをday.jsに
- lodashやめる
インフラ
- 当初はEC2 + node + pm2
- Serverless Frameworkに変更
- nodeのバージョンがLambdaに依存してしまう
まとめ
1年間単体テストを書き続けた現場から送る Vue Component のテスト
- 土屋 和良さん
コンポーネントのテスト書いてますか
- UIは変更が多いからテストしない？
- テストがないと意図しない変更が起きないか不安
コンポーネントの何をテストするのか
- 外部からみた振る舞いをテストする
- 自動テストのターゲットは外から見た振る舞い
- input/outputを整理
- mount? or shallow?
- 基本的にmount
どうやってコンポーネントをテストするか
Lifecycleのテスト
- 他のテストよりは優先度低
- 得られる安心感は少なめ
Props/VuexStateのテスト
- 単純なassert
- どこまで細かくチェックする?
- 文言変わっただけで書き直さないといけないの面倒
- SnapshotTest
- DOMのスナップショットをとって次のテストのexpectedにする
- CSSもテストしたい
- -> VisualTesting
- VisualTesting
- SnapshotTestの画像版
- Storybook + reg-suit
- reg-suit
- CIのフローに組み込むとこまでサポートしてくれている
- PRで結果が見えるとか
- PRのレビューが効率化
- CIのフローに組み込むとこまでサポートしてくれている
User Interactionのテスト
- User Interaction
- 入力
- クリック
- スクロール
- D&D
- ....
- 全部やるのは大変
- 入力、クリックくらいなら簡単
- そこだけテストしている
- 入力、クリックくらいなら簡単
- 簡単なUserInteractionテストは大変じゃない
- 重要なフォームだけでもやっておくといい
まとめ
- VisualTestは最高
- 簡単に作れる
- レビュー負荷も下がる
