{"id":9947,"date":"2022-07-08T11:28:04","date_gmt":"2022-07-08T09:28:04","guid":{"rendered":"https:\/\/vived.io\/sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95\/"},"modified":"2022-09-19T13:16:26","modified_gmt":"2022-09-19T11:16:26","slug":"sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95\/","title":{"rendered":"Sprawdzamy, jak Vue chce pokona\u0107 Angulara i Reacta – Frontend Weekly vol. 95"},"content":{"rendered":"\n

1. Vue 2.7 – ostatni przystanek przed migracj\u0105 do 3.x?<\/h2>\n\n\n\n

Vue 2.7 to ostatnie wydanie Vue 2 i b\u0119dzie ono wspierane do ko\u0144ca 2023 roku. Mog\u0142oby si\u0119 wydawa\u0107, \u017ce zesp\u00f3\u0142 pracuj\u0105cy nad Vue w pe\u0142ni skupiony jest teraz na rozwoju  Vue 3, a Vue 2 traktowane b\u0119dzie po macoszemu. Okazuje si\u0119 jednak, \u017ce Vue 2.7 jest naprawd\u0119 interesuj\u0105ce. W najwi\u0119kszym skr\u00f3cie dodaje ono najwa\u017cniejsze funkcjonalno\u015bci z Vue 3 do Vue 2.<\/p>\n\n\n\n

Composition API by\u0142 najwa\u017cniejsz\u0105 nowo\u015bci\u0105 w Vue 3 i teraz trafi ono r\u00f3wnie\u017c do Vue 2.7. Na nowe API sk\u0142adaj\u0105 si\u0119 3 inne: Reactivity API (ref i reactive), Lifecycle Hooks (onMounted\/onUnmounted) i Dependency Injection (provide\/inject). Przygl\u0105daj\u0105c si\u0119 ostatecznemu tworowi nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce mocno inspirowane jest ono Reactowymi Hookami.<\/p>\n\n\n\n

\/\/ Old Options API\n<script>\nexport default {\n  data() {\n    return {\n      name: 'John',\n    };\n  },\n  mounted() {\n    console.log(`Hello ${this.name}`);\n  },\n};\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n\n\n\n
\/\/ New Composition API\n<script setup> \nconst name = ref(0);\n\nonMounted(() => {\n  console.log(`Hello ${name.value}`);\n});\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Kiedy do sieci trafi\u0142o pierwsze RFC Composition API mocno podzieli\u0142o ono spo\u0142eczno\u015b\u0107. K\u0142\u00f3tni i kontrowersji by\u0142o tak du\u017co, \u017ce sporo os\u00f3b zacz\u0119\u0142a m\u00f3wi\u0107 o \u201cciemnych wiekach Vue\u201d. Cz\u0119\u015b\u0107 spo\u0142eczno\u015bci ba\u0142a si\u0119, \u017ce Vue staje si\u0119 zbyt podobne do Reacta, podczas gdy inna cz\u0119\u015b\u0107 obawia\u0142a si\u0119 upodobnienia do Angulara. Sporo kontrowersji mia\u0142o r\u00f3wnie\u017c miejsce wok\u00f3\u0142 tego, czy nowe API powinno kanibalizowa\u0107 stare. Ostatecznie Composition API sta\u0142o si\u0119 opcjonalne, a spo\u0142eczno\u015b\u0107 po d\u0142ugich dyskusjach dosz\u0142a do konsensusu. Dzisiaj po prawie 3 latach od pocz\u0105tku ciemnych wiek\u00f3w niewielu ju\u017c o nich pami\u0119ta i niewielu nadal krytykuje nowe API (aczkolwiek przyzna\u0107 nale\u017cy, \u017ce mocno wyewoluowa\u0142o ono od czasu pierwszego RFC).<\/p>\n\n\n\n
<\/p>\n\n\n
\n
\"\"
Szczerze m\u00f3wi\u0105c podczas mojej kr\u00f3tkiej przygody z Vue to w\u0142a\u015bnie mnogo\u015b\u0107 API by\u0142a najwi\u0119kszym utrudnieniem. Wszystkie r\u00f3\u017cni\u0105 si\u0119 od siebie znacz\u0105co, \u017cadne nie wysuwa si\u0119 na prowadzenie pod wzgl\u0119dem popularno\u015bci i nie ma \u0142atwego sposobu na \u201cskakanie\u201d mi\u0119dzy nimi w dokumentacji.<\/figcaption><\/figure><\/div>\n\n\n
Do Vue 2.7 trafi\u0142y te\u017c dwie funkcjonalno\u015bci \u015bci\u015ble powi\u0105zane z Composition API. Pierwsza z nich to `<script setup>, kt\u00f3re jest s\u0142odzikiem syntaktycznym umo\u017cliwiaj\u0105cym wygodne korzystanie z Composition API. Druga to CSS v-bind, czyli mo\u017cliwo\u015b\u0107 odnoszenia si\u0119 do zmiennych zdefiniowanych w cz\u0119\u015bci skryptowej w pliku CSS.<\/p>\n\n\n\n
\/\/ New features in Vue 2.7\n<script setup> \/\/ new script setup syntax\nconsole.log('hello script setup')\n<\/script>\n\n<script setup>\nconst theme = {\n  color: 'red'\n}\n<\/script>\n\n<template>\n  <p>hello<\/p>\n<\/template>\n\n<style scoped>\np {\n  color: v-bind('theme.color'); \/\/ CSS v-bind\n}\n<\/style><\/code><\/pre>\n\n\n\n
Co wa\u017cne, wszystkie nowe funkcjonalno\u015bci z Vue 2.7 kompatybilne s\u0105 pod wzgl\u0119dem typ\u00f3w z Vue 3.2. Oznacza to, \u017ce otwiera si\u0119 nowa droga migracji do Vue 3. Zespo\u0142y, kt\u00f3re z jakiego\u015b powodu wci\u0105\u017c zablokowane s\u0105 z migracj\u0105, b\u0119d\u0105 mog\u0142y teraz stopniowo przepisywa\u0107 sw\u00f3j kod do nowego API. Kiedy blokery znikn\u0105 powinno to znacz\u0105co przyspieszy\u0107 w\u0142a\u015bciw\u0105 migracj\u0119.<\/p>\n\n\n\n
Je\u015bli m\u00f3wimy ju\u017c o migracji do Vue 3, to podczas swojej prelekcji na Vue Amsterdam Evan You (tw\u00f3rca Vue) podzieli\u0142 si\u0119 danymi, z kt\u00f3rych wynika, \u017ce Vue 3 stanowi 25% wszystkich pobra\u0144 Vue. Cz\u0119\u015b\u0107 os\u00f3b interpretuje ten wynik pozytywnie, ale moim zdaniem nale\u017cy na niego patrze\u0107 raczej pesymistycznie. Od wydania Vue 3 min\u0119\u0142y ju\u017c dwa lata, a do ko\u0144ca wsparcia dla Vue 2 zosta\u0142o ju\u017c tylko p\u00f3\u0142tora roku. Czy pozosta\u0142e 75% projekt\u00f3w w tym\u00a0 czasie b\u0119dzie zd\u0105\u017cy si\u0119 zaktualizowa\u0107? \u015amiem w\u0105tpi\u0107.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Na powolny proces migracji do Vue 3 wp\u0142yw mia\u0142o wiele czynnik\u00f3w. Po pierwsze Vue 3 zosta\u0142o napisane w\u0142a\u015bciwie od zera. Nie tylko API wystawione dla klient\u00f3w w wielu miejscach uleg\u0142o modyfikacjom, ale te\u017c zmieni\u0142a si\u0119 wi\u0119kszo\u015b\u0107 wewn\u0119trznej logiki. To z kolei wymusi\u0142o na tw\u00f3rcach bibliotek gruntowne zmiany. <\/p>\n\n\n\n
Na dzie\u0144 dzisiejszy wi\u0119kszo\u015b\u0107 bibliotek posiada ju\u017c wersje kompatybilne z Vue 3. Nie przysz\u0142o to jednak bez problem\u00f3w, bo na wi\u0119kszo\u015b\u0107 z nich czeka\u0107 musieli\u015bmy p\u00f3\u0142 roku lub nawet rok. W skrajnych przypadkach, pomimo nieustannie trwaj\u0105cego dewelopmentu, nadal nie doczekali\u015bmy si\u0119 wersji kompatybilnej z Vue 3. Przyk\u0142adowo Nuxt 3, czyli odpowiednik Next.js dla Vue, nadal nie doczeka\u0142 si\u0119 stabilnej wersji\u2026<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Evan You utrzymuje, \u017ce drastyczne odci\u0119cie si\u0119 od Vue 2 by\u0142o niezb\u0119dne w celu sprawnego developmentu Vue 3. Podkre\u015bla jednak, \u017ce w przeci\u0105gu najbli\u017cszych lat raczej nie nale\u017cy spodziewa\u0107 si\u0119 powt\u00f3rki z rozrywki. Vue 3 stanowi solidn\u0105 podstaw\u0119 do rozwoju. Zesp\u00f3\u0142 Vue zamierza kopiowa\u0107 strategi\u0119 rozwoju od Reacta i Embera i wprowadza\u0107 nowe funkcjonalno\u015bci stopniowo nie \u0142ami\u0105c kluczowych kontrakt\u00f3w.<\/p>\n\n\n\n
Innym czynnikiem spowalniaj\u0105cym migracj\u0119 by\u0142 na pewno brak narz\u0119dzi u\u0142atwiaj\u0105cych ten proces w wersji 3.0. Na te poczeka\u0107 musieli\u015bmy do wydania Vue 3.1, kt\u00f3re nast\u0105pi\u0142o prawie rok od opublikowania poprzedniej wersji. Spokojnie mo\u017cna wi\u0119c powiedzie\u0107, \u017ce projekty w Vue 2 mia\u0142y do tej pory rok (a nie dwa) na dokonanie migracji, co troch\u0119 zmienia perspektyw\u0119.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/blog.vuejs.org\/posts\/vue-2-7-naruto.html<\/a>
https:\/\/www.monterail.com\/vue-report-amsterdam-2022<\/a>
https:\/\/markus.oberlehner.net\/blog\/vue-3-composition-api-vs-options-api\/<\/a>
https:\/\/youtu.be\/1ntuhMzAzU8<\/a>
https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/<\/a><\/p>\n\n\n\n
2. Najpierw Vue 3.3, p\u00f3\u017aniej nowa strategia kompilacji<\/h2>\n\n\n\n
Na Vue 3.3 przyjdzie nam jeszcze troch\u0119 poczeka\u0107, bo uka\u017ce si\u0119 ono dopiero pod koniec trzeciego kwarta\u0142u tego roku. Jest jednak na co czeka\u0107, bo b\u0119dzie to najciekawsze wydanie od dw\u00f3ch lat. Je\u015bli wszystko p\u00f3jdzie zgodnie z planem, to ustabilizowane zostanie zar\u00f3wno Suspense jak i Reactivity Transform.\u00a0<\/p>\n\n\n
\n
\"\"
Deweloperzy Vue, kiedy s\u0142ysz\u0105, \u017ce Suspense i Reactivity Transform zmierzaj\u0105 do Vue 3<\/figcaption><\/figure><\/div>\n\n\n
Ostatnimi czasy o Suspense mogli\u015bcie s\u0142ysze\u0107 ca\u0142kiem sporo w kontek\u015bcie Reacta oraz jego wsp\u00f3\u0142bie\u017cnego renderowania. W przypadku Vue mamy do czynienia ze zdecydowanie mniejszym zakresem funkcjonalno\u015bci. W Vue `<Suspense>` umo\u017cliwia\u0107 ma renderowania tymczasowego komponentu do czasu, a\u017c wszystkie asynchroniczne komponenty w drzewie zostan\u0105 za\u0142adowane.<\/p>\n\n\n\n
<Suspense>\n  <!-- component with nested async dependencies -->\n  <Dashboard \/>\n\n  <!-- loading state via #fallback slot -->\n  <template #fallback>\n    Loading...\n  <\/template>\n<\/Suspense><\/code><\/pre>\n\n\n\n
Drug\u0105 wyczekiwan\u0105 funkcjonalno\u015bci\u0105 jest Reactivity Transform, czyli w skr\u00f3cie szereg usprawnie\u0144 do Composition API. Wszystkie metody z Reactive API (m.in ref i computed) doczekaj\u0105 si\u0119 wersji poprzedzonych $. B\u0119d\u0105 to makra, kt\u00f3re umo\u017cliwi\u0105 \u0142adniejszy i \u0142atwiejszy dost\u0119p do danych, kosztem dodatkowego kroku kompilacji.<\/p>\n\n\n\n
\/\/ Before Vue 3.3\n<script setup>\nimport { ref } from 'vue'\n\nlet count = ref(0)\n\nconsole.log(count.value)\n\nfunction increment() {\n  count.value++\n}\n<\/script>\n\n<template>\n  <button @click="increment">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n\n\n\n
\/\/ Vue 3.3\n<script setup>\nlet count = $ref(0)\n\nconsole.log(count)\n\nfunction increment() {\n  count++\n}\n<\/script>\n\n<template>\n  <button @click="increment">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n\n\n\n
Podczas wspomnianego ju\u017c wcze\u015bniej Vue Amsterdam Evan You postanowi\u0142 podzieli\u0107 si\u0119 te\u017c dalekosi\u0119\u017cnymi planami zespo\u0142u. Jak zaznacza, na razie plany te s\u0105 w powijakach i mog\u0105 jeszcze ulec zmianom. Po zako\u0144czeniu pracy nad Vue 3.3 zesp\u00f3\u0142 rozwa\u017ca skupienie si\u0119 nad now\u0105 strategi\u0105 kompilacji na wz\u00f3r tej znanej z SolidJS. Dla przypomnienia, SolidJS to framework do z\u0142udzenia przypominaj\u0105cy Reacta, ale chwal\u0105cy si\u0119 lepsz\u0105 wydajno\u015bci\u0105 ze wzgl\u0119du na porzucenie Virtual DOM.\u00a0<\/p>\n\n\n\n
Now\u0105 strategi\u0119 renderowania w zale\u017cno\u015bci od potrzeb programi\u015bci mogliby zaaplikowa\u0107 albo do ca\u0142ego projektu, albo tylko do poszczeg\u00f3lnych komponent\u00f3w. Jak zapewnia Evan, nowa strategia kompilacji usuwaj\u0105ca VirtualDOM, b\u0119dzie mie\u0107 sporo korzy\u015bci. Po pierwsze, kod niezb\u0119dny do obs\u0142ugi wirtualnego drzewa komponent\u00f3w b\u0119dzie m\u00f3g\u0142 zosta\u0107 usuni\u0119ty z finalnej paczki, co powinno znacz\u0105co j\u0105 odchudzi\u0107. Po drugie, zu\u017cycie pami\u0119ci po stronie klienta powinno zmale\u0107, ze wzgl\u0119du na brak konieczno\u015bci przechowywania aktualnego stanu VirtualDOM w tej\u017ce.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Je\u015bli m\u00f3wimy o przysz\u0142o\u015bci Vue, to nie spos\u00f3b pomin\u0105\u0107 Vite, kt\u00f3ry ostatnio staje si\u0119 wschodz\u0105c\u0105 gwiazd\u0105 frontendowej spo\u0142eczno\u015bci. Pocz\u0105tkowo Vite by\u0142 narz\u0119dziem dedykowanym do budowania aplikacji napisanych we Vue. Rewolucja nadesz\u0142a dopiero wraz z opublikowaniem Vite 2.0, kiedy to sta\u0142 si\u0119 on narz\u0119dziem framework-agnostic. Co prawda narz\u0119dzie nadal budowane by\u0142o g\u0142\u00f3wnie z my\u015bl\u0105 o spo\u0142eczno\u015bci Vue, ale od pocz\u0105tku dostarcza\u0142 sporo dokumentacji dla Reacta. Szybko\u015b\u0107 narz\u0119dzia robi\u0142a wra\u017cenie, wi\u0119c nic dziwnego, \u017ce z czasem zacz\u0119\u0142a kusi\u0107 coraz wi\u0119cej React deweloper\u00f3w. Vite sta\u0142 si\u0119 tak popularny, \u017ce zd\u0105\u017cy\u0142 ju\u017c skanibalizowa\u0107 swojego najwi\u0119kszego konkurenta w postaci Snowplow.<\/p>\n\n\n
\n
\"\"
Co ciekawe nigdy nie doczekali\u015bmy si\u0119 Vite 1.0, bo powszechnie u\u017cywana w Vue 2 wersja Vite by\u0142a tak naprawd\u0119 Release Candidate, kt\u00f3ry nigdy nie doczeka\u0142 si\u0119 swojej premiery.<\/figcaption><\/figure><\/div>\n\n\n
W \u015brodowisku fronendowym na popularno\u015bci zyskuje jeszcze jedna biblioteka wywodz\u0105ca si\u0119 z Vue – Vitest. Jest to alternatywa typu drop-in dla Jest, kt\u00f3ra pod spodem wykorzystuje Vite. Dzi\u0119ki zastosowaniu Vite ca\u0142o\u015b\u0107 dzia\u0142a niesamowicie szybko. Bior\u0105c pod uwag\u0119 ilo\u015b\u0107 \u015brodk\u00f3w jakie zesp\u00f3\u0142 Vue po\u015bwi\u0119ca na Vite i Vitest, oraz jak mozolnie rozwija si\u0119 Jest, nie zdziwi\u0142bym si\u0119 gdyby w najbli\u017cszych latach uda\u0142o si\u0119 w ko\u0144cu zdetronizowa\u0107 kr\u00f3la JavaScriptowych test\u00f3w.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.monterail.com\/vue-report-amsterdam-2022<\/a>
https:\/\/youtu.be\/1ntuhMzAzU8<\/a>
https:\/\/vuejs.org\/guide\/built-ins\/suspense.html<\/a>
https:\/\/vuejs.org\/guide\/extras\/reactivity-transform.html<\/a>
https:\/\/vitest.dev\/<\/a>
https:\/\/vitejs.dev\/blog\/announcing-vite2.html<\/a><\/p>\n\n\n\n
Bonus #1: Co deweloperzy my\u015bl\u0105 o Vue?<\/h2>\n\n\n\n
W Vived wr\u0119cz kochamy statystyki. Kiedy w Vue Report 2022 zobaczy\u0142em prawie o\u015bmiostronnicow\u0105 sekcj\u0119 wype\u0142nion\u0105 statystykami i wykresami by\u0142em w si\u00f3dmym niebie. Wi\u0119kszo\u015b\u0107 z nich to co prawda \u201cprzeklejki\u201d z r\u00f3\u017cnych raport\u00f3w na temat Vue, ale bardzo dobrze podsumowywuj\u0105 one stan ekosystemu. Poni\u017cej dziel\u0119 si\u0119 z Wami kilkoma najciekawszymi obserwacjami, ale je\u015bli r\u00f3wnie mocno co ja kochacie cyferki i wykresy, to polecam zajrze\u0107 do oryginalnego raportu.<\/p>\n\n\n\n
1. Vue jest wykorzystywane przez zdecydowanie wi\u0119cej aplikacji ni\u017c Angular<\/h3>\n\n\n\n
Nie wa\u017cne, czy patrzymy na wyniki og\u00f3lne czy te\u017c zaw\u0119\u017cone do najpopularniejszych stron internetowych, Vue jest zdecydowanie popularniejsze od Angulara. K\u0142\u00f3ci si\u0119 to z wynikami ankiet dotycz\u0105cych u\u017cywanych w ostatnim roku narz\u0119dzi w\u015br\u00f3d deweloper\u00f3w, gdzie Angular nadal nieznacznie wygrywa z Vue.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
2. Vue zr\u00f3wnuje si\u0119 pod wzgl\u0119dem popularno\u015bci z Angularem<\/h3>\n\n\n\n
Niezale\u017cnie od tego kt\u00f3r\u0105 ankiet\u0119 postanowi\u0142em przeanalizowa\u0107, popularno\u015b\u0107 Angulara sukcesywnie maleje, a Vue sukcesywnie ro\u015bnie. W tym roku popularno\u015b\u0107 obu tych framework\u00f3w wyr\u00f3wna\u0142a si\u0119, co oznacza, \u017ce za rok kolejno\u015b\u0107 na frontendowym podium mo\u017ce ulec zmianie.\u00a0<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
3. Ro\u015bnie liczba os\u00f3b niezadowolonych z Vue<\/h3>\n\n\n\n
Popularno\u015b\u0107 Vue sukcesywnie ro\u015bnie. Niestety przez ostatnie 3 lata sukcesywnie ro\u015bnie r\u00f3wnie\u017c liczba os\u00f3b niezadowolonych z Vue. Wci\u0105\u017c nie s\u0105 to alarmuj\u0105ce liczby, ale ci\u0119\u017cko powiedzie\u0107, czy wynika to z dojrza\u0142o\u015bci frameworka czy te\u017c ze wspomnianych ju\u017c dzi\u015b problem\u00f3w z migracj\u0105 do Vue 3.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.monterail.com\/vue-report-amsterdam-2022<\/a><\/p>\n\n\n\n
Bonus #2: Historia Vue<\/h2>\n\n\n\n
Za ka\u017cdym razem, kiedy w przegl\u0105dach wspominam o Vue polecam Wam dokument na temat historii tego frameworku od Honeypot. Nie inaczej b\u0119dzie i tym razem. Je\u015bli jeszcze go nie widzieli\u015bcie i szukacie czego\u015b ciekawego na weekendowe popo\u0142udnie, to naprawd\u0119 warto.<\/p>\n\n\n\n
\n