https://gyazo.com/e87808e0ef5a6401cbd72ef5a9baf74b
情報共有・ディスカッションの場を提供
3~4ヶ月の頻度でMeetup
会場提供
フードスポンサー
ツールスポンサー
2018/11/3 開催
Tickets
9/10開始
販売件数 最大360予定
7000円
先着売り切れゴメン！
Staff
ボランティアスタッフ募集 8/29〜
Speakers
Sarah Drasner
Sébastien Chopin
Edd Yerburgh
Rahul Kadyan
Guillaume Chau
倍率８倍
今日のMeetupにて決定・発表
講演形式
Keynote: キーノート
Evan You
Sessions: セッション
全10セッションを2会場に分かれて進行
table:sessions
「Next-level Vue Animations」 Sarah Drasner
「Nuxt.js 2.0」 Sébastien Chopin
「TBD (未定)」 Edd Yerburgh
「A deep dive in SFC compilation」 Rahul Kadyan
「TBD (未定)」 Guillaume Chau
「Vue Designer: デザインと実装の統合」 katashin
「noteのフロントエンドをNuxt.jsで再構築した話」 福井 烈
「Vue.js と Web Components のこれから」 Takanori Oki
「Atomic Design のデザインと実装の狭間」 菅原 孝則
「1年間単体テストを書き続けた現場から送る Vue Component のテスト」 土屋 和良
ストリーミング配信はなし
動画撮影はするので後日公開
裏カンファレンス開催！
2018/11/10午後に開催予定
CFP落選した人に投票順位より実行委員から登壇有無を基に伺う
Vue Fes Japanティザーサイト担当
ヘッド画像＋大小60枚画像
Nuxt generate
今日やること
速度目標の立て方
ビジネスゴールから考える
役割
存在を知ってもらう
行きたいと思える（興味の喚起）
楽しめる情報を提供できる
Vue.js製で快適に見られる
Vue.jsのブランディング（興味を持ってもらう）
どのくらい早ければいいのか？
ヤコブ・ニールセンの記事
界隈で「このサイトは早い」というのを超える
dev.to
阿部寛のホームページ
計測
dev.to => 1332ms
阿部寛 => 600ms
Vue Fes（改善前） => 1653ms
速度改善
いま、どこの改善をしているかを意識
本当に効果があったのかBefore / Afterを計測する
特に効果が大きかったもの
画像の最適化
画像形式の選択
ヘッド画像 => webp
画像のリサイズ
ppiに合わせて最適なサイズをロード
srcset属性
画像の圧縮
ImageOptim
GUIツール
imagemin
CUIツール
遅延読み込み
vue-lazyload
intersection-observer
Webフォント
Adobe Typekit
そのまま読むとレンダリングをブロックしかねない
JSで遅延読み込みさせた
rel="preload"
Netlifyがすべてやってくれる
改善後のFMP => 862ms
dev.to超え！
阿部寛は強い
速度を維持する仕組み
画像圧縮
husky
モニタリングの強化
いずれやる
WebPageTestをホスティングして定期的に実行
超速本は読んどけ
検索ページ
検索条件反映エリア
条件を反映
検索条件設定エリア
条件を指定
検索結果表示エリア
結果を反映
Vue.js
進め方
マークアップを解体
Organismsごとに作業
機能が独立するまでAtomsに分類していく
所感
Vue.js
宣言的、リアクティブなのがよい
Dataによって一意に振る舞いが代わる
変更が逐一反映される
https://gyazo.com/276299f4d26aa1cd3d9a5ccf91ea7a55 https://vuex.vuejs.org/
単一ファイルコンポーネント（SFC）なのがよい
scoped cssが便利
簡易的ならいい加減でもよしなにやってくれる
中規模くらいになるとちゃんと設計しとかないとならない
書いてて楽しい
Atomic Design
Atomsにこだわると死ぬ
Organismsをタスクベースで考えるとよい
ファイルの見通しが楽
まとめ
UIに着目せず、機能に着目する
Vueに甘えすぎずちゃんと設計しよう
Evanさんに感謝しよう
デザインツールをつくりなおす話
STUDIOのリニューアル
1か月で大規模改修
コンポーネント化
Drag and Drop(dnd)
負債
dndを触りたがらない
コンポーネント化
共通パーツ
上書きができる override or props
別の解釈
UIパーツは必ずどこかのデータと結びつく
string, image ...
コンポーネント＝オブジェクトとして扱えるのでは？
データが増える
v-for="data in datas"で繰り返せる
ネストしたデータにも対応
dnd
３代目にリニューアル・開発中
挙動・使い方に難がある
ボックスモデルに準拠したレイアウトモデル
flex-box
設計がイケてない
ありがとう あの時 Vue.js は僕を助けた
受託制作
スパンが短め
数がこなせる
いろんなデザインが見れる
サイトが必要な方々の熱意を聞くことができる
「人の思い」はサイトクオリティに反映される
でも、周りの状況がよくわからなくなってきた
「作るものが違うから技術も違って当然」と言い聞かせてた
それでもどうしようかと悩んでいた（焦燥感）
そんな中で手を差し伸べてくれたのがVue.js
ドキュメントが楽しい
日本語対応
丁寧
コミュニティが優しい
Slack vuejs-jp
５分で回答を貰えた
Vue CLIの使い勝手
.vueでコンポーネントひとつ！というのがよい
つくったもの
ロジックはそのまま・開発環境ごそっと繰り返せたのはよかった
恩返しとして差し伸べる手になりたい
LTがエモすぎた yamanoku.icon*10
vue.js xss vulnerability and ssr/spa rendering architecture] Aintek.xyz
アジェンダ
XSS
ユーザからの入力でHTMLの属性タグで受け取ったときに画面に表示される
<v-bind>
SSR/SPAレンダリングアーキテクチャ
レンダリングに原因がある
SSR
Renderer
Context App.js
Server Bundle
クライアントサイドレンダリング
Merpay, Inc
proff
Backbone.Viewがツラい
データバインディングがつらい
再利用がつらい
3rd Party Moduleが古い
○○＋Vue.jsアーキテクチャ事例
Backbone.Modelと依存
大幅なUIリニューアル
Backbone.jsだとつらそう
Vue.jsは「軽度の機能実装で利用できる」
使える資産はそのまま
追加でVue, Vuex, Vuetify
データのやり取りはインスタンスメソッド経由のみ
StoreにBackbone.Modelをもたせる
Vue側は任意のイベントでActionをdispatch
jQueryと合わせる
Vue Component内でjQueryを使う
mounted内で $refs を使いDOMを取得
DOM変更はVue.jsのライフサイクル外
導入結果
既存ライブラリでお互い干渉しなかった
UIパーツのComponent化で効率化
注意点
バンドルサイズ
ライフサイクル