Vue.js 3.0 – nowości i zmiany. Co przyniosła nowa wersja?

Premiera jednej z najpopularniejszych bibliotek JavaScript zbliżała się wielkimi krokami. Po blisko 2 latach od pierwszego ogłoszenia prac nad Vue 3 wiemy już wszystko na temat nowych funkcjonalności oraz zmian, które nadeszły w nowym głównym wydaniu frameworka. Vue 3 od środka nie przypomina już siebie z wersji 2, ponieważ projekt został całkowicie przepisany.

Nowa wersja Vue powstała z kilku powodów. Pierwszym była chęć wykorzystania nowych funkcjonalności, które nadeszły wraz ze specyfikacją ECMAScript 2015 (znanym także jako ES6). Drugim natomiast były zarówno problemy projektowe, jak i architektoniczne, które ujawniły się w czasie rozwoju wersji drugiej, stały się one przeszkodami w dalszym rozwoju Vue. Sama ich naprawa byłaby ryzykowna i czasochłonna, a przepisanie całego frameworku dało twórcom możliwość na ponowne przemyślenie kodu.

Długo nie znaliśmy release date

Jeszcze kilka dni temu Vue 3 znajdowało się na etapie Release Candidate, co oznaczało, że wszystkie zmiany oraz funkcjonalności zostały zmergowane oraz zaimplementowane. Wszyscy skupiają się na tym, żeby wyeliminować błędy, poprawić typy oraz zapewnić jak największą stabilność. Przypuszczaliśmy, że ze względu na bardzo zaawansowany etap prac zbliżający się ku końcowi, wersja stable zostanie opublikowana już tej jesieni. Nie myliliśmy się, bo w ubiegły piątek Vue ogłosiło release nowej wersji.

Reaktywność

Zdecydowano się na ponowne przemyślenie i zaimplementowanie nowej formy reaktywności, wykorzystując Proxy API. W Vue 2 zostały wykorzystane settery oraz gettery bazując na Object.defineProperty, gdzie jednym z ograniczeń tego podejścia jest brak możliwości wykrycia dodawania nowych właściwości do obiektu stanu. Nowe podejście, oprócz wyeliminowania problemów i ograniczeń, jest zdecydowanie wydajniejsze oraz posiada mniejszy apetyt na zużycie pamięci.

Dodatkowo udostępniono Reactivity API, które wystawia dla programistów szereg lekkich funkcji do zarządzania stanem oraz reagowaniem na niego. Funkcjonalność została oddzielona od instancji komponentów, co oznacza, że można korzystać z niej w dowolnym miejscu, pozwalając na projektowanie różnorodnych przypadków użycia m.in. możliwość tworzenia stanowych funkcji, które mogą być wykorzystane w wielu komponentach.

TypeScript

Twórcy zdecydowali się, że nowa główna wersja Vue zostanie napisana w całości w TypeScriptcie, który dostarczy ulepszone typy oraz zdecydowanie lepszą integrację z tym językiem. Takie podejście sprawi, że praca w tym frameworku stanie się jeszcze przyjemniejsza ze względu na zaawansowane podpowiadanie składni w popularnych edytorach, takich jak Visual Studio Code czy WebStorm. Nawet deweloperzy piszący w czystym JavaScripcie skorzystają z lepszej obsługi typów przez IDE.

Teleport

Jednym z ciekawszych komponentów, które zostaną wprowadzone wraz z Vue 3 jest teleport, który w dużym skrócie pozwoli na przeniesienie dowolnego elementu UI z wewnątrz komponentu w inne dowolne miejsce na stronie. Można powiedzieć, że jest to natywna implementacja portali z Reacta lub wchłonięcie zewnętrznego rozwiązania portal-vue dla Vue 2. Ze szczegółami implementacyjnymi oraz z dokładną zasadą działania można zapoznać się w oficjalnym dokumencie RFC na GitHubie.

```
// video.vue
<teleport to="#footer">
  <video src="./vue3.mp4">
</teleport>

// footer.vue
<div id=”footer”></div>
```

Fragment

Komponenty będą potrafiły zwrócić bezpośrednio wiele nodów. To znaczy, że już więcej nie będzie trzeba wykorzystywać dodatkowego “diva”, który będzie je oplatał. Jednakże wykorzystując fragmenty, należy wskazać, do jakiego elementu mają zostać przypięte atrybuty za pomocą składni `v-bind=”$attrs”`.

Vue 2

```
<template>
  <div>
    <h1>justjoin.it</h1>
    <p>Vue 3 is coming</p>
  </div>
</template>
```

Vue 3

```
<template>
    <h1>justjoin.it</h1>
    <p v-bind=”$attrs”>Vue 3 is coming</p>
</template>
```

Composition API

Pisząc duże i skomplikowane komponenty, nasz kod staje się mniej czytelny i trudniejszy do zarządzania. Wszystkie te problemy spowodowały, że i na tej płaszczyźnie Vue 3 zostało usprawnione poprzez wprowadzenie Composition API, będącego zestawem addytywnych, opartych na funkcjach API, dzięki którym możemy podzielić kod poprzez kompozycję logiki komponentu, co pozwala zwiększyć czytelność dużych komponentów oraz poprawi organizację kodu. Takie odseparowane funkcjonalności mogą być dzielone na wiele komponentów, powodując, że stają się reużywalne.

Programiści, wykorzystując rozwiązania mixins, mixins factory czy scoped slots do rozwiązania wcześniej opisanych problemów, z pewnością odetchną z ulgą zapoznając się z tą specyfikacją. Do tego posiada wsparcie linterów, TypeScript czy IntelliSense w Visual Studio Code. Sam temat jest niezwykle złożony i rozbudowany, przez co nie jest możliwe opisanie go w kilku zdaniach. Dlatego odsyłam do dokumentu RFC, w całości objaśniającego ten temat.

Oferty pracy z

Optymalizacja rozmiaru

Produkcyjna paczka skompresowana gzipem zajmie około 20 kb, jednakże twórcy dokonali zmian, które powodują, że Vue 3 będzie jeszcze mniejsze i będzie mogło zajmować w najlepszym przypadku tylko 10 kb. Jest to świetna informacja, ponieważ jak wiadomo, wielkość kodu JavaScript także ma wpływ na wydajność. Redukcja rozmiaru jest w ogóle możliwa dzięki zaprojektowaniu kodu w taki sposób, że komponenty, które nie są używane, zostaną wyeliminowane z bundla produkcyjnego, stosując technikę tree shaking.

Dla przykładu, jeżeli nie wykorzystasz w swojej aplikacji elementu transition, to zostanie on pominięty w trakcie kompilacji. Ma to także taką zaletę, że każda nowa funkcjonalność dodana do Vue nie będzie musiała powodować, że framework zwiększy swoją wagę.

Jeszcze szybszy

Wraz z przepisaniem Virtual DOM zostało zaimplementowanych kilka technik, które pozwoliły na dodatkowe optymalizacje w szybkości działania Vue. Przy kompilacji są stosowane wskazówki, żeby zredukować runtime overhead, co oznacza, że będzie wykorzystywał mniej zasobów CPU czy pamięci do poprawnego działania. Tworzone są bardziej efektywne virtual nodes poprzez omijanie niepotrzebnych warunków, stając się łatwiejsze do optymalizacji przez silniki JavaScript i redukując przerenderowywanie komponentów. Dodatkowo kompilator potrafi wykryć statyczne elementy drzewa DOM (static tree hoisting) oraz statyczne właściwości (static props hoisting), dzięki czemu runtime będzie potrafił ominąć łatanie całego drzewa, wiedząc, że element i tak nigdy nie zostanie zmodyfikowany.

Ulepszono także mechanizm slotów. Kompilator generuje je jako funkcje, które wykonują się, gdy podrzędne komponenty wywołają funkcję render. W ten sposób, gdy zawartość slotu się zmieni, przerenderowywane zostaną tylko komponenty podrzędne, a gdy komponent nadrzędny zostanie przerenderowany, ale zawartość się nie zmieni, dzieci nie będą ponownie wykonywane. Wszystkie te modyfikacje spowodowały, że Vue, mimo że był już szybki – stanie się jeszcze szybszy!

Proces RFC dla Vue, Vue Router, Vuex oraz Vue CLI

Żeby projekt był przemyślany, spełniał oczekiwania deweloperów oraz rozwiązywał wątpliwości co do szczegółów implementacyjnych, potrzebna jest żywa dokumentacja, przy której można przedyskutować każdy szczegół ze społecznością. W związku z tym zdecydowano się na przyjęcie procesu RFC (Request for Comments) dla Vue, Vue Router, Vuex, Vue CLI, aby użytkownicy mogli przekazywać opinie na temat istotnych i dużych zmian, które będą miały pojawić się w tych projektach.

Wprowadzenie zmian w v-model czy nowa funkcjonalność, taka jak komponent Teleport, przeszły przez ten proces, gdzie zostały przedyskutowane i dostosowane do opinii oraz sugestii społeczności. Oczywiście bez przeszkód każdy może zaproponować własne pomysły, publikując issue z szablonu na stronie projektu.

Łatwiejszy w rozwoju

Mimo udogodnień dla programistów, którzy będą używać Vue podczas pisania aplikacji czy pomniejszych funkcjonalności w swoich projektach, wiele usprawnień oraz zmian zostało także wprowadzonych w samym repozytorium, w celu usprawnienia pracy programistów, którzy poświęcają swój czas na rozwijanie projektu. Vue 3 przynosi łatwiejszy w utrzymaniu kod źródłowy ze względu na przepisanie go na TypeScript. Przyjęto także strategie monrepo, gdzie poszczególne moduły zostały odłączone od głównego projektu i zostały umieszczone w odseparowanych paczkach, które posiadają własne indywidualne API, testy oraz definicje typów. Dzięki temu programistom łatwiej jest zrozumieć, utrzymać i rozwijać istniejący kod.

Przyjaźniejszy dla platform natywnych

Runtime został napisany z myślą platform agnostic, co oznacza, że pisanie we Vue na inne platformy niż web (iOS, Android) będzie łatwiejsze. Deweloperzy, którzy będą chcieli wykorzystać renderer w swoich projektach, nie będą musieli robić forka i dostosowywać go do swoich potrzeb tak jak zrobili to twórcy projektów Weex czy NativeScript Vue. Teraz wystarczy dodać Vue do zależności i stworzyć własny custom renderer.

Co dalej z Vue 2?

Twórcy obiecują, że wsparcie do wersji drugiej nie zostanie zaniedbanie wraz z wydaniem “trójki”. 18 miesięcy po premierze Vue 3, wersja 2.x otrzyma długoterminowe wsparcie (LTS), podczas którego będą naprawione bugi oraz będą wprowadzane łatki bezpieczeństwa. Oprócz tego Vue 2 otrzyma wsparcie w postaci pluginów, które będą przyzwyczajać użytkowników do nowych zmian, a jednym z nich jest wsparcie do Composition API.

Internet Explorer 11

Rozwiewając obawy developerów zmuszonych wspierać IE 11, Vue 3 będzie wspierać tę przeglądarkę – z jednym małym haczykiem… Większość nowości i funkcjonalności posiada polyfille z wyjątkiem Proxy API. Dlatego też zdecydowano się opakować reaktywność znaną z Vue 2 w to samo API i dystrybuować dla buildów ze wsparciem dla Internet Explorer 11. Niestety nie da się technologicznie przeskoczyć ograniczeń, jakie posiada reaktywność bazująca na Object.defineProperty, więc trzeba mieć na uwadze, że odseparowany build dla IE będzie posiadał te same ograniczenia znane z Vue 2.

Podsumowanie

Po blisko dwóch latach można śmiało i z czystym sumieniem powiedzieć, że Evan You wraz z zespołem dostarczy jeszcze lepszą odsłonę już świetnego frameworku. Dostarczono mnóstwo usprawnień i wiele nowych funkcjonalności, co – mam nadzieję – spowoduje, że z Vue zdecyduje się korzystać jeszcze więcej programistów oraz firm dostarczając świetne komponenty i oprogramowanie zasilane przez ten framework.

Zapraszamy do artykułu dotyczącego rozpoczęcia nauki Vue oraz listy miejsc z darmowymi kursami programowania, również we Vue. Zdjęcie główne artykułu pochodzi z unsplash.com.