VueJS daj się poznać

Długo się zastanawiałem jaki framework dla frontendu wybrać. Na rynku mamy wielu kandydatów m.in: Angulara 1.x, Angulara 2.x, Aurelię, VueJs i klasyk- React. Oczywiście to nie wszystkie i pewnie nie wspomniałem o jakichś ważnych, ale tylko tymi miałem jakąkolwiek styczność, czy to przez petprojects czy też na prezentacjach. Jeżeli chodzi o Angulara 1.x, pisałem w nim drobne aplikacje i całkiem nieźle mi się z nim pracowało. Przyjemna separacja zależności, wsparcie dla DI, serwisy, fabryki itp. To co lubię. Wiele złych rzeczy można na jego temat wyczytać, ale ja ich nie odczułem, może dlatego, że nie robiłem w nim żadnego większego projektu.

No ale mamy przecież Daj Się Poznać i fajnie byłoby nauczyć się czegoś nowego. Angular 2.x i Aurelię widziałem na kilku prezentacjach i wydają mi się zbyt „ciężkie”. Szukałem czegoś bardziej finezyjnego, lżejszego. Został React oraz VueJs. Reacta kojarzę tylko za sprawą Facebooka, a VueJs dlatego, że od jakiegoś czasu stał się dosyć modny. Długo nie mogłem się zdecydować. Po spotkaniu na gliwickiej grupie DevDuck postawiłem na VueJs.
Tym postem z przydługim wstępem chciałbym rozpocząć „mikro” serię wpisów na temat mojej męki w świecie frontendu.
Początki? To zawsze jest trudne. A w froncie? To jest coś niesamowitego… Dla osoby, która dość długi czas siedzi w backendzie, przestawienie się jest co najmniej trudne. Ilość rzeczy, które trzeba ogarnąć jest naprawdę spora.

Tak więc VueJs. Oj, ależ inne podejście od znanego mi AngularaJS. Przede wszystkim, odejście od klasycznego MVC i warstw na rzecz architektury „wertykalnej”, architektury luźno powiązanych komponentów.

Single File Components

W pierwszej kolejności podczas nauki szukałem sposobu na kopozycje projektu, zastanawiałem się jak rozdzielać te małe moduły w systemie plików. Jeżeli komponent ma zawierać swój template HTML, obsługę w JS oraz styl, to musi być coś co to „opakuje”. Tym czymś są pliki .vue. Tworzymy jeden plik per komponent:

Segregacja komponentów

Poniżej przykład prostego komponentu:

Mamy w nim trzy podstawowe elementy:

  • template – w ramach tego tagu piszemy cały kod HTML jaki ma być wyświetlony w miejsce naszego komponentu. Ważna rzecz, taki element może zawierać wyłącznie jeden nadrzędny element, także składnia poniżej będzie powodować błędy podczas budowania paczki w webpacku.

A poniżej poprawna implementacja:

  • script – w nim umieszczamy całą logikę komponentu. Jest ściśle określona struktura takiego skryptu. Opiszę go w kolejnym wpisie.
  • style – w nim możemy „upiększyć nasz komponent”. Zwrócić należy uwagę, że nie jesteśmy wcale zmuszeni pisać w czystym CSS. Jeżeli dołączymy atrybut z nazwą składni (w tym przypadku lang=scss) oraz dołączymy odpowiedni loader w webpacku, możemy porzucić pisanie czystego CSS na rzecz SCSS, LESS czy innych.

Ciekawym dodatkiem do tego fragmentu jest możliwość zamknięcia (ang. scoped) stylu na wyłącznie ten komponent, wystarczy, że umieścimy atrybut scoped w tagu.

Dzięki temu style zawarte w komponencie będą miały wyłącznie zasięg lokalny. Oczywiście nic nie stoi na przeszkodzie aby jednym komponencie dodać style lokalne oraz globalne.

Kolejną kwestią jaką należy mieć na uwadze korzystając z tych plików to fakt, że potrzebujemy czegoś co nam to zepnie je w całość. Ja w tym przypadku korzystam z webpacka. Aby wszystko działało, musimy dodać odpowiednią sekcję do rules :

Do uruchomienia aplikacji jeszcze potrzebna jest jedna rzecz. Punkt startowy:

W powyższym przykładzie tworzona jest instancja VueJs, w której jest wywoływany komponent App. Będzie on w moim przypadku głównym komponentem aplikacji, składającym się z mniejszych części.

Musimy to jeszcze zintegrować z ASP.MVC, na którym wszystko stoi. Tak jak w większości frameworków należy wywołać na głównym widoku komponent root’a, czyli w tym przypadku „app”.

Tym sposobem, jeżeli uruchomimy sobie webpacka, a następnie odpalimy projekt powinno na ekranie pojawić się nam piękne „Hello World”!

Postępy

Bardzo dużo czasu przeznaczyłem na wertowanie dokumentacji oraz tutoriali związanych z VueJs. Także czasu na stworzenie samej aplikacji nie zostało zbyt wiele.  Do momentu pisania tego posta widok mojej aplikacji prezentuje się tak jak na załączonym obrazku:

Jak widzimy, z lewej strony kreuje się już panel do zarządzania zmianami w repozytorium. Jako, że jestem kompletnie lewy w sprawach designu to paletę kolorów biorę z VSCode, w którym to piszę.

Co dalej

Do kolejnego wpisu dalej będę zgłębiał tajniki VueJsa, ponieważ jestem dopiero na szczycie góry lodowej. Na pewno chciałbym dokończyć to co mam oraz dołożyć prosty podgląd zmian dla pliku. Zostało mało czasu do końca tygodnia, także zabieram się do pracy.