Refactor to SvelteKit for maintainability

[sseppola]

Takk for arbeidet du legger inn i dette prosjektet 👏

Jeg kom over det da nevøene mine spiller det kjempemasse for tiden, og da jeg så det var open-source ble jeg nysgjerrig på å lese kildekoden.

Først og framst er jeg veldig imponert over at du har oppnått så mange features på egen hånd, og jeg må si at det som følger er kun ment for å gjøre ting enklere for deg over tid.

I nåværende form minner prosjektet meg veldig om min egen start på å bygge nettsider, og jeg kan ane meg at det begynner å bli litt uoversiktlig og vanskelig å gjøre endringer nå som det har fått litt størrelse. Det er typisk når man kun bruker vanlig html/css/js for å bygge en dynamisk nettside/web-app da du manuelt må ta deg av alt av endringer i DOM-en til nettleseren. Etterhvert som kompleksiteten øker blir dette naturlig vanskeligere og vanskeligere.

For å begrense kompleksiteten er det mange teknikker man kan ta i bruk, i dette tilfellet er templating, moduler, og reaktivitet verdifulle tillegg:

• Templating for å unngå å duplisere html mellom alle sidene dine eg. top navigasjonen eller cookie modalen
• Templating med reaktiv oppdatering for å unngå å skrive html i javascript
  • for eksempel det du gjør mye av i global.js: document.querySelector(...), element.classList.add(..) element.contains() document.createElement(), etc.
• moduler for å unngå globalt scope, men samtidig kunne dele kode
• moduler for å legge relatert js, css, og html sammen så endringer på samme ting skjer i nærheten av hverandre.

Basert på det jeg ser tror jeg rammeverket som blir nærmest det du allerede kan er "SvelteKit". Det er et rammeverk som ligner veldig på å skrive html. En av de nyttigste tingene det introduserer er "reaktiv templating", som betyr at DOMen oppdaterer seg selv om du oppdaterer en javascript verdi (for eksempel money i topp navigasjonen). Dette er ikke magisk, men skjer fordi svelte kode kompileres til noe annet før den leveres til nettleseren så det tar seg av ting som element.innerText = money for deg. Test Svelte her Les mer om SvelteKit her

For å vise og la deg teste det ut forskjellen har jeg gjort et raskt forsøk på å skrive om deler av appen i SvelteKit, du kan lese og sjekke ut koden her: https://github.com/sseppola/PokeMath/tree/feature/sveltekit det er instruksjoner i readme.md for å komme i gang.

Hovedsaklig er det calendar.html jeg har skrevet om, men den drar med seg mye andre ting som cookies, navigasjon, local storage, shop, player, toast, analytics, og layout. Så dette er ganske representativt for hvordan resten av appen kan se ut, se spesielt på:

• src/routes/+layout.svelte om er layouten for appen
  • merk at andre "routes" vises her: https://github.com/sseppola/PokeMath/blob/feature/sveltekit/src/routes/%2Blayout.svelte#L33
• src/routes/christmas/+page.svelte

Om dette er interessant kan jeg hjelpe deg ta dette videre, spesielt i form av veiledning og kode-reviews for å sørge for at du beveger deg i riktig rettning og unngår typiske feil. Jeg mottar notifikasjoner om du svarer meg her, så bare @ meg :)

Om det er uinteressant er det bare å lukke issuen så dropper jeg det, uansett er jeg en supporter av det du gjør her 👍

[Tirco]

Supert @sseppola!

Takker for innspillene, og jeg kommer nok til å se nærmere på SvelteKit til nyåret, når jeg får litt mer tid! Jeg regner med at det syns at det er første gangen jeg driver med html... Jeg er tross alt bare en lærer med koding som hobby 😄 Litt klipp og lim, og litt rare variabler her og der, men det går!

Det å bare kunne legge topbaren ett sted, istedet for å oppdatere alle sidene manuelt er noe jeg har lett etter før, uten hell. Så om jeg får til det nå, så har du reddet noen av hårstråene på hodet mitt :)

[sseppola]

Haha, den er grei 👍 ikke nøl med å ta kontakt, jeg hjelper gjerne til!