関西最速?
Vue.js London2019まとめ
京都Devかふぇ#7 & v-kansai#11
@chan_kakuz
@chan_kakuz
Work
FURYU Corp.
ServerSide Engineer
- Java
- Kotlin
FrontEnd Engineer(sometimes)
- Vue
Who
Today's topic is...
Vue.js London2019
まとめ
そもそもVue.js London2019とは?
2019年10月4日に
ロンドンで開催された
Vue.jsのカンファレンス
どんな内容が発表されたの?
・Animations any Vue app can use
・Scripting in style, what's your Vue?
・Identifying and solving performance issues in Vue applications
・Scalable data visualisation with D3 and Vue
・A new Router to guide your Apps
・Vue 3’s Composition API Explained Visually
・The new Composition API
・Live coding: The new Composition API
・Keynote
9セッション中5つがVue3.0について
参加者もVue3.0についてすごい楽しみにしてるという人が多かった
注意
今回はそれぞれの深い話までしません
そのうちYouTubeで公開される予定なので詳しくはそちらをみてください!
Animations any Vue app can use
Adam Jahr
概要
アニメーションってめっちゃ大事!!
アニメーションがあることで、ユーザに対してアピールすることができる
<transition>と<transition-group>の使い方
内容としてはVueでアニメーションつけるときの基本的なところ
Scripting in style, what's your Vue?
Maya Shavin
概要
cssについて
CSSが出てきてからWebはとてもリッチになった
ただ、大規模になってくるとメンテ辛くない??
-
グローバルでの名前空間
-
暗黙的な依存関係
-
コードのメンテナンス(どれが使われてないのかわからない)
<h2 class="42">
I'm happy!
</h2>
こういった課題を解決する方法は今までもあった
・OOCSS & SMACSS
・BEM
・CSS PreProcessor
ただこれらでも問題は山積み、、、
CSS in JS
Reactの方が有名かもしれない
styled-component
もちろんVueでも使えます
vue-styled-component
or
vue-emotion
<styled-input placeholder="hoge" type="text" />
import styled from 'vue-styled-components';
// Create an <StyledInput> component that'll render an <input> tag with some styles
const StyledInput = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
export default StyledInput;
template
JS
何がうれしいの??
Scopedなので、名前被りにくい
component名で指定するので、class名を別で考えなくて良い
拡張性が高い
ただ、いいことばかりではない
動的にstyleを切り替えるときre-renderingされる(cacheされない)
ランタイムでstyleする
セキュリティ的に微妙
サニタイズとかしないと、、、
JSのなかにCSS書くので乱雑なコードになったり、、、
CSS in JSと
Scoped CSSの使い分け
CSS in JS
Scoped CSS
- シンプルで独立したコンポーネント
- コンポーネントのスタイルを完全にコントロールしたいとき
- propsによって動的にstyleを変えたいとき
- class名考えたくないとき
- セキュリティ気にするとき
- propsによって動的にstyleを変えないとき
Identifying and solving performance issues in Vue applications
Filip Rakowski
概要
レンダリングスピードはお金に関わることだからちゃんと考えようね
レンダリングに影響がある要素
-
hardware
-
network
-
optimized code
-
bundle size
bundle size
bundle sizeはwebpackとかで頑張るのもいいけど、、、
😮
簡単にbundle sizeを
効果的に抑えるやり方
dynamic import
何も考えないと
index.js
fuga.vue
hoge.vue
Top.vue.
router
/top
/fuga
/hoge
dynamic importすると
index.js
fuga.vue
hoge.vue
Top.vue.
router
/top
/fuga
/hoge
どうやってやるの??
通常のimport
import Hoge from '@/components/Hoge.vue'
Dynamic Importの場合
const Hoge = () => import('@/components/Hoge.vue')
必要なものだけ呼ばれるので、初期レンダリングが早くなる
ただ、初期レンダリングスピードは求められてなくて、たくさん遷移するようなアプリケーションだとむしろパフォーマンスは落ちるので注意
A new Router to guide your Apps
Eduardo San Martin Morote
概要
Vue Routerのおさらい
Vue3.0でのVue Routerについて
Vue Routerの得意不得意
得意
不得意
-
プログラムによるナビゲーション
-
宣言的ナビゲーション
-
ナビゲーションガード
- 動的にルーティングの追加/削除を行う
- 宣言的ルーティング
宣言的ルーティング?
React Routerを例に
const Root = () => (
<BrowserRouter>
<div>
<Route exact path="/" component={Home} />
<Route path="/memo" component={Memo} />
<Route path="/profile" component={Profile} />
</div>
</BrowserRouter>
);
いいところもあったけど、悪いとこもあった
何がダメだったか?
HistoryとRouterの責務がちゃんと別れてなかった
router.push
function push (location, onComplete, onAbort) {
this.history.push(location, onComplete, onAbort)
}
責務がちゃんと別れてなかったために、コントリビュートが難しかったり、拡張が難しかったり、、、
ということでVue3.0ではちゃんと分けます
History
-
ロケーションの修正
-
URLパース
-
ロケーション変更の通知
など
Router
-
Navigation
-
Navigation Guards
-
Dynamic Routing(addRoute,removeRoute)
さらにこのRouterを分割
Router
・Async navigation
・Trigger Navigation guards
・Expose current Route Location
・Handle redirections
Matcher
・Resolving a Router Location to a Route Record
・Only handles the path of URL
・Handles priority of Route Records
・Parses/handle params
New Vue Router
THE FUTURE IS IN TYPESCRIPT
-
コントリビュートしやすく
-
リグレッションを減らす
ROUTER-LINK SCOPED SLOT
<router-link
to="/about"
v-slot="{ href, route, navigate, isActive }"
>
<NavLink
:active="isActive"
:href="href"
@click="navigate"
>{{ route.fullPath }}</NavLink>
</router-link>
NAVIGATION FAILURES
ナビゲーション失敗時のエラーハンドリングが可能に
try {
await router.push('/somewhere')
} catch (err) {
console.log(
'Did not make it to ' + err.to.fullPath
)
}
などなどもっといっぱい
RFCS
-
Scoped Slot API for router-link
-
Better active matching
-
a11y improvements
-
More navigation information
そして最後に大事なこと
Vue 2 & 3
support both version
Vue2も細かな改善はするけど、メインはVue3
Composition APIについては他の登壇者にお任せ
Keynote
Evan You
Evanさんのリモート登壇!!
そしていきなりの
Vue 3.0先行公開
(pre-alpha)
内容について
Vue 3.0で改善された
コンパイラの話
Vue 2系の時と比較して説明
ただ、ほとんど何いってるかわからなかった、、、
🙇♂️🙇♂️🙇♂️
動画公開されたら頑張って理解します!!
最後に宣伝
本当に最後に
Vue Fes Japan 2019開催されることをみんなで
祈りましょう!!!
fin.
reference
-
https://slides.com/posva/a-new-router-to-guide-your-apps
-
https://jp.vuejs.org/v2/guide/transitions.html
関西最速Vue.jsLondonまとめ
By chan_kakuz
関西最速Vue.jsLondonまとめ
- 4,324