Tydzień 44

W życiu każdego programisty przychodzi taki moment, w którym poznajemy nową wiedzę i okazuje się, że jakiś projekt można napisać lepiej. Oczywiście zaraz potem pojawia się drugie pytanie: czy na pewno chcę się za to zabierać, przecież działa dobrze. W moim przypadku działało, ale pojawiło się kilka błędów, których nie wyłapałem wcześniej oraz pojawiło się kilka uwag co do odbioru aplikacji, więc postanowiłem dopracować wersję 1.0.

Mowa o FrontEnd Quiz, który postanowiłem poprawić tak, żeby działał jak aplikacja webowa, bez konieczności przeładowywania strony w trakcie działania aplikacji. Wydawało mi się, że to nie będzie nic trudnego, bo przecież mechanizm działania aplikacji nie zmieni się mocno. Jedyne co się zmieni, to układ kodu, a dokładnie upakowanie dotychczasowego kodu w komponentach i ich odpowiednie spięcie za pomocą kontenera sterującego. Na własnej skórze przekonałem się, że jak coś brzmi niegroźnie, to na pewno zajmie więcej czasu niż zaplanowałem.

Początkowo miałem kłopoty z ogarnięciem logiki przepływu danych w aplikacji i ustawieniem kontrolera, tak żeby wszystko działało bez zarzutu. Tego akurat się spodziewałem, bo wcześniej robiłem to tylko raz w trakcie kursu i to nie samodzielnie, a jedynie naśladując prowadzącego. Na szczęście nic tak nie uczy, jak praktyka. W końcu poradziłem sobie z tym wyzwaniem. Następnie przyszła kolej na dystrybucję danych w aplikacji. Tu pojawiły się kolejne wyzwania. Dane pomiędzy komponentami przesyłane są jako obiekty. To wymusza inny sposób ich przywoływania i pracy z nimi. Później, okazało się, że chcąc wyciągnąć z htmla, który checkbox jest zaznaczony, trzeba zagłębić się w parametry przekazywane przez event. Na szczęście w trakcie kursu JS nauczyłem się kilku przydatnych tricków, które pozwoliły mi przeglądnąć logikę zdarzeń i się do niej podpiąć.

W zasadzie co element aplikacji, to nowe problemy. Na szczęście każdy z nich udało się rozwiązać. Na ten moment w aplikacji brakuje mi tylko dwóch elementów: podsumowania wyników i informacji o tym, co poszło nie tak, czyli na które pytania można było odpowiedzieć lepiej. To do zrobienia w przyszłym tygodniu i będę gotowy, do podmiany testu na stronie.

Przy okazji tworzenia aplikacji w JS kilka razy skorzystałem z Code Sandbox w celu przyspieszenia pracy z kodem, a w zasadzie wyłapania błędów. Przy tej okazji okazało się, że jest coś takiego jak ESLint. Jest to nic innego jak narzędzie, które z jednej strony pomaga wyłapać błędy w kodzie, a z drugiej strony podpowiada jak poprawić kod, żeby spełniał ogólnie przyjęte zasady.

Zainstalowanie Eslint nie należy do trudnych, ale warto wiedzieć o kilku tematach. Poniżej przedstawię, jak można zainstalować Eslint dla projektu pisanego w JavaScript.

Zaczynamy od zainstalowania pakietu NPM Eslint w naszym projekcie. W głównym katalogu projektu instalujemy pakiet za pomocą komendy:

Npm i eslint –save-dev

Kolejnym krokiem jest inicjalizacja pakietu ESlint za pomocą komendy:

./node_modules/.bin/eslint –init

W konsoli pojawi się kilka pytań o konfigurację, po udzieleniu odpowiedzi narzędzie będzie wstępnie skonfigurowane do działania.

To jeszcze nie wszystko, warto doinstalować zewnętrzne rozszerzenie, które pomoże nam utrzymać kod w jednym z powszechnie uznawanych standardów np.: Airbnb, Google, Facebook. W moim przypadku zastosowałem standard Airbnb. Doinstalowanie go wymaga skorzystania z komendy:

npx install-peerdeps –dev eslint-config-airbnb-base

Po zainstalowaniu pakietu, otwieramy plik .eslintrc.js i w miejscu „extend” podmieniamy eslint:recommended na Airbnb-base.

Do pliku package.json trzeba dodać kod pozwalającą nam uruchamiać eslint z linii komend:

„scripts”:
{
„eslint: „eslint .”
}

Teraz możemy już korzystać z pakietu uruchamiając program komendą npm run eslint.

W wyniku pracy rozszerzenia otrzymamy listę problemów i błędów w konsoli. Pozostaje jedynie usunąć znalezione błędy.

W tym tygodniu na programowaniu spędziłem prawie siedemnaście godzin w całości pracując nad nowym kodem do aplikacji FrontEnd Quiz.

No comments
Krzysztof NyrekTydzień 44

Related Posts

Dodaj komentarz

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