Skip to content

Add glossary entries #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions documentation/docs/07-glossary/02-web.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,13 @@ Les transformations classiques effectuées lors d'un _bundling_ sont :

## Client-side rendering

>> Bientôt
> Bientôt

## DOM

> Bientôt...
Le _Document Object Model_ (DOM) est la représentation objet d'un document HTML chargé dans le navigateur web. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. On parle souvent d'"arbre DOM".

Le DOM relie les pages web aux scripts, fichiers de styles, ressources externes ou langages de programmation. Il peut être manipulé à l'aide du JavaScript.

## Framework

Expand Down Expand Up @@ -66,7 +68,15 @@ Les transformations classiques effectuées lors d'un _bundling_ sont :

## Server-side rendering

> Bientôt...
Le rendu côté serveur, ou _server-side rendering_ (SSR) est l'action de générer une page web avec tout ou partie des données métier directement sur le serveur. Il est à mettre en opposition avec le <span class='vo'>[rendu côté client](#client-side-rendering)</span>, ou _client-side rendering_, où les pages viennent charger la logique dans un premier temps et les données métiers avec des requêtes supplémentaires, ce qui implique de construire une grande partie de la page dans le navigateur.

Le SSR a pour avantages :

- une exécution plus rapide car nécessitant moins de requêtes
- le fait de pouvoir générer l'entièreté d'une page à la première requête, ce qui permet d'afficher une page même si JavaScript n'est pas disponible côté client
- bénéficie d'un meilleur référencement SEO, car les balises de référencement sont générées côté serveur et disponibles pour les outils d'indexation

SvelteKit propose le SSR par défaut, qui peut être désactivé au cas par cas.

## Web component

Expand Down
25 changes: 24 additions & 1 deletion documentation/docs/07-glossary/03-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,30 @@ Plus d'infos sur les valeurs _truthy_ sur [le site de MDN](https://developer.moz

## Inline

> Bientôt...
L'adjectif _inline_ désigne le fait de définir du style, une condition, une fonction ou un composant sur une seule ligne. Toutes ces fonctionnalités ne sont pas permises nativement en Javascript. Certaines sont apportées par les frameworks de développement, comme Svelte.

Exemples :

```ts
// @noErrors
// fonction inline
const saluer = (nom: string) => console.log(`Salut ${nom} !`)

function saluer(nom: string) {
// condition inline
if (!nom) return;

// traitement
}
```

```svelte
<!-- style inline en HTML ou en Svelte -->
<div style="margin: 8px;"/>

<!-- autre manière d'écrire du style inline en Svelte -->
<div style:margin="8px"/>
```

## Nullish

Expand Down
32 changes: 28 additions & 4 deletions documentation/docs/07-glossary/04-sveltejs.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,34 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q

## Binding

> Bientôt...
Le _binding_ est le mécanisme par lequel une valeur d'un input est automatiquement copiée dans une variable :

```svelte
<!-- ici, la valeur est initialisée avec la variable name
mais la variable ne sera pas mise à jour automatiquement avec la saisie de l'utilisateur -->
<input value={name}>

<!-- dans ce cas, la valeur est initialisée avec la variable name
et la variable sera automatiquement mise à jour avec la saisie de l'utilisateur -->
<input bind:value={name}>

<!-- écriture plus concise du binding dans le cas ou la variable porte le même nom que la propriété bindée -->
<input bind:value>
```

De la même manière, il est possible de _binder_ des propriétés d'un composant :

```svelte
<script>
import { Commande } from './Commande.svelte';

let articles;
</script>

<Commande bind:articles={articles}>
```

Il est également possible de _binder_ des propriétés de certains éléments du <span class='vo'>[DOM](/docs/web#dom)</span> (les éléments de type bloc, les images, les vidéo, window via `svelte:window` et document via `svelte:document`).

## Hook

Expand All @@ -29,6 +56,3 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q
Un _store_ est un concept au sein de Svelte qui permet de stocker une valeur, et de notifier n'importe quel module au sein de l'application de ses changements de valeur.

Plus d'infos sur [les stores Svelte dans la documentation](/docs/svelte-store).