W ostatnim poście przedstawiłem najważniejszy element mojego projektu, mianowicie framework A-Frame. Dziś będzie krócej, ale kurtyna opadnie i przedstawię swój stos technologiczny.
Bardzo nie lubię jałowych postów pisanych na zasadzie: „nie mam czasu, ale coś muszę napisać”. Niestety każdego dopada okres kiedy musi intensywnie pracować, zajmować się rodziną etc. Albo gdy po prostu jest się zmęczonym, a światło ekranu komputera jest ostatnią rzeczą, którą chciałoby się w takiej sytuacji zobaczyć. W tym tygodniu ja miałem taki okres, ponieważ równolegle do pracy i projektu, tworzyłem szablon tego bloga i wielokrotnie zdarzało mi się już wykrzykiwać nieprzyjemne epitety pod kierunkiem WordPressa… ale pewnie nie jestem w tym osamotniony 😀
Wróćmy do tematu. Projekt nazwałem VRath, ponieważ chciałem żeby kojarzył się tą nazwą z technologią VR. Sercem projektu będzie framework A-Frame, o którym popełniłem już wstępny wpis, a można go znaleźć tutaj. Jako iż A-Frame pozwala na komunikację z encjami za pomocą węzłów drzewa DOM to zdecydowałem się, że przy tworzeniu projektu nie spocznę tylko na tej jednej bibliotece. Choć mam małe doświadczenie z Reactem, to spróbuję zaryzykować i użyć go do swoistej warstwy abstrakcji nad encjami A-Frame’a. Przy zarządzaniu stanem pomoże mi Redux. Do budowania projektu postanowiłem wykorzystać Webpacka. W dotychczasowych projektem korzystałem głównie z Browserify, rzadziej z Require.js, tak więc będzie to również doskonała okazja aby poznać Webpacka. Do instalacji paczek/zależności wykorzystam Yarn’a, a nie jak dotychczasowo to robiłem za pomocą npm’a. Na pewno o samej konfiguracji środowiska będzie osobny wpis, ale żeby ten nie był taki suchy to chciałbym wykonać chociaż jednego pusha. Zacznijmy od utworzenia pliku .gitignore:
node_modules build .idea .sass-cache .DS_Store bower_components npm-debug.log
To taki mój standardowy .gitignore, który w ramach potrzeb będę sobie rozszerzał. Yarna zainstalowanego już posiadam, więc zainicjujmy w nim nowy projekt:
yarn init
Yarn zadaje kilka pytań przy inicjalizacji, m.in. o nazwę projektu, autora czy licencję. Plik package.json został utworzony, a ja mogę zacząć instalować niezbędne rzeczy. We wpisie o A-Frame pokazywałem jak dołączyć tą biblioteke do projektu linkując bezpośrednio do strony frameworka. Ale można ją zainstalować z poziomu konsoli, w tym celu należy wpisać:
yarn add aframe --dev
Dodajemy A-Frame wraz z wpisem do package.json. Przy okazji dodawania tego pakietu powstał pliczek yarn.lock zawierający informacje o zależnościach w projekcie. To mała nowość w stosunku do „czystego” npma. Myślę, że to odpowiedni moment na commit. W kolejnym wpisie postaram się odkryć możliwości Webpacka.