require('letter') - Vue 3 już tu jest!

Siema!

Chcielibyśmy oddać w Wasze ręce pierwszy "właściwy" require('letter'). A napiszemy w nim trochę o Vue 3, czyli najnowszej wersji frameworka Vue.js, będącego aktualnie drugim lub trzecim najpopularniejszym frameworkiem do JS'a (tuż za Reactem i Angularem, który czasami podawany jest na 2 lub 3 pozycji).

Czym jest Vue?

Jak już pisaliśmy, Vue jest frameworkiem do tworzenia stron i aplikacji internetowych w JS'ie. Podobnie jak w Reakcie, aplikację budujemy w oparciu o dynamiczne i reaktywne komponenty. Vue charakteryzuje się jednak łatwością w nauce i nieco większym poziomem abstrakcji niż React. Warto również zwrócić uwagę na sposób budowy aplikacji - Vue można wrzucić do już istniejącego projektu strony napisanej nawet w czystym HTML'u i CSS - nie wymaga ono korzystania z module bundlerów i kompilacji kodu.

Ciekawe również jest podejście do tworzenia komponentów - można robić to w dwa sposoby. Metodą z której skorzystamy gdy Vue jest używane jako "dodatek" do strony, mający na celu dodanie jej dynamiki, są komponenty oparte o klasę new Vue(). Pełen potencjał Vue wykorzystamy natomiast, tworząc komponenty bazując na plikach .vue - wtedy każdy komponent będzie reprezentowany przez plik zawierający jego template (swego rodzaju kod HTML), skrypty oraz jego style - a to wszystko w jednym pliku, co w bardzo fajny sposób pozwoli nam dzielić kod aplikacji.

Po więcej informacji na temat Vue, zachęcamy do przesłuchania naszego odcinka require(#18) - Trochę o Vue, jak i na oficjalną stronę Vue.js.

No to co nowego we Vue 3?

Dość długo zapowiadanym update'em do Vue miała być jego trzecia wersja. Prace nad nią trwały przez ponad 2 lata, od kiedy została zapowiedziana podczas Vue.js London w 2018 roku.

Najważniejszą zmianą we Vue.js 3, jest wprowadzenie Composition API - reprezentuje ono zupełnie nowe podejście do pisania komponentów Vue. Zamiast tworzyć je w sposób obiektowy (nazwany obecnie Options API, czyli osobno metody wewnątrz methods; inny obiekt zawierający zmienne - data, itp.), większość logiki komponentu będziemy mogli stworzyć korzystając z funkcyjnego API inspirowanego nieco hookami w React.js. "Hooki" te, oraz całą logikę w Composition API, zamieszczać będziemy w specjalnej funkcji setup(), przypominającej nieco funkcyjny komponent w Reakcie, ale nie tego, co dany komponent ma renderować.

Na przykład, chcąc stworzyć reaktywną zmienną (taką, którą będziemy mogli użyć w templacie, a jeżeli ją zmodyfikujemy, to ta zmiana zostanie wyrenderowana), nie będziemy korzystać już z obiektu data - w funkcji setup() tworzymy odpowiednią zmienną, której wartością jest funkcja ref(), działająca nieco jak Reactowy useState(). Podajemy do niej domyślą wartość zmiennej i... gotowe. Teraz wystarczy ten ref (zmienną) umieścić wewnątrz komponentu zwracanego przez funkcję setup(), i mamy odpowiednik data, ale w Composition API.

Przykład:

import { ref } from 'vue'

export default {
  setup() {
    const counter = ref(0) // Tworzenie refa

    return { counter }
  }
}

Następnie w kodzie komponentu zmienną counter możemy wykorzystać tak samo jak korzystalibyśmy z data, np. modyfikować na na przykład kliknięciu w przycisk (<button @click="counter++">), czy wyświetlać przez po prostu {{ counter }}.

Oprócz zwykłego tworzenia reaktywnych zmiennych, Composition API daje nam o wiele więcej możliwośći, jak np. tworzenie computed właściwości, watcherów, watchEffect() będący odpowiednikiem useEffect() w React, korzystanie z Dependency Injection, hooki cyklu życia komponentu i wiele wiele więcej.

Po co to wszystko?

Composition API w pewien sposób zmniejsza poziom abstrakcji Vue, przez przybliżenie go do czystego JS'a, co nie znaczy że Vue przy okazji straci na funkcjonalności - wręcz przeciwnie, nowe API zwiększy czytelność kodu oraz umożliwi łatwiejsze dzielenie logiki między komponentami.

Podsumowanie

Na pewno pora zacząć korzystać z nowej wersji Vue - jest to znacząca zmiana, podobna do przejścia z React.Component do komponentów funkcyjnych w React.js. Nowe API da również pewien powiew świeżości w bibliotekach przeznaczonych dla Vue.

Możecie się również spodziewać w ciągu najbliższych tygodni odcinka podcastu poświęconego Vue 3, w którym nieco rozwiniemy zagadnienia z tego newslettera.

Na koniec podrzucamy wam kilka linków o najnowszej wersji Vue:

Dzięki za przeczytanie tego newslettera. Cześć i do następnego!