• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena webaplikacji (vue.js)

+3 głosów
171 wizyt
pytanie zadane 13 czerwca w Rozwój zawodowy, nauka, szkoła, praca przez m4sk1n Pasjonat (16,580 p.)
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

1 odpowiedź

+1 głos
odpowiedź 13 czerwca przez argeento Szeryf (97,300 p.)
wybrane 19 czerwca przez m4sk1n
 
Najlepsza

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

komentarz 13 czerwca przez m4sk1n Pasjonat (16,580 p.)

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 :)

Podobne pytania

0 głosów
1 odpowiedź 65 wizyt
pytanie zadane 6 lipca w JavaScript, jQuery, AJAX przez Greeenone Stary wyjadacz (12,380 p.)
0 głosów
2 odpowiedzi 177 wizyt
pytanie zadane 20 grudnia 2018 w JavaScript, jQuery, AJAX przez ozimas Nowicjusz (140 p.)
0 głosów
1 odpowiedź 155 wizyt
pytanie zadane 8 marca 2018 w JavaScript, jQuery, AJAX przez Anoonymous Obywatel (1,560 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

66,407 zapytań

113,168 odpowiedzi

239,568 komentarzy

46,673 pasjonatów

Przeglądających: 306
Pasjonatów: 5 Gości: 301

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...