Après avoir sondé un peu Twitter, le sujet intéresse, et il est très, mais alors, très mal traité ailleurs sur le net. Malgré mon aversion, bien connue, pour javascript, je m’en bouffe beaucoup, prog Web oblige.
Angular rend l’utilisation de JS plus supportable, mais possède une très grosse courbe d’apprentissage bien pentue, avec des ressources vraiment mal foutues.
Et surtout, le problème vient de l’habitude de jQuery.
AngularJS est l’anti-jQuery, ça ne fonctionne pas du tout pareil, mais personne n’est là pour vous montrer comment faire la transition. Ce sera le but de ce dossier, un dossier qui va être long car ce framework est un gros morceau.
Quand utiliser AngularJS ?
Tous les sites ne sont pas faits pour être créés avec Angular. En effet, si votre site est essentiellement composé de contenu statique, avec juste un peu de dynamique pour quelques widgets, Angular n’a aucun intérêt.
Angular est lourd à mettre en œuvre, on va donc se faire chier à sortir le bazooka quand on monte au front, pas quand on fait une garde de nuit en rase campagne.
Malgré le fait que Google interprète maintenant les pages en JS, le texte reste roi, et Angular vous force à faire des pages en pur JS, rendant le référencement aléatoire de votre contenu. Les hacks que l’on voit un peu partout sur la toile pour compenser cela sont très loin d’obtenir l’effet d’un référencement naturel de contenu facilement accessible à l’ancienne.
En fait, le plus gros défaut d’Angular, c’est qu’il ne permet pas, pour le moment, de faire de la dégradation gracieuse. Soit le mec a Javascript et il a accès au site. Soit le site est illisible.
jQuery a donc encore de beaux jours devant lui.
Typiquement, on ne prendra pas Angular pour :
- La partie publique d’un blog de type WordPress.
- Un wiki type Wikipédia.
- Un forum ou site collaboratif.
- Un tube vidéo.
Ce sont des sites dont le contenu est important. On veut que les moteurs de recherche puisse les indexer de fond en comble. On veut que ce soit lisible sans JS et par les aveugles (sauf le tube vidéo :-D). Les ajouts de JS se feront par petites touches.
On utilisera plutôt Angular pour :
- Une app grand public.
- La partie admin d’un blog.
- Un logiciel d’entreprise.
- Un réseau social.
Ce sont des sites pour lesquels l’ergonomie est plus importante que le contenu. Le public est captif, et on peut exiger Javascript, prix à payer pour une expérience utilisateur moderne.
Vous noterez qu’il y a une certaine opposition entre vieux format (wiki, forum, blog) et format contemporain (app, réseau social). Ce n’est pas un hasard. Les premiers sont orientés contenu, les seconds orientés usage. C’est ainsi que le Web a évolué, et Angular est là exactement pour répondre à cette évolution.
Il est néanmoins tout à fait possible de faire des choses hybrides. Rien n’empêche de faire des parties du sites statiques, et d’autres très dynamiques, de mélanger les deux sur une même page. Par exemple, sur un blog, vous pouvez mettre l’article en statique pour le ref et la facilité de consultation, et la partie commentaires en Angular, pour améliorer l’expérience utilisateur.
Que va apporter Angular ?
Les avantages sont doubles.
D’abords, il y a les avantages pour vous, le développeur. Angular vous force en effet à utiliser un style Javascript très propre qui tend à découpler les composants, isoler les services, lisser les angles et refaire le papier peint à fleur. L’application en devient plus propre, plus facile à faire évoluer et à maintenir. Toutes les bonnes pratiques d’organisation d’une app JS ont une réponse angularesque. Ce n’est pas forcément celle que vous voulez, mais elle marche.
Ensuite, Angular va vous rendre plus productif. Pas tout de suite, évidement, coincés que vous êtes dans votre logique jQuerinne. Mais une fois le cap passé, coder beaucoup de JS sera immensément plus simple et plus rapide, car Angular vous épargne beaucoup de logique répétitive.
En prime, ce framework est orienté tests. Ce n’est pas obligatoire, mais c’est bien plus facile qu’avec des modules jQuery.
Mais il y a également les avantages pour l’utilisateur. Puisque qu’Angular est complètement dynamique, il bénéficiera automatiquement d’une app plus réactive, avec moins de rechargements, plus de fonctionnalités aussi. En effet, vous rechignerez moins à rajouter cette fonction “delete-row” si vous savez que ça vous prend 3 lignes de code.
Attention cependant, il y a aussi des inconvénients.
Angular est lourd, c’est long à charger, ça bouffe de la ressource pour chaque tab, et si vous avez beaucoup de traitements sur une page, vous avez intérêt à optimiser votre race le bouzin sinon ça va ramer. Tout le monde n’est pas sur une machine de dev propre à 8 cœurs avec une ligne ADSL qui a tout compris.
En fait, si votre site est destiné à être consulté ainsi : je cherche, je consulte du contenu, et je m’en vais, charger Angular est un pur gâchis. Il faut au moins que l’on interagisse un peu avec le site pour que ça vaille le coup : créer du contenu, manipuler des informations, se faire notifier, etc.
Et puis il y a la tentation, la tentation forte de tout faire à la main côté client. Avec son lot de problèmes de sécurité (le delete qui fait pas de vérif), de merdier dans l’histo de navigation (le clic du milieu qui marche pas, le back qui back pas où on veut), les sessions qui font des siennes (je suis déco, mais y mon avartar là, pourquoi ?), etc.
Angular n’est pas une solution pour le bidouilleur Javascript de devenir soudainement grand programmeur Web, et ne dispense pas de coder correctement.
Si je fais de l’Angular, je dois faire du NodeJS ?
Non.
Angular est une techno parfaitement neutre, elle est limitée au client, et par conséquent, vous êtes libres de choisir votre techno côté serveur : .Net, PHP, Ruby, Java, Python…
Par contre, pour les tests, les outils sont très orientés autour de l’écosystème NodeJS : npm, grunt, PhantomJS, etc. Il va falloir mettre les mains dans le cambouis, avec son lot de trucs qui s’installent pas, de dépendances mal branlées, de doc pas à jour, de code JS peu expressif et tout le bordel. C’est tout le problème du JS, la communauté a gardé le côté crade et à l’arrache du langage. Heureusement, ils ont récupéré les designers du monde Ruby, donc vous aurez des tutos obsolètes, mais très jolis.
Ok, mais je peux faire quoi avec ?
Car finalement, quand on n’a pas utilisé Angular, on se demande finalement qu’est-ce que ça apporte par rapport à jQuery.
Essentiellement, c’est que ça divise par 100 les manipulations du DOM. Avec Angular, on met ses données dans un tableau d’objets JS, on indique où les afficher, et on manipule ensuite notre array. Le DOM est mis à jour sans qu’on doive s’en soucier.
Ça à l’air de rien comme ça, mais si vous ouvrez vos fichiers JS avec jQuery, vous verrez qu’ils sont blindés de .click()code et de .append(). C’est la majorité du code ! Code qu’on a pas besoin d’écrire avec Angular.
L’organisation d’Angular invite aussi naturellement à écrire un code linéaire. Pas de blocs dans des blocs dans des blocs, chaînes de callbacks et amas de closures. Il y en a toujours, mais bien moins.
Après, on fait finalement la même chose qu’on ferait avec jQuery, mais plus facilement. Ce qui explique qu’on fait rarement une app full JS avec jQuery, ce qui est infernal à coder, alors qu’on le fait systématiquement avec Angular, car c’est son milieu naturel.
Ce qui va vous surprendre avec cette façon de faire, c’est que tout ce qui s’affiche dans la page passe par Angular. En fait, on a généralement une API REST, et Angular en front pour afficher le site. Pas trop de templating côté serveur.
Et on verra des exemples concrets de tout ça dans les parties suivantes :)
Force est d’avouer que depuis qu’au taffe on est passé à Angular + UI Bootstrap sur le front et un framework maison pour faire des APIs REST sexy par dessus Flask (d’ailleurs à voir si je le propose pour un talk à la PyconFR) pour le back, on arrive a rapidement produire des applications très fournies en terme de fonctionnalités et d’UX.
Pour la sécurité c’est aussi un gros avantage, on a deux couches de vérifications :
– coté serveur forcément parce qu’on est pas prêt de faire confiance au poste client
– côté client car on peut quand même implémenter des choses qui vont renforcer l’UX en faisant des pré-vérifications et éviter des A/R client-serveur.
Bref, dans le cadre des applis web d’entreprise ça permet de rapidement d’avoir un effet WOW! auprès des utilisateurs non-technique.
Merci pour cet article clair, comme toujours. Très bonne introduction!
Je remarque que, comme tout le temps dans le dossier POO, il est question d’API par ci, d’API par là. Serait-il possible d’écrire un tutoriel pour débutant sur ce qu’est une API exactement, à quoi ça sert etc?
Je pense que c’est une notion non triviale pour quelqu’un qui débute…
Encore une fois : merci ! C’est génial, ça faisait des mois que je me grattais à m’intéresser à angular parce que j’en comprenais pas l’intérêt (je voulais le binder avec Flask pour tester et j’ai cru qu’il fallait nodeJS en plus, donc j’ai dit c’est mort)
Mais du coup la petite question s’il est recommandé d’utiliser Angular pour un BO par exemple, est-ce qu’une stack angular en BO, Knockout en front avec Flask pour la partie serveur est jouable ? Ou ça ferait trop lourd ?
Bonne journée !
Merci pour l’article, vivement la suite ! Ca fait un moment que je pensais me mettre à Angular, c’est peut-être l’occasion ! :)
@Anne Onyme: effectivement.
@betepoilue: c’est jouable, mais angular remplace avantageuseent knockout, donc pas vraiment besoin d’avoir deux libs qui se recoupent.
@Sam: Ok noté ! merci beaucoup pour la réponse !
@Badeu: Badeu j’ai vu ton commentaire après avoir posté le mien ! ça m’intéresserait beaucoup de savoir comment tu utilises Angular avec Flask ? Tu utilises NodeJS en plus du coup ?
Et qu’en tu auras bien fini de te plonger des les entrailles d’Angular, un produit obscur et sans doc, un nouveau framework JS powa killer va sortir…je préfère encore partir direct sur Dart ;), sinon Angular c’est bien comme ses 140 potes framework JS ;) et après on me dit, tu sais le dev web s’est beaucoup professionnalisé ;) tu m’étonnes, vous avez déjà vu la gueule du code des appli web 2.0, horrible ;), on a formé des experts en bidouilles javascript ;)
N’exagérons pas : c’est produit pas google, donc loin d’être obscure. Et c’est loin d’être sans doc. La doc est pas mauvaise comparé à la concurrence, disons simplement qu’on est loin de PHP quand il s’agit de la qualité des tutos.
J’ai fait une appli angular en regardant la doc et le code de ton minuteur sur github plus ton article sur les services du coup j’ai gagné du temps au lieu de me frotter à la bête tout seul. Merci beaucoup, je ne te lèche pas les pieds parce que je n’ai pas envie de me faire enchaîner et de prendre des baffes mais le cœur y est. Gloire à toi!
Pour les débutant(es) il y a aussi le tuto gratos sur http://angular.codeschool.com/ qui est très correct.
Cool vivement la suite. Je n’ai toujours pas réussi à me trouver le temps de tester la bête depuis la DjangoCon où on en a un peu parlé. Alors que j’en trouve (prends ?) toujours pour passer sur ce blog. Je vais pouvoir joindre l’utile à agréable (voir au désagréable si Max s’en mêle).
Merci pour ce début de partage sur Angular JS.
@Anne Onyme : Pour une explication très concise et simple sur ce qu’est une API (Application Programming Interface) : c’est un ensemble de fonctionnalités qui permettent de faire des choses complexes via des appels tout simple. Pour faire une analogie, un stagiaire est une API humaine pour le quotidien au travail : tu appelles la fonctions “ordre” en lui passant le paramètre “café” et hop, tu as un café sur le bureau sans avoir à savoir (ni faire) tout ce que ça implique, comme ça tu peux concentrer ton énergie sur ta tâche.
PS : il y a une faute de frappe
Et on verra des exemples
concertsconcretsMais pas du tout, je compte bien utiliser des exemples utilisant la puissance pédagogique de la musique. Hem…
@betepoilue : Je n’ai que du python côté serveur. Angular c’est pour du client side, donc il n’y a aucun pré-requis côté serveur.
Maintenant mon plan d’attaque est un peu toujours identique quand je fais des applis type “entreprise”. J’ai un filtre dans jinja qui me permet de dire si une variable doit être résolue côté serveur ou client :
{{ma_variable|angular}}Si la variable existe côté serveur, c’est son contenu qui sera utilisé dans le template Angular, sinon c’est bien son nom. C’est un peu tricky au premier usage mais en fait c’est très puissant pour faire des trucs funky.
Ensuite je reste avec du classique, mes contrôleurs Angular parlent avec mon API REST pour récupérer/modifier les données (j’ai quand même un module angular côté client pour faciliter ces échanges et pas me taper les requêtes à la main).
Petite particularité, j’utilise un plugin qui fonctionne comme WTForms pour générer les formulaires et qui me génère automatiquement le binding.
J’ai pas trop le temps de bosser dessus ces derniers temps et le code est crade au possible. C’est dispo ici. quand j’aurais des journées de 48h je m’y remettrai : https://github.com/morgan-del/flask-triangle/tree/develop
@Badeu: Woaw génial, merci d’avoir répondu et pour les infos je vais aller jeter un oeil. Merci encore !
Pour Anne Onyme
Un exemple d’API pas forcément documentée, qu’on découvre avec des essais, et qu’on utilise ensuite (qui aime allocine.fr ?)
http://wiki.gromez.fr/dev/api/allocine et http://wiki.gromez.fr/dev/api/allocine_v3
@Anne Onyme : Je viens de me souvenir que j’avais suivi un tuto sympa (en anglais certes mais bien fichu) sur la création d’une api toute bête avec Flask et des jeux de données. En plus ça permet de découvrir Flask avec un micro projet.
Si ça t’intéresse : http://tech.pro/tutorial/1213/how-to-build-an-api-with-python-and-flask
J’ai déjà posté un commentaire sans prendre le temps de le dire donc d’abord merci pour le site, je suis dev Java à l’origine, je suis arrivé sur une mission où on m’a dit “C’est bien ce que tu fais mais fais-le en python”. Au bout de deux jours j’avais envie de vomir, puis j’ai découvert votre blog, et maintenant je fais du python chez moi et c’est quand je regarde du java que j’ai la nausée :)
Bref j’en viens à ma question: après avoir cru en GWT j’ai fini par comprendre qu’il faudrait que j’avale la pilule et me mette au JS (que je hais depuis que je l’ai découvert il y a 10ans, tes opinions sur le sujet rejoignent les miennes). Du coup comme au bon vieux temps j’ai sorti le tuto d’openclassroom dans lequel je suis à la moitié. Par contre pour la suite je me demande si je peux envisager zapper jQuery et passer direct à angular ou s’il fallait vraiment connaitre jQuery pour développer un premier projet basique. Je sais pertinemment que connaitre jQuery me fera pas de mal mais là je veux développer un truc concret et j’ai pas envie d’attendre d’avoir appris les deux framework pour m’y mettre, et Angular, vu la pub que tu (et d’autres gens) en fait, me motive plus. Un conseil ?
Tu peux passer directement à angular, mais angular embarque un mini-jquery donc si tu apprends jquery avant, ce n’est pas gaché.
J’ai fait une formation fullstack javascript en allemagne.
J’y connaissais rien en programmation.
En huit mois, j’ai appris à :
– créer des sites web et des API mobile avec express
– administer des bases de données mongodb et redis
– faire des applications riches avec angularjs et phonegap
– faire des petits jeux mobiles avec phaser, inkscape et tiled
– introduction à harmony avec tracer
La formation comportait aussi des cours de gestions, j’ai pu me lancer en tant qu’indépendant.
Je travaille chez moi et je gagne en 1/2 mois ce que mes deux parrents gagnent en un an !
Et cela seulement 3 mois après ma formation.
Les 2 tiers de mes revenu proviennent de mes 2 jeux mobiles (Win, iOS et Android).
J’ai un clusters de 50 vps redis côté db pour ces jeux qui sont exclusivement online et multijoueurs.
Ce sont des dizaines de millions de joueurs online simultanément !
Un gars avant-hier à débourser pour plus de 3000$ sur un de mes jeux ! Il sont fous ces gamers !
Je suis entrain de traduire mes jeux et mes applications…
Bref tous ça pour dire que javascript est une techno qui intéresse un paquet de monde.
Et je suis persuadé qu’en terme de productivité, on ne fait pas mieux.
Un ami à fait une formation Java de 3 ans. Ça ne lui à servi strictement à rien.
Trois piges pour ne rien en faire, ça m’aurait fait mal.
@randomvm : quel coût cette formation et chez qui ?
@sam : trop court cet article :) ça s’est lu comme du petit lait ; hâte d’avoir la suite .
@randomvm : Je suis super intrigué par ta success story : j’ai plus l’habitude de voir des gens se planter dans la réalisation de jeu que l’inverse (et surtout sur une période si courte :o)
Y a t il moyen de voir tester tes jeux ?
j’ai pas le tampon mytho, dommage…
Il y a aussi ce très bon tuto video par Grafikart :
http://www.grafikart.fr/tutoriels/angularjs/angularjs-todo-369
Thanks pour cette première partie :)
En lien avec l’article (bon, une bonne partie on dû déjà voir passer l’info), un ebook au prix libre sur Angular justement: http://linuxfr.org/news/un-ebook-sur-angularjs-a-prix-libre-et-pour-une-bonne-cause
Si jamais ça peut servir …
J’ai testé AngularJS de mon coté. J’arrive à faire marcher ce que je voulais, mais j’ai quand même cette impression que mon code est mega crade à cause de mon background JQuery.
Des amis m’ont dit que Angular c’est comme ca, difficile de faire propre avec. Mais moi ca m’empêche(erait presque) de dormir quand j’y pense.
Si dans ton tuto tu saisis mon problème (bien séparer son code proprement) et arrive à expliquer la solution, bah je paye ma tournée!
Oops j’ai oublié de souscrire par emails au nouveaux commentaires de cet article. Supprime ce commentaire mais laisse moi souscrit! Merci!
@RandomVm
Trop d’accord, Java c’est trooooooop de la merde. Comme je suis d’accord avec toi, oh là là.
Sinon, c’est quoi comme jeux?
@k3c @betepoilue
Merci les gars, je vais jeter un coup d’oeil.
@betepoilue je suis plutôt en train d’apprendre bottle ;-)
@RandomVm:
Eh ben elle a l’air sacrément efficace ta formation ! Ca se passe comment ? C’est où en Allemagne ? C’est dispensé par quel organisme ? C’est possible d’avoir un lien ? Et donc en trois mois tu as déjà monté un jeu qui génère des profits ? Tu dois être quand meme vachement doué à la base ! J’ai bien envie de l’essayer ton jeu du coup. Il s’appelle comment ? Tu as lien vers un site officiel ?
@Sam : Très bon article d’introduction à AngularJS !
J’ai tout particulièrement apprécié le paragraphe “Quand utiliser Angularjs ?”. Comme toutes les nouvelles technologies, il est fréquent de voir des développeurs “s’embêter” avec ce framework sans le maîtriser complètement pour de petits projets de blog ou autre.
Sinon, dans l’optique d’agrandir et d’alimenter la communauté francophone AngularJS (qui manque cruellement de ressources je trouve), je suis en train de rédiger un Big Tutoriel sur le framework : http://www.tutoriel-angularjs.fr
Si ça peut en intéresser… n’hésitez pas à y laisser des commentaires !
Hello
Merci pour cet article :] hâte de lire la suite !
tu penses quoi de Backbone par rapport a AngularJS ?
C’est comme comparer Flask et Django. Pas le même usage.