Skip to content

Latest commit

 

History

History
82 lines (61 loc) · 6.23 KB

README.md

File metadata and controls

82 lines (61 loc) · 6.23 KB
Raw

Codecov CircleCI Quality Gate Status Maintainability Codacy Badge

screenshot

Live URL: https://steinsakspapir.dfweb.no

Stein Saks Papir

Hjemmeoppgave gitt av Novacare.

Se gjerne TODO punktet lenger ned i README hvor jeg har listet opp en rekke idèer og tanker for refaktorering av kode og forbedringer.

Prosjektbeskrivelse

Lag en interaktiv side der man kan spille stein-saks-papir (reglene finner du her: http://agilekatas.co.uk/katas/RockPaperScissors-Kata) og en tilleggsregel er at vinneren er den som er «best av 3».

Teknologier / verktøy brukt

  • React 18 med hooks (useState og useEffect)

UI / design

  • React Bootstrap
  • Animate.css for animasjoner
  • Responsivt design
  • Vektorbilder (SVG) fra FontAwesome
  • Aria-label på nødvendige elementer (WCAG standard)

Testing / kodekvalitet

  • Cypress integrert med CircleCI for E2E testing
  • Testdekninganalyse via CodeCov
  • Jest og React Testing Library
  • Scanning av koden via SonarCloud og DeepScan
  • Prop types validering
  • ESLint med AirBnb for kodestandard
  • CircleCI som er integrert med CodeCov for opplasting av testdekningsrapport
  • JSDoc for kode-dokumentering

State management

  • Easy Peasy for å håndtere global state
  • useState med prop drilling (holde state så lokal som mulig)

Hva jeg ville gjort annerledes i en profesjonell setting

  • Jeg ville brukt god tid på planleggingsfasen. Hatt et lengre møte hvor målet er å få utarbeidet en detaljert kravspesifikasjon, diskutere budsjett, tidsramme, valg av teknologier, langsiktige mål med siden. Det vil gjøre at man kan velge riktig teknologi for i dag og for fremtiden.
  • Jeg ville også satt opp branch protection på master og krevd minimum 1 code review fra en annen utvikler.
  • Enighet om felles Git commit message template innad for kunden.
  • Implementert React-Helmet for bedre kontroll over SEO
  • Hadde dette vært et større prosjekt hvor flere andre skulle samarbeidet ville jeg sannsynligvis implementert Typescript.

Resonnering og tanker

  • Jeg har valgt React ettersom jeg ikke så noe stort behov for å bruke Gatsby eller NextJS i dette prosjektet.
  • Jeg valgte React Bootstrap for UI ettersom det er et populært bibliotek som er enkelt å bruke.
  • Jeg har brukt ESLint og Airbnb for å opprettholde kodekvaliteten og gjøre utvikling enklere. Det fungerer også bra med integrert IDE støtte i VSCode. Det vil også gjøre videreutvikling og "maintainability" enklere på sikt. Jeg vurderte Typescript, men føler jeg må få mer erfaring med det først.
  • Jeg har brukt JSDoc for å dokumentere koden etter best mulig evne. Dette har jeg også gjort fordi jeg ikke har brukt Typescript.
  • Jeg har brukt SVG bilder fra FontAwesome for å sørge for at bildene ser bra ut uavhengig av oppløsning.
  • Jeg har satt opp testing foreløpig med Jest, React-testing-library. Har også satt opp testing med Cypress. Alt er koblet oppimot CircleCI.
  • Jeg bruker hooks med Easy Peasy ettersom det er enkelt å bruke og jeg har erfaring med det fra før av. I tillegg bruker det Redux "under the hood" så jeg har tilgang til Redux dev tools.
  • Jeg har implementert animasjoner med Animate.css fordi det er lettvint å implementere og jeg har brukt det før.
  • Jeg har forsøkt å holde state "ren" ved å bare ha score, increaseScore og reset der. Jeg vurderer å refaktorere koden til å bruke Easy Peasy state for å eliminere propdrilling.

TODO med fremtidige potensielle/mulige forbedringer for refaktorering

  • Refaktorere kode med skalering i bakhodet. Dette kan enklest gjøre ved å lagre hardkodet data i state og loope over feks våpen/spillere med forEach eller map slik at vi kan legge til flere spillere/våpen enkelt i fremtiden. Altså, gjøre data som skal skaleres dynamisk fremfor statisk og lagre denne i state. Det gjør skalering og fremtidig oppdatering enklere ved å holde alt på ett sted.
  • Fullfør arbeid med å separare ut state og actions i mindre filer i /state/model og slå de sammen. Gjør skalering og struktur bedre.
  • Implementere tester for hver enkelt komponent (med React Testing Library) separat istedenfor sånn som vi har de nå?
  • Implementere beskrivelse av reglene. Bruk https://react-bootstrap.github.io/components/accordion/
  • Vurder å bytte ut useState med https://easy-peasy.now.sh/docs/api/create-component-store.html
  • Vurder om Suspense og dynamisk rendering av komponenter ved behov bør implementeres.
  • Lagre finalWinner via computed i state og hente ut denne senere? Vil cache verdien og gi oss en performance fordel (https://easy-peasy.now.sh/docs/api/computed.html)?
  • Se på muligheten for å erstatte setTimeOut i ListWeapons med actionOn thunk/async listener. (https://easy-peasy.now.sh/docs/tutorial/using-listeners.html)
  • Erstatte Animate.css med GSAP eller React-spring? Tillater mer kompliserte animasjoner men krever mer koding.
  • Oppgradere kodebasen til Typescript?
  • Se om jeg kan redusere prop drilling i komponenter ved å lagre mer informasjon i global state. Fordel er at komponenter blir "renere" fordi de ikke er avhengig av props. Ulempe er at det går imot det å holde state så "lavt" som mulig.
  • Se om jeg kan separere mer kode i enda mindre komponenter for å gjøre koden ryddigere og enklere å vedlikeholde/oppdatere? (Allerede påbegynt).