M crea/react/GraphQL.md → crea/react/GraphQL.md

@@ -4,19 +4,18 @@ theme: ./_themes/5ika.css
 highlightTheme: github
 verticalSeparator: <!--v-->
 revealOptions:
-  transition: 'fade'
+  transition: "fade"
 ---
-
 
 ![GraphQL](https://graphql.org/img/brand/logos/logo-wordmark.svg)
 
-*Tim Izzo - BDWA - Cours React*
+_Tim Izzo - BDWA - Cours React_
 
 ---
 
 ## Qu'est-ce que GraphQL ?
 
-- C'est un *language de requête* (QL) pour requêter des données organisées *en graphe*.
+- C'est un _language de requête_ (QL) pour requêter des données organisées _en graphe_.
 - Il permet de décrire de manière précise les données requises par une application cliente et d'obtenir ces données avec une seule requête.
 - C'est une alternative aux API REST avec une approche plus structurée et typée.
 
@@ -64,7 +63,7 @@ getUsers: [User]!
 }
 
 type Mutation {
-   removeUser(id: ID!): Boolean
+  removeUser(id: ID!): Boolean
 }
 ```
 
@@ -93,11 +92,11 @@ Par exemple:
 
 ```typescript
 const resolvers = {
-    getUser: (id: string) => {
-        const users = knex('users').select(['id', 'name','email']).where({id});
-        return users?.[0];
-    }
-}
+  getUser: (id: string) => {
+    const users = knex("users").select(["id", "name", "email"]).where({ id });
+    return users?.[0];
+  },
+};
 ```
 
 ---
@@ -122,75 +121,38 @@ - Gérer ses schémas à grande échelle: **GraphOS**
 
 ---
 
-## Travail pratique
-
-Ensemble, nous allons mettre en place un serveur GraphQL permettant de gérer un blog.
-
----
-
-**Première étape**: Définir le schémas.
-
-Nous devons définir:
-
-- Le type `Post` définissant un article de blog
-- Les *queries* et *mutations* possibles sur notre graphe. Ici, on veut CRUD des articles.
-
----
-
-**Deuxième étape**: Installer Apollo Server
-
-=> https://www.apollographql.com/docs/apollo-server/getting-started
-
----
-
-**Troisième étape**: Développer les resolvers.
-
-> Il est nécessaire de se répartir le travail pour éviter 
-> de se marcher sur les pieds.
-
----
-
-**Quatrième étape**: Tester avec Apollo Sandbox
-
-Une interface graphique est automatiquement disponible sur le port
-utilisé par Apollo lorsqu'on est en mode dev.
-
----
-
 ## Requête depuis un client
 
-Une fois que le backend est prêt, on peut faire des requêtes
-depuis un client.
-
 On va utiliser pour cela [Apollo Client](https://www.apollographql.com/docs/react/)
 qui permet une utilisation directement dans React.
 
-
 ---
 
 ## Configuration du client
 
 1. Installation des modules
-    ```bash
-    npm install @apollo/client graphql
-    ```
+
+   ```bash
+   npm install @apollo/client graphql
+   ```
 
 2. Création du client
-    ```typescript
-    import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+   ```typescript
+   import { ApolloClient, InMemoryCache } from "@apollo/client";
 
-    const client = new ApolloClient({
-    uri: 'http://localhost:4000',
-    cache: new InMemoryCache(),
-    });
-    ```
+   const client = new ApolloClient({
+     uri: "https://rickandmortyapi.com/graphql",
+     cache: new InMemoryCache(),
+   });
+   ```
 
 3. Mise à disposition du client pour React
-    ```typescript
-    <ApolloProvider client={client}>
-        <App />
-    </ApolloProvider>,
-    ```
+   ```typescript
+   <ApolloProvider client={client}>
+       <App />
+   </ApolloProvider>,
+   ```
 
 ---
 
@@ -199,22 +161,26 @@ 
 ```typescript
 import { gql } from '@apollo/client';
 
-const POSTS_QUERY = gql`
-    query getPosts {
-      getPosts {
-        id
-        name
-      }
+const CHARACTERS_QUERY = gql`
+ query {
+  characters {
+    results {
+      id
+      name
+      status
     }
+  }
+ }
 `
 
 const Compo = () => {
-    const { loading, error, data } = useQuery(POSTS_QUERY);
+    const { loading, error, data } = useQuery(CHARACTERS_QUERY);
 
     return ...
 }
 
 ```
+
 ---
 
 ## Avec des arguments
@@ -222,18 +188,19 @@ 
 ```typescript
 import { gql } from '@apollo/client';
 
-const POST_QUERY = gql`
-    query getPost($postId: ID!) {
-      getPost(id: $postId) {
-        id
-        name
-      }
-    }
+const CHARACTER_QUERY = gql`
+ query getCharacter($id: ID!) {
+  character(id: $id) {
+    id
+    name
+    status
+  }
+ }
 `
 
 const Compo = () => {
-    const { loading, error, data } = useQuery(POST_QUERY, {
-        variables: {postId: 3}
+    const { loading, error, data } = useQuery(CHARACTER_QUERY, {
+        variables: {id: 5}
     });
 
     return ...
@@ -246,22 +213,34 @@ ## Mutation
 
 ```typescript
 const CREATE_POST_MUTATION = gql`
-    mutation createPost($post: PostInput!) {
-        createPost(data: $post) {
-            id
-            name
-        }
+  mutation createPost($post: PostInput!) {
+    createPost(data: $post) {
+      id
+      name
     }
+  }
 `;
 
-const [createPost, { data, loading, error }] = useMutation(CREATE_POST_MUTATION);
+const [createPost, { data, loading, error }] =
+  useMutation(CREATE_POST_MUTATION);
 ```
+
+> Cet exemple ne fonctionnera pas sur l'API GraphQL de Rick & Morty. C'est uniquement pour donner un exemple de mutation.
+
+---
+
+## Mise en place pour le TP
+
+Tim crée un serveur Strapi avec un modèle "Post" permettant de stocker des articles ainsi que le plugin GraphQL.
+
+> Les permissions pour CRUD le nouveau modèle doivent être ouvertes.
+
 ---
 
 ## Travail pratique
 
 Créer un simple frontend **Typescript** avec ViteJS qui va lister les articles de blog
-disponibles et en créer un nouveau au clique sur un bouton (avec du 
+disponibles et en créer un nouveau au clique sur un bouton (avec du
 contenu par défaut).
 
 ---
@@ -273,8 +252,8 @@ 
 Par exemple:
 
 ```typescript
-const {data, loading, error} = usePostsQuery();
-const {data, loading, error} = usePostQuery({variables: {postId: 5}});
+const { data, loading, error } = usePostsQuery();
+const { data, loading, error } = usePostQuery({ variables: { id: 5 } });
 ```
 
 ---
@@ -282,7 +261,7 @@ 
 ## GraphQL codegen
 
 Avec [codegen](https://the-guild.dev/graphql/codegen), on peut écrire l'ensemble
-de notre queries et mutations dans des fichiers *.gql* et lancer un petit
+de notre queries et mutations dans des fichiers _.gql_ et lancer un petit
 script qui nous génère des hooks pratiques.
 
 ---
@@ -290,4 +269,12 @@ 
 ## Travail pratique
 
 Mettre en place [codegen](https://the-guild.dev/graphql/codegen) dans notre projet
-commun pour mieux organiser nos appels GraphQL.+commun pour mieux organiser nos appels GraphQL.
+
+---
+
+## Hands-On - Authentification
+
+Dans le monde réel, il faut s'authentifier auprès d'une API pour pouvoir l'utiliser.
+
+Nous allons regarder comment configurer Apollo Client ensemble pour se connecter auprès de Strapi puis lui dire d'utilise le token JWT récupéré lorsqu'il fait une requête.

A crea/react/Svelte.md

@@ -0,0 +1,237 @@ 
+---
+title: Introduction à Svelte et SvelteKit
+theme: ./_themes/5ika.css
+highlightTheme: github
+verticalSeparator: <!--v-->
+revealOptions:
+  transition: "fade"
+---
+
+# Introduction à Svelte et SvelteKit
+
+---
+
+## Qu'est-ce que Svelte ?
+
+- Un framework JavaScript pour construire des interfaces utilisateur.
+- Différent de React et Vue car il compile les composants en JavaScript optimisé.
+- Pas de runtime, ce qui le rend très performant.
+
+---
+
+## Avantages de Svelte
+
+- Performances : pas de framework dans le navigateur, juste du JavaScript pur.
+- Simplicité : syntaxe intuitive et minimale.
+- Réactivité : mises à jour automatiques de l'UI lorsque l'état change.
+
+---
+
+## Concepts de base de Svelte
+
+- **Composants** : les blocs de construction de l'interface utilisateur.
+- **Props** : pour passer des données aux composants.
+- **Stores** : gestion de l'état réactif.
+- **Réactivité** : mise à jour automatique des composants lorsque les données changent. C'est les _states_ mais en plus simple.
+
+---
+
+## Exemple de composant Svelte
+
+```js
+<script>
+  let count = 0; // La variable est réactive (state)
+
+  const increment = () => {
+    count += 1; // On peut modifier le state par mutation
+  }
+</script>
+
+<button on:click={increment}>
+  Cliquez-moi: {count}
+</button>
+```
+
+---
+
+## Réactivité et mise à jour automatique de l'UI
+
+- Svelte met automatiquement à jour l'UI lorsque l'état change.
+- Pas besoin d'utiliser `setState` ou `useState` comme dans React.
+
+Exemple :
+
+```
+<script>
+  let name = 'Svelte';
+</script>
+
+<input bind:value={name}>
+
+<p>Hello, {name}!</p>
+```
+
+- Liaison bidirectionnelle avec `bind:value`.
+
+---
+
+## Styling avec Svelte
+
+- Styles encapsulés par défaut dans les composants.
+- Utilisation des balises `<style>`.
+
+Exemple :
+
+```
+<style>
+  p {
+    color: purple;
+  }
+</style>
+
+<p>This is a styled paragraph.</p>
+```
+
+- Les styles sont appliqués uniquement au composant.
+
+---
+
+## Différences avec React
+
+---
+
+## Architecture
+
+- **React** : Utilise un DOM virtuel (Virtual DOM) pour optimiser les mises à jour de l'UI.
+- **Svelte** : Compile les composants en JavaScript pur au moment de la construction, éliminant le besoin de Virtual DOM.
+
+---
+
+## Syntaxe et Apprentissage
+
+- **React** :
+  - Utilise JSX, un mélange de JavaScript et de XML.
+  - Nécessite l'apprentissage de hooks ou de classes pour la gestion de l'état et du cycle de vie.
+- **Svelte** :
+  - Syntaxe intuitive et minimale, sans JSX.
+  - Réactivité intégrée directement dans le langage.
+
+---
+
+## Gestion de l'état
+
+- **React** :
+  - Utilise des hooks (`useState`, `useReducer`, etc.) pour la gestion de l'état local.
+  - Context API ou bibliothèques externes comme Zustand pour la gestion de l'état global (stores)
+- **Svelte** :
+  - Réactivité intégrée, les variables déclarées dans les composants sont réactives.
+  - Utilisation de stores pour l'état global (inclus dans la lib).
+
+---
+
+## Taille du bundle
+
+- **React** :
+  - Taille du bundle plus grande due à la présence du runtime et du Virtual DOM.
+  - Besoin de bibliothèques supplémentaires pour des fonctionnalités avancées.
+- **Svelte** :
+  - Taille du bundle plus petite car le code est compilé en JavaScript pur.
+  - Pas de runtime, moins de dépendances externes nécessaires.
+
+---
+
+## Ecosystème et Communauté
+
+- **React** :
+  - Écosystème mature et vaste.
+  - Large communauté, nombreuses ressources et bibliothèques tierces.
+- **Svelte** :
+  - Écosystème en croissance rapide.
+  - Communauté plus petite mais dynamique.
+  - Moins de bibliothèques tierces, mais de nombreux outils intégrés.
+
+---
+
+## Introduction à SvelteKit
+
+---
+
+- Framework basé sur Svelte pour construire des applications web complètes.
+- SvelteKit est à Svelte ce que NextJS est à React.
+- Gestion des routes, rendu côté serveur, génération de sites statiques, et plus.
+
+---
+
+## Avantages de SvelteKit
+
+- Rendu côté serveur (SSR) pour de meilleures performances et SEO.
+- Génération de sites statiques pour des déploiements rapides (SSG).
+- Routage automatique basé sur la structure des fichiers.
+- Support intégré pour TypeScript, SASS, SCSS, Tailwind, etc.
+
+---
+
+## Structure de base d'un projet SvelteKit
+
+```
+my-sveltekit-app/
+├── src/
+│ ├── routes/
+│ │ └── index.svelte
+│ ├── lib/
+│ └── app.html
+├── static/
+├── svelte.config.js
+└── package.json
+```
+
+---
+
+## Exemple de route dans SvelteKit
+
+`src/routes/index.svelte` :
+
+```
+<script>
+  let message = "Hello, SvelteKit!";
+</script>
+
+<h1>{message}</h1>
+```
+
+---
+
+## Concepts clés de SvelteKit
+
+- **Routes** : Basées sur les fichiers dans le dossier `src/routes`.
+- **Endpoints** : Pour gérer les requêtes API dans le dossier `src/routes`.
+- **Layouts** : Pour partager des éléments de mise en page entre différentes routes.
+- **Load Functions** : Pour précharger des données avant de rendre un composant.
+
+---
+
+## Création d'un projet SvelteKit
+
+Création d'un nouveau projet :
+
+```
+npm create svelte@latest my-sveltekit-app
+cd my-sveltekit-app
+npm install
+npm run dev
+```
+
+---
+
+## Hands-On - Application Todo
+
+- Création d'une application Todo simple.
+- Utilisation des concepts de Svelte et SvelteKit.
+
+---
+
+## Ressources
+
+- [Documentation officielle de Svelte](https://svelte.dev/docs)
+- [Documentation officielle de SvelteKit](https://kit.svelte.dev/docs)
+- [Tutoriels et exemples](https://svelte.dev/tutorial)