• 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
127 wizyt
pytanie zadane 6 dni temu w Rozwój zawodowy, nauka, szkoła, praca przez m4sk1n Pasjonat (16,070 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ź 6 dni temu przez argeento Szeryf (96,140 p.)

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 5 dni temu przez m4sk1n Pasjonat (16,070 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
2 odpowiedzi 122 wizyt
pytanie zadane 20 grudnia 2018 w JavaScript, jQuery, AJAX przez ozimas Nowicjusz (140 p.)
0 głosów
1 odpowiedź 138 wizyt
pytanie zadane 8 marca 2018 w JavaScript, jQuery, AJAX przez Anoonymous Obywatel (1,560 p.)
0 głosów
1 odpowiedź 97 wizyt
pytanie zadane 24 listopada 2017 w JavaScript, jQuery, AJAX przez Anoonymous Obywatel (1,560 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

64,071 zapytań

110,467 odpowiedzi

231,380 komentarzy

47,836 pasjonatów

Przeglądających: 219
Pasjonatów: 10 Gości: 209

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.

...