PC & Mobile

Que sont les machines d'état et pourquoi les utilisons-nous? – smartive

Que sont les machines d'état et pourquoi les utilisons-nous? - smartive


Étudiant tirant ses cheveux sur les bogues logiciels. Photo par Tim Gouw sur Unsplash

OIl était une fois deux étudiants en informatique qui comme par hasard les deux travaillent pour la même entreprise maintenant. J'étais l'un des leurs. Nous assistions à un cours intitulé «Interfaces utilisateur 1», qui comprenait un exercice pratique: créer une interface utilisateur avec Java Swing. Plus précisément, nous avons été chargés de créer une interface conviviale pour un logiciel de bibliothèque, qui permettrait aux bibliothécaires hypothétiques de gérer des livres, des clients et des locataires.

La tâche impliquait quelques passages difficiles destinés à nous faire descendre dans la vallée de «putain, ce n’est même pas si facile!» Et, espérons-le, sur une colline de grande perspicacité. Un livre, par exemple, peut être en stock, prêté, endommagé ou même perdu. Mon camarade étudiant et moi-même étions très désireux d'obtenir une bonne note et avons évidemment décidé de travailler sur notre code dans un bar scandinave local. Il se peut qu'il y ait eu ou non de la bière en cause, mais après quelques heures de codage joyeux, je fus soudainement confronté au message suivant:

Terriblement truqué Java Swing Dialog.

OK, je vais être honnête avec vous. Là était bière en cause, et c’est le moment où nous avons pris du recul et décidé d’appeler cela un jour.

Mais qu'est-ce qui a mal tourné? Si je me souviens bien, ce message d'erreur était supposé s'afficher lorsqu'un bibliothécaire a tenté de prêter un livre déjà prêté, mais avec la date de retour attendue dans la boîte de dialogue. Dans ce cas cependant, nous avons réussi à mettre un livre dans deux états en même temps: prêté et perdu.

Bien que l'exemple d'un livre et de ses états possibles reste relativement simple, le modèle mental que les développeurs frontaux doivent conserver est de plus en plus complexe à mesure que les règles et les flux de travail sont déplacés vers les applications client.

Théorie de base des automates et… Machines Machines automatiques!

Dans la théorie des automates de base (à mon université, la classe s’appelait Bases mathématiques de l'informatique) nous avons découvert les expressions régulières, les grammaires sans contexte et - roulement de tambour - machines à états finis déterministes. À l'époque je a connu Je n'aurais plus jamais besoin de cela dans ma vie quotidienne en tant que développeur web. Mais que sont-ils?

Il [Finite-state Machine] est une machine abstraite qui peut être en exactement un d'un nombre fini d'états n'importe quand.
- Wikipédia

Cela ressemble terriblement à l'irrégularité que nous rencontrons avec notre livre qui est à la fois dans les états prêtéet perdu . Se pourrait-il que je me suis trompé et que je auraitutiliser à nouveau les machines d'état après avoir obtenu son diplôme?

Si nous visualisons les différents états qu'un livre peut avoir, nous obtenons quelque chose de similaire à ceci:

Diagramme d'état simple montrant quels états un livre peut avoir

Formellement parlant, une machine à états finis est un quintuple (, 𝑺, 𝑺₀, 𝜹, 𝑭), où:

  • Σ est un alphabet de saisie.
  • 𝑺 est un ensemble d'états possibles.
  • 𝑺₀ est l'état initial.
  • δ est une fonction de transition d'état ⨉ 𝜮 → (une transition d'un état à un autre sur une entrée de l'alphabet Σ).
  • 𝑭 est un ensemble d'états finaux.

Tenter de transformer le diagramme d'états ci-dessus en code peut générer l'extrait suivant:

{
"initial": "En stock",
"États": {
"En stock": {
sur: {
"Prêter": "Prêté",
},
},
"Prêté": {
sur: {
"Revenir": "En stock",
"Dommage": "Endommagé",
"Perdre": "Perdu",
},
},
"Endommagé": {
sur: {
"Réparation": "En stock",
},
},
"Perdu": {
sur: {
"Trouver": "En stock",
},
},
},
}

En correspondance avec le diagramme d'états, nous avons un nombre fini d'états (𝑺- En stock, Prêté , Endommagéet Perdu), des actions qui définissent des entrées possibles (Σ - Prêter, Revenir, Dommage, Perdre , réparationet Trouver), un état initial (𝑺₀ - En stock) et les définitions des fonctions de transition d'état (δ- Prêter → Carême , etc.). Avec une définition explicite des états et des transitions possibles, il est maintenantmathématiquement impossible d'être dansdeux États en même temps.

XState

Déclarer un diagramme d'états de manière déclarative est merveilleux, mais comment transformer cet objet en une machine à états? Comment pouvons-nous «faire fonctionner» la machine à états et nous assurer que notre programme est déterministe, comme le promet le concept mathématique?

La réponse estXState. XState est une fantastique implémentation JavaScript et TypeScript de machines à états finis par David Khourshid. Avec le bloc de code ci-dessus en tant que configuration, une machine à états peut être instanciée et adhérera aux règles données.

importer {Machine} de 'xstate';
const bookMachine = Machine ({
"initiale": "En stock",
"États": {
"En stock": {
sur: {
"Prêt": "Carême",
},
},
"Prêté": {
sur: {
"Retour": "En stock",
"Dommage": "Endommagé",
"Perdre perdu",
},
},
"Endommagé": {
sur: {
"Réparation": "En stock",
},
},
"Perdu": {
sur: {
"Trouver": "En stock",
},
},
}
});

Après l'instanciation, la machine à états sera à l'état initial: En stock. Envoi d'une entrée de l'alphabet Σentraînera une transition d'état ou ne fera rien; par exemple si la machine d'état est dans leEtat initial et reçoit un Prêteraction, l'état suivant sera Prêté. S'il s'agit d'une autre entrée, l'état restera le même.

L'implémentation de nos applications à interface utilisateur lourde avec des machines d'état nous a considérablement aidé à réduire la complexité. Au fur et à mesure que nos applications se développent (et le font encore!), Les diagrammes d'état facilitent également l'entrée de nouveaux développeurs sur ces projets, leur permettant de comprendre en profondeur ce qui se passe, et également de comprendre ce que les applications incluent, en plus des fonctionnalités «évidentes».

Mais évidemment, vous voulez des faits concrets. Vous voulez des exemples et voirréalscénarios comment nous utilisons les machines d'état dans les applications. Et c’est exactement ce que sera le prochain article: comment intégrer les machines d’état dans nos applications React, comment relier les transitions d’état à nos composants et comment rendre le rendu en fonction de l’état actuel de notre machine à états.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close