Sprawdzamy, jak Vue chce pokonać Angulara i Reacta – Frontend Weekly vol. 95

1. Vue 2.7 – ostatni przystanek przed migracją do 3.x?

Vue 2.7 to ostatnie wydanie Vue 2 i będzie ono wspierane do końca 2023 roku. Mogłoby się wydawać, że zespół pracujący nad Vue w pełni skupiony jest teraz na rozwoju  Vue 3, a Vue 2 traktowane będzie po macoszemu. Okazuje się jednak, że Vue 2.7 jest naprawdę interesujące. W największym skrócie dodaje ono najważniejsze funkcjonalności z Vue 3 do Vue 2.

Composition API był najważniejszą nowością w Vue 3 i teraz trafi ono również do Vue 2.7. Na nowe API składają się 3 inne: Reactivity API (ref i reactive), Lifecycle Hooks (onMounted/onUnmounted) i Dependency Injection (provide/inject). Przyglądając się ostatecznemu tworowi nie sposób nie odnieść wrażenia, że mocno inspirowane jest ono Reactowymi Hookami.

// Old Options API
<script>
export default {
  data() {
    return {
      name: 'John',
    };
  },
  mounted() {
    console.log(`Hello ${this.name}`);
  },
};
</script>

<template>
  <p>Hello {{ name }}!</p>
</template>

// New Composition API
<script setup> 
const name = ref(0);

onMounted(() => {
  console.log(`Hello ${name.value}`);
});
</script>

<template>
  <p>Hello {{ name }}!</p>
</template>

Kiedy do sieci trafiło pierwsze RFC Composition API mocno podzieliło ono społeczność. Kłótni i kontrowersji było tak dużo, że sporo osób zaczęła mówić o “ciemnych wiekach Vue”. Część społeczności bała się, że Vue staje się zbyt podobne do Reacta, podczas gdy inna część obawiała się upodobnienia do Angulara. Sporo kontrowersji miało również miejsce wokół tego, czy nowe API powinno kanibalizować stare. Ostatecznie Composition API stało się opcjonalne, a społeczność po długich dyskusjach doszła do konsensusu. Dzisiaj po prawie 3 latach od początku ciemnych wieków niewielu już o nich pamięta i niewielu nadal krytykuje nowe API (aczkolwiek przyznać należy, że mocno wyewoluowało ono od czasu pierwszego RFC).

Do Vue 2.7 trafiły też dwie funkcjonalności ściśle powiązane z Composition API. Pierwsza z nich to `<script setup>, które jest słodzikiem syntaktycznym umożliwiającym wygodne korzystanie z Composition API. Druga to CSS v-bind, czyli możliwość odnoszenia się do zmiennych zdefiniowanych w części skryptowej w pliku CSS.

// New features in Vue 2.7
<script setup> // new script setup syntax
console.log('hello script setup')
</script>

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color'); // CSS v-bind
}
</style>

Co ważne, wszystkie nowe funkcjonalności z Vue 2.7 kompatybilne są pod względem typów z Vue 3.2. Oznacza to, że otwiera się nowa droga migracji do Vue 3. Zespoły, które z jakiegoś powodu wciąż zablokowane są z migracją, będą mogły teraz stopniowo przepisywać swój kod do nowego API. Kiedy blokery znikną powinno to znacząco przyspieszyć właściwą migrację.

Jeśli mówimy już o migracji do Vue 3, to podczas swojej prelekcji na Vue Amsterdam Evan You (twórca Vue) podzielił się danymi, z których wynika, że Vue 3 stanowi 25% wszystkich pobrań Vue. Część osób interpretuje ten wynik pozytywnie, ale moim zdaniem należy na niego patrzeć raczej pesymistycznie. Od wydania Vue 3 minęły już dwa lata, a do końca wsparcia dla Vue 2 zostało już tylko półtora roku. Czy pozostałe 75% projektów w tym  czasie będzie zdąży się zaktualizować? Śmiem wątpić.

Na powolny proces migracji do Vue 3 wpływ miało wiele czynników. Po pierwsze Vue 3 zostało napisane właściwie od zera. Nie tylko API wystawione dla klientów w wielu miejscach uległo modyfikacjom, ale też zmieniła się większość wewnętrznej logiki. To z kolei wymusiło na twórcach bibliotek gruntowne zmiany. 

Na dzień dzisiejszy większość bibliotek posiada już wersje kompatybilne z Vue 3. Nie przyszło to jednak bez problemów, bo na większość z nich czekać musieliśmy pół roku lub nawet rok. W skrajnych przypadkach, pomimo nieustannie trwającego dewelopmentu, nadal nie doczekaliśmy się wersji kompatybilnej z Vue 3. Przykładowo Nuxt 3, czyli odpowiednik Next.js dla Vue, nadal nie doczekał się stabilnej wersji…

Evan You utrzymuje, że drastyczne odcięcie się od Vue 2 było niezbędne w celu sprawnego developmentu Vue 3. Podkreśla jednak, że w przeciągu najbliższych lat raczej nie należy spodziewać się powtórki z rozrywki. Vue 3 stanowi solidną podstawę do rozwoju. Zespół Vue zamierza kopiować strategię rozwoju od Reacta i Embera i wprowadzać nowe funkcjonalności stopniowo nie łamiąc kluczowych kontraktów.

Innym czynnikiem spowalniającym migrację był na pewno brak narzędzi ułatwiających ten proces w wersji 3.0. Na te poczekać musieliśmy do wydania Vue 3.1, które nastąpiło prawie rok od opublikowania poprzedniej wersji. Spokojnie można więc powiedzieć, że projekty w Vue 2 miały do tej pory rok (a nie dwa) na dokonanie migracji, co trochę zmienia perspektywę.

Źródła:

https://blog.vuejs.org/posts/vue-2-7-naruto.html
https://www.monterail.com/vue-report-amsterdam-2022
https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/
https://youtu.be/1ntuhMzAzU8
https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Najpierw Vue 3.3, później nowa strategia kompilacji

Na Vue 3.3 przyjdzie nam jeszcze trochę poczekać, bo ukaże się ono dopiero pod koniec trzeciego kwartału tego roku. Jest jednak na co czekać, bo będzie to najciekawsze wydanie od dwóch lat. Jeśli wszystko pójdzie zgodnie z planem, to ustabilizowane zostanie zarówno Suspense jak i Reactivity Transform. 

Ostatnimi czasy o Suspense mogliście słyszeć całkiem sporo w kontekście Reacta oraz jego współbieżnego renderowania. W przypadku Vue mamy do czynienia ze zdecydowanie mniejszym zakresem funkcjonalności. W Vue `<Suspense>` umożliwiać ma renderowania tymczasowego komponentu do czasu, aż wszystkie asynchroniczne komponenty w drzewie zostaną załadowane.

<Suspense>
  <!-- component with nested async dependencies -->
  <Dashboard />

  <!-- loading state via #fallback slot -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

Drugą wyczekiwaną funkcjonalnością jest Reactivity Transform, czyli w skrócie szereg usprawnień do Composition API. Wszystkie metody z Reactive API (m.in ref i computed) doczekają się wersji poprzedzonych $. Będą to makra, które umożliwią ładniejszy i łatwiejszy dostęp do danych, kosztem dodatkowego kroku kompilacji.

// Before Vue 3.3
<script setup>
import { ref } from 'vue'

let count = ref(0)

console.log(count.value)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

// Vue 3.3
<script setup>
let count = $ref(0)

console.log(count)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Podczas wspomnianego już wcześniej Vue Amsterdam Evan You postanowił podzielić się też dalekosiężnymi planami zespołu. Jak zaznacza, na razie plany te są w powijakach i mogą jeszcze ulec zmianom. Po zakończeniu pracy nad Vue 3.3 zespół rozważa skupienie się nad nową strategią kompilacji na wzór tej znanej z SolidJS. Dla przypomnienia, SolidJS to framework do złudzenia przypominający Reacta, ale chwalący się lepszą wydajnością ze względu na porzucenie Virtual DOM. 

Nową strategię renderowania w zależności od potrzeb programiści mogliby zaaplikować albo do całego projektu, albo tylko do poszczególnych komponentów. Jak zapewnia Evan, nowa strategia kompilacji usuwająca VirtualDOM, będzie mieć sporo korzyści. Po pierwsze, kod niezbędny do obsługi wirtualnego drzewa komponentów będzie mógł zostać usunięty z finalnej paczki, co powinno znacząco ją odchudzić. Po drugie, zużycie pamięci po stronie klienta powinno zmaleć, ze względu na brak konieczności przechowywania aktualnego stanu VirtualDOM w tejże.

Jeśli mówimy o przyszłości Vue, to nie sposób pominąć Vite, który ostatnio staje się wschodzącą gwiazdą frontendowej społeczności. Początkowo Vite był narzędziem dedykowanym do budowania aplikacji napisanych we Vue. Rewolucja nadeszła dopiero wraz z opublikowaniem Vite 2.0, kiedy to stał się on narzędziem framework-agnostic. Co prawda narzędzie nadal budowane było głównie z myślą o społeczności Vue, ale od początku dostarczał sporo dokumentacji dla Reacta. Szybkość narzędzia robiła wrażenie, więc nic dziwnego, że z czasem zaczęła kusić coraz więcej React deweloperów. Vite stał się tak popularny, że zdążył już skanibalizować swojego największego konkurenta w postaci Snowplow.

W środowisku fronendowym na popularności zyskuje jeszcze jedna biblioteka wywodząca się z Vue – Vitest. Jest to alternatywa typu drop-in dla Jest, która pod spodem wykorzystuje Vite. Dzięki zastosowaniu Vite całość działa niesamowicie szybko. Biorąc pod uwagę ilość środków jakie zespół Vue poświęca na Vite i Vitest, oraz jak mozolnie rozwija się Jest, nie zdziwiłbym się gdyby w najbliższych latach udało się w końcu zdetronizować króla JavaScriptowych testów.

Źródła:

https://www.monterail.com/vue-report-amsterdam-2022
https://youtu.be/1ntuhMzAzU8
https://vuejs.org/guide/built-ins/suspense.html
https://vuejs.org/guide/extras/reactivity-transform.html
https://vitest.dev/
https://vitejs.dev/blog/announcing-vite2.html

Bonus #1: Co deweloperzy myślą o Vue?

W Vived wręcz kochamy statystyki. Kiedy w Vue Report 2022 zobaczyłem prawie ośmiostronnicową sekcję wypełnioną statystykami i wykresami byłem w siódmym niebie. Większość z nich to co prawda “przeklejki” z różnych raportów na temat Vue, ale bardzo dobrze podsumowywują one stan ekosystemu. Poniżej dzielę się z Wami kilkoma najciekawszymi obserwacjami, ale jeśli równie mocno co ja kochacie cyferki i wykresy, to polecam zajrzeć do oryginalnego raportu.

1. Vue jest wykorzystywane przez zdecydowanie więcej aplikacji niż Angular

Nie ważne, czy patrzymy na wyniki ogólne czy też zawężone do najpopularniejszych stron internetowych, Vue jest zdecydowanie popularniejsze od Angulara. Kłóci się to z wynikami ankiet dotyczących używanych w ostatnim roku narzędzi wśród deweloperów, gdzie Angular nadal nieznacznie wygrywa z Vue.

2. Vue zrównuje się pod względem popularności z Angularem

Niezależnie od tego którą ankietę postanowiłem przeanalizować, popularność Angulara sukcesywnie maleje, a Vue sukcesywnie rośnie. W tym roku popularność obu tych frameworków wyrównała się, co oznacza, że za rok kolejność na frontendowym podium może ulec zmianie. 

3. Rośnie liczba osób niezadowolonych z Vue

Popularność Vue sukcesywnie rośnie. Niestety przez ostatnie 3 lata sukcesywnie rośnie również liczba osób niezadowolonych z Vue. Wciąż nie są to alarmujące liczby, ale ciężko powiedzieć, czy wynika to z dojrzałości frameworka czy też ze wspomnianych już dziś problemów z migracją do Vue 3.

Źródła:

https://www.monterail.com/vue-report-amsterdam-2022

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Bonus #2: Historia Vue

Za każdym razem, kiedy w przeglądach wspominam o Vue polecam Wam dokument na temat historii tego frameworku od Honeypot. Nie inaczej będzie i tym razem. Jeśli jeszcze go nie widzieliście i szukacie czegoś ciekawego na weekendowe popołudnie, to naprawdę warto.