W związku z nadchodzącym wydaniem Vue 3 narasta dużo szumu. Jest to bardzo emocjonujące wydarzenie i sprawiło ono, że Nimrod Kramer – Co-Founder, CEO w daily.dev  chciał pomóc społeczności deweloperów przygotować się na następną wersję tego popularnego frameworka.

W tym poście zostaną omówione następujące tematy:

  • Dlaczego Vue 3 jest tak ekscytujący
  • Funkcje i zmiany w Vue 3
  • Data premiery Vue 3
  • Eksperymentowanie z Vue 3: dostępne ważne narzędzia
  • Jak przygotować się do migracji z Vue 2
  • Nauka Vue 3 – samouczki i poradniki
  • Często zadawane pytania (FAQ)

Zaczynajmy!

Vue 3 będzie niesamowity😊

Popularność Vue rośnie, a projekt z każdą aktualizacją staje się szybszy i lepszy. Evan You ogłosił nową wersję Vue na konferencji w Londynie 15 listopada 2018 r. Generalnie, głównym zadaniem Vue 3 jest szybsze, wygodniejsze kierowanie na natywne i jeszcze bardziej przyjazne dla użytkownika.

Między innymi istnieje nowe API kompozycji do tworzenia komponentów. Nie wprowadza nowych koncepcji do Vue, ale raczej eksponuje podstawowe możliwości Vue, takie jak tworzenie i obserwowanie stanu reaktywnego jako samodzielnych funkcji. Ta funkcjonalność jest przydatna dla programistów Vue na wszystkich poziomach.

Mówiąc najprościej, zespół Vue wykonuje intensywną pracę nad ulepszaniem interfejsów API platformy, aby Vue 3 był:

  • Szybszy
  • Mniejszy
  • Łatwiejszy  w utrzymaniu
  • Łatwiejszy w kierowaniu natywnym
  • Poprawiał doświadczenie programistów

Jeśli nie możesz się doczekać, aż zostanie wydany – możesz już teraz zacząć eksperymentować z wersją alfa Vue 3. Dostępna jest również wstępna dokumentacja API (API Reference).

Funkcje i zmiany w Vue 3

Czego można się spodziewać po Vue 3 – przegląd

  • Kompozycja API: To nowe API przypomina trochę React Hooks. Jest to nowa składnia, która umożliwia używanie funkcji do organizowania kodu według funkcji, a nie obiektu. Ten interfejs API będzie działał wraz z dobrze znanym interfejsem Options API w Vue 2 – nie zastąpi go. Oznacza to, że możesz bez obaw kontynuować budowanie komponentów w sposób, do którego jesteś przyzwyczajony. Możesz jednak rozpocząć tworzenie za pomocą interfejsu Composition API, który zapewnia bardziej elastyczną organizację kodu i możliwości ponownego wykorzystania logiki, a także inne ulepszenia.
  • Obsługa języka TypeScript: jedna z najbardziej oczekiwanych integracji w tworzeniu stron internetowych. Vue 3 będzie miała wbudowany TypeScript i pozwala opcjonalnie używać TS w twoim projekcie. W każdym razie nie wpłynie to na pracę programistów działających z ES.
  • Szybszy montaż i naprawianie: Virtual DOM został całkowicie przepisany w celu zwiększenia wydajności. Dodano wskazówki dotyczące czasu kompilacji, aby zmniejszyć obciążenie środowiska uruchomieniowego. Pomoże to pominąć niepotrzebne rozgałęzienia stanu i uniknąć ponownego renderowania. Co istotne, można spodziewać się nawet o 100% szybszej inicjalizacji instancji składnika przy dwukrotnie większej szybkości i połowie zużycia pamięci.
  • Wyświetl deklarację: Vue 3 będzie nadal obsługiwać szablony, a także funkcje renderowania. Najważniejsze jest to, że Vue 3 zoptymalizował prędkość renderowania, na przykład poprzez przyspieszenie algorytmów „diff”, które działają za kulisami, dzięki czemu Vue „rozpoznaje” co należy ponownie wyrenderować bez zakłóceń.
  • Jest znacznie mniejszy: będzie można szybko pozbyć się niewykorzystanego kodu. Obecnie zminimalizowane i skompresowane środowisko wykonawcze Vue waży około 20 kB (22,8 kB dla obecnej wersji 2.6.10). Szacuje się, że pakiet Vue 3 waży około połowy z tego, czyli około ~ 10kB!
  • Rodzime portale: teraz nazywane teleportacją
  • Fragmenty: elementy wirtualne, które nie będą renderowane w drzewie DOM.
  • Hooks API (nadal w fazie eksperymentalnej)
  • Obsługa podziału czasu (nadal w fazie eksperymentalnej)

Więcej informacji o nadchodzących funkcjach Vue 3

Nie chcemy przytłaczać Was opisami. Jest mnóstwo postów, a my wybraliśmy tylko te, które są techniczne, profesjonalne i zawierają praktyczne przykłady:

Data premiery Vue 3

Oficjalna premiera jest obecnie planowana na III kwartał 2020. Te informacje są oparte na official roadmap mega projektu Vue 3.

Obecny status wdrożenia:

  • Jest już na etapie kandydata do wydania (RC) i został publicznie ogłoszony! Oznacza to, że API i implementacja są stabilne i nie będzie już żadnych zmian. Na tym etapie trwają prace nad „kompilacją kompatybilną”: wersja 3.0, zawiera warstwy kompatybilności dla API 2.x. Ta kompilacja będzie również dostarczana z flagą, którą możesz włączyć, aby emitować ostrzeżenia o wycofaniu w przypadku użycia interfejsu API w wersji 2.x w aplikacji. Mimo że pierwsze szacunki Evana You dotyczyły 2019 r., osiągnęli tak zaawansowany etap, co daje powód, by sądzić, że są bardzo zmotywowani do uruchomienia w 2020 r.
  • Wiele z najważniejszych narzędzi Vue 3 jest już w fazie eksperymentów lub w  publicznej fazie alfa (zostaną one omówione szczegółowo poniżej).
  • Dokumentacja Vue 3 oraz przewodnik migracji zostały już opublikowane i wyjaśniają, co nowego znajdzie się w Vue 3. Oba są nadal w wersji beta, ale już całkiem kompletne (i bardzo czytelne i dobrze skonstruowane, tak jak dokumenty Vue zawsze).

Powody, by kwestionować datę premiery 😒       

  • Na tym etapie myślę, że lepiej przyjąć ten termin (III kwartał 2020) z przymrużeniem oka. Nadchodzące Vue 3 zostało zapowiedziane dawno temu w 2018 roku, a data premiery była już wielokrotnie opóźniana.
  • Dodatkowo ostatnia aktualizacja harmonogramu miała miejsce 29 czerwca. Od tego czasu mogło się wydarzyć wiele rzeczy, które mogą wpłynąć na datę premiery.

Jeśli chcecie zagłębić się w szczegóły tego, co zostało oficjalnie opublikowane, zapoznajcie się z pełną prezentacją na temat State of Vue z kwietnia 2020 r., a także miejcie oko na ostatnie zmiany.

Eksperymentowanie z Vue 3: dostępne ważne narzędzia

Jak przygotować się do migracji z Vue 2

Jeśli Twój projekt jest stosunkowo mały i stosujesz się do specyfikacji RFC i unikasz funkcji, które są przestarzałe, ten proces powinien być dość szybki! W każdym razie najlepiej zacząć od zapoznania się z przewodnikiem po migracji. Zwróćcie uwagę, że przewodnik migracji jest nadal w wersji beta, dlatego też możecie spodziewać się wkrótce zmian, gdy Vue 3 zostanie oficjalnie wydany.

Nauka Vue 3 – samouczki i poradniki

Często zadawane pytania (FAQ)

Chcę się nauczyć Vue. Powinienem zacząć od Vue 2 czy Vue 3?

Jeśli dopiero zaczynasz uczyć się frameworka, zalecamy rozpoczęcie od Vue 2. Głównym powodem jest to, że Vue 3 nie wymaga radykalnych przeprojektowań, a ogromna większość twojej wiedzy o Vue 2 będzie nadal dotyczyła Vue 3. Dlatego nie ma sensu czekać na oficjalną datę premiery Vue 3. Zacznij uczyć się Vue 2, a kiedy Vue 3 zostanie wydany, będziesz na właściwej pozycji, aby nadrobić zaległości.

Co stanie się z Vue 2.x po wydaniu Vue 3?

Pojawi się jeszcze jedno wydanie (2.7), które przeniesie funkcje zgodne z 3.x do 2.x.

Ostrzeżenia o wycofaniu zmian w wersji 3.x. Będzie to ostatnia pomocnicza wersja 2.xi będzie oferowana jako LTS (długoterminowe wsparcie) przez 18 miesięcy. Będzie nadal otrzymywać krytyczne aktualizacje zabezpieczeń nawet po okresie LTS.

Widziałem kilku krytyków Vue 3. Czy jest coś, czym powinienem się tym przejmować?

Rzeczywiście, w sieci (głównie na Reddit) toczyła się aktywna dyskusja, która wzbudziła poważne obawy, które okazały się błędne. Wśród obaw programiści twierdzili, że nowy interfejs Composion API Vue 3 może nie być czysto addytywny i że obecny interfejs API Vue 2 zostanie wycofany. Te plotki powodują, że ludzie obawiają się, że cały czas spędzony na nauce Vue był całkowitą stratą czasu. Ale znowu, nic z tego nie ma już znaczenia. Możesz mieć pewność, że interfejs Composition API będzie wyłącznie addytywny, a obecny interfejs API będzie nadal obsługiwany.

Na zakończenie

To wszystko na teraz. Mam nadzieję, że w tym poście znajdziecie cenne zasoby i uzyskacie jasny obraz tego, czego możecie oczekiwać od Vue 3. Rozsądnie jest założyć, że wszyscy powinniśmy spodziewać się więcej informacji wkrótce, więc upewnijcie się, że śledzicie oficjalną stronę Vue News do aktualizacji.

Ps. Artykuł został pierwotnie opublikowany na blogu daily.dev  ->  https://daily.dev/posts/vue-3-is-coming-what-to-expect-and-how-to-prepare

Nimrod Kramer Bio: Serial tech entrepreneur. Co-Founder, CEO at daily.dev — Helping busy developers stay updated with the latest tech news ⚡️