関西最速？
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とは?

https://vuejs.london/

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でアニメーションつけるときの基本的なところ

https://jp.vuejs.org/v2/guide/transitions.html

https://www.vuemastery.com/courses/animating-vue/why-animate

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-next

内容について

Vue 3.0で改善された
コンパイラの話

Vue 2系の時と比較して説明

ただ、ほとんど何いってるかわからなかった、、、

🙇‍♂️🙇‍♂️🙇‍♂️

動画公開されたら頑張って理解します！！

最後に宣伝

本当に最後に

Vue Fes Japan 2019開催されることをみんなで
祈りましょう！！！

fin.

reference

Made with Slides.com