Besoin de conseils pour un choix technique

a marqué ce sujet comme résolu.

Bonjour à tous,

Je viens écrire un peu ici car je suis actuellement en train de travailler sur un projet personnel, présenté ici, et j'ai besoin de votre aide quant à l'implémentation d'une fonctionnalité.

Sans rentrer trop dans le détail (mais un peu quand même pour la compréhension), je suis en train de développer un "designer de vaisseaux". Concrètement, un modèle de vaisseau, créé par ce designer, comportera plusieurs éléments :

  • Une unique classe
  • Plusieurs modules, chacun ayant des caractéristiques propres

La classe détermine le tonnage du vaisseau (sa taille), donc le nombre de modules qu'il peut contenir.

Après cette brève présentation, voici ce que l'outil que je développe doit faire :

  • On choisit une classe
  • On voit alors s'afficher les caractéristiques de la classe, notamment le tonnage sous la forme "0/[tonnageMax]"
  • On peut alors sélectionner un type de module (armement/défense)
  • On peut alors sélectionner une classe de module (longue portée/moyenne portée/courte portée)
  • En cliquant sur une portée, on charge via AJAX les modules correspondants (au type et à la classe)
  • En cliquant sur un des modules qui s'affichent alors, il apparaît un input pour en choisir le nombre
  • À chaque modification du nombre, le tonnage est mis à jour sous la forme "tonnage/tonnageMax"

Voilà à peu près pour la description (n'hésitez pas à me demander des clarifications). Les données chargées en AJAX sont fournies par une API qui retourne du JSON.

Du coup, j'ai essayé d'implémenter cela avec jQuery, mais ça devient assez rapidement difficile à mettre en oeuvre (des callbacks de partout).

J'ai entendu parler (et lu quelques trucs sur) Angular JS, et je voudrais savoir si quelqu'un l'a déjà utilisé et pense que ce framework pourrait être adapté à ce que je souhaite faire, ou si je dois persévérer avec jQuery.

Merci d'avance :)

+0 -0

Angular est tout a fait adapté pour ton usage. jQuery aussi d'ailleurs. Par contre, pour angular, tu vas devoir tout refaire et tout réapprendre de zéro.

Et un petit conseil ; si ton nombre de modules est faible (< 10k) charge toute la liste en un seul fichier au début de ton application. Comme ça tu n'aura plus qu'un seul appel AJAX, c'est plus simple à gérer et plus rapide à éxécuter.

+0 -0

Ça changera pas grad chose, que tu utilises l'un ou l'autre je pense.

Le problème des callbacks c'est que ça devient vite difficile à gérer. Pour résoudre le problème, renseigne-toi sur les Promises.

La techno que tu utiliseras derrière importera peu une fois que tu auras éliminé ce problème. Par contre il faut voir ce dont tu as besoin : est-ce que tu te sers vraiment des spécificités de jQuery ? Est-ce que du JS natif ne suffirait pas ? Est-ce qu'une autre librairie (ou un framework) ne serait pas plus adaptée ?

Rappelle-toi que charger du code qui ne sert à rien est, en plus d'inutile, mauvais pour les performances et donc l'expérience utilisateur. Ton projet à l'air déjà assez lourd en soi, évite donc de le surcharger avec des fichiers ou des lignes de code inutiles.

+0 -0

Merci à tous les deux pour vos réponses.

D'après ce que vous me dites, je comprends donc qu'utiliser AngularJS ne va pas me simplifier suffisamment la tâche pour justifier son apprentissage (en tout cas pour le moment).

Et un petit conseil ; si ton nombre de modules est faible (< 10k) charge toute la liste en un seul fichier au début de ton application. Comme ça tu n'aura plus qu'un seul appel AJAX, c'est plus simple à gérer et plus rapide à éxécuter.

Effectivement la liste est bien inférieure (une cinquantaine de modules, au pire une centaine). Je vais essayer de faire comme ça :)

Le problème des callbacks c'est que ça devient vite difficile à gérer. Pour résoudre le problème, renseigne-toi sur les Promises.

Merci, j'ai commencé à regarder et effectivement ça a l'air bien pour éviter les callbacks, même si je n'ai pas encore tout compris de leur fonctionnement (aux Promises).

La techno que tu utiliseras derrière importera peu une fois que tu auras éliminé ce problème. Par contre il faut voir ce dont tu as besoin : est-ce que tu te sers vraiment des spécificités de jQuery ? Est-ce que du JS natif ne suffirait pas ? Est-ce qu'une autre librairie (ou un framework) ne serait pas plus adaptée ?

Je te précise tout d'abord que je touche d'habitude très peu à la partie front-end, et donc au Javascript. C'est donc tout à fait possible que je fasse des choix "naïfs"). J'utilise jQuery car je sais qu'il est cross-navigateur, et que je trouve sa documentation bien faite et abondante. Donc je ne suis pas sûr que du JS natif suffise (pour la première raison). Par contre, un autre framework, plus léger, pourrait suffire, mais malheureusement je ne connais pas bien le paysage des frameworks JS. En as-tu à me conseiller ?

Rappelle-toi que charger du code qui ne sert à rien est, en plus d'inutile, mauvais pour les performances et donc l'expérience utilisateur. Ton projet à l'air déjà assez lourd en soi, évite donc de le surcharger avec des fichiers ou des lignes de code inutiles.

Je le sais oui, et je pensais minimiser l'empreinte de jQuery en utilisant leur CDN, mais effectivement c'est toujours du gaspillage. Malgré tout je suis conscient de ça, par exemple je n'ai pas utilisé Bootstrap car je me suis renu compte au fil des projets que je n'utilisais que la grille + quelques éléments. Je suis donc passé à unsemantic qui est "juste" une grille responsive.

EDIT : Bon j'ai fait quelque chose que j'aurais du faire avant, c'est poser le problème sur un papier. Et il apparaît que ce qu'il me manque clairement dans jQuery, c'est le 2-way binding. J'ai vu qu'il existait un module pour cela, mais je me demande du coup si c'est mieux d'utiliser jQUery + un module, ou AngularJS qui le gère nativement. Des suggestions ?

+0 -0

Au final, ce qu'on sent dans ta façon d'exposer le problème, c'est un modèle MVC côté client.

Tu as une API qui te sert des données. Ces données (ton modèle) tu as besoin de le représenter côté client (en JS donc). Pour faire ça, tu peux effectivement procéder de la sorte :

Du JS "pur et dur", qui dispose de plusieurs méthodes fetch, update, remove, … qui fait des appels AJAX au serveur, parse la réponse et "remplit" un objet Javascript (ou plusieurs). Tu peux remplacer le JS pur et dur par jquery, si tu sens que côté vue, tu vas devoir beaucoup manipuler le DOM, ça peut avoir un intérêt.

Si tu sens que tu vas devoir beaucoup manipuler le modèle côté client (donc pas uniquement récupérer les données, mais aussi et surtout effectuer des calculs, le faire changer d'état, manipuler des collections d'objet, mapper plusieurs URL sur une même donnée, bref des trucs assez avancés) alors tu peux essayer de jeter un oeil du côté de Backbone. C'est pour ce genre de manipulations qu'il trouvera un réel intérêt. Si tu te contentes de récupérer/mettre à jour des données simples, ce n'est pas la peine.

Maintenant passons à ta vue, puisque c'est là que tu sembles hésiter. L'avantage d'Angular, c'est son scope. En gros, l'idée que ton modèle est observé et qu'à un état de ton modèle correspond un état de ton interface. Et vice-versa, qu'un changement de l'interface (par action utilisateur) entraîne une mise à jour du modèle.

Ca peut aussi se faire avec des appels AJAX mais là où Angular prendra du sens, c'est si l'approche descriptive "état du modèle" -> "état de l'interface" te botte. C'est vraiment une façon particulière de construire ta webapp.

A ce moment là, tu vas construire ton application de la façon suivante : un service va aller chercher les données, les mettre à jour (cf. mon point 1, ça sera ça), puis a chaque changement d'état de ton modèle, ta vue sera "réévaluée" (potentiellement rafraîchie pour refléter les changements du modèle). Du coup la façon d'écrire ta vue sera plus "descriptive". Du style : ici, on met une select avec telle valeur de telle attribut du modèle, quand elle change, la valeur de l'attribut sera changée.

J'aurais tendance à penser que plus ton UI est chargée (pas forcément compliquée, mais chargée) et au mieux elle reflète ton modèle (un champ == un élément d'interface) et que les champs sont liés, plus Angular prendra du sens.

Si effectivement tu commences à te poser la question du two-way binding j'aurais tendance à te dire d'aller regarder du côté d'Angular en effet voire carrément React si jamais ça te tente. Je connais moins, mais l'idée "un état == un rendu" est encore plus présente dans ce framework. Après faut aimer l'approche "la vue est décrite en JS" c'est un peu particulier.

Bon courage, c'est un choix important.

+1 -0

Salut Javier,

Merci pour ta réponse, c'est à la fois très complet et instructif !

Au final, je me suis lancé avec jQuery pour plusieurs raisons :

  1. Je n'ai pas "tant que ça" de logique côté client
  2. Je manipule pas mal le DOM
  3. C'est ce que je maîtrisais le mieux (enfin, maîtriser est un bien grand mot)

En fait, a posteriori, je pense que mon problème vient du fait que je ne pratique pas souvent le Javascript, et j'ai parfois du mal à concevoir les choses dans ce langage.

Au final, cette mini-appli fait 200 lignes, il y a des choses à refactoriser dedans mais elle marche plutôt bien. (Au passage, elle est testable ici).

Je ne sais pas si c'était la façon de faire la plus propre, mais je m'en tiens au principe "Done is better than perfect". Je compte bien retravailler dessus dans les semaines qui viennent, mais au moins pour le moment ça fonctionne.

Merci de vos réponses :)

+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