Ocena webaplikacji (vue.js)

Question

Witam,

Od jakiegoś czasu skupiłem swoją naukę programowania na JavaScripcie i chciałbym dowiedzieć się, jak mi to wychodzi pod względem stosowania się do dobrych praktyk itd. Jako przykład pokażę niedawno ukończoną aplikację webową pomagającą w nauce na pamięć dłuższych tekstów. Wykorzystałem Vue.js, vue-router, vuex i vuetify, na logika aplikacji jest napisana w TypeScript (trochę niepotrzebnie dzieliłem front-end od reszty)

Wydaje mi się, że idzie mi to słabo, ale muszę przestać wstydzić się swojego kodu i zacząć prosić o feedback…

Aplikacja (jeszcze nie ma sensownej nazwy ani ikony): https://yutla.mkljczk.pl

Kod źródłowy: https://github.com/m4sk1n/yet-unnamed-text-learning-app

Answer 1

Jeśli chodzi o vue, praktycznie wzorcowo napisany kod według dokumentacji. Dobra robota! Kilka rzeczy złapałem

1. Niepotrzebnie tworzysz gettery. Jeśli potrzebujesz odczytać dane ze state'u, odczytaj je bezpośrednio. Gettery to takie computed dla stora

2. Nie nadpisuj natywnych obiektów (Error)

import Error from '@/components/Error';

3. Miejscami brakuje scoped w css-ach, Warto dodawać, żeby później się nie denderwować

4. Niepotrzebnie rzutujesz na booleana

:light="!!error && darkMode"

operator sam sobie zrzutuje

5. Eslint albo IDE powinno Ci wychwytywać takie  "Błędy"

 let answer = [];
 for (const index in this.answer) {
    if (!this.answer[index][0]) answer[index] = this.text[index];
    else answer[index] = this.answer[index][0];
}
this.error = this.session.check(answer.join(' '));

const answer, zamiast let

6. Nie musisz wywoływać metod w templatkach, wystarczy, że podasz referencje

<v-btn icon dark @click="dismiss()">

@click="dismiss">

7. Preferowany rodzaj komunikacji z parentem to $emit

props: {
  dismiss: Function,
 }

Zwiększa to czytelność i reużywalność komponentów

8. Nie rozumiem po co tutaj

const state = {
  courseList: [],
  courses: {},
};

hash table i zwykla lista, imo dużo zamieszania jest w tym module

Comments

2. Error to trochę zła nazwa dla tego komponentu poza tym…

4. Musiałem mieć jakiś powód skoro to zrobiłem, takie rzeczy sprawiają że wstydzę się swojego kodu :D pewnie wcześniej warunek był odwrotny

5. W pewnym momencie wyłączyłem eslinta i zapomniałem o włączeniu go w ogóle…

8. Jedno na informacje o kursie, drugie na jego zawartość. Powinienem to zmienić w momencie, gdy kolejność na liście przestała być taka, jak w tablicy…

Dziękuję bardzo za te uwagi :)