Les machines à états, une documentation exécutable ? (et debuggable ? et testable ? 🤫)

Les machine à états, pour visualiser la logique de fonctionnement d'une application sous forme d'un diagramme, c'est vieux comme le monde 👴 Alors pourquoi ressortir ça maintenant ?

Parce qu'un nouvel éditeur basé sur xstate est arrivé, stately, et il semble offrir un moyen aux non devs (testeur, PO, whatever) de visualiser et éditer ces fameuses machines

Ces machines à état étant ensuite exécutées dans l'appli, on aurait un code et une doc toujours synchro et compréhensible, le rêve 🤩 Attendez, il y a mieux ! Il paraît qu'on peut générer des tests e2e depuis ces machines à états 🤯

Alors essayons, j'ai pris une petite appli perso et j'ai tenté de voir ce que ca donnait 🧪

Transcript

1. Les machines à état une documentation exécutable ? et debuggable ? et testable ?
2. Antoine Cailly acailly @AntoineCailly antoine.cailly@zenika.com
3. Pourquoi ce talk ?
4. Cahier des charges = ce que fait l’application
5. Cahier des charges = ce que fait l’application Spécifications fonctionnelles = ce que fait l’application
6. Cahier des charges = ce que fait l’application Spécifications fonctionnelles = ce que fait l’application Cahier de recette = ce que fait l’application
7. A la recherche de…
8. ??? = ce que fait l’application Fonctionnel Dev Test Doc
9. Machine à état ? = ce que fait l’application Fonctionnel Dev Test Doc
10. - Les machines à état c’est quoi ? - Est ce que c’est adapté à mon contexte ?
11. Les machines à état c’est quoi ?
12. Démo Stately https://state.new/
13. Formulaire
14. Formulaire Traitement VALIDER exécuterRequête
15. Formulaire Traitement Nouvelle page VALIDER exécuterRequête SUCCES afficherMessageSuccès
16. Formulaire Traitement Nouvelle page VALIDER ERREUR afficherMessageErreur exécuterRequête SUCCES afficherMessageSuccès
17. Formulaire Traitement Nouvelle page VALIDER SUCCES afficherMessageSuccès ERREUR afficherMessageErreur exécuterRequête State(S) x Event(E) -> State(S'), Actions (A)
18. Les machines à état sont partout !
19. Machine à état ? = ce que fait l’application Fonctionnel ✅ Dev Test Doc
20. Ensuite, les devs
21. https://xstate.js.org/
22. { "id": "Démo Breizhcamp", "initial": "Formulaire", "states": { "Formulaire": { "on": { "Valider": { "target": "Traitement" } } }, "Traitement": { "invoke": { "src": "exécuterRequête", "onDone": [ { "target": "Nouvelle page", "actions": "afficherMessageSuccès" } ], "onError": [ { "target": "Formulaire", "actions": "afficherMessageErreur" } ] } }, "Nouvelle page": {} } } Formulaire Traitement Nouvelle page VALIDER SUCCES afficherMessageSuccès ERREUR afficherMessageErreur exécuterRequête
23. Formulaire Traitement Nouvelle page VALIDER SUCCES afficherMessageSuccès ERREUR afficherMessageErreur exécuterRequête interpret() Machine à état Actions déclenchées par la machine à état + exécuterRequête = … afficherMessageSuccès = … afficherMessageErreur = … Machine à état exécutable
24. Démo Inspector
25. Machine à état ? = ce que fait l’application Fonctionnel ✅ Dev ✅ Test Doc
26. Et maintenant, le test
27. Laissez moi vous conter une histoire…
28. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne
29. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne Inviter la personne dans la conversation de groupe
30. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne Inviter la personne dans la conversation de groupe Quand la personne rejoint le groupe …
31. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne Inviter la personne dans la conversation de groupe Quand la personne rejoint le groupe Etablir la connexion avec les autres participants du groupe …
32. quand tout à coup !
33. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Démarrer un appel FaceTime avec Alice
34. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne Démarrer un appel FaceTime avec Alice
35. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne M’inviter moi dans la conversation de groupe Démarrer un appel FaceTime avec Alice
36. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne M’inviter moi dans la conversation de groupe J’ai déjà rejoint le groupe Démarrer un appel FaceTime avec Alice
37. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne M’inviter moi dans la conversation de groupe J’ai déjà rejoint le groupe Établir la connexion avec Alice… Démarrer un appel FaceTime avec Alice
38. En tant qu’utilisateur, quand je swipe up je peux cliquer sur le bouton “Ajouter une personne” afin d’ajouter une personne dans la conversation de groupe Bouton Ajouter une personne M’inviter moi dans la conversation de groupe J’ai déjà rejoint le groupe Établir la connexion avec Alice… même si elle n’a pas encore accepté l’appel ! Démarrer un appel FaceTime avec Alice
39. State explosion 💥 Personne appelant Personne appelée Personne ajoutée Off Ca sonne Contact établi Off Ca sonne Contact établi Off Ca sonne Contact établi X X
40. State explosion 💥 Personne appelant Personne appelée Personne ajoutée Off Ca sonne Contact établi Off Ca sonne Contact établi Off Ca sonne Contact établi X X
41. La machine a état déclenche l’ajout d’une personne uniquement depuis l’état contact établi Implicit vs explicit state
42. Ca ne sert à rien de tester un chemin qui n’est pas dans la machine 🤩
43. Formulaire Traitement Nouvelle page VALIDER SUCCES afficherMessageSuccès ERREUR afficherMessageErreur exécuterRequête Interface utilisateur Machine à état Testeur.euse Événement Interagit Vérifie Etat
44. On peut automatiser les intéractions et la vérification avec les tests End-To-End (E2E) 🤩
45. Formulaire Traitement Nouvelle page VALIDER SUCCES afficherMessageSuccès ERREUR afficherMessageErreur exécuterRequête Interface utilisateur Machine à état Cypress Événement Interagit Vérifie Etat
46. Formulaire Traitement Nouvelle page VALIDER ERREUR afficherMessageErreur exécuterRequête SUCCES afficherMessageSuccès vérifier la présence du message d’erreur vérifier la présence du message de succès vérifier le lancement de la requête simuler le remplissage et la validation du formulaire vérifier l’affichage du formulaire vérifier l’affichage de la nouvelle page simuler le succès de la requête simuler l’échec de la requête
47. On peut automatiser le parcours de la machine à état 🤩
48. Passer par tous les états au moins une fois, passer par tous les chemins au moins une fois, etc.
49. Démo Model Based Testing
50. const testMachine = addTests(machine, testStates) const testModel = createModel(testMachine).withEvents(testEvents) describe('abonnements', () => { beforeEach(function () { cy.visit('http://localhost:3000/feeds') cy.contains('Charger les données fictives').click() }) const testPlans = testModel.getSimplePathPlans() testPlans.forEach((plan) => { describe(plan.description, () => { plan.paths.forEach((path) => { it(path.description, () => { cy.then(path.test) }) }) }) }) describe('coverage', () => { it('should pass', () => { testModel.testCoverage() }) }) }) 🪄
51. Machine à état ? = ce que fait l’application Fonctionnel ✅ Dev ✅ Test ✅ Doc
52. Enfin, la doc
53. Démo génération Mermaid et Markdown https://github.com/acailly/state-machine-rss-reader/blob/main/src/abonnements/abonnements.machine.doc.test.md
54. Machine à état ? = ce que fait l’application Fonctionnel ✅ Dev ✅ Test ✅ Doc ✅
55. Machine à état ✅ = ce que fait l’application Fonctionnel ✅ Dev ✅ Test ✅ Doc ✅
56. Est ce que c’est adapté à mon contexte ?
57. Est ce que c’est adapté à mon contexte ? Disclaimer : gardez un esprit critique, mon avis n’est que mon avis et vous connaissez mieux votre contexte que moi 😉
58. REX n° 1 : le mien Quoi : Un lecteur RSS pour usage perso Objectif : Est-ce viable pour une application interne avec beaucoup d’intervenants ponctuels avec des compétences et des appétences variées ? Positif 👍 : - facilite la compréhension de l’existant - moins de choses à jeter en cas de refonte Négatif 👎 : - Glue entre le JSON et le code parfois fastidieuse à coder - L’éditeur de stately ne permet pas d’ajouter/d’afficher tout ce que sait faire xstate
59. REX n° 2 : un ex-collègue Quoi : Une application musicale gérant des média et interagissant avec des briques externes Objectif : Centraliser les interactions en une seule source de vérité visuelle et debuggable Positif 👍 : - “Tellement pratique et maintenable alors que l'application se complexifiais” - Discuter en modifiant la machine sans coder tout ce qu’il y a derrière Négatif 👎 : - Nécessité de refondre une partie de l’existant - “Un peu fastidieux et lourd à écrire”
60. https://liveblocks.io/blog/whats-new-in-v1-1 By completely rewriting our previous connection engine as a formalized state machine, we have taken a holistic approach to resolve all known bugs around connectivity and client recovery in edge cases [...] The rewritten connection engine, formalized and implemented as a state machine, streamlines the connection and reconnection process, greatly reducing the number of states we handle internally, making it easier to reason about the exact state of the Liveblocks connection at any given moment. REX n° 3 : publication de LiveBlocks
61. REX TL;DR; Une histoire de compromis "Je pense que ca se prête vachement bien à des applications web à interaction forte (type éditeur WYSIWYG, appli avec médias, etc.) mais moins à des sites où toute la logique est portée côté backend" A utiliser là où il y a beaucoup d’interactions 🎯 (même dans le backend) Fiabilité et maintenabilité 👍 vs fastidieux et lourd 👎 "Un peu fastidieux et lourd à écrire mais tellement pratique et maintenable alors que l'application se complexifie"
62. https://xstate.js.org/docs/about/showcase.html#showcase https://github.com/statelyai/xstate/discussions/255 Usages connus .pl
63. Des alternatives moins fastidieuses ?
64. https://thisrobot.life/
65. { "id": "Démo Breizhcamp", "initial": "Formulaire", "states": { "Formulaire": { "on": { "Valider": { "target": "Traitement" } } }, "Traitement": { "invoke": { "src": "exécuterRequête", "onDone": [ { "target": "Nouvelle page", "actions": "afficherMessageSuccès" } ], "onError": [ { "target": "Formulaire", "actions": "afficherMessageErreur" } ] } }, "Nouvelle page": {} } } createMachine( "Formulaire", { Formulaire: state( transition("Valider", "Traitement") ), Traitement: invoke( exécuterRequête, transition( "done", "Nouvelle page", afficherMessageSuccès ), transition( "error", "Formulaire", afficherMessageErreur ) ), "Nouvelle page": state() } ) 👆 exécuterRequête, afficherMessageSuccès et afficherMessageErreur sont des fonctions (pas de mapping à faire) xstate robot
66. https://zagjs.com/
67. https://stately.ai/blog/announcing-xstate-v5-beta La version de la simplification
68. Merci 🙏 https://github.com/acailly/state-machine-rss-reader acailly @AntoineCailly antoine.cailly@zenika.com