Vue.js: progresivní framework, který si zamilujete

Vue.js od Evana You nabízí přístupný, výkonný a flexibilní framework pro budování UI. Proč roste tak rychle a jak se porovnává s Reactem a Angularem.

Progresivní adopce¶

Vue.js se odlišuje progresivním přístupem — můžete ho přidat do existující stránky jedním script tagem, nebo ho použít jako plnohodnotný SPA framework s routerem, state managementem a build toolingem.

Evan You, ex-Googler z Angular týmu, vytvořil Vue jako reakci na komplexitu Angularu. Cíl: vzít to nejlepší z Angularu a Reactu a zabalit do přístupného balíčku.

Reaktivní datový model¶

Vue.js používá reaktivní systém — změna dat automaticky aktualizuje DOM:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Ahoj Vue!',
    todos: [
      { text: 'Naučit se Vue', done: true },
      { text: 'Postavit projekt', done: false }
    ]
  },
  computed: {
    pendingTodos: function() {
      return this.todos.filter(function(t) { return !t.done; });
    }
  }
});

Žádný setState() jako v Reactu, žádný zone.js jako v Angularu. Prostě změňte data a Vue se postará o zbytek.

Single File Components¶

Vue Single File Components (.vue soubory) kombinují template, script a style v jednom souboru:

<template>
  <div class="todo-item" :class="{ done: todo.done }">
    <span>{{ todo.text }}</span>
    <button @click="$emit('remove')">X</button>
  </div>
</template>

<script>
export default {
  props: ['todo']
}
</script>

<style scoped>
.done { text-decoration: line-through; }
</style>

Scoped CSS zajistí, že styly neovlivní ostatní komponenty. Vue-loader pro Webpack zpracuje .vue soubory automaticky.

Vue vs React vs Angular¶

Každý framework má své místo:

• Vue** — nejnižší bariéra vstupu, skvělá dokumentace, ideální pro menší týmy a postupnou adopci
• React** — největší ekosystém, flexibilita, silný v enterprise s Redux
• Angular** — batteries-included, TypeScript first, nejlepší pro velké enterprise týmy

Vue roste nejrychleji na GitHubu a má nadšenou komunitu. Pro nové projekty je legitimní alternativa k Reactu.

Závěr: Vue si zaslouží vaši pozornost¶

Vue.js dokazuje, že framework může být současně jednoduchý a výkonný. Pokud hledáte alternativu k Reactu nebo Angularu s nižší learning curve a excelentní dokumentací, Vue je skvělá volba. Vyzkoušejte ho na příštím projektu.