J'ai récemment consacré quelques heures à JavaScript car je souhaitais tirer parti de la base d'utilisateurs massive. En faisant cela, j'ai remarqué un motif que la plupart des gens attribuent aux langages dynamiques. Vous faites fonctionner les choses très rapidement, mais une fois que votre code a atteint une certaine taille, vous perdez beaucoup de temps avec les erreurs de frappe, d'orthographe et de refactoring en général. Erreurs qu'un compilateur m'épargnerait normalement. Et ne me laissez pas chercher des erreurs dans la logique quand je viens de faire une faute de frappe dans un autre module.
Compte tenu de l'incroyable langage JavaScript et des autres langages à typage dynamique qui ont suivi, je suis convaincu que quelque chose ne va pas dans mon approche. Ou est-ce juste le prix que vous devez payer?
Pour le dire de façon plus concise:
- Comment abordez-vous un projet JavaScript (ou tout autre langage dynamique) avec ~ 2000 LOC?
- Existe-t-il des outils pour m'empêcher de commettre ces erreurs? J'ai essayé flow by Facebook et JSHint, ce qui aide un peu, mais n'attrape pas de fautes de frappe.
Réponses:
Plus précisément, en JavaScript, vous pouvez utiliser TypeScript à la place. Il offre certaines des choses dont vous parlez. Citant le site:
Et ce n'est qu'un sur-ensemble de JS, ce qui signifie qu'une partie de votre code existant fonctionnera parfaitement avec TS:
la source
foo(x) { return x.bar;}ou quelque chose du genre. Comme il n'y a pas d'informations de type et que la fonction est publique (par conséquent, vous ne pouvez pas connaître tous les appelants), il vous est impossible de déterminer si bar doit être renommé baz si vous renommez une classe.Certaines approches peuvent aider:
Tests unitaires
Écrire des tests unitaires si possible. S'en remettre à des tests manuels ou à la recherche de bogues dans la nature est un hasard.
Utiliser des cadres
Plutôt que de rouler vous-même et de risquer l’introduction de bogues, utilisez les cadres établis, si possible.
Préfère CSS / langages de haut niveau
Vous pouvez céder la fonctionnalité à CSS ou à tout autre langage de haut niveau dans lequel vous écrivez.
Refactor
Refactoriser pour réduire la quantité de code. Moins de code = moins d’endroits où les choses vont mal.
Réutilisation
Réutilisez le code existant là où vous le pouvez. Même si le code ne correspond pas exactement, il peut être préférable de copier, coller et modifier plutôt que d'écrire quelque chose de nouveau.
IDEs
Les IDE modernes ont généralement au moins un support Javascript. Certains éditeurs de texte utilisent également Javascript.
la source
Un outil qui n’a pas encore été mentionné est la recherche de texte simple, locale ou dans l’ensemble du projet .
Cela semble simple, mais lorsque vous incluez des expressions régulières, vous pouvez effectuer un filtrage de base à avancé, par exemple, rechercher des mots situés dans la documentation ou dans le code source.
C’est un outil efficace pour moi (en plus des analyseurs statiques) et, compte tenu de la taille de votre projet de 2k LOC, qui n’est pas particulièrement volumineuse à mon avis, devrait faire des merveilles, espérons-le.
la source
grepva un long chemin. À moins que vous ne fassiez pas des choses dynamiques trop étranges, cela fait l'affaire. Cependant, cela semble très manuel si vous êtes habitué aux IDE pour les langages à typage statique.Je suis actuellement en train de refactoriser plusieurs milliers de lignes de code sur un grand projet AngularJS. L'un des plus gros soucis est de déterminer le contrat exact d'une fonction donnée. J'ai parfois fini par lire la documentation de l'API parce que des éléments de la réponse brute de l'API étaient affectés à des variables passant par 6 couches de code avant d'être modifiées et renvoyées par 6 autres couches de code.
Mon premier conseil est de concevoir par contrat . Prenez des entrées spécifiques, générez des sorties spécifiques, évitez les effets secondaires et documentez ces attentes à l'aide de TypeScript ou au moins de JSDoc.
Mon deuxième conseil est de mettre en place autant de contrôles que possible. Nous suivons la norme AirBnB et utilisons eslint sur l’ensemble de notre code base. Les crochets de validation vérifient que nous respectons toujours la norme. Nous disposons naturellement d'une batterie de tests unitaires et de tests d'acceptation, et tous les commits doivent être examinés par un pair.
Passer d'un éditeur de texte (Sublime Text) à un IDE approprié (WebStorm) a également rendu beaucoup plus facile l'utilisation du code en général. WebStorm utilisera JSDoc pour donner des conseils sur les types de paramètres attendus et déclencher une erreur si vous fournissez un type incorrect ou si vous utilisez la valeur de retour de manière incorrecte.
En JavaScript, de nouvelles fonctionnalités telles que les symboles et les getter / setters peuvent aider à imposer un certain niveau de qualité en ajoutant des assertions à une affectation de variable (par exemple, assurez-vous que l'entier est dans la plage ou que l'objet de données possède certains attributs).
Malheureusement, je ne pense pas qu'il existe une véritable solution pour prévenir les erreurs de langage dynamiques, mais seulement une série de mesures pouvant aider à réduire leur fréquence.
la source
Ma réponse à la question «Comment abordez-vous un projet JavaScript (ou tout autre langage dynamique d'ailleurs) avec ~ 2000 LOC?»
Je développe des applications de formulaire PDF. J'aborde mon projet de développement de logiciel JavaScript (quelle que soit la taille du code source) en utilisant les éléments de réseau et les annotations de Petri. La méthode n'est liée à aucune technologie de langage de programmation particulière. Ainsi, il peut être utilisé pour d'autres «langages de programmation».
Je crée un diagramme de la logique d'application. Pour que le diagramme ne soit pas encombré, j'ajoute la plupart de mes annotations à un formulaire que j'utilise avec le diagramme. Les entrées du formulaire incluent des références à des propriétés ou à des fonctions. Ensuite, j'écris le code source en fonction des informations du diagramme et des entrées du formulaire. La méthode est systématique car chaque code source écrit est directement mappé à partir du diagramme et des entrées du formulaire. Le code source peut être facilement vérifié car je suis également conforme aux conventions de nommage et de codage lors de l'écriture du code.
Par exemple, j'ai choisi une convention selon laquelle toutes les fonctions sont des prototypes. Si les performances deviennent un problème, il peut être amélioré en déclarant les fonctions dans le constructeur. Pour certaines propriétés, j'utilise des tableaux. Encore une fois, si les performances deviennent un problème, vous pouvez les améliorer en utilisant des références directes.
J'utilise aussi eval. Cela peut considérablement réduire la taille du code source. En raison de problèmes de performances, j'utilise eval au début ou la partie d'initialisation de mon application; Je ne l'utilise jamais dans la «logique d'exécution» - c'est une autre convention de codage que je suis.
la source