|
|
|
# App
|
|
|
|
|
|
|
|
Le _frontend_ (ou _client_, ou encore simplement "application web") est l'interface utilisateur de Churros.
|
|
|
|
|
|
|
|
Elle est écrite avec [SvelteKit](https://kit.svelte.dev/), un framework web basé sur [Svelte](https://svelte.dev/), langage basé sur JavaScript, permettant d'exprimer facilement des éléments réactifs d'interface.
|
|
|
|
|
|
|
|
Les données du frontend proviennent entièrement de l'API de Churros, via des requêtes GraphQL qui sont rendus type-safe par la bibliothèque [GraphQL Zeus](https://graphqleditor.com/docs/tools/zeus/)
|
|
|
|
|
|
|
|
> **NOTE:** Un passage de Zeus à [Houdini GraphQL](https://houdinigraphql.com) est prévu, voir #803.
|
|
|
|
|
|
|
|
## Architecture
|
|
|
|
|
|
|
|
L'architecture suit l'architecture standard de SvelteKit:
|
|
|
|
|
|
|
|
- `src/routes`: contient les routes de l'application, qui sont des fichiers `.svelte`
|
|
|
|
- `src/lib`: contient les fichiers de code partagé entre les routes, surtout des fonctions utilitaires (fichiers `.ts`) ou des composants Svelte (dossier `components`)
|
|
|
|
- `src/params`: des filtres pour des paramètres de routes à format spécifique (voir [la documentation SvelteKit](https://kit.svelte.dev/docs/advanced-routing#matching)). Utilisé par exemple pour `/@pseudo`.
|
|
|
|
- `src/scripts`: Des scripts de développement et de maintenance. La plupart sont exécutés par des scripts NPM (voir `package.json` dans `packages/app`).
|
|
|
|
- `src/design`: des fichiers SCSS contenant les styles globaux à toute l'application. Principalement du [CSS Reset](https://css-tricks.com/reboot-resets-reasoning/), et des variables CSS globales (couleurs, largeurs d'arrondis pour `border-radius`, etc.)
|
|
|
|
- `static`: des fichiers statiques, tels que les polices, les logos, etc. |
|
|
|
# App
|
|
|
|
|
|
|
|
Le _frontend_ (ou _client_, ou encore simplement "application web") est l'interface utilisateur de Churros.
|
|
|
|
|
|
|
|
Elle est écrite avec [SvelteKit](https://kit.svelte.dev/), un framework web basé sur [Svelte](https://svelte.dev/), langage basé sur JavaScript, permettant d'exprimer facilement des éléments réactifs d'interface.
|
|
|
|
|
|
|
|
Les données du frontend proviennent entièrement de l'API de Churros, via des requêtes GraphQL. Ces requêtes sont faites à travers [Houdini GraphQL](houdinigraphql.com/), une bibliothèque qui permet entre autres l'existance d'un cache client global, et facilite la gestion des UIs de chargement ("skeleton UI"s), de la pagination et d'autres trucs relous.
|
|
|
|
|
|
|
|
## Architecture
|
|
|
|
|
|
|
|
L'architecture suit l'architecture standard de SvelteKit:
|
|
|
|
|
|
|
|
- `src/routes`: contient les routes de l'application, qui sont des fichiers `.svelte`
|
|
|
|
- `src/lib`: contient les fichiers de code partagé entre les routes, surtout des fonctions utilitaires (fichiers `.ts`) ou des composants Svelte (dossier `components`)
|
|
|
|
- `src/params`: des filtres pour des paramètres de routes à format spécifique (voir [la documentation SvelteKit](https://kit.svelte.dev/docs/advanced-routing#matching)). Utilisé par exemple pour `/@pseudo`.
|
|
|
|
- `src/scripts`: Des scripts de développement et de maintenance. La plupart sont exécutés par des scripts NPM (voir `package.json` dans `packages/app`).
|
|
|
|
- `src/design`: des fichiers SCSS contenant les styles globaux à toute l'application. Principalement du [CSS Reset](https://css-tricks.com/reboot-resets-reasoning/), et des variables CSS globales (couleurs, largeurs d'arrondis pour `border-radius`, etc.)
|
|
|
|
- `static`: des fichiers statiques, tels que les polices, les logos, etc. |
