Front-end

https://github.com/iSirThijs/jungle-gym

Installatie

Volg de stappen in de README.

Mappenstructuur

# Broncode van het project
|-src
    # Library met eigen components
    |-lib
        # Mappen met pagina's, assets, stores en components
        |-account
        |-assets
            |-icons
            |-images
        |-cards
        |-filters
        |-shared
            |-button
            |-label
            |-modals
            |-snackbar
        |-stores
        |-utils
        |-views
            
    # Routes van het project 
    |-routes
        # Alle routes van het project
        |-account
        |-api
        |-gymles
        |-inloggen
        |-spellen
        \_ __error.svelte
        \_ __layout.svelte
        \_ index.svelte

.github

Hier bevinden zich alle GitHub files, zoals de templates en de workflows. Om alles consistent en makkelijk te maken zijn er templates voor verschillende soorten issues gemaakt. Deze templates bevinden zich in de .github/ folder. Daarnaast zitten hier ook de CI configuraties in (.github/workflows).

In de Git Workflow van dit project worden de termen verder uitgelegd.

.husky

Hier bevinden zich alle (pre-commit) config files voor Husky. Voordat er een commit wordt geplaatst, wordt er npm run format uitgevoerd. Hier hoeft de ontwikkelaar dus geen rekening meer mee te houden.

Lib folder

In de lib folder staan alle componenten die we gebruiken in de applicatie. Deze hebben we zoals je ziet in de mappenstructuur opgedeeld per feature of element. In de shared folder staan componenten die het vaakst herbruikt worden door de applicatie heen. Hieronder vallen buttons, labels, modal en de snackbar melding.

Ook maken wij gebruik van stores. Hierin kunnen we alle store gerelateerde code files plaatsen. Tot nu toe hebben we stores gemaakt voor de user , snackbar message en playercount

Ook maken we naast de stores gebruik van een utils. In deze files staan hulp functies die door de hele applicatie gebruikt kunnen worden.

.De inhoud van onze lib folder ziet er als volgt uit:

    # Library met eigen components
    |-lib
        # Mappen met pagina's, assets, stores en components
        |-account
        |-assets
            |-icons
            |-images
        |-cards
        |-filters
        |-shared
            |-button
            |-label
            |-modals
            |-snackbar
        |-stores
        |-utils
        |-views

Route folder

Elke map geldt hier voor een beschikbare route in de applicatie. In elke route folder staat een de index.svelte file. In de index worden alle componenten ingeladen en wordt de structuur van de pagina bepaald. In de routes folder staat een algemene layout.svelte file. Hierin zet je HTML en CSS dat op elke pagina mag terug komen. Denk hierbij aan het navigatiemenu boven aan de pagina. Alle folders in de routes folder erven van deze layout file. Ook heb je bij de routes een error.svelte zitten. Wanneer er een error ontstaat kan deze hierin worden opgevangen en daarna afgehandeld worden. Hierbij kan je bijvoorbeeld denken aan een 404 pagina.

De inhoud van onze routes folder ziet er als volgt uit:

    # Routes van het project 
    |-routes
        # Alle routes van het project
        |-account
        |-api
        |-gymles
        |-inloggen
        |-spellen
        \_ __error.svelte
        \_ __layout.svelte
        \_ index.svelte

Static folder

Statische inhoud is alle inhoud die aan een eindgebruiker kan worden geleverd zonder dat deze hoeft te worden gegenereerd, gewijzigd of verwerkt. De server levert hetzelfde bestand aan elke gebruiker, waardoor statische inhoud een van de eenvoudigste en meest efficiënte inhoudstypen is. Ons project slaat manifest.json hier op, evenals pictogrammen en lettertypen die nooit zullen veranderen in het project.

De inhoud van onze static folder ziet er als volgt uit:

# Static folder van het project
|-static
    # Mappen en files in de static folder
    |-fonts
        # Google fonts
        |-montserrat-alternates
        |-poppins
    |-icons    
    \_favicon.ico
    \_logo.svg
    \_manifest.json
    \_splash-screen.png

SvelteKit

SvelteKit is een officieel ondersteund framework, gebouwd rond Svelte. Het voegt belangrijke functies toe aan een Svelte-app - zoals routing, lay-outs en server-side rendering - en maakt front-end ontwikkeling waanzinnig eenvoudig.

In tegenstelling tot apps met één pagina, doet SvelteKit geen concessies aan SEO, progressive enhancement of de eerste laadervaring - maar in tegenstelling tot traditionele door de server gegenereerde apps is navigatie onmiddellijk voor dat app-achtige gevoel.

Routing

SvelteKit werkt op basis van file-based routing. Dit betekent dat de routes in de applicatie overeen komen met de structuur en namen van de mappen in het project.

Meer informatie over de routing van SvelteKit is in de documentatie te vinden.

Netlify

Netlify is een hosting platform voor statische websites. Dit betekent dat er enkel HTML, CSS & JavaScript op gehost kan worden. Node.js kan bijvoorbeeld weer niet.

Er zijn tegenwoordig een hoop opties, waaronder ook Github Pages. Netlify is op een aantal vlakken uniek, maar voor dit project zat het hem met name in de deploy previews.

Dit zijn previews van de code van een pull request. Dit werkt onwijs handig, aangezien de reviewer niet de branch hoeft uit te checken, maar direct een link kan gebruiken. Sinds kort heeft Netlify ook collaborative deploy previews. Echter, dit werkt soms wel en soms niet en daarom nog niet heel betrouwbaar.

Een voorbeeld van een deploy previews is in dit pull request te zien. Na het builden in Netlify wordt er automatisch een comment geplaatst onder het pull request met de link.

Service Worker (offline)

De service-worker in svelte was erg complex en dit hebben we in details uitgelegd op de Offline pagina in de feature folder.

Offline

Local Fonts

In de app worden zogenoemde local fonts gebruikt. Dit zijn Google fonts die gedownload zijn. Deze fonts zijn geplaatst in de static folder. Het gebruiken van Google fonts is weer een extra request en voor gebruikers met slecht internet, kan dit wellicht als vervelend ervaren worden. Om deze reden worden er local fonts gebruikt.

Packages

ESLint

ESLint is een package dat fouten in JavaScript-code detecteert. In een ESLint configuratie bestand kunnen vooraf een aantal regels neergezet worden, zodat de code in de hele app consistent blijft. De eslintrc.cjs ziet er als volgt uit:

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
	plugins: ['svelte3', '@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
	settings: {
		'svelte3/typescript': () => require('typescript')
	},
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2019
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

Prettier

ESLint is een linter, terwijl Prettier een formatter is. Het zorgt ervoor dat de code tijdens het opslaan automatisch goed gezet wordt. Dit werkt in combinatie met ESLint, waardoor het oplossen van ESLint problemen vaak al automatisch gaat (mits dit ingesteld is).

De prettierrc ziet er als volgt uit:

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100
}

Husky

Husky (in combinatie met lint-staged) zorgt ervoor dat de code automatisch wordt geformat bij een commit. Op het moment dat iemand een commit doet, wordt er automatisch npm run format uitgevoerd, zodat er geen formatting problemen zijn in een pull request.

Dit scheelt vaak een extra commit, omdat het formatten van de code iets is wat vaak vergeten wordt. Pas nadat men ziet dat de CI faalt, wordt er een format gedaan.