## 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](https://require.podcast.gq/archive/18/troche-o-vue), jak i na oficjalną [stronę](https://vuejs.org/) 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:
- https://madewithvuejs.com/blog/vue-3-roundup - krótkie podsumowanie wszystkich zmian we Vue 3 (nie tylko Composition API)
- https://composition-api.vuejs.org/ - strona i dokumentacja poświęcona tylko i wyłącznie Composition API
- https://v3.vuejs.org/guide/composition-api-introduction.html - wprowadzenie do Composition API prosto od Vue

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

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

Pierwszy `letter` od Require Podcast :)

Ostatnio wpadliśmy na pomysł stworzenia czegoś, co normalnie pozwoli nam uzupełnić treść podcastu, ciekawskim dając więcej materiałów i wiedzy, a nam pozwalając nieco rozszerzyć czy sprostować pewne części odcinka, a gdy takowego nie ma - stworzyć pewne zastępstwo. Dlatego też postanowiliśmy stworzyć `require('letter')` - nasz własny "rekwajerowy" newsletter (ale nie do końca :))

Listy mamy plan wysyłać dzień po opublikowaniu odcinka, lub jeżeli takiego nie będzie, to w poniedziałki :)

Serdecznie zapraszamy do **zapisania się** do listy, dzięki temu listy będą trafiać do waszej skrzynki :). Oczywiście jeżeli jakiś przegapiliście, lub wolicie przeczytać w przeglądarce, to możecie wejść na [stronę require('letter')](https://letter.podcast.gq), bo tam wszystkie listy dostępne są w prostym archiwum

Require Letter