Choix d'un framework pour le JavaScript
Si on veut toucher plus de monde, il vaut mieux rester simple.
Si on veut faire rapidement du code efficace, il vaut mieux s'appuyer sur un framework que l'on maîtrise.
Quelque soit le langage, les frameworks arrivent généralement avec un bagage conceptuel conséquent (modèle MVC, inversion de contrôle, design patterns, SOLID, …), qui sont très efficaces s'ils sont compris et maîtrisés, mais sont contre-productifs dans le cas contraire. Et s'ils utilisent les particularités du langage lui-même, l'effet est amplifié (dans les deux sens).
Du coup, on est bien embêtés quand on nous fait une demandes du type “développez-nous rapidement une application, et préparez ce qu'il faut pour que notre technicien pas informaticien mais qui bidouille du code soit capable de faire la maintenance”. Surtout, qu'une fois qu'on maîtrise un framework, revenir au “fait main” est difficile.
Tableau comparatif
- L'utilisation d'un framework ne dispense pas de la connaissance de JavaScript !
Si le code doit être ouvert et lisible par d'autres, il vaut mieux privilégier JavaScript/JQuery + petit framework pour les vues !
- A suivre : polymer : très bonne abstraction des web components et on va voir des widgets arriver en masse dans les mois qui viennent.
- ++ pour de la webapp !
| Framework | AngularJS | GWT | ExtJS | BackboneJS |
|---|---|---|---|---|
| Atouts | -Structurant -Normé -L'architecture le rend lisible et “prévisible” -Réutilisation du code optimale -Nombreuses bibliothèques -Rapidité de développement supérieure à JQuery -Déploiement immédiat -Système de template côté client efficace -Impression de rapidité de l'application pour les utilisateurs | -Réutilisation des composants graphiques produits -Modularisation des dev -code source en Java -IDE eclipse -Refactoring -Compilation incrémentale -Tests Unitaires côté client -Réutilisation des connaissances Java -Utilisation des objets du JDK | -Documentation bien fournie -Nombreuses bibliothèques -Architecture MVC -Approche orientée “objet” (extension de composant, ajout de comportement…) -Permet de faire des GUIs riches -Nombreux plugins utiles | -Optimisé pour être connecté à une API REST (économie de code client) |
| Faiblesses | -Debug parfois difficile -Destiné à des webapps monopage -Tutos adaptés à certaines versions d'angular uniquement -Licence MIT -What’s wrong (article pertinent pour les sites webs dynamiques mais pas pour les webapps) | -Mode de déboggage en transition -Verbeux -PBs de sérialisation lors d'appels AJAX | -Limité -Associer un autre framework pour les vues -N'est pas dédié aux webs one page |
|
| Utilisé par | -ESUP -Coktail -DSI CNRS | -INRA Versailles | -Institut d'Astrophysique Spatiale | |
| Testable avec | -Jasmine -Karma | |||
| Développé par | -Sencha | |||
| Contributeurs | -1000 commiteurs -Communauté très vive | -Communauté en perte de vitesse | -Communauté assez large | |
| Courbe d'apprentissage | -Lente (ticket d'entrée important) | -Lente (ticket d'entrée important) | -Lente (ticket d'entrée important) | |
| Commentaires | -Main mise de Google sur le Dev.Lead, parfois c’est un peu brutal, mais il y a tout de même un vrai dialogue avec la communauté. -++ pour de la webapp | -Orienté JAVA mais compile en JavaScript | -Intéressant à partir de la version 4 | -++ pour du web dynamique (+ ajout d'un framework de vue) -Plugins à ajouter : -marionnette (mieux structurer le code, chargement des vues et communication entre les vues) -gulp (pour tester et d'utiliser des modules bower/npm) |
| Ressources | Super cours |
Astuce AngularJS
- Un problème courant avec AngularJS est la difficulté de débuguer (notamment les erreurs d'injection difficiles à trouver) :
exemple : ce message insuffisant pour trouver l'erreur… … qui peut vous faire tourner en rond pendant longtemps.
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.common due to:
Error: [$injector:moduler......1)
Pourquoi : Le module à injecter comporte une erreur ou n'a pas été trouvé
- La Solution :
- Ouvrez angular.js
- Allez aux lignes 71-72, et selon votre version, vous devriez trouvez quelque chose comme :
# message = message + '\nhttp://errors.angularjs.org/1.3.0-beta.8/' + # (module ? module + '/' : '') + code;
- après la seconde ligne (72) ajoutez
# console.log(message);
- A partir de là, Angular vous dira ce qui ne va pas dans les modules référencés, et vous pourrez continuer à travailler normalement.
— Rafael DIAZ MAURIN 2014/12/18 16:19
