# Révision TIW8 # A. Questions de cours (4 points / 10 minutes) ## 1. Quelle est la différence entre props et states en React ? (2 pts) > props => rattaché à un composant, une propriété sur un composant. Permettre de transmettre des valeurs, comme des fonctions : données imutable <=> constante > state => données mutable <=> variable, directement lié a un composant > https://medium.com/@itIsMadhavan/reactjs-props-vs-state-ff3a7680930d ## 2. Quels sont les avantages du $1 recogniser par rapport à Rubine pour la reconnaissance de gestes (2 pts) > c'st simple on en a utilisé aucun des deux, next # B. React + Redux (8 points / 45 minutes) Vous êtes amené à concevoir une application simple de gestion de carnet d’adresse. L’application a trois écrans : une liste de contact avec la possibilité de rechercher, une vue ciblée sur un contact, et une vue édition de contact. ## 1. Dessiner les vues et les composants associés à chacune des vues > Composant Menu de l'application (barre de navigation, titre de l'appli...) > Liste de contact > -> Liste, tableau, bouton pour accéder à la vue ciblée sur un contact > Une vue ciblée sur un contact > -> Composant qui représente un contact + bouton permettant d'accéder à la vue d'édition de contact > Une vue édition de contact > -> Même composant qui représente un contact + boutons de sauvegardes >Composant qui représente un contact >->Un formulaire, une fonctionnalité on/off d'édition ![](https://i.imgur.com/BUSl4I5.png) ![](https://i.imgur.com/ay3aLKN.png) ![](https://i.imgur.com/E4xvtFZ.png) ![](https://i.imgur.com/aEssrxR.png) ![](https://i.imgur.com/cl8vrgJ.png) ## 2. Proposez un diagramme d’architecture décrivant les composants de React, et leur relation aux Action(s), Reducer(s), et Store(s) de Redux. • Le diagramme détaillera les actions, le rôle du/des reducers, et du/des stores. • Ajouter des flèches pour indiquer les flux d’information dans l’application. ![](https://i.imgur.com/5ZGMyGD.png) # C. Synchronisation et Web (4 points / 20 minutes) Lors de l’édition de texte synchrone sur le Web, il est nécessaire de maintenir certaines propriétés pour s’assurer que les actions des utilisateurs sur un même document le maintiennent dans un état cohérent. ## 1. Comment CRDT permet-il de garantir le principe d’idempotence ? > Faut relire le cours ## 2. Donner deux difficultés rencontrées lors de l’établissement d’une connexion Web RTC entre deux clients et l’échange de données. # D. WoT (4 points / 20 minutes) On considère une application de régulation de la température très simple : - s’il fait trop chaud -> refroidir, - s’il fait trop froid -> chauffer. Cette application est déployée de manière totalement distribuée entre un thermomètre, un chauffage et une climatisation. Les 2 derniers ne disposent pas d’un thermostat et ne fonctionnent qu’en « marche forcée ». Chacun de ces 3 appareils possède un microcontrôleur avec suffisamment de ressources pour gérer l’appareil, communiquer avec les 2 autres dispositifs et pour héberger la logique métier. ## 1. Sur quel appareil placeriez-vous la logique métier et pourquoi ? Vous pouvez utiliser un design pattern pour justifier votre réponse La logique métier se situera sur le thermomêtre car c'est lui qui possède les informations utiles à la régulation de la température ## 2. En quoi peut-on dire que le principe d’idempotence ne s’applique-t-il pas aux requêtage de données issues de capteurs ? Donner un exemple basé sur le cas ci-dessus. Imaginons que le thermomêtre demande au chauffage de chauffer. Il lui envoie une requête pour lui demander d'augmenter la température (par exemple la monter d'un cran). Si jamais le thermomètre réenvoie cet ordre alors le chauffage va remonter la température d'un cran, soit un total de deux crans. Donc réenvoyer plusieurs fois le même message aura pour effet d'augmenter ou diminuer la température sans être capable de la stabiliser