Framework js

a marqué ce sujet comme résolu.

Bonjour à tous,

Je débute un nouveau projet et avant de me lancer dans le codage pur et dur je me suis dit qu’il était temps de revisiter un peu les framework js qui existait, peut-être existe-t’il un répondant le mieux à mes besoins.

Jusqu’ici j’ai fait quelques projets à l’aide d’Angular, j’ai commencé à l’époque d’Angular 1 et à présent on en est à la 5 et j’ai suivit. J’ai appris le TypeScript grâce à sa et concrètement j’aime sa !
Coté back, n’étant qu’un support de données pour le front j’ai toujours utilisé express et socketIO "à l’arrache", a fonctionne bien mais c’est moyennement maintenable, et tant qu’à faire, j’aimerai évoluer à ce sujet.

Bref, j’aimerai utiliser un framework ayant l’élégance d’Angular coté back, voir si possible front & back. En ce sens où, si on a un objet Voiture à stocker dans la bdd, il faut être en mesure de le manipuler coté back pour vérifier que la voiture à 4 roues avant de l’enregistrer mais il faut également pouvoir manipuler cet objet Voiture dans le front pour faire tourner les roues.

Donc les modèles doivent être partagé entre le front et le back et c’est là que cela pose des problèmes.


Concernant le stockage des données j’ai trouvé TypeORM, on défini des classes avec les annotation qui vont bien et le manager se débrouille ensuite à la manière de Doctrine avec php. Clairement un outil au top du top.

La difficulté c’est de partager les entités coté front & back. Je serai assez frustrer de devoir définir un objet Voiture coté back avec ses propriétés et les annotations et devoir refaire exactement le même travail coté front. Lorsque l’on définit une entité c’est avec les annotation de TypeORM, hors si TypeORM n’est pas coté front je suis certain que le compilateur TypeScript va me faire passer un sale quart-d’heure.


Définir les modèles c’est bien, définir des modules c’est mieux. Si le back peut manipuler les données à loisir il ne peut pas les exposer sans retenue ni contrôle au front. C’est pour cette raison que l’on développe des API type REST, on peut contrôler ce qui est retourner à l’utilisateur.

Après quelques recherches j’ai trouvé Feathers.

Quand je suis tombé la dessus j’ai juste halluciné, on défini un service et on peu l’exposer sans ce poser de question via REST ou via websocket, ce qui permet donc de proposer du temps réel sur son API et donc de créer des application dynamique sans problème. Pourquoi vérifier toutes les minutes si on a un nouveau message si le serveur peu nous le dire immédiatement dés qu’on en a effectivement un.

Ce qui est dommage c’est qu’il n’utilise pas TypeScript, donc pas de jolie annotation ou d’implémentation d’interface. On soie on peut tout à fait s’en passer. N’empêche que j’aurai évidement préférer avec.

D’autant que j’ai parcouru la documentation, il propose bien un système pour gérer l’authentification des utilisateurs mais je n’ai rien vu de similaire au Guard, autrement dit une mécanique permettant de vérifier que l’utilisateur effectuant une action à bel et bien le droit d’effectuer cette action.


Un peu par hasard je suis tombé sur le framework Nest, lui à l’avantage d’être conçu pour TypeScript, donc un code assez sympa à lire et utiliser.

Par contre on ne retrouve pas la fonctionnalité phare de Feathers, et si au début c’était une idée sympa mais sans plus, au fur et à mesure de ma réflexion je me suis dit qu’une telle fonctionnalité est juste indispensable car l’application cliente n’a plus à surveiller le serveur pour savoir s’il y a des nouveautés et on n’a pas besoin d’écrire du code spécifique pour se faire.

J’ai fais des recherches afin de savoir s’il y avait moyen d’avoir les deux framework mais cela n’a rien donné, j’ai fais d’autres cherches afin de savoir s’il y avait moyen d’avoir la même fonctionnalité sur Nest. Je suis tombé sur un article proposant d’utiliser Ably, sa à l’air sympa mais j’ai un gros problème avec l’idée de passer par un service externe alors que la fonctionnalité pourrai totalement être assumée seule.

En l’occurrence je cherche quelques chose comme Nest proposant la fonctionnalité de Feathers.


A partir du moment où l’on peu avoir une base commune entre le front et le back et la possibilité de faire communiquer les deux de manière structurée je pense que j’aurai les outils pour développer un projet qui sera aisément maintenable.

Toutes suggestion/remarque est la bienvenue.

Cordialement, La source

+0 -0

Si tu veux du TypeScript, regarde du côté de LoopBack : leur v4 est refaite entièrement en TS.

Sachant que les versions précédentes avaient des plugins (pas forcément officiels, mais bien maintenus, comme LoopBack SDK Builder auquel j’ai participé l’an dernier) pour Angular, je pense que la v4 aura également son export en TS. ;)


Sinon tu peux toujours te tourner vers des outils comme React ou Meteor, qui gèrent aussi bien côté serveur que client.

Bonjour,

Merci pour vos retour, j’ai jeter un œil approfondi à Meteor mais il faut croire qu’il y a une subtilité qui m’échappe qui m’empêche de comprendre.

J’ai suivi cette documentation puisqu’il concerne Angular 2+, dans cette doc je vois que l’on mutualise les modèles coté serveur et coté front ce qui m’enchante.

En revanche je n’ai pas compris comment le client et le serveur communique ensemble, j’ai vu quelque par que par défaut le client s’attends à ce que le serveur soie sur localhost:3000 (et que cela est évidemment paramétrable) mais je n’ai pas compris quel est la méthode de transport et à quel moment le client sais qu’il doit contacter le serveur et le serveur contacter le client.

Après une lecture un peu plus attentive j’ai repéré un mécanisme de pub/sub avec MongoDB, mais pour tout dire j’aurai apprécier pouvoir faire cela grâce à TypeORM tout simplement car je ne connais pas MongoDB, je peux l’apprendre mais c’est surtout que si les bases noSQL ont certains aventages elles ont aussi des inconvénients tel que le poids des données (j’ai longtemps travaillé avec CouchDB/PouchDB, sa apporte des tas de points positif, mais là où une db sql fait 60Mo on atteins le Go avec CouchDB à cause de la réplication de l’ensemble des nom des attribut)

J’avoue être perplexe avec Meteor, comme je l’ai dit, vu le nombre d’articles qui sont sur le web je suis persuadé que c’est un bon framework. Néanmoins il y a un truc que j’ai pas compris qui fait que sa coince.

+0 -0

Meteor fonctionne via mongoDB (ou n’importe quel SGBD si tu utilises Apollo), via un système de pub/sub. La différence, c’est qu’une application web servie par Meteor dispose de sa propre base de données locale, en JS, dans le navigateur. Du coup, quand tu veux une donnée, ça se passe comme ça:

  1. Le routeur (coté navigateur) décide, suite à un clic de l’utilisateur par exemple, d’afficher telle vue (le moteur front entre en jeu, que ce soit Blaze, Angular, VueJS, React, …).
  2. Au passage, l’écriture de ta vue permet au client de savoir quelles données la vue va devoir utiliser pour être "remplie" correctement. Ces données sont représentées par un curseur, équivalent à une requête sur la base de données serveur. Elle définit le sous-ensemble de la base qui est la donnée demandée. Le tout est géré via un mécanisme de publication/souscription, qui fait que le serveur n’expose que ce qu’il veut, et que le client peut rapidement dire ce dont il a besoin.
  3. La vue est affichée sans données (blocs vides avec une animation de chargement par exemple)
  4. Les données sont fournies par le serveur au client, qui les réplique dans sa base de données locale
  5. La vue se rafraichit automatiquement.

Il est à noter que la vue ne fait pas de requête directe au serveur : elle requête la base locale. Lorsqu’une modification des données est faite, elle est faite dans la base locale. La vue est rafraichie directement, puis la modification est notifiée au serveur. Là, ou il la rejette, et la vue revient à son état initial, ou il l’accepte et notifie tout client ayant demandé des données qui seraient impactées. La modification est répliquée sur les clients. Le client fait donc de la prévision du résultat en simulant les tests que fait le serveur coté client, pour éviter tout refus du serveur dans la majorité des cas. On évite donc une quelconque latence visuellement, même si la donnée n’est pas synchronisée instantanément entre tous les clients (on n’a pas encore trouvé de méthode miracle pour la réplication plus vite que la vitesse de la lumière hein).

Meteor est adapté pour des applications web, qui supposent donc que pour la majorité de ce que tu affiches, tu ne vas pas passer ton temps à demander des choses différentes. Par exemple, sur un agenda en ligne, les données de la personne ne sont rapatriées qu’une seule fois puis gardées en synchro. Les souscriptions tant des méthodes pouvant recevoir des paramètres, on peut modifier à la volée la plage de données qu’on veut (pour ne rapatrier que les évènements dans une fenêtre d’un mois autour de la date visualisée par exemple). Ca veut dire zéro délai pour l’affichage des pages, et zéro délai pour la récupération des données de la base (puisqu’en réalité on ne contacte même pas le serveur). Quand c’est possible, on évite de désouscrire et resouscrire à des publications chaque fois que l’on veut afficher une page, sinon on récupère un peu ce délai réseau le tant que l’appli reçoive les données client. Mais il faut correctement gérer ses publications et souscriptions, car évidemment si tous les clients demandent toute la base, c’est lourd, et à la moindre modification tout le monde doit se synchro. Donc tu tues les perf de l’appli. Il faut correctement dimensionner ce dont on a besoin.

Tu ne pourras probablement pas brancher l’ORM de ton choix sur ce genre de technologie par contre, c’est un full stack. Tu peux donc gérer le front, gérer la base de données, mais le système de synchro, pas possible.

Dans Meteor l’application est conçue d’un bloc, il n’y a pas deux gros dossiers projets "client" et "serveur".

Pour la communication client serveur, Meteor se base quand c’est possible sur un websocket. Le protocole utilisé est DDP. Le HTTP classique n’est utilisé que pour servir l’application la première fois, et servir les fichiers statiques. Ensuite, il n’utilise plus qu’un port websocket.

Clairement, c’est une tech assez atypique qui n’est pas adaptée pour tout (par exemple pour un petit site statique du genre vitrine c’est pas du tout ce qu’il faut).

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte