Quel framework JS utiliser pour une UI (trés) réactive? [Résolu]

Signaler
Messages postés
1475
Date d'inscription
samedi 25 juin 2016
Statut
Contributeur
Dernière intervention
25 mars 2021
-
Messages postés
1475
Date d'inscription
samedi 25 juin 2016
Statut
Contributeur
Dernière intervention
25 mars 2021
-
Bonjour à tous,

En ce moment je développe (du moins j'essaie) une app web / jeu de gestion d'actifs financiers en PHP (backend) et Javascript (front) essentiellement...
Le problème est le suivant :
Pour fonctionner, mon jeu doit calculer chaque seconde a un tableau de valeurs :
(tableau de données a un instant t de l'execution du jeu) :
{
  "score": 5006.785757239486,// score de la partie
  "level": 1,
  "a": [ // position sur une action
    {
      "id": "uniqueID0",
      "v": 1000,
      "i": 120.33, // cours initial
      "n": 122.5,// cours actuel
      "s": "AAPL",
      "t": 1616294232880,
      "u": false,
      "g": 1.8033740546829566, //augmentation relative
      "r": -0.30056234244715946 //gains absolus
    },
    {
      "id": "uniqueID1",
      "v": 1000,
      "i": 3067.85,
      "n": 3137.96,
      "s": "AMZN",
      "t": 1616294232880,
      "u": false,
      "g": 2.2853138191241467,
      "r": -0.3808856365206911
    },
    {
      "id": "uniqueID2",
      "v": 1000,
      "i": 128.5,
      "n": 130.46,
      "s": "IBM",
      "t": 1616294232880,
      "u": true,
      "g": 1.5252918287937804,
      "r": 0.2542153047989634
    },
    {
      "id": "uniqueID3",
      "v": 1000,
      "i": 509,
      "n": 535,
      "s": "NFLX",
      "t": 1616294232880,
      "u": true,
      "g": 5.1080550098231825,
      "r": 0.851342501637197
    }
  ],
  "gps": 0.42410982746831 //gains par seconde
}


Ces valeurs sont les variables du jeu. Par exemple, le "score" doit être incrémenté chaque seconde par le "revenu par seconde", lui même calculer a partir d'autres valeurs..
Le calcul n'est pas le problème, le problème c'est que je ne sais pas de quelle facon afficher ces valeur avec un rafraichissement précis d'un par seconde, voir 10hz pour le score (pour voir les nombres du compteur défiler lol).
J'ai essayer avec React.js, mais c'est pas fait pour, et modifier les valeurs est, quand c'est pas impossible, source de trop de bugs.
Ces données sont calculées par le navigateur directement, côté client.

Question : Selon vous, quel serait le framework ou la technique/organisation la plus adapté pour ce genre de chose ?
Évidemment le plus léger serait le mieux, je n'ai pas besoin de grand chose à part ca.

Pour l'instant je fais ca avec une boucle
setInterval()
:
Et pour intégrer les données dans l'UI j'utilise
GetElementByID().innerHTML
c'est vraiment pas terrible :
setInterval(function (){
  /*alen = nombre de A*/
  let gps = 0;
  let alen = getAlen(datas);
  console.log(alen);
  /*boucle for principal*/
  for (ival=0;ival<alen;ival++) {
    if (datas.a[ival] == undefined){
      continue;//skip les slot vide
    }
    /*process des A*/
    processEachA(datas,ival);
    /*process du score par seconde*/
    gps = gps + datas.a[ival].r;
  }
  datas.gps = gps;
  //process du score global
  datas.score += gps;
  console.log(datas);
  //envoyer datas vers UI...
},1000);


Si vous trouvez pas ça clair n'hésitez pas à demander...
Merci d'avoir lu !

Configuration: Windows / Firefox 87.0


Jésus peut marcher sur l'eau.
Une pastèque est faite a 90% d'eau.
Or je peut marcher sur des pastèques.
Donc je suis Jesus.

1 réponse

Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
3 386
Bonjour,
Qui dit framework dit surcouche...
Donc.. en fait..Tu n'auras pas plus léger et rapide que du vanilla js... Ce que tu fais déjà donc...

Messages postés
1475
Date d'inscription
samedi 25 juin 2016
Statut
Contributeur
Dernière intervention
25 mars 2021
184
Salut,
Donc selon toi je ne trouverai rien de mieux que de faire tout ca en JS pur...
Tu as sûrement raison, je cherche depuis 3 jours et j'ai rien trouvé de toute façon.