AngularJS est un framework pour les applications web. Il présente une méthodologie innovante et adaptée au monde de l'industrie.
Le but de cet article est de vous présenter les intérêts de ce type de technologie.
Ne vous fiez pas à l’austérité du site officiel aussi ravissant qu'un bilan comptable, AngularJS est une technologie rafraîchissante.
Une boîte à outils complète
AngularJS est une boîte à outils complète pour réaliser des applications web. L'architecture de l'application ne repose plus sur les développeurs du projet, mais sur une architecture conçue et maintenue par l'équipe de AngularJS.
L'architecture de la partie client d'une application est souvent délaissée voire non prise en compte, alors que l'architecture coté serveur attire toute l'attention. Utiliser AngularJS, c'est un moyen d'avoir une architecture de qualité pour un faible coût.
Des composants pour gérer son équipe
Une application AngularJS possède une architecture à base de composants, inspirée du monde de l'électronique. Un composant a un cahier des charges précis et a un comportement indépendant de son environnement.
Vous pouvez facilement répartir la conception des composants dans une équipe de développement. Si un composant ne correspond pas à son cahier des charges, il est facile de le remplacer, lui et son développeur.
Une synchronisation des données efficace pour des développeurs heureux
Dans un bon environnement, un développeur web passe la majorité de son temps à se divertir sur des thèmes totalement annexes à son travail, mais une autre part importante de son temps consiste à écrire du code « colle » entre les différents éléments de l'application : le serveur, la partie logique, les interfaces…
C'est une activité couteuse et peu enrichissante pour lui. AngularJS permet de synchroniser les données de manière extrêmement efficace, automatiquement et avec peu d'effort. Cela permet d'avoir plus de ressources pour les travaux plus intéressants et visibles.
Test Driven Developement pour des produits de qualité
La technique du développement logiciel mené par les tests est généralement difficile à mettre en place. AngularJS est un framework adapté à cette technique, il est donc conseillé de l'essayer et même de l'adopter.
L'intégration continue est elle aussi possible et conseillée. Les tests peuvent être écrits spécifiquement pour les composants, mais aussi pour le comportement général de l'application. Pour avoir une meilleure qualité, il est conseillé d'écrire des tests pour les deux approches.
Yeoman pour la productivité
Yeoman est un ensemble d'outils destiné aux équipes de développement. Les outils permettent de développer efficacement, de vérifier la qualité de l'application et de tester.
Yeoman est compatible avec AngularJS et propose des extensions spécifiques.
Les concurrents
Backbone.js
Backbone.js est plus bas niveau et nécessite d'écrire plus de code «glue» par rapport à AngularJS. Mais il permet plus de libertés dans l'architecture et le choix des composants. Pour une application web originale dans sa présentation, Backbone.js est une alternative intéressante bien que moins complète.
Ember.js
Ember.js est très similaire à AngularJS dans ses fonctionnalités. Mais l'outil est moins utilisé et n'a pas la même puissance pour les tests. En ce qui concerne la syntaxe c'est une question de goûts.
jQuery et une bonne organisation
Avec une bonne organisation et des gens compétents, il est théoriquement possible de faire une application web propre sans grosse boîte à outils telles que celles évoquées au dessus. jQuery est une librairie très utilisée, qui permet de faciliter le développement. Les développeurs maitrisant jQuery se trouvent à chaque coin de rue, donc pas de soucis de ce coté.
JavaScript Vanilla
Dans certains cas il vaut mieux ne pas sortir l'artillerie lourde. JavaScript Vanilla est une solution qui est très légère, multi-plateforme, où les compétences sont nombreuses. Pour un petit projet avec peu de modifications d'interfaces en temps réel, c'est la solution à privilégier.
Avantages d'AngularJS
- la boîte à outils est complète ;
- il y a Google derrière ;
- l'architecture est propre et efficace ;
- la communauté existe.
Critiques
- la qualité de la documentation est variable, mais les choses s'améliorent ;
- il y a un aspect un peu magique qui peut être déroutant au début ;
- le JavaScript à écrire n'est pas évident pour un débutant ; on est loin du développement à la «Ctrl+Espace» dans Eclipse.
AngularJS c'est super bien !
Si vous souhaitez développer une application web de manière propre et pérenne, pensez à AngularJS.
Aller plus loin
- AngularJS (site officiel) (1547 clics)
- AngularUI (493 clics)
- Yeoman (186 clics)
- FRAngular, un blog sur AngularJS en français (1368 clics)
- Test Driven Development (271 clics)
- DLFP : Encore de tout, de rien, des liens, du dev (AngularJS 1.0) (284 clics)
# yogurtman
Posté par Sam E. (site web personnel) . Évalué à 10.
En lisant le titre et l'introduction je me suis dit «Chouette, je vais enfin comprendre ce qu'est réellement AngularJS et pourquoi ça révolutionne le monde».
Et bha non.
Au final c'est plus une dépêche marketing qui fait une rapide listes de fonctionnalités mais n'explique en rien en quoi AngularJS est le «Superheroic JavaScript MVW Framework» (pour reprendre le titre de la page du site officiel) ni en quoi la méthodologie est adaptée au monde de l'industrie.
Je m'attendais au moins à voir quelques exemples de codes.
Ceci dit, merci pour la dépêche.
[^] # Re: yogurtman
Posté par dave_null (site web personnel) . Évalué à -6. Dernière modification le 10 septembre 2013 à 10:59.
Oui l'objectif n'était pas de lister du code source, car pour cela le site officiel s'en occupe très bien et il y a des centaines d'articles de ce type sur le web.
La dépêche est plus adressée aux décideurs qu'aux développeurs.
Pour les méthodologies adaptées au monde de l'industrie, tu as le test driven development, le modèle orienté composants et l'architecture pas faite sur le tas.
[^] # Re: yogurtman
Posté par Larry Cow . Évalué à 10.
En même temps, les décideurs qui consultent LinuxFR…
[^] # Re: yogurtman
Posté par barmic . Évalué à 10.
C'est dommage de l'avoir publiée ici…
Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
[^] # Re: yogurtman
Posté par dave_null (site web personnel) . Évalué à -5.
Sectarisme ?
[^] # Re: yogurtman
Posté par barmic . Évalué à 10.
Non pas vraiment. C'est juste qu'historiquement on trouve pas des masses de dayssideurs prayssé par ici. On trouve plutôt des techniciens ou des décideurs qui sont d'anciens techniciens et qui apprécient d'avoir un discourt plus technique (même si avec le temps ils ne le comprennent plus se discourt technique… ).
Ce n'est pas du sectarisme que de dire que le discourt doit être adapté au public. Je ne vais pas aller poster une recette de cuisine ou une critique de film sur un site orienté logiciel libre… Oh wait !
Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
[^] # Re: yogurtman
Posté par ariasuni . Évalué à 4.
Discours plutôt nan?
Écrit en Bépo selon l’orthographe de 1990
[^] # Re: yogurtman
Posté par Tof . Évalué à -1.
Soit tu corriges les fautes, soit tu dis rien; mais tu ne corriges pas juste "une faute". Question de ratio signal/bruit.
[^] # Re: yogurtman
Posté par ariasuni . Évalué à 3.
À part les fautes misent exprès et le «se» à la place de «ce» que je n’avais pas vu, il n’y en a pas d’autres. C’est juste que j’ai la faute 3 fois donc je l’ai signalé.
Écrit en Bépo selon l’orthographe de 1990
[^] # Re: yogurtman
Posté par bilboa . Évalué à 4.
Ouais parce-que les décideurs de toute facon, c'est des blaireaux, faut leur refourger des super buzzwords et hop. Décider sur ce que fait vraiment un produit/framework/autre c'est vraiment pas une bonne idée! Le décideurs qui font ca sont vraiment con, ils bossent pour rien!
Super justification quand même.
[^] # Re: yogurtman
Posté par Lutin . Évalué à 7.
Ça vaut pas la RACHE tous ces trucs la, en tout cas dans les grosses cogip, c'est la méthodologie la plus pratiquée.
[^] # Re: yogurtman
Posté par barmic . Évalué à 5.
Idem, de plus la dépêche laisse sous-entendre qu'il s'agit d'un framework pour la partie client, mais ne le dis pas clairement.
Comment ? Quel techno utilise-t'il ? Quelle sérialisation ? Qu'est ce qu'il faut faire du coté serveur ? Indique-t'il s'il faut dire chocolatine ou pain au chocolat ? Quelle est la meilleure trilogie Star War ? Tant de questions sans réponse…
Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
[^] # Re: yogurtman
Posté par dave_null (site web personnel) . Évalué à 3. Dernière modification le 10 septembre 2013 à 11:19.
Cotés client, c'est du MVC avec un bus à événements. La synchronisation s'effectue dans les deux sens (double data binding) entre les vues et les modèles.
Pour communiquer avec le serveur, des outils (ngResource) facilitent l'utilisation des APIs REST en JSON. Ça ne choquera pas grand monde qui fait du web.
Des prototypes tournent avec Socket.io. Ça permet de réaliser une synchronisation temps réel entre les vues, les modèles cotés client et le serveur.
[^] # Re: yogurtman
Posté par barmic . Évalué à 3.
C'est un prérequis ? Parce que du coup ça limite la partie serveur à du node.js si j'ai bien compris.
Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
[^] # Re: yogurtman
Posté par dave_null (site web personnel) . Évalué à 2. Dernière modification le 10 septembre 2013 à 11:41.
Il existe des implémentations de Socket.IO dans d'autres environnement que Node.js même si c'est un peu plus confidentiel. Mais rien ne t'empêche de développer la même chose avec d'autres technologies ou les websockets de HTML5.
Mais AngularJS est plus tourné vers le JSON et les apis REST. Là c'est des preuves de concept très intéressantes mais pas vraiment utilisées à grande échelle.
[^] # Re: yogurtman
Posté par SigNix . Évalué à 2.
Je me souviens avoir découvert angularjs lors d'une présentation de alexandre bourget à Confoo avec socketio sur pyramid.
Il faisait afficher des informations de la machines, en l'occurrence la charge CPU, poussé depuis le serveur et possibilité de changer la fréquence depuis le client. Un belle utilisation de angularjs.
A voir ici : http://www.youtube.com/watch?v=ZfjhAuBBqrY
[^] # Re: yogurtman
Posté par ariasuni . Évalué à 5.
Ça serait sympa de dire à quel moment de la vidéo à peu près pour ceux qui n’ont pas forcément envie/le temps de voir toute la vidéo.
Écrit en Bépo selon l’orthographe de 1990
[^] # Re: yogurtman
Posté par LupusMic (site web personnel, Mastodon) . Évalué à 1.
Quel MVC ?
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvcmvp
[^] # Re: yogurtman
Posté par par . Évalué à 1.
Je ne me suis pas encore penché sérieusement sur ces outils, mais d'après ce que j'ai compris, ce sont en gros des frameworks pour faire du MVC en javascript côté navigateur. Je pense que c'est utile surtout si on code la plus grande partie d'une application en javascript pour la faire tourner sur le navigateur et non sur un serveur.
[^] # Re: yogurtman
Posté par dzecniv . Évalué à 1.
exactement (et c'est vachement bien d'avoir la séparation MVC à ce niveau !)
[^] # Re: yogurtman
Posté par manatlan (site web personnel) . Évalué à 3.
J'avais également mis du temps à comprendre. Tant qu'on n'a pas réellement plongé dedans, je pense que beaucoup de choses resteront abstraites.
Maintenant que j'y baigne, je n'imagine même plus utiliser autre chose. jquery me semble abscons, et le vanilla js trop léger.
Angular apporte tout ce qu'il manquait, à mon sens, pour développer des applis js.
Principalement, je dirai que ça permet surtout de transférer les logiques "serveurs" (d'affichage) sur le côté client. Ce qui permet, en qqsortes, de limiter le serveur à réaliser les accès aux données, et de faire du beau CRUD ;-)
Et effectivement, on se retrouve à faire moins de "glue", et on peut se concentrer sur le fonctionnel.
Pour ma part, je l'utilise aussi beaucoup dans le dev android. Couplé a du cordova, du css3, avec du appcache(/html5) côté serveur, on peut vraiment réaliser des applis assez bluffante. Et ça reste plus simple que les intent/layout android, dès que tu veux un peu sortir des sentiers battus.
# plein de notions
Posté par dzecniv . Évalué à 10.
Je m'y suis frotté et ai fini par vraiment l'apprécier et par être épaté par certaines facilités, mais la difficulté, vraiment, c'est de le mettre en place. Il faut se frotter à beaucoup de nouvelles notions, bien connaître le fonctionnement interne si on veut comprendre comment notre application fonctionne, faire avec de la doc aléatoire, et à beaucoup de conf' externe pour de nouveaux outils (qui nous facilitent le dév au final).
une bonne base pour commencer est https://github.com/angular/angular-seed
ou s'inspirer de ce projet https://github.com/buildbot/buildbot/tree/nine/www qui en sus utilise coffeeScript (au lieu de JS) et Jade (pour le html) et un gruntfile (Makefile) complet.
La «magie» d'AngularJS est le «double data binding». Quand on définit une variable avec une certaine visibilité, dès qu'elle est modifiée n'importe où dans le code, elle est mise à jour dans la vue. Le développeur n'a pas écrit de watcher.
[^] # Re: plein de notions
Posté par Cyprien (site web personnel) . Évalué à 2.
Je viens de regarder dans son intégralité cette video et je la trouve plutôt bien pour qui veut débuter avec AngularJS. Elle peut être accompagnée de son PDF
[^] # Re: plein de notions
Posté par ariasuni . Évalué à 1.
Ah tu veux dire cette vidéo?
</grammarnazi>Écrit en Bépo selon l’orthographe de 1990
# Et l'accessibilite?
Posté par TeddyDave . Évalué à 5.
Je n'ai pas trop pris le temps de regarder en détail ces nouveaux frameworks permettant de développer des applications web quasiment intégralement en javascript, mais une question qui ne me semble jamais soulevée autour de ces technologies est: qu'en est-il de l'accessibilité? D'après ce que j'en sais, les outils permettant aux personnes ayant un handicap d'interagir avec des application webs ne fonctionnent pas très bien avec Javascript.
La question que je me pose c'est: est-ce que quelque chose a changé de ce côté, ou est-ce que ces frameworks ferment volontairement la porte a toutes les applications qui doivent être accessibles? J'imagine notamment que les applications développées pour (ou par) des instances gouvernementales doivent sans doute obligatoirement être accessibles: cela veut-il dire que si les frameworks javascript sont envisagés, il faut développer deux fois l'application (une fois en javascript et une fois en une techno coté serveur qui publiera du HTML classique)?
[^] # Re: Et l'accessibilite?
Posté par dave_null (site web personnel) . Évalué à 7.
Tu peux utiliser ARIA (cf https://developer.mozilla.org/en-US/docs/Accessibility/ARIA) et l'utilisation d'AngularJS ne pose à prioris pas de problèmes avec.
[^] # Re: Et l'accessibilite?
Posté par lolop (site web personnel) . Évalué à 2.
Grand merci pour le lien - je ne connaissais pas.
Votez les 30 juin et 7 juillet, en connaissance de cause. http://www.pointal.net/VotesDeputesRN
[^] # Re: Et l'accessibilite?
Posté par TeddyDave . Évalué à 1.
Effectivement, merci pour ce lien!
[^] # Re: Et l'accessibilite?
Posté par ckyl . Évalué à 3.
Sauf si tu parles d'au moins plus de 10 ans en arrière, à ma connaissance ca à toujours été une légende.
Je n'ai jamais pu trouver une seule preuve de ce problème, et toutes les sources que j'ai trouvée semblent dire la même chose.
Souvent oui. Avec différents niveaux. Par exemple mal voyant et screen reader ce sont deux choses différentes. De même qu'être accessible au clavier. Même si pas mal de choses se recoupent.
Non ca veut dire que quand tu fais une appli correcte et que quand tu utilises des widgets corrects il n'y a pas de soucis pour les screen reader.
Si ca t'intéresse. Les pages d'IBM et de Dojo sont des bons points d'entrés pour trouver les refs et bonnes pratiques sur le sujet.
# quid de la compatibilité avec les grosses bibliothèques js
Posté par MrBidon . Évalué à 2. Dernière modification le 11 septembre 2013 à 17:11.
J'avais regardé la magie de AngularJS lors du buzz du mois de juin…. et puis laissé de coté, car j'avais l'impression que c'était pas si simple à interfacer avec mes p'tites lib js habituelles. C'est à dire que pour utiliser mes fameuses lib, il fallait utiliser une glues et cette glue n'avait pas l'air si à jour et aussi facile que les tuto de bases. Les libs auxquelles, je pense sont par exemple :
- openlayer
- leaflet
- d3.js
- highchart
- jquery
Je profite de ce journal pour poser la question : est-ce qu'il y a eu de l'amélioration à ce sujet ?
# Wahoo
Posté par tomap . Évalué à 1.
C'est une super cette news, vous avez vraiment l'air de vous y connaitre. Je dirai même que ça sent l'experience!
A propos de Vanila JS, c'est super pratique, trés leger à utiliser.
Vous pouvez ajouter le lien, pour avoir l'air plus serieux: http://vanilla-js.com/
Voili voilou.
Allez, les pro, je retourne Flasher mon FTP aver un firewall MVC 2000
# Citation
Posté par clem . Évalué à -1.
Albert Einstein disait :
"Si vous ne pouvez expliquer un concept à un enfant de 6 ans, c'est que vous ne le comprenez pas complètement."
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.