Do stworzenia aplikacji webowej potrzebne są różne technologie. W tym poście postaram się pokazać wszystkie najważniejsze biblioteki i frameworki z którymi będziemy mieli okazję pracować przy tym projekcie.

Język jako najważniejszy element

Zanim jeszcze przejdę do szczegółowego omówienia poszczególnych elementów to muszę zwrócić Twoją uwagę na jedną rzecz. Cały kod, który tutaj zobaczysz będzie napisany w języku JavaScript. Nie będę wykorzystywał TypeScripta ani żadnego języka do backendu jak np. PHP. Ja specjalizuję się w JavaScripcie i dlatego dobieram technologię w ten sposób. Możliwe, że część rzeczy dałoby się zrobić łatwiej z wykorzystaniem innego języka ale nie o to tutaj chodzi.

A teraz to co ważne: używane technologie

Ten akapit podzielę na dwie części tak aby osobno opisać część frontendową a osobno backendową. Skupiam się też tylko na opisaniu najważniejszych i największych bibliotek/frameworków a te mniejsze pominę w tej części. Wszystkie małe klocki, które wykorzystuję będę opisywał już w postach odnośnie poszczególnych etapów. No więc zaczynajmy.

Framework

Głównym założeniem systemu jest to, że będzie to aplikacja SPA (Single Page Application). Jeżeli chodzi o takie systemy na dzień dzisiejszy mamy trzy główne technologie wykorzystywane najczęściej. Są to Angular, React oraz Vue. Ja wybrałem Vue. Pierwotnie przygotowałem tutaj dość długi wywód o tym dlaczego mój wybór padł akurat na ten framework ale ostatecznie z niego zrezygnowałem. Dlaczego? Ponieważ nie chcę wzbudzać dyskusji na temat tego, które z tych rozwiązań jest najlepsze i dlaczego. Każdy z nas ma swoje własne odczucia i dla niego na pewno są one słuszne więc po co się spierać o coś co jest kwestią raczej mocno subiektywną?

Skoro więc będę wykorzystywał Vue jako technologie wiodącą to naturalnym będzie wykorzystanie do niego Vue-routera oraz Vuexa. Pierwsza z wymienionych bibliotek będzie odpowiadała za routing w naszej aplikacji. Routing czyli zmienianie tego co widoczne w oknie przeglądarki gdy zmieni się wpisany w niej adres. To tak w bardzo dużym skrócie. Vuex natomiast będzie odpowiedzialny za zarządzanie stanem aplikacji. Jest to dość złożony temat, który poruszę kiedyś w osobnym poście. Na teraz powinieneś wiedzieć, że Vuex będzie zawierał w sobie najważniejsze dane odnośnie aplikacji takie jak zalogowany użytkownik, dane o klientach, ich samochodach czy naprawach.

CSS

Oczywiście w każdej aplikacji, więc i również w mojej, wygląd będzie grał bardzo ważną rolę. Aby nie pogubić się w ilości klas i modyfikatorów css wykorzystam preprocesor do tego języka. Osobiście najbardziej przyzwyczaiłem się do Sass a dokładniej mówiąc scss. Jego składnia wydaje mi się najczytelniejsza, zawiera wszystkie potrzebne dodatki takie jak zmienne, mixiny, funkcje i jeszcze kilka innych ciekawych „ficzerów”. Więcej o tym preprocesorze napiszę w osobnym poście. Warto też zaznaczyć że istnieją też inne preprocesory do cssa takie jak Less czy Stylus. To który z nich wybierzesz to bardzo subiektywna decyzja więc nie zamierzam Ci nic polecać.

Jakość kodu

Ostatnią rzeczą na którą chcę zwrócić Twoją uwagę to linter. Osobiście korzystam z ESlinta a zbiór reguł, które towarzyszą mi w pracy możesz znaleźć w repozytorium frontendowym. Nie korzystam z Prettiera chyba tylko dlatego, że nie jestem do niego przyzwyczajony. Wolę samodzielnie dbać o to aby eslint w żadnym miejscu nie wskazywał mi, że mój kod jest niezgodny z moimi regułami po to abym mógł się zastanowić nad tym czy może nie dałoby się poprawić tego kodu.

Zapomniałbym o jeszcze jednej rzeczy. W tej serii nie będę pisał testów do aplikacji. Jestem świadomy tego, że to nie najlepsze wyjście ale uważam, że są one trochę za skomplikowane i wprowadziłyby niepotrzebny chaos w tak małej aplikacji.

Technologie backendowe

Tutaj już nie będzie tak łatwo. Przynajmniej dla mnie. Nie jestem specjalistą od backendu. Niestety nie posiadam takiego pod ręką. Więc pora samemu się nauczyć tego co i tak będzie mi w przyszłości potrzebne.

Framework

Nie będę ukrywał, że ilość dostępnych frameworków backendowych trochę mnie przytłoczyła. Podczas gdy na froncie mamy tak na prawdę trzech dużych graczy (póki co) to po stronie backendu już nie jest tak łatwo. Dostępnych rozwiązań jest naprawdę sporo. Trochę poszperałem i w końcu zdecydowałem się na Expressa. Głównym powodem tej decyzji była dokumentacja, która po prostu mi się spodobała. Rozważałem też Hapi.js i Sails.js. Ostatecznie mój wybór padł na Expressa. Czy to dobrze czy nie to się dopiero okaże.

ORM

Temat ORM-ów to też jest dość śliska sprawa. Jedni uważają, że znacząco przyspiesza pracę i pozwala na łatwiejsze zorientowanie się w strukturze bazy danych inni natomiast mówią, że powoduje on tylko zbędny bałagan w SQLu i jest tak na prawdę niepotrzebny. Możliwe, że obie strony mają rację. Nie wiem tego ale wiem, że mi jako laikowi jednak wygodnie jest używać takiego ułatwienia. Do tego projektu rozważałem dwa rozwiązania: Sequelize oraz TypeORM. W końcu mój wybór padł na TypeORM z którym miałem już wcześniej do czynienia i który wydaje mi się być łatwiejszy w użyciu.

Biblioteki dodatkowe

Oprócz tych wymienionych narzędzi będę korzystał z kilku mniejszych bibliotek, które pomogą przy pewnych czynnościach takich jak logowanie czy parsowanie body zapytań. O tych mniejszych bibliotekach będę pisał na bieżąco podczas tworzenia backendu.

Technologie projektu - loga
Najważniejsze technologie

Podsumowanie

Wymieniłem największe klocki z których zbuduję moją aplikację. Te technologie są dość popularny i w miarę łatwe do przyswojenia. Dalszy ciąg serii planuję prowadzić w formie tutoriali do kolejnych etapów powstawania aplikacji. Zacznę od prostego modułu logowania a kolejne etapy będę przedstawiał na bieżąco.

Na koniec

Kończąc już ten wpis jak zwykle zachęcam do zapisania się na newsletter aby być zawsze na bieżąco z wychodzącymi postami. Zapraszam też do rozmowy w komentarzach na temat wymienionych tutaj technologii. A może nie zgadzasz się z jakimś wyborem albo masz lepszą alternatywę? Daj znać właśnie w komentarzu.

Seria: „Własna aplikacja”

Ten post jest częścią serii o nazwie „Własna aplikacja”. Resztę postów z tej serii możesz znaleźć tutaj:

Autor

Napisz komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.