Vyacheslav Shevchenko: "Druga wersja Vue zmieniła się radykalnie"

Vyacheslav Shevchenko: "Druga wersja Vue zmieniła się radykalnie"

Nasz kolega bierze dziś udział w konferencji 4Developers. Pełna wersja video jego prezentacji i zaletach i wadach frameworku Vue JS będzie dostępna w niedalekiej przyszłości w materiałach organizatorów. Ale Vyacheslav już teraz odpowiedział na kilka pytań i uchylił rąbka tajemnicy!

- Jakie są najczęstsze problemy z jakimi może się zetknąć ktoś, kto jest nowy w Vue?

Kiedy rozpoczynałem swoją przygodę z Vue, największym problemem była dokumentacja i niewystarczająca ilość informacji związana z różnymi problemami w Stack Overflow i Google. Druga wersja Vue.js jest radykalnie różna od pierwszej. Jeśli więc chcesz coś wygooglować, bardzo często zdarza się, że znajdujesz odpowiedź związaną z pierwszą wersją.

- A co w Vue lubisz najbardziej? I co cię denerwuje?

Bardzo cenię Vue za elastyczną strukturę, cechy, w których przypomina React i przepływ danych w jedną stronę. To brzmi trochę jak cechy Reacta, ale tutaj również można używać dyrektyw. Bardzo fajnie, że developerzy zebrali najbardziej przydatne cechy Reacta i Angulara i złożyli z nich osobny framework. Najbardziej denerwującą rzeczą były filtry. Dlatego, że w pierwszej wersji Vue można było znaleźć ogromną ilość pre-instalowanych filtrów, których można było używać tak, jak w Angular. W kolejnej wersji developerzy zdecydowali się je usunąć i w razie potrzeby możesz dodawać je osobno, od razu je konfigurując. I to naprawdę minus – trudno było znaleźć informacje na temat konfiguracji.

- Jakie popularne i znane firmy używają Vue jako głównego frameworku dla swoich stron internetowych?

Gitlab go używa. Mówią, że jego elastyczna struktura pozwala na produkowanie mniejsze ilości kodu i mogą rozszerzać go przez użycie pluginów. Byłem bardzo zaskoczony dowiadując się, że Facebook też używa Vue. No i YouTube, Xiaomi, Alibaba, Laravel opierają o niego różne serwisy.

- Unit testing w Vue. Oceniasz pozytywnie czy negatywnie i dlaczego?

Vue ma świetny CL project generator. W trakcie instalacji pyta cię, czy chcesz ująć w twoim projekcie narzędzia unit testing typu Karma + Mocha. Możesz także zainstalować Nightwatch do e2e testing i masę innych fajnych składników. Uzyskujesz w pełni skonfigurowany projekt, który rusza po użyciu tylko jednej komendy i zawiera wiele narzędzi testowania. Piszesz kod i jesteś całkowicie spokojny.

- A oficjalna dokumentacja? Jest ok?

Jak mówiłem w kontekście dokumentacji – na oficjalnej stronie nie miałem problemu ze znajdowaniem opisów tego, co chciałem rozgryźć. Przypuszczam, że kiedy masz problem z konkretną funkcjonalnością, spędzisz masę czasu na poszukiwaniu informacji.

- Czy to framework MCV?

Z pewnością nie. Najdziwniejszą rzeczą w Vue jest brak kontrolerów – cała logika jest rozproszona na poziomie pełnego cyklu życia. Vue zapewnia efektywne MVVM data binding oparte o proste i elastyczne API. Używa prostych JS-owych modeli obiektowych, wzorcowania bazującego na DOM i rozszerzalnych dyrektyw i filtrów.

- Co myślisz o skalowalności projektów opartych o Vue?

To przewaga Vue nad Angularem. Angular narzuca swoją własną strukturę. Vue jest bardziej biblioteką niż frameworkiem w czystej postaci. Cały twój kod jest podzielony na komponenty i możesz budować pożądaną strukturę tak, jak masz ochotę.

- A teaser w nagłówku wywiadu? Co na nim widzimy?

Ten przykład pokazuje jak w Vue piszemy komponenty. Pokazałem tu bardziej skomplikowany sposób niż ten, którego używasz startując od zera. Komponenty aplikacji o tak dziwnej strukturze to pokłosie Vue-loader, możesz w nim tworzyć komponenty mieszczące się w jednym pliku. Wszystkie niezbędne rzeczy pakujesz do jednego pliku – mamy 3 główne bloki: szablon, skrypt i styl.

Vue-loader zajmuje się parsingiem pliku, wyciąga każdy blok, przepuszcza je przez inne loadery, jeśli to potrzebne i wiąże je w osobny moduł CommonJS, w którym module.exports to Vue.js component options object. W bloku szablonu dodajemy HTML z jednym węzłem nadrzędny. Z zasady używamy do tego HTML ale możesz także używać pre-processorów, takich jak Jade.

Pomiędzy tagami „script” umieszczamy kod JS. Możemy tu importować inne komponenty, moduły, etc. Skrypt musi eksportować Vue.js component options object. W blok „style” wrzucamy CSS.

Tag <style> może mieć dodatkowe atrybuty, które pomagają ująć elementy stylu w danym komponencie. Zawartość będzie wyodrębniona jako ciąg znaków i używany jako opcja szablonu dla skompilowanego komponentu Vue. Możesz także używać pre-processorów CSS takich jak SASS albo LESS.