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') - Siema!

## 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!

# No siema!

To już drugi list od Require! W tym newsletterze chcielibyśmy odnieść się do poprzedniego odcinka o Next.js Conf i przedstawić wam kilka z naszych ulubionych ficzerów Next'a, które odróżniają go znacząco od innych frameworków.

## Fetchowanie danych

Next.js oferuje nam 2 możliwości pobierania danych po stronie serwera - dynamicznie, przy każdym requeście (`getServerSideProps`), oraz statycznie w momencie budowania strony (`getStaticProps`)

### `getServerSideProps`

`getServerSideProps` pozwala nam na wykonanie funkcji po stronie serwera w momencie każdego wyrenderowania strony. Gdy użytkownik wchodzi na daną stronę, Next.js wykona funkcję `getServerSideProps` dla danej strony, a następnie to co ta funkcja zwróci, przekaże jako propsy do komponentu strony.

W `getServerSideProps` możemy wykonywać pobieranie dynamicznych danych z np. bazy danych czy headless CMS'a (ale tylko takich, które zmieniają się często, do rzadziej pobieranych przejdziemy zaraz), czy też ogarnąć autoryzację użytkownika - przyjmijmy że dana strona jest zarezerwowana tylko dla zalogowanych użytkowników. W tym celu w `getServerSideProps` możemy zweryfikować to, czy użytkownik jest zalogowany (pobierając np. JWT z ciasteczka), jeżeli tak to wyrenderujemy stronę, a w przeciwnym wypadku przekierujemy użytkownika na stronę logowania

Strona w dokumentacji poświęcona `getServerSideProps` - https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

### `getStaticProps`

`getStaticProps` pozwala nam na pobieranie danych w momencie zbudowania strony. Z jednorazowo pobranymi danymi, wygeneruje statyczne strony, przekazując te dane do komponentu strony jako propsy.

Jest to idealne rozwiązanie, gdy chcemy pobrać dane z headless CMS'a, ale nie zmieniają się one zbyt często. Po zmianie danych, możemy zbudować stronę - wtedy serwer natychmiastowo odsyła wyrenderowaną do statycznych plików stronę z już pobranymi danymi. Z `getStaticProps` korzystamy na naszej stronie newslettera, do generowania podstron z archiwum listów.

Jest to rozwiązanie podobne do Gatsby.js, który cały koncentruje się na generowaniu stron statycznych - jeżeli potrzebujesz specyficznie rozwiązania do SSG (Static Site Generation), rozważ skorzystanie z [Gatsby](https://gatsbyjs.com), który wątek ten ma o wiele bardziej rozwinięty

Strona w dokumentacji poświęcona `getStaticProps` - https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
Nasz odcinek poświęcony po części SSG oraz Headless CMSom (dość stary, ale nadal warty przesłuchania) - https://require.podcast.gq/archive/8/blogowanie-i-troche-o-jamstacku

## API Routes + Vercel

Jedną z najfajniejszych funkcji Next'a są API Routes oraz jego integracja z Vercelem.

Poza fetchowaniem danych po stronie serwera bezpośrednio do poszczególnych stron, możemy tworzyć tak zwane API routes. Umieszczamy w folderze `pages/api` pliki `.js` lub `.ts`, z których wyeksportowane będą funkcje-handlery danych ścieżek. Są to standardowe handlery do wbudowanej w Node biblioteki `http` - przyjmują jako argumenty obiekty `req` i `res`. Dzięki temu jesteśmy w stanie w prosty sposób zbudować proste REST API do naszej aplikacji.

Później stronę można opublikować na [Vercel'u](https://vercel.com) - hostingu stworzonym z myślą o Next.js właśnie - jest on darmowy i obsługuje Serverless Functions.

Należy rozróżnić również [Vercel Functions](https://vercel.com/docs/serverless-functions/introduction) od [Next.js Functions](https://nextjs.org/docs/api-routes/introduction). Na końcu będą działały niemalże tak samo, ale Vercel Functions między innymi obsługuje dodatkowe języki, jak np. Go, Python czy Ruby.

Po więcej informacji, sprawdźcie:
- https://nextjs.org/docs/api-routes/introduction
- https://vercel.com/docs/serverless-functions/introduction
- https://vercel.com/

**Przykładowy plik funkcji:**

```js
export default function handler(req, res) {
  res.json({ message: 'hello world!' })
}
```

Na temat funkcji planujemy również osobny newsletter/odcinek, więc *stay tuned* :)

## Multi Zones

Bardzo przydatną, lęcz często pomijaną funkcjonalnością Next'a oraz Vercel'a są tzw. zone'y. Zone to po prostu instancja aplikacji Next. Dzięki odpowiedniej konfiguracji pliku `vercel.json` możemy połączyć kilka osobnych aplikacji w jeden projekt publikowany na  [Vercel'u](https://vercel.com).

Dzięki temu możemy utworzyć osobną aplikację dla różnych katalogów, np. dla katalogu głównego stronę główną, a w osobnym katalogu zbootstrapować kolejny projekt np. bloga pod ścieżką `/blog`.

**Przykład pliku vercel.json**:

```
{
  "version": 2,
  "builds": [
    { "src": "blog/package.json", "use": "@vercel/next" },
    { "src": "home/package.json", "use": "@vercel/next" }
  ],
  "routes": [
    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
    { "src": "/blog(.*)", "dest": "blog/blog$1" },
    { "src": "(.*)", "dest": "home$1" }
  ]
}
```

*Strona w dokumentacji poświęcona Multi Zones - https://nextjs.org/docs/advanced-features/multi-zones*

## Internationalized Routing

Świeżym dodatkiem z wersji 10 Next'a jest Internationalized Routing, czyli możliwość tworzenia wielojęzycznych stron w bardzo prosty sposób.

W pliku next.config.js konfigurujemy języki naszej strony oraz ustawiamy strategię routingu między językami (domyślnie Next będzie generować strony w domyślnym języku pod ich normalnym adresem, a inne pod np. `/pl/nazwastrony`, ale można również dopasować domenę dla innego języka).

Następnie chcąc przekierować użytkownika na inną wersję językową strony, dodajemy atrybut `locale` do komponentu `<Link />`.

Jak na razie o samo zmienianie języków w komponentach musimy zadbać sami, Next jednynie przekazuje jedynie odpowiednie argumenty do funkcji odpowiadających za fetchowanie danych, oraz do komponentów za pomocą hooka `useRouter()`.

Po więcej informacji, sprawdźcie poświęconą temu [stronę w dokumentacji](https://nextjs.org/docs/advanced-features/i18n-routing) :)

## next/amp

Next.js pozwala nam na bardzo proste tworzenie stron [AMP](https://developers.google.com/amp?hl=pl) (Accelerated Mobile Pages). Strony te w ciekawy sposób współpracują z Google, które dorzuca do nich cache oraz pozwala na szybkie wyświetlanie na urządzeniach mobilnych w wyszukiwarce.

Aby dodać AMP do danej strony w naszym projekcie wystarczy do pliku strony (np. `pages/index.js`) dodać jedną linijkę kodu:

```js
export const config = { amp: true }
```

I tyle :). Next zajmie się całą resztą

*Strona w dokumentacji poświęcona AMP - https://nextjs.org/docs/api-reference/next/amp*

## next/image

Wraz z Next.js w wersji 10 pojawiła się nowa paczka - `next/image`. Dodała ona do Next'a optymalizację obrazków, podobnie jak w Gatsby.js. W porównaniu do `gatsby/image` jest natomiast o wiele prostsza w użyciu.

Pod spodem wszystkie obrazki konwertuje do formatu WEBP, dopasowuje do rozmiaru na stronie i tworzy odpowiednie wersje dla odpowiednich rozmiarów, oraz dodaje lazy loading. Wszystko to z praktycznie zerową wymaganą konfiguracją, w przeciwieństwie do odpowiednika z Gatsby.js

**Przykład komponentu**:

```
import Image from 'next/image'

function Img() {
  return (
    <Image
      src="/obrazek.png"
      alt="Obrazek!"
      width={500}
      height={500}
    />
  )
}

export default Img
```

*Strona w dokumentacji poświęcona next/image - https://nextjs.org/docs/api-reference/next/image*

## Podsumowując

***Dzięki za przeczytanie tego newslettera. Pamiętajcie że na [stronie newslettera](https://letter.podcast.gq) możecie przeczytać również poprzednie listy. Cześć i do następnego!***

Require Letter