Vue Fes Japanに行ってきました!

Vue.jsの国内最大級のお祭り、Vue Fes Japanに行ってきました。
メモしたことをまとめて貼っておきますね。
もっとセッションあったはずなんだけど、ちょっと漏れています。

日時: 2018/11/3
場所: 秋葉原UDX
イベントURL: https://vuefes.jp/

キーノート Vue3.0

speacker: Evan You
テーマ: Vue 3.0で何が変わるか?

速度向上 、メモリ使用量も削減 半減している

  • APIに変更なく、virtual DOMの内部処理を書き換えた
  • getter,setterは使わず、プロキシを用いてデータの監視
    • プロパティの追加や削除も検知可能 (Vue.setしなくてよくなるってことかな?)
    • インスタンスのプロキシが登場する => object.definePropertyは使わずすむ
  • コンパイルタイムヒントによって、テンプレートのコンパイル速度も改善。
    • オリジナルのコンポーネントか、ネイティブのものか検知する際の情報を増やした
  • スロット生成の最適化
    • 2系ではslotは親コンポーネントで作られるので、レンダリングの階層が増えていた
  • static tree hosting
    • 静的プロパティの場合はレンダリングし直さない。動的な変数を持っている場合は、そこだけ変える
  • inline handlerもhostingする
    • 何か忘れた

ファイルサイズ縮小

  • tree shakingへの対応。
    • ユーティリティ関数とかビルトインのコンポーネントとかオプション機能などの使わないものはバンドルから自動で除去。(gzipで最小10KB。記事によると、Vue2.5.17の1/3くらい)

メンテナンス性

  • アーキテクチャを整理。
    • 実行環境に依存しないよう、独立化させた。JSが動けば動く。ブラウザである必要もない。
  • スケジューラーについても何か言っていた・・

ネイティブアプリ

  • カスタムrender apiや weexなどネイティブ向けな出力を行う。
    • ブラウザの場合はdomを作成し追加する。canvasであればcanvasで出力もできる!

保守性をup

  • リアクティビティAPI
    • どこからでもdataを監視できる Vuex等を使わなくていいかも!?
  • コンポーネントの再描画を理解することができる。render trackを導入。
    • debuggerを実行すると、停止できる。コンソール上に詳細が・・ 何が原因でrerenderingされたかわかる
  • tsxによるtypescript サポートの強化
    • tsxでrender関数を使えるしpropsの型も表示される。もしpropsを忘れたら警告が出る。
  • 警告がわかりやすくなった
    • unhandled errorで対象コンポーネントも表示されてわかりやすい
  • 実験的な Hooks api
    • 新apiでReact から流入。
    • mixinコンポーネントを使うとネームスペースの問題が発生することがある。複数mixinを読み込んだ場合、どれがどの変数だかわかりづらい=>詳しくはReactのDAN氏のプレゼンをみるといいよ!
  • Time Slicing これもreact由来。
    • 長い1つの処理ではなく、処理を細切れにさせるため早い。(フォーム入力の文字で、2文字目、3文字目ときた時、2文字目の処理はskipしても問題ない。)

↓あとは概要とスライド貼る。

Next-level Vue Animations(次レベルのVueアニメーション)

speacker: Sarah Drasner アニメーションの話。

  • transitionタグ を見直す
    • in-out(enter)とout-in(leave)で気持ちの良い動きを
    • cssアニメーション
    • Javascriptフック
    • transition-groupで重くならないようにする
  • ウォッチャー/リアクティビティ
  • カスタムディレクティブ
  • ページトランジション(Nuxt.js)
  • vue data vis

サンプルが多いので、スライド見るだけで楽しい。 ex) こういうSVGアニメーションとか ex) ショックなカメのアニメーション

https://slides.com/sdrasner/vuefes-japan#/

Vue.js と Web Components のこれから

speacker: Takanori Oki Web Components => Web標準技術で、カプセル化されたコンポーネントの再利用を可能にする概念。
独自タグを定義できる。
フレームワークごとにUIを作り直さなくてもいいらしい。
cssはscopedで影響範囲が限定されている。
まだ課題は多いらしい。
聞いてないけど多分そんな感じ。
https://speakerdeck.com/takanorip/vue-fes-japan

Vue Designer: デザインと実装の統合

speacker: Katashin
デザインツールを作っている話っぽい。
プレビュー上で動的にデザインが作成できる。
デザインと実装の統合を図っている。
将来的に、デザイナーとエンジニア両方が使えるツールを。
聞いていないけど多分そんな感じ。
https://github.com/ktsn/vue-designer https://slides.com/ktsn/vue-fes-vue-designer#/

Atomic Design のデザインと実装の狭間

speacker: Takanori Sugawara Atomic Designでデザイナーとエンジニアは同じ目線になった・・ わけない。
コンポーネントの分け方で差ができる。職種によって関心ごとは違うよねって話。
そこで、Design Ops。=>デザイナーがデザインに集中できるように、エンジニアはサポートしてあげよう。
https://speakerdeck.com/ts020/vuefes

note のフロントエンドを Nuxt.js で再構築した話

speacker: 福井 烈
Angular1系 -> Nuxt.jsへ移行した
表示速度向上のためSSRしたいモチベーション + 学習コストの低さと親しみ易さとか諸々から採択。
RailsはAPI でView層をNuxt.jsへ。
Atomic designを採用して、コンポーネントの認識を全員で頑張って揃えた。Storybookで可視化。
聞いてないけど、頑張りがスライドから見えた。
https://note.mu/r82/n/ne217ba36d233

1年間単体テストを書き続けた現場から送る Vue Component のテスト

speacker: 土屋和良
テストに設計の可動域を確保するって言葉が心にしみた。
主にstorybookとzisuiを使ったビジュアルテストをおすすめする話。
スライドはユニットテストやコードもたくさんなので長い。
Vue.jsのユニットテストについても詳しく書かれている。
https://speakerdeck.com/tsuchikazu/vue-component-test

Vue CLI 3 and its Graphical User Interface

specker: Guillaume Chau
Vue CLI 3.0を今すぐインストールしよう!
すごそう・・

yarn global remove vue-cli
yarn global add @vue/cli

https://slides.com/akryum/vue-cli-18-3-jp#/
https://cli.vuejs.org/

こちらの記事にも詳しく書かれていました!
外部参考URL: https://gihyo.jp/news/report/2018/11/1201