# Tell me about JS [Lien du diapo](https://hackmd.io/@laurentC35/Hk99o5FWj) --- ## Petit rappel ---- Quelles sont les techno/langages pour le web ? ---- - JS - HTML - CSS --- ## Rappel général des applications JS ---- - Découpage des responsabilités entre IHM et Traitement - Traitement -> back-end en Java - IHM -> Front-end en Javascript ---- ### Client Riche ---- __Pourquoi ?__ - le FRONT & le BACK n'échangent que des données à plat (.json) - le FRONT se charge de : - mise en forme - contrôles - authentification - un peu de traitement (filtre, calcul, ...) - logique métier ---- ### Client sans session ---- - le back expose une API dans une logique "REST" - il n'y a donc pas de session - les appels API (au back) sont indépendant les uns des autres - logique plus de contexte ---- ### Contexte ? ---- - l'appel à l'API s'effectue en donnant toutes les informations nécessaires - identité de la personne - ressource ou l'action à modifier/faire - contenu - le contexte est auto-portant : ne dépend pas d'une requête précédente ! --- ## Cool, mais comment on fait ? ---- Avant de parler de reparler de contexte, parlons d'abord du framework utilisé à l'Insee :  ---- ### React, qu'est ce que c'est ? ---- React est une bibliothèque JavaScript libre développée par Facebook depuis 2013 - à base de composant - déclarative - réutilisable - composant à état ---- # C'est tout ! ---- ## Concretement, ça marche comment ? ---- On écrit des composants en JSX ```jsx const HelloMessage = ({name}) => { return ( <div> Salut {name} </div> ) } ``` ---- On peut ajouter du style ```css! .hello-div{ background-color: red; } ``` ---- ```jsx! import 'helloMessage.css' const HelloMessage = ({name}) => { return ( <div className='hello-div'> Salut {name} </div> ) } ``` ---- Ou utiliser directement des libraires graphiques prêtes à l'emploi ! ```jsx! import Card from '@mui/material/Card'; const HelloMessage = ({name}) => { return ( <Card>Salut {name}</Card> ) } ``` ---- ### Souvent on utilise les deux --- ## Des librairies ? ---- <!-- .slide: style="font-size: 70%;" --> En fait un code Javascript fonctionne un peu comme un code en Java: - on peut inclure des dépendances "externe" - via NPM (~ maven ) - carte d'identité du code/projet : `package.json` (~ pom.xml) - on développe via un environnement dédié : NodeJS (~ JdK) - le tout dans un IDE : VSCode (~ IntelliJ/Eclipse) ---- Une appli React n'est en fait qu'un projet JS qui inclus comme dépendances: - React - React-dom - et éventuellement d'autres libraires utiles (mui, react-router-dom, etc...) --- ## Parlons des bonnes pratiques ---- ### Organisation du Code ---- Comme en java, il faut bien ranger le code pour s'y retrouver facilement, voilà un exemple typique : ``` | public | src | ui | auth | router | others... | core | api | hook | constants | i18n | package.json | DockerFile ``` ---- ### Tests ToDo ! ^^ ---- ### Code en lui-même ---- - linter & prettier : pour formater le code à la sauvegarde ---- <!-- .slide: style="font-size: 70%;" --> Les composant doivent être : - les plus unitaire possible : correspond à élément graphique - un état simples - les fonctions de manipulations de données externalisé dans "utils" - les fonctions d'appel à l'API, externalisé aussi ! --- ### CI / CD & Docker ---- - Image Docker nginx (comme un serveur Apache)