Nauka Vue #2 – stack technologiczny

A więc zaczynamy konkretną pracę nad projektem, który opisałem w poprzednim wpisie. Na początku istotne będzie określenie jaki stack technologiczny będzie przez nas wykorzystywany. 

Vue – główny składnik

Vuejs

Wiadomo z tytułu czego będę się uczył więc nie jest żadnym zaskoczeniem, że główną osią napędową całego projektu będzie Vue. Dlaczego akurat Vue? O tym napisałem osobny post tutaj. Zapraszam do zapoznania się z nim, jeżeli jeszcze tego nie zrobiłeś.

Co więcej?

Mimo, że z samego Vue da się zrobić praktycznie wszystko co założyłem w planach to przecież nie jedyna technologia z jakiej będę korzystał. 

Webpack

webpack

Jako bundler webpack jest chyba bezkonkurencyjny. Obecnie w praktycznie każdym projekcie z którym miałem do czynienia wykorzystywany jest webpack. Możliwość bundlowania paczek, dzielenia plików, kompilowania i jeszcze wiele innych różnych pluginów, które nawet nie wiem co robią. Webpack ma naprawdę wszystko co potrzebne. 

Sass

Sass

W wielu projektach wykorzystywałem już ten preprocesor CSS. Sass daje dostęp do takich rzeczy jak mixins, zmienne, czy możliwość zagnieżdżania kolejnych klas. Bardzo fajnie zgrywa się z metodykami takimi jak na przykład BEM.

Babel

Babel

Babel jest narzędziem wykorzystywanym do „tłumaczenia” składni ES6 (lub EcmaScript 2015) na ES5, który jest zrozumiały dla wszystkich przeglądarek. Narzędzie to ma spore możliwości i na dodatek łatwo integruje się je z Webpackiem.

Edytor? VSC!

VSC a stack technologiczny

Na rynku jest mnóstwo przeróżnych edytorów. Do pisania projektu JS/CSS/HTML tak na prawdę wystarczyłby mi zwykły notatnik windowsowy. Jednakże jako dosyć leniwe zwierzątko człowiek szuka zawsze ułatwień. Na dodatek ja jestem też troszkę skąpy więc szkoda mi pieniędzy na narzędzie pokroju WebStorm od JetBrains. Ale i dla mnie są odpowiednie narzędzia. Jednymi z najpopularniejszych darmowych edytorów dla Web devów są:

Żeby była jasność. Nie są to wszystkie dostępne na rynku edytory. Te po prostu spotyka się najczęściej. Ich porównanie na pewno pojawi się na blogu jako osobny post. Teraz wystarczy wiedzieć, że osobiście wybrałem Visual Studio Code. Może nie jest to stack technologiczny do projektu jednak jest to bardzo ważne narzędzie w całym procesie tworzenia aplikacji.

Dodatki

Do VSC wykorzystuję też różne pluginy. Wymienię tylko kilka podstawowych. 

  • Vetur – plugin wspierający pliki Vue w VSC
  • ESLint – plugin do integracji VSC z ESLintem
  • Prettier – plugin do formatowania kodu
  • Solarized Light – Motyw (wygląd) mojego edytora 🙂

To tylko kilka podstawowych pluginów, które wykorzystuję do codziennej pracy.

Repozytorium

Na koniec jeszcze chciałbym podać tutaj link do repozytorium na gitlabie do którego będę commitował wszystkie zmiany i postępy w projekcie. Warto tutaj dodać jedną rzecz. Otóż dlaczego Gitlab a nie Github? Czy to ma jakiś związek z tym, że Microsoft przejął Githuba? Otóż odpowiedź jest prosta. Nie. To nie ma żadnego związku. Po prostu miałem repo przygotowane na Gitlabie. Co do samego przejęcia przez Microsoft najpopularniejszego serwisu do dzielenia się kodem to jest to temat na całkowicie osobny post. 

Repozytorium znajduje się w tym miejscu. Zapraszam.

Stack technologiczny określony

Wydaje mi się, że najważniejsze rzeczy zostały tutaj przytoczone. Nie będzie to nie wiadomo jak rozbudowany projekt a więc i stack nie jest kosmiczny. Ot typowy projekt stworzony dla własnych potrzeb. Jeżeli uważasz, że cokolwiek tutaj nie pasuje albo czegoś brakuje to daj znać w komentarzu pod postem. Jestem bardzo ciekaw opinii. Może podzielisz się własnym stackiem technologicznym w swoich projektach?

Uwaga!

Nie jestem żadnym specjalistą jeżeli chodzi o Vue. W tej serii wpisów chcę pokazać tylko drogę jaką ja będę musiał przebyć aby poznać choćby podstawy tego frameworka. Rozwiązań i konwencji stosowanych podczas tworzenia mojej aplikacji nie należy brać za bezbłędne ani nawet poprawne.

Wpis jest częścią serii Nauka Vue