Programmation Reactive et Asyncrone: Parlons en avec Flutter

C'est quoi la Programmation Reactive ou Reactive Programming en anglais ? et pourquoi il est si important de le comprendre pour travailler dans les applications frontend web et mobile de nos jours?

De nombreuses technologies/framework et langage de nos jours intègrent et implementent de manière natif le reactive programming  et comprendre ce qui se cache effectivement dans la programmation reactive qui ryme avec la programmation asincronne (asynchronous programming) permet de mieux comprendre les framework frontend comme Reactjs, Angular et meme et surtout le framework Flutter donc l'ergonomie est construite sur la base des Stream/Future donc du pargadigme de reacting programming.

Pour faire simple, notre quotidien est meublé des choses reactives, quand on écrit un post sur notre page facebook par exemple, on attent la reaction de ceux qui nous suivent, on attent la réaction des like, la reaction par un commentaire, la reaction que facebook nous alerte par un email qu'on a commenté de notre post etc.. donc en fait ce mechanisme à peine decrit est basé sur un model reactif, Reactif dans ce sens que suite à un évènement(fair un post), on attend des reactions (commentaires, like, email etc..), si nous transvasons le meme concept dans le monde du coding, on dira que la programmation reactive c'est ce paradigme ou les données des  app que nous produisons à travers le code sont mise à jour de manière reactive chaque fois qu'il y a des évènements qui surgissent dans la app, ces évènements peuvent etre les clicks sur une mouse de l'utilisateur, le telechargement d'un fichier localement ou sur internet qui n'arrive pas d'un coup mais sous forme d'un flux de byte ou de bits, le mouvement de l'utilisateur quand il defile (scroller) les widgets de notre app flutter etc.. le plus souvent, ses données(flux) reactives arrivent de manière asincrone  et du coup ne sont pas toujours previsible dans le temps.

Generalement quand nous déclarons une variable qui peut etre un entier, une chaine de caractère, un nombre decimale ou meme un tableau dans n'importe quel langage de programmation, on peut immediatement utiliser cette variable dans la ligne suivante ou elle est declarée dans notre algorithme, mais il arrive aussi et c'est beaucoup le cas dans le developpement frontend que ce soit mobile ou web mais aussi dans le developement backend, que notre variable fait recourt(pointe) vers une resource externe, par exemple une requete HTTP, une connexion à une base de données etc.. dans ce cas, rien n'est sure que si nous faisons reference à cette variable dans la ligne suivante de notre algorithme, les données contenues dans cette variable seront disponible car étant une reference à quelque chose qui se deroule hors de notre code(requete HTTP), on ne sait pas quand on aura effectivement la reponse et pour faire reference aux données de cette variable, il faut qu'on attende la réponse de la requete HTTP, on appelle cela la programmation asincrone et du coup, la programmation réactive est pour la pluspart asincrone et pour éviter de bloquer le processus dans lequel tourne notre application, les langages et technologies ont mis sur pieds des solutions basées sur "Observer Pattern" qui permet de souscrire à un flux reactive et de reagir en écrivant du code, en javascript on a Promise, calback ou encore avec la bibliothèque RSJX subscribe etc.. en Flutter on a l'objet Future et Stream. L'image suivant donne un peu une idée glbale de qui vient d'etre décrit ci haut:

dans l'image ci haut, on a une idée de l'Obesrevr pattern, les données qui sont des flux ou mieux Stream en anglais sont regulièrement pompées à partir d'une source de données (ça peut etre une requete HTTP, une connexion à une db, l'utilisateur qui defile en gliassant la amin sur une listview de flutter etc..), notre application doit souscrire à cette source- et chque fois qu'il y a des nouvelles donnèes de la source, on est alerté et on peut mettre à jour notre app, exactement comme quand vous souscrivez à ce blog, vous etes immediatement notifié chaque fois qu'il y a un nouveau post,  dans l'Observer Pattern, la source c'est ce qu'on apelle "Observable" et ceux qui souscrivent sont des "Observer".

Flutter dispose de deux objets pour mettre sous pieds la reacte programming:

1. Future : Si vous parcourez les app flutter, outre les widget, vous verrez que la signature de beaucoup de methodes est remplit de "Future, Future, Future" etc etc, d'ailleur pour ceux qui travaillent dans notre projet Flutter QuiZCodeur (si vous voulez en faire partire il suffit de me donnez votre account github et je vous incluerai dans le group de dev Flutter de ce projet), ils vont remarqué que partout les signatures des methodes sont comme dans l'image suivante:

Future c'est l'une des première solution que le framework Flutter nous met à disposition dans l'optiique d'implementer la programmation Reactive et asincrone, ceci permet d'avoir un UI(User Interface) Responsive car le processus principale ce qu'on appelle thread en anglais, qui gère la UI n'est pas bloqué quand l'utilisateur utilise la app car tout est fait de manière asincrone et les données sont reçus par les widgets de manière reactive, pour mieux m'expliquer, Future se comporte comme quand on va au restaurant et on fait une commande, dans l'image suivante que je laisse expressement en anglais, vous faite votre commande et obtenez un reçu, vous n'obtenez pas immediatement le plat demandé mais un reçu(Future), donc le reçu temoigne du fait que vous avez ordonné un repas et que quand tout sera pret vous serrez servit, donc c'est une chose qui arrivera dans le future et seulement quand le cuisinir aura dejà preparé votre plat, et quand c'est pret, vous serez notifié et vous pouvez venir recuperer votre plat et faire de cela ce que vosu voulez, c'est exactement comme cela que se passe le FUTURE de FLUTTER que vous voyez partout et cela n'a acucun mysthère.

Par exemple le code dans l'image suivante en rouge retourne un Future donc une promesse, donc un Reçu en faisant refence à notre analogie du restaurant, la fonction main appellante en vert, utilise la methode "then" de cette promesse(Future) pour inserrez le code de ce qui va se passer quand la promesse sera prete, en javascript on parlera que ce qui est dans le "then" c'est le callback ou une fonction de callback, donc Future en Flutter c'est une Promesse sur quelque chose dans ce cas des données qu'on va recevoir de manière asincrone et donc reactive.

1- Stream : Vous l'avez compris le Stream en flutter comme dans d'autres langage, represente un flux de données qu'on pousse dans un tuyaux(PIPE en anglais) par exemple, il y a un emetteur  de ce flux de données au bout du tuyaux (ça peut etre un serveur web qui repond à une requete HTTP, ça peut etre l'utilisateur qui defile avec son doigt une liste de notre app ou qui clique sur le panier de notre ecommerce dans la app ou meme sur le bouton retour etc..) et un ou plusieurs recepteurs qui souscrivent à la source et chaque fois qu'il y a de nouvelles donnèes se mettent à jour. dans Flutter on a deux types de stream : stream unique c'est à dire destiné à un seul recepteur et stream de type broadacast destiné à plusieurs recepteurs comtemporainement enregistré à la source emettrice de donnèes.

Flutter nous mets à disposition: l'objet StreamController qui permet de creer un stream, et dans nos wideget, si on veut le rendre reactif, on utilise un StreamBuilder  qu'on doit lui fournir un stream qui generalement est crée par un StreamController

l'image suivante fait voir un snippet de code de la construction d'un widget flutter, ce type de code vous le rencontrerez dans des milliers de source code sur github et un bon dev c'est celui qui sait non seulement écrire du code, mais sait ealement lire , interpreté et comprendre le code ecrit par d'autres dev, ce code fait reference au StreamBuilder native de flutter pour rendre notre widget reactif de manière qu'il puisse recevoir ses donnèes de manière asincrone. Beaucoup de bibliothèque utilisé pour la gestion des états dans Flutter comme Bloc/Cubit font justement une abstraction sur ce StreamBuilder à travers BlockBuilder, BlocProvider , BlocConsumer, BlocListener etc.. en dessous il y a utilisation des Stream et de StreamBuilder.

J'esperes que cet article a essayé tant bien que male de lever un pan de voile sur le concept de reactive programming et son utilisation en flutter de manière que vous soyez à mesure de lire et comprendre les codes flutter ou on le retrouve massivement et partout.

Abbonnez vous au blog pour continuer de recevoir des contenus riches sur le coding

 

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: