Vue.jsはRiot.jsより良いんじゃないかと思ったのでメモ


  • RiotとVue検討段階の人が書いたものです。実用してみての感想ではないのでご注意願います。

Vue.jsのドキュメントに優位性の説明があった

他のフレームワークとの比較 - Vue.js

Riot 2.0 はよく似たコンポーネントベースの開発モデル(”タグ”と Riot では呼ばれています)を提供しており、必要最小限の美しく設計された API を持っています。Riot と Vue はおそらくその設計哲学の多くが共通しているのでしょう。しかしながら、Riot よりも少し重いにも関わらず、Vue はいくつか著しく優れた点を持っています:

  • トランジションエフェクトシステム。Riot にはありません。
  • ずっと強力なルータ。Riot のルーティング API は極めて最小限です。
  • より優れた性能。Riot は 仮想 DOM を使用しているというよりむしろDOM ツリーをトラバースしているため、Angular 1 と同じ性能問題に苦しめられています。
  • より熟成したツールのサポート。Vue は WebpackBrowserify の公式サポートを提供していますが、対して Riot はビルドシステムの統合についてはコミュニティのサポートに頼っています。

懸念: Vue.jsだと一つのファイルにHTML,CSS,JSがまとめられないのでは?

Vue.jsだとRiot.jsのようなコンポーネント化はできないけど、Vueifyがあってできる。

app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

cssコンパイラをstylusにするのも簡単だった。yarn add -D stylusするだけだった。

app.vue(stlyus+jade+coffee)
<style lang="stylus">
.red
  color #f00
</style>

<template lang="jade">
h1(class="red") {{msg}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    msg: 'Hello world!'
</script>

しかも、Riot.js+Webpackを組むより楽ちんだった。

$ yarn global add vue-cli
$ vue init browserify my-project
$ cd my-project
$ yarn install
$ yarn dev

Atomのハイライト

  • language-vueを入れると、.vueファイルがハイライトされる。
  • language-stylusを入れると、<style lang="stylus">の中身もハイライトされる。