Vue.js - pytanie o organizacje kodu i dobre praktyki

Question

Cześć,

Od pewnego czasu uczę się JavaScript i im bardziej zagłębiałem się w czysty JS tym bardziej widziałem, że można bez TypeScriptu napisać dobrą aplikację z czystym obiektowym kodem (zwłaszcza po poznaniu modułów). Jakiś czas temu postanowiłem przerobić sobie kurs Vue, żeby zobaczyć jak on w ogóle wygląda, ponieważ często czytałem, że jest to jeden z najlepszych frameworków JS. Wiem, że przerobienie kursu to tak naprawdę wstęp do wstępu o rozmowach nt. podstaw Vue, ale tak na pierwszy rzut oka to... no nie zbyt mi się ta struktura podoba... Zanim w ogóle liznąłem Vue to wyobrażałem go sobie jako framework podobny do PHP-owego Symfony - tzn. komponenty Vue zawierają czysty JS i logikę bez żadnego HTML'a i CSS'a, a najlepiej jeszcze zorganizowane jakimś wzorcem. Widokami są pliki HTML + jakiś system szablonów do manipulacji danymi, a style to CSS, SASS, lub dowolny prekompilator. Tymczasem to co przerobiłem w kursie to głównie komponenty, które zawierają HTML (template), JS (script) i CSS (style), i to wszystko razem... Przyznam się, że jestem trochę zawiedziony, ale zdaję sobie doskonale sprawę, że o wiele więcej nie wiem niż wiem. W związku z tym mam 2 pytania: 

1. Czy takie trzymanie wszystkiego (HTML, CSS, JS) w jednym pliku Vue (mimo, że jest to niezależny komponent) to nie jest objaw spaghetti code? Od początku przygody z webówką uczyliśmy się, aby rozdzielać logikę od treści i stylów.
2. Czy w taki sposób faktycznie pisze się aplikacje w Vue? Czy może po prostu tak się da, ale nie jest to dobrą praktyką?

Nie chcę być "jajkiem mądrzejszym od kury" - pytam szczerzę, ponieważ obecnie mam trochę mieszane uczucia co do Vue.

Bardzo proszę Was, JavaScript-owcy, o rozjaśnienie sprawy. Z góry dziękuję za wszystkie odpowiedzi!

Comments

Jakiego vue się uczysz 2 czy 3?

---

Kurs dotyczył Vue 2, ale w CLI wybierałem projekt w Vue 3

---

Czy w Vue 3 jest wymagany TS, czy tylko opcjonalny?

---

Pisząc w Vue 3 pisałem w czystym JS, w ogóle nie korzystałem z TypeScriptu, ale tworząc projekt w Vue CLI miałem możliwość wyboru checkbox'a z TS

---

Nie TS jest wymagany tylko w Angularze. Vue i React korzystają domyślnie z JS. Nie rób kursu z vue 2 mając projekt w vue 3, Tam jest stosunkowo dużo zmian i lepiej wybrać kurs z vue 3.

---

Wiem, że w Angularze 2+ jest TS, ale jakiś czas temu przebąkiwali, że Vue też przejdzie na TS (narazie przepisali kod w TS, ale nie wymagają tego od strony użytkownika). Typescript ponoć rośnie w siłę ostatnio  i zastanawiam się skąd się to bierze, skoro głównie Angular z niego korzysta.

BTW., "wielkiej trójce" (Angular, React i Vue) wyrasta konkurencja w postaci Svelte.js (który nie jest frameworkiem ani biblioteką, a kompilatorem. Więc działa na innej zasadzie, ale finalnie służy do tego samego) oraz PReact (czyli odchudzony React, można powiedzieć, ze to kolejna gałąź Reacta). Ciekawy jest też funkcyjny Elm (nie jest to nic nowego, Elm jest od jakiegoś czasu, ale ostatnio chyba rośnie zainteresowanie nim), którego upodobali sobie developerzy korzystający z FP do web devu.

Answer 1

1. Czy takie trzymanie wszystkiego (HTML, CSS, JS) w jednym pliku Vue (mimo, że jest to niezależny komponent) to nie jest objaw spaghetti code? Od początku przygody z webówką uczyliśmy się, aby rozdzielać logikę od treści i stylów.

Tak, należy rozdzielać logikę od treści i stylów, ale rozdział na te trzy rzeczy nie oznacza równocześnie podziału na pliki. Akurat w Vue i tak ten podział jest o wiele bardziej widoczny niż np. w Reakcie, w którym używa się JSX. Niemniej da się to podzielić na pliki.

Comments

Co Pan poleca React czy Vue? Co na początek?

---

Na początek to VanillaJS.

A później to tak naprawdę nie ma znaczenia. Każdy framework i tak ma swoje konwencje, których trzeba się nauczyć.

---

Dziękuje Bardzo

Miłego dnia Życzę!

---

W Vue też da się bawić w JSX 

---

Nim się można bawić wszędzie… tylko że największy sens ma w Reakcie. W Vue sposób konstruowania drzewka jest na tyle inny, że nie potrzeba JSX-a.

---

Comandeer, czekałem na Ciebie, dzięki za odpowiedź i linka :D Odpowiedz proszę jeszcze czy, z Twojego doświadczenia i wiedzy, tak faktycznie projektuje się aplikacje w Vue komercyjnie (w sensie template, JS i style razem)? I czy Ty osobiście uważasz to za dobrą praktykę, czy raczej wolisz rozdzielać style i JS (jak w dokumentacji, do której linka podałeś)?

---

Co prawda sam nie pisuję we frameworkach, ale widziałem nieco komercyjnych apek i tak, pisuje się tak.

Osobiście raczej rozdzielałbym to na pliki, ale tego typu jednoplikowy format jest całkiem fajny – nawet sprawdzałem, czy da się go wykorzystać do Web Components.

---

Czy można wiedzieć dlaczego nie używasz frameworków? Podałeś link do webkrytyka i od razu przypomniał mi się artykuł o Angularze :D Czy to z tych względów nie piszesz we frameworkach? I jeśli można wiedzieć - w swoich aplikacjach zawierasz jedynie czysty JS/TS?

Edit: podałeś link do bloga Comandeer, a nie do WebKrytyka, ale sprawdziłem teraz dla pewności i wpis o Angularze faktycznie jest na WebKrytyku - przepraszam za pomyłkę :D

---

Nie, po prostu ostatnio bawię się rzeczami, które nijak się mają do takich frameworków (parsery, narzędzia do testowania itd.). W pracy z kolei mamy swoje biblioteki i frameworki.

I jeśli można wiedzieć - w swoich aplikacjach zawierasz jedynie czysty JS/TS?

Najczęściej. Ale korzystam też sporo z npm-a i bibliotek pokroju lodasha. 

---

Ja piszę komercyjnie w Vue i nigdy jeszcze nie spotkałem się z takim podziałem plików. Szczerze mówiąc dla mnie jedną z zalet Vue jest to że można wszystko fajnie wydzielić w jednym pliku.

Answer 2

Miałem bardzo podobne wątpliwości kiedy zaczynałem naukę z React.js ...teraz im dalej tym lepiej ....

Comments

To ja mam na odwrót, im więcej grzebie w react tym mniej jestem pewny np ułożenia katalogów etc.

---

Każdy z nas jest Inny   mnie osobiście denerwował JSX teraz się przyzwyczaiłem do tej konwencji .

Struktura ułożenia Katalogów bywa mocno pokręcona .... trzeba dbać o porządek...