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

Leave a Reply

Your email address will not be published. Required fields are marked *