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

Code review Tetrisa w ReactJS

Object Storage Arubacloud
+3 głosów
389 wizyt
pytanie zadane 17 października 2020 w JavaScript przez FlamerX Nowicjusz (150 p.)

Witam.

Od niedawna zastanawiam się nad rozpoczęciem poszukiwać pracy i zastanawiam się czy obecny poziom, który reprezentuje mój jest już odpowiedni żebym mógł mówić o sobie jako o junior front-end developerze.

W celu prezentacji swoich umiejętności napisałem apkę (Tetrisa) w ReactJS i chciałbym prosić o code review.

Byłbym wdzięczny za słowa krytyki lub wskazówki co poprawić laugh.

 

repo: https://github.com/adabrz777/tetris

gierka (obecnie tylko na desktopie): https://adam-brzezinski.pl/sites/tetris/index.html

2 odpowiedzi

+2 głosów
odpowiedź 17 grudnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

1. https://github.com/adabrz777/tetris/blob/master/src/component/Next/Next.js i inne pliki też, brak formatowania, co oznacza, zapnij sobie jakiś linter np. eslint który Ci tego przypilnuje (i wielu innych kwestii) plus możesz pomyśleć np. o prettier dla autoformatowania, tutaj nie namawiam, są zwolennicy i przeciwnicy, ja sam jeszcze rok temu raczej byłem przeciwny ale z biegiem czasu się przekonałem, głównie dlatego, że w ogóle nie zastanawiasz się podczas pisania nad formatowaniem, robi to za Ciebie narzędzie w git hook i przy CR też na to nie patrzysz.

2. z powyższego pliku ten switch wygląda na coś, co można zrobić jednym komponentem z jakimś sparametryzowaniem... switch nie jest dobry w tej postaci, jak zechcesz zmienić coś we wrapperze to musisz zmieniać każdego case...

3. "console.error('Wrong element type');" takie coś nie ma prawa pojawić się w kodzie wystawionym do CR, czyli kodzie produkcyjnym. Po pierwsze user nie zobaczy tej informacji, a po drugie nie ma sensu brudzić konsoli errorami. Tego typu operacje powinny być albo przechwycone i np. jakoś zasygnalizowane userowi tak, aby zobaczył błąd lub wyciszone jeśli są nieistotne dla aplikacjii.

4. return <div className={'Next'}>{!this.props.gameOver ? nextBoard : null}</div>;
  mi osobiście nie podoba się takie coś... ja bym to zapisał inaczej, np.:
  

if (!this.props.gameOver) {
  return null;
}

return <div className={'Next'}>{nextBoard}</div>;

wg mnie jest to znacznie czytelniejsze i łatwiejsze w analizie.

5. "let { board, WIDTH, HEIGHT, gameOver } = this.props;" dlaczego let? Propsy to coś, czego komponent nie zmienia, to powinno być const, nie widzę uzasadnienia dla zastosowania tu let. Plus dlaczego stosujesz różne formy nazywania parametrów? Stosuj jeden format, np. camelCase.

 

i parę pytań, jakie mogłyby paść np. na rozmowie, gdybyś tak wykonał zadanie rekrutacyjne:

1. dlaczego wszystkie komponenty to "Component", a nie "PureComponent"?

2. dlaczego używasz klas, a nie funkcji?

3. dlaczego robisz export default, a nie export nazwany?

4. raz masz "export default class...", a raz "class ..." i potem osobno "eport default", dlaczego?

To tak na szybko. Generalnie powyższych pytań nie traktuj jako błąd, nie jest to błąd (no może poza brakiem spójności w pkt. 4), ale to są pytania, po których można jakoś ocenić czy "wiesz co robisz", czy po prostu jest to Twój jeden z pierwszych tematów w React i dopiero raczkujesz.

 

A co do pracy to wg mnie jeszcze za wcześnie, ale oczywiscie to subiektywna ocena. Pracuję obecnie z koleżanką, która przyszła do nas niedawno na staż po inżynierce i została jako Junior i wg mnie jest dobrym wyznacznikiem tego, co powinno cechować takiego juniora. Otóż bez problemu odnajduje się w aplikacjach zarówno pisanych w React (podejście klasowe i funkcyjne), w projektach Angular, w tym nawet w hybrydzie angular/angularJS, bez problemu ogarnia async, rxjs, rozumie i umie pracować z XHR, umie pisać testy jednostkowe i e2e, w tym również testy operacji asynchronicznych, bez problemu pracuje z dokumentacjami pl/en, a do tego ładnie radzi sobie również w mikrousługach Java/Kotlin na Springu, ale tego nikt nie wymaga od frontend-developera. Także moim zdaniem to są wymogi, które pozwalają startować na juniora (w tym wypadku to był staż, ale potem przeszedł w juniora).

1
komentarz 17 grudnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)
i jeszcze jedno - brak obsługi mobile to bardzo, ale to bardzo duży minus... dzisiaj ponad 50% ruchu to mobile, czasami nawet ponad 80% zależnie od aplikacji, więc Ty pokazujesz wyraźnie takim projektem, że nie znasz specyfiki mobile czym możesz zostać skreslony na starcie... szkoda by było, staraj się więc zmienić podejście i myśleć jednak mobile first :)
komentarz 17 grudnia 2020 przez niezalogowany

@Tomek Sochacki,
 Do obsługi Mobile jakich technologi się uczyć ? Co polecasz? Czego nie ? Od czego zacząć ?

komentarz 17 grudnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)
Tych samych co web, przynajmniej na razie :) chodzi pk prostu o myslenie o rwd i przede wszystkim o małych ekranach. Apki natywne na razie zostaw, to.duzy oddzielny temat.
komentarz 17 grudnia 2020 przez niezalogowany

Okay wink Bardzo Dziękuję !

Pozdrawiam.

komentarz 26 grudnia 2020 przez FlamerX Nowicjusz (150 p.)

@Tomek Sochacki, Dziękuję bardzo za tak obszerny komentarz, trochę już minęło czasu od kiedy wstawiłem tutaj prośbę o to, jednak cieszę się że komuś chciało się to tak dokładnie opisać laugh.

Przez ten czas zdarzyłem się już wiele nauczyć z samego Reacta więc większość z tych błędów sam bym poprawił, jeśli chodzi o nazewnictwo to kwestia podejścia, które ciągle zmieniałem, musiałem znaleźć sobie swój sposób.

Jednak jeśli chodzi o RWD i kwestię mobilności to w obecnej formie gra miała być jedynie desktopowa i był to mój świadomy wybór wink.

Dzięki jeszcze raz i wesołych świąt laugh

0 głosów
odpowiedź 17 grudnia 2020 przez niezalogowany

Super Gierka ! laugh Well Done!

Na temat kodu się nie wypowiem bo uczę się React'a...cool

 

komentarz 26 grudnia 2020 przez FlamerX Nowicjusz (150 p.)
Dzięki bardzo, cieszę się, że się podoba

Podobne pytania

+1 głos
1 odpowiedź 943 wizyt
+1 głos
3 odpowiedzi 728 wizyt
0 głosów
2 odpowiedzi 394 wizyt

92,568 zapytań

141,420 odpowiedzi

319,622 komentarzy

61,955 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...