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