TheKoder dev diary #1

Pierwsze koty za płoty, czyli czas na relację z placu boju.

Na pierwszy ogień idzie oczywiście konfiguracja środowiska oraz set-up projektu. W związku z tym, że na codzień korzystam z narzędzi JetBrains: WebStom/PyCharm na czas tego projektu postanowiłem dać szansę Visual Studio Code. O ile nie byłem przekonany do tego edytora tak jestem bardzo pozytywnie zaskoczony. Masa rozszerzeń która w razie potrzeby pozwala zrobić z niego prawdziwy kombajn i łatwa konfiguracja zdecydowanie na plus. Na uwagę zasługuje też integracja z gitem i sposób rozwiązywania konfliktów w plikach. Myślałem, że nic nie będzie w stanie zastąpić tego co jest dostępne u JetBrains a tutaj jednak – kolejne pozytywne zaskoczenie. Z ostatecznym werdyktem wstrzymam się jednak jakiś czas, bo jak na razie korzystam z VS Code od tygodnia.

Żeby przyspieszyć sobie start skorzystałem z gotowego bootstrapa dla projektu opartego o ES6, Webpack i Phasera. Można go znaleść na GitHubie. Jeżeli ktoś chce zacząć podobny projekt to polecam, nie ma co wymyślać koła na nowo.

O dokładnych założeniach projektu na pewno jeszcze w przyszłości pojawi się post ale na ten moment wspomnę o dwóch najważniejszych. Po pierwsze zależy mi na tym żeby poprawić swój styl pisania w JavaScript. Bardzo pomaga w tym rozszerzenie ESLint do VC Code które integruje to narzędzie z edytorem i podświetla błędy już w trakcie pisania. Poza tym korzystam z Airbnb JavaScript Style Guide(). Jest to styl pisania kodu zaproponowany przez Airbnb. Stosując się do jego reguł, według mnie i wielu innych programistów można pisać dużo bardziej czytelny i łatwy w utrzymaniu kod. Jeżeli jeszcze nie miałeś z nim do czynienia to polecam wypróbować w kolejnym projekcie. Tym bardziej, że jego instalacja w jest banalnie prosta, wystarczy w pliku .eslintrc.json wskazać że chcemy rozszerzać airbnb i to właściwie tyle. Oczywiście wcześniej należy za pomocą npm’a zainstalować odpowiednie zależności. Polecam, poprawę widać od razu. Poniżej moja konfiguracja ESlinta:

Drugim elementem nad którym chciałbym pracować to TDD. Do tej pory moja wiedza na temat pisania testów była dość ogólna, dlatego w tym projekcie będę się trzymał reguły: najpierw test później implementacja. Do uruchomienia testów skorzystam z bibliotek Mocha.js oraz Chai.js. Tutaj pojawia się pierwszy większy problem. Konfiguracja Webpacka to dla mnie przysłowiowa orka na ugorze. Zadanie nad którym obecnie pracuje to integracja bibliotek związanych z testami z Webpackiem. Jeżeli ktoś wie jak to dobrze zrobić zachęcam do zrobienia PR 😉

Na dzień dzisiejszy struktura projektu wygląda w następujący sposób:

Po tym jak uporam się z konfiguracją Webpacka kolejnym zadaniem na liście jest przygotowanie placeholderów dla podstawowych obiektów w grze.
Do tej pory spędziłem nad projektem 3h.
Na dzisiaj to tyle 😉

This article has 4 comments

  1. czechue Reply

    Fajny wpis, będę śledził z zainteresowaniem bardziej doświadczonego kolegę. good luck z projektem 🙂
    Chociaż jeszcze nie jestem na etapie E6 – dodałem sobie github z airbnb do listy tematów do zgłębienia na przyszłość.

    • Dominik Kubis Reply

      Dzięki, odrobina szczęścia zawsze się przyda! 😉
      Co do Airbnb JS Style Guide, ma on również swój odpowiednik dla wersji ES5. O dobre nawyki warto dbać od samego początku, więc jeżeli nie czujesz się jeszcze dobrze z ES6 to pod tym linkiem znajdziesz wersje dla ES5. Konfiguracja ESLinta zajmuje tylko chwilę, więc nie ma co tego odkładać na później.

      • czechue Reply

        Za namową skonfigurowałem ESLinta w moim projekcie, no i cóż… już mi wychwycił sporo bugów. Zdecydowanie przydatne narzędzie! No i guide ES5 też bardzo przejrzysty. Super sprawa 🙂

Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *