Organizacja środowiska pracy

Niestety przez pracę i studia magisterskie, opuściłem jeden tydzień pisania wpisów. Mimo tego nie zniechęcam się i będę starał się, publikować posty do końca konkursu.

Dzisiaj w końcu udało mi się znaleźć czas, na zajęcie się projektem. Zabrałem się za organizowanie środowiska pracy, opierając się na książce „Javascript. Programowanie zaawansowane”.

Zacząłem od stworzenia struktury katalogów, która wygląda następująco:

  • src – folder w którym będą znajdować się pliki źródłowe,
  • tests – tu będą znajdować się wszystkie pliki z testami,
  • config – folder zawierający pliki konfiguracyjne do narzędzi, takich jak ESLint, Rollup i Karma,
  • dist – pliki wynikowe po przetworzeniu przez narzędzie Rollup.

Następnie nadeszła chwila konfigurowania narzędzi.

Narzędzia

ESLint

Od początku chciałem pisać projekt w standardzie EcmaScript 6, ucząc się przy tym nowej składni języka. Dlatego też nad poprawnością mojego kodu będzie czuwał ESLint. Poniżej jego konfiguracja:

Rollup

Po „odpaleniu” tego narzędzia, będą tworzone trzy pliki: btchart.js, btchart.es5.js i btchart.es6.js. Pierwszy z nich będzie zawierał moduł UMD z biblioteką do wykresów. Moduł ten gwarantuje, że będzie ona działać niezależnie od tego, czy dołączymy ją zwyczajnie poprzez tag <script> czy zaimportujemy synchronicznie lub asynchronicznie. Drugi różni się tylko tym, że jest przekonwertowany na wcześniejszy standard ES5. Natomiast ostatni plik będzie zawierał bibliotekę, w postaci zwykłego modułu ze standardu ES6.

Testy

Aby móc testować kod, zainstalowałem Karmę, która uruchamia testy w przeglądarce Chrome i Firefox. Do samego ich pisania posłuży mi framework Mocha wraz z biblioteką Chai, która dostarcza różne typy składni pisania warunków. Ostatnimi narzędziami, które dołączyły do tej grupy, to Sinon – pomocny w tworzeniu zaślepek, zastępujących działanie pewnych funkcji aplikacji, a także Lolex, który imituje przeglądarkowe funkcje odmierzania czasu, takie jak setInterval, setTimeout itp.

Skrypty npm

Po ściągnięciu i skonfigurowaniu zależności, umieściłem skrypty w pliku package.json, które będą odpowiedzialne za uruchomienie poszczególnych narzędzi.

VueJS

Na samym końcu, za pomocą poniższego polecenia ściągnąłem framework VueJS, który posłuży mi do stworzenia kreatora/edytora wykresów, wraz z wtyczkami Vuex i Vue-router.

Pierwsza z nich pozwala łatwo zarządzać stanem aplikacji – taki odpowiednik reactowego Reduxa. Druga umowżliwia implementację routingu w aplikacji.

Podsumowanie

Udało mi się zorganizować środowisko pracy! Wszystkie pliki znajdują się w repozytorium projektu. Teraz trzeba napisać bibliotekę i aplikacje umożliwiającą stworzenie dowolnego wykresu.

Postanowiłem, że równolegle będę pracował nad obydwoma częściami projektu. Gdybym stworzył aplikację na końcu, nie mógłbym testować mojej biblioteki. Dlatego postaram się stworzyć przynajmniej szkielet edytora w VueJS, który zawierałby elementy interfejsu, pozwalające w łatwy sposób zmieniać właściwości wykresu, znajdującego się na scenie.