Vue or not Vue?

Vue or not Vue?

Grzegorz Koronowski 4 lipca 2017

Od wielu miesięcy obserwuję ciekawą dyskusję w społeczności developerów front-end: który framework jest lepszy od innego?

Czy będzie to Angular zamiast React, a może odwrotnie? Czy Angular to najlepsze rozwiązanie, jeśli chodzi o budowanie dużych, skalowalnych SPA (Single-Page Applications)? Czy może React jest zawsze lżejszy i szybszy, ponieważ wykorzystuje architekturę wirtualnego-DOM?

Cóż... niekoniecznie tak musi być. My, zespół FinAI, rozważyliśmy wiele za i przeciw, podejmując dezycję dotyczącą głównej techologii i uznaliśmy, że najlepszym rozwiązaniem będzie wybór narzędzia Vue.js – przynajmniej na etapie fazy PoC.

 

Jakie były nasze wymagania?

Przede wszystkim – decyzja o wyborze technologi była kluczowa. To oczywiste i nie wymaga dalszych wyjaśnień, że dobre wybory zaprocentują w przyszłości, a złe przyczynią się do znaczącego wzrostu kosztów – nie tylko w story pointach, ale przede wszystkim realnych koszów finansowych do poniesienia. Dlatego też nie chcieliśmy automatycznie odpowiadać na pytanie: „Które narzędzie będzie najlepsze?”.

No dobrze, ale jeśli tak, to jakie były nasze warunki brzegowe, które musieliśmy rozważyć:

  1. Prędkość światła – musimy zapewnić optymalną szybkość działania naszych webaplikacji
  2. Łatwość utrzymania i rozwoju – Kod musi być zrozumiały, łatwy do przeczytania i działający intuicyjnie. Im niższy próg wejścia technologicznego (technology low entry level), tym lepiej.
  3. Żadnych zagadek – nasze rozwiązanie musi być transparentne na etapie produkcji kodu. Nie możemy tracić czasu na poruszanie się w tajemniczej chmurze niezidentyfikowanych błędów i dziwnych zachowań. Każdy błąd parsera musi być prosty do naprawienia, a każde, błędne zachowanie – łatwe do indetyfikacji.
  4. Struktura komponentowa – z małych komponentów budujemy duże, dziedziczymy, rozpraszamy.

 

Czym jest Vue.js?

Vue.js to jedna z ostatnich nowości na rynku frameworków służących do budowy aplikacji webowych. Architektura tego rozwiązania polega na warstwie widoku, a zestaw metod i instrukcji jest bardzo prosty i łatwy do użycia, utrzymania, rozwoju i integracji z innymi rozwiązaniami.

Inną wskazywaną cechą tego narzędzia jest fakt, iż w założeniu miało to być rozwiązanie, które dostarcza najlepsze mechanizmy znane z Angulara czy Reacta – eliminując jednocześcnie wszystkie te cechy wymienionych technologii, które były dla developerów niewygodne.

Składnia Vue opiera się na czystym, bardzo prostym JS, wykorzystującym konstrukcję „klucz - wartość” do konfigurowania obiektów. Tak skonstruowane komponenty są naprawdę bardzo łatwe w użyciu czy dziedziczeniu.

Jak wspomniałem, mówi się, że Vue komponuje w sobie wszystkie najlepsze cechy z Angulara czy Reacta, więc jeśli kiedykolwiek miałeś styczność z którymś z nich, to na pewno spodobają ci się konstrukty wyrażeń i derektyw takie jak:

v-if, v-else, v-show, v-for

Oraz wywołania callbacków:

v-on:click="counter++"

Albo:

v-on:keyup.enter="submit"

Jeśli jesteś fanem wyrażeń liniowych w blokach HTML (templatki) to spodobają ci się również takie konstrukcje:

<div>{{ message | filter('arg1', arg2) }}</div>

Rzeczy znane ze świata React.js to głównie props, architekture component-based oraz VirtualDOM. Vue to również wiele rozwiązań, które znasz obecnie: szablony (templates), filtry (filters | ), dyrektywy, zdarzenia, czy w końcu data-binding. Bardzo wygodną i ciekawą cechą Vue-CLI, którego akurat używaliśmy, była składnia modułu, która w jednym pliku zawierała szablon HTML, kod JS oraz deklaracje CSS otoczone kontekstem komponentu:

<template>
  <div>
    <h2>A content!</h2>
  </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component'

@Component({
  props:{}
})

export default class AppPage extends Vue {
  constructor() {
    super();
  }
}
</script>

<style>
h2 {
  color:#fff2bb;
}
</style>

Kolejną bardzo użyteczną cechą narzędzia są tzw. lifecycle hooks. Do dyspozycji jest 10 różnych zdarzeń, w zależności od kontekstu trwania komponentu, w których możemy mierzyć wydajność czy umieścić dodatkową logikę. Są to zdarzenia:

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed.

 

A co z tą prędkością?

Prędkość działania Vue jest naprawdę imponująca, i właściwie pod względem czasu trwania poszczególnych operacji prowadzi we wszystkich zestawianiach. Porównajmy (czas w ms):

   Angular 1.5 Angular 2.0   React 15.3.1 Vue 2.0.0 
create rows
(duration for creating 1000 rows
after the page loaded)
 270  198 187  171
swap rows
(time to swap to rows on a 1k table -
with 5 warmup iterations)
 50  50  48  19
create many rows
(duration to create 10000 rows)
 2414  1914  2229  1712
clear rows
(duration to clear the table
filled with 10000 rows)
 628  281  371  223

 Źródło: http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html.

 

Za co więc lubię Vue?

  1. Jest elastyczny jak diabli – niczego nie muszę i mogę zupełnie wszystko, wykorzystując najlepsze wzorce i praktyki
  2. Jest niskopoziomowy – do zrozumienia wystarczy ci zwykły JS, wyposażony w składnię ES6
  3. Struktura pliku .vue – cały potrzebny materiał w jednym miejscu. Szablon, kod i stylowanie!
  4. Możesz pisać w TypeScript – ale nie musisz!

 

Grzegorz Koronowski, FinAi.com

Warszawa, 4 lipca 2017 roku

Location icon Facebook icon Twitter icon Google+ icon LinkedIn icon Technology icon Business icon Marketing icon Phone icon Mail icon User icon Tag icon Bubble icon Arrow right icon Arrow left icon Calendar PR Contact