Technologie

Vue 3.0 - co wprowadza nowa wersja frameworka?

softwarehouse,softwaredevelopmentcompany,VUE,Vue.js,Vue.js 3.0,VUE 3,Framework,aktualizacja
softwarehouse,softwaredevelopmentcompany,VUE,Vue.js,Vue.js 3.0,VUE 3,Framework,aktualizacja

Na ten moment czekaliśmy od dłuższego czasu. Najnowsza wersja frameworku Vue.js, czyli wydanie 3, po prawie dwóch latach oczekiwania zostało oficjalnie opublikowane.

Vue.js jest jednym z najpopularniejszych frameworków do budowania interfejsów użytkownika oraz Single Page Applications. Stworzony został w 2014 przez byłego developera Google - Evan You. Do dzisiaj otrzymał ponad 176 tysięcy gwiazdek na Github, a także niesamowite wsparcie społeczności.


Vue.js London

Vue.js London to duża, globalna konferencja dla frontend developerów.


Długo wyczekiwana premiera

Na nową wersję musieliśmy czekać aż 2 lata. Informacja o rozpoczęciu prac nad nową wersją Vue.js została podana 21 września 2018 roku na konferencji Vue.js London. Przez długi czas żyliśmy w wielkiej niepewności śledząc nowe kolejne wydania wersji testowych. Wreszcie 18 września 2020 roku została oficjalnie zaprezentowana nowa wersja frameworka.

Evan You, twórca Vue.js określił najnowsze wydanie jako szybsze, mniejsze oraz łatwiejsze w utrzymaniu i wykorzystaniu w aplikacjach natywnych.


Wydajność

Vue 3 od środka nie przypomina już siebie w wersji 2, ponieważ uległo całkowitej przebudowie. Wpłynęło to także na rozmiar. Mówimy tutaj o rozmiarze gotowej aplikacji Vue, która jest do 40-45% lżejsza. Zostało to osiągnięte dzięki m.in.:

  • zastosowaniu techniki tree-shaking, która pomija nieużywane linijki kodu JS (a także wbudowane funkcjonalności) w momencie tworzenia builda,
  • początkowemu renderowaniu,
  • a także mniejszemu zużyciu zasobów.

Typescript

Framework został napisany w całości przy wykorzystaniu TypeScript. Zdecydowanie poprawia to integrację tej technologii w projektach opartych na Vue i sprawia, że korzystanie z TypeScript stanie się o wiele przyjemniejsze.

Wspaniałe jest to, że użycie TypeScript w projektach Vue nadal będzie w pełni opcjonalne. Osoby mniej doświadczone nadal będą mogły w pełni wykorzystać potencjał narzędzia bez używania dodatkowej technologii.


Global API

  • Tworzenie aplikacji Vue - Pierwszą zmianą jaką ujrzymy po postawieniu nowej wersji frameworka, będzie bez wątpienia sposób montowania naszego rootowego obiektu Vue.

Vue 2

Tworzymy nową instancję obiektu Vue.


Vue 3 

Używamy specjalnej funkcji o nazwie createApp, która jest dostępna na obiekcie Vue. Dodatkowo “data” zawsze musi być metodą - funkcją zwracającą obiekt, który jest naszym “state”. Dla przypomnienia wcześniej “data” mogła przyjmować formę obiektu.


  • Zmiany w montowaniu Vue Router i Vue Store.

Vue 2


Vue 3 

Aby utworzyć store lub router należy użyć specjalnej metody createStore() /createRouter(), a następnie wywołać use() na obiekcie naszej aplikacji.

Komponenty, dyrektywy i zewnętrzne biblioteki, które dodajemy do naszej aplikacji, muszą być montowane do zarejestrowanego obiektu “app”. Wcześniej były montowane do globalnego obiektu Vue.


Transitions i zmiany w komponentach Router

  • Transitions v-enter zostało zastąpione v-enter-from. 
  • Router-link - niewymagane jest już przypisywanie parametru “exact” do głównego elementu prowadzącego do “/”.

Composition API - alternatywa dla React Hooks?

Composition API to jedna z kluczowych zmian w nowej wersji Vue 3. Celem Composition API jest podniesienie jakości kodu i wymuszenie pisania komponentów w schludniejszy sposób. Wykorzystując duże i skomplikowane komponenty, drastycznie spada czytelność naszego kodu, a przede wszystkim struktura aplikacji staje się trudniejsza do zarządzania oraz wdrażania kolejnych funkcjonalności.

Vue 2


Vue 3

Używanie Composition API jest w pełni opcjonalnie. Mimo że jest to rekomendowany sposób, to nic nie stoi na przeszkodzie, aby używać Options API, znanego z Vue 2.

Reużywanie logiki komponentów przypomina bardzo podejście stosowane w React Hooks. Mimo że metody w Vue działają trochę inaczej, to samo założenie pozostaje bardzo zbliżone.

Developerzy, którzy posiadają aplikacje w wersji 2 mogą przetestować działanie nowego API wykorzystując ten plugin: https://github.com/vuejs/composition-api


Teleport

Teleport służy do przeniesienia dowolnego elementu UI z wewnątrz komponentu w inne dowolne miejsce na stronie.

Doskonałym przykładem wykorzystania może być modal lub wszelkiego rodzaju okna dialogowe. Przykład wykorzystania:

Tworzymy komponent <teleport to="#element">, w którym możemy podać id elementu do którego będzie teleportowana cała zawartość znajdująca się pomiędzy znacznikami <teleport></teleport>. Warto wspomnieć, że “#element” może zostać umieszczony całkowicie poza naszą aplikacją #app.


Fragment

Fragment pozwala wykorzystywać wiele root elementów w <template> naszego komponentu.

W poprzedniej wersji Vue, wszystkie elementy w naszym komponencie musieliśmy oplatać dodatkowym divem. Teraz nie będzie to wymagane.

Vue 2

Vue 3


V-model

Vue 3 pozwala na dołączanie wielu v-models do naszych komponentów. Dla porównania Vue 2 umożliwiało wykorzystać jedynie jeden v-model na komponent.


Eksperymentalne funkcjonalności

Nowa wersja Vue przyniosła ze sobą także eksperymentalne funkcjonalności. Dwie z nich dotyczą Single File Components (SFC). Zostały zaimplementowane głównie w celu uzyskania feedbacku od społeczności.

- SFC Composition API Syntax Sugar - dla korzystania z Composition API w SFC

- SFC State-driven CSS Variables - zmienne CSS oparte na stanie wewnątrz SFC

Więcej o zmianach i korzyściach jakie przynosi aktualizacja możemy przeczytać w oficjalnej dokumentacji projektu.


Wpływ społeczności

Dla twórców Vue bardzo liczy się zdanie społeczności. Przy tworzeniu najnowszej wersji został przyjęty proces RFC (Request for Comments), aby użytkownicy mogli przekazywać opinie na temat istotnych zmian w działaniu frameworka.


Czy to jest koniec Vue 2?

Czy wprowadzenie nowej wersji oznacza natychmiastowe porzucenie dwójki? Nic bardziej mylnego. Vue 2 dostanie długoterminową wersję LTS, która dostarczy część ważnych funkcjonalności wprowadzonych w nowej wersji.


Podsumowanie

Kolejny raz dostaliśmy dowód na to, że warto być cierpliwym. Evan You wraz z zespołem dostarczyli jeszcze lepszą odsłonę wspaniałego już frameworka. Postawienie na TypeScript było strzałem w dziesiątkę. Mam nadzieję, że ten krok spowoduje częstsze sięganie po Vue przez jeszcze większą liczbę developerów niż dotychczas.


Potrzebujesz partnera technologicznego zaangażowanego w Twój sukces? Odezwij się

Paweł Turkot
Kreatywny Front-end Developer z obsesją na punkcie optymalizacji. Pasjonat technologii webowych i entuzjasta JavaScriptu. W pogoni za lepszym kodem, stale poszerza swoją wiedzę i sprawdza nowe rozwiązania. Prywatnie miłośnik oldschoolowej japońskiej motoryzacji.

Czego potrzebujesz?

Strony internetowej

Systemu informatycznego

Aplikacji mobilnej

Projektu graficznego

Wsparcia technicznego

Chatbota

Preferowana forma kontaktu

Podaj dane kontaktowe

Administratorem danych osobowych jest HighSolutions sp. z o.o. (dalej „Spółka”) z siedzibą w Tarnowie Podgórnym, ul. Szkolna 21/1, 62-080 Tarnowo Podgórne, adres email kontakt@highsolutions.pl. Szczegółowe informacje o przetwarzaniu danych osobowych znajdują się w polityce prywatności.

Dziękujemy!

Odezwiemy się wkrótce