Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

AngularJS : oui mais …

Bon tout d’abord je ne vais en aucun cas critiquer le nouveau framework JavaScript de Google (AngularJS) car je le trouve personnellement révolutionnaire, très complet et très bien pensé, le but de ce billet est juste de mettre en avant quelques points qui peuvent être gênant ou qu’il faut avoir en tête avant de faire son choix dans le monde des frameworks JS.

angularjs

Points forts indiscutables

Avant de passer à mes « réserves » concernant ce projet, voici les points forts qui ont séduit la plupart d’entre nous lorsque la première version est sortie l’été dernier, tandis que la plupart de ses concurrents se limitent plus ou moins à du templating, AngularJS propose de nombreuses fonctionnalités alléchantes :

  • Data-binding bi-directionnel entre un modèle et des composants, sans aucune ingérence du framework
  • Templates HTML purs, le binding est simplement réalisé par l’ajout de propriétés ng-* dans les balises
  • Possibilité de créer des composants personnalisés et entièrement réutilisables, en HTML/JS
  • Modèle MVC2 avec un Front-controller (« router »), des Contrôleurs (JS), et des Vues (HTML), ce qui permet de dissocier la manipulationdu DOM de la logique applicative
  • Interaction immédiate avec des ressources REST exposées par le serveur, ce qui permet de dissocier la partie cliente de la partie serveur et le développement en parallèle
  • Framework de tests complet fourni de base : TDD, mocks, tests d’intégration …

Mes réserves

  • Search Engine Optimization (SEO)

Etant donné qu’AngularJS n’est que du JavaScript, ce que les navigateurs arrivent à traduire et afficher aux visiteurs, les robots d’indexation le voient différemment, ainsi les pages d’une application utilisant AngularJS ne vont pas pouvoir être indexées correctement et seront donc invisible dans les SERPs de Google ou Bing.

Ce n’est pas forcément un point rédhibitoire pour toutes les applications Web, je pense notamment aux applications d’entreprises qui ne sont pas vouées à être publiques et accessibles à tous, mais une application souhaitant faire fortune grâce son trafic de visiteurs (publicités, ventes d’affiliation …) aura bien du mal à se faire voir sur Internet.

C’est un point important à ne pas négliger, cependant il existe des techniques pour que les pages d’une telle application Web soient « lues » correctement par les robots, j’en avais même fait un article lorsque je m’y étais intéressé lors du développement de mon site sur Magic l’Assemblée, voici un autre lien qui explique de façon plus précise la manière de s’y prendre avec AngularJS.

Cela reste assez compliqué et nécessite une certaine expérience dans le domaine, mais ce n’est pas irréalisable ce qui est déjà pas mal.

  •  Validation W3C

De base une application Web construit avec AngularJS ne passe pas la validation W3C en type de document « HTML5 ». Cela peut paraître anecdotique mais moi je pense au contraire que c’est un point à ne plus négliger car c’est un des critères qui rentre en considération par l’algorithme de Google pour l’attribution du « page rank » d’un site.

Heureusement qu’il existe une multitude d’autres critères pour le calcul de cette notation (vitesse d’affichage, backlinks, markup HTML …) mais j’ai considéré qu’il fallait mieux prévenir que guérir, surtout lorsqu’il y a un moyen simple et rapide pour contourner ce problème : en effet au lieu d’utiliser les nouvelles propriétés ng-*, il faut les préfixer par data- ou x-, ce qui donne data-ng-* ou x-ng-*.

HTML5 ayant ajouté cette notion de « custom data attribute« , cela vous permettra de passer la validation W3C en douceur, sans trop de peine.

  • Subroute/Subview

J’aurai aimé qu’il y ait une notion de « sous-route » – « sous-vue » mais nous n’avons qu’une notion de « route » – « vue », la propriété <ng-view> ne permet pas d’être nommée ce qui fait qu’elle est à chaque fois remplacée par l’intégralité d’un Template HTML, ré-exécutant ainsi toutes les requêtes associées afin de visualiser la page.

Voyons cela par un exemple concret, voici l’url d’un deck magic l »assemblée http://magicsupremacy.fr/#!/deck/id/19659, cette url fournit donc une page contenant 4 blocs : « informations générales », « contenu », « description » et « commentaires ». J’aurai aimé pouvoir fournir à mes joueurs une url différente par vue du deck (standard/en images/réédition), par exemple …/id/19659/standard, …/id/19659/image ou …/id/19659/reedition en ne rechargeant que le bloc « contenu » et pas les autres.

C’est donc cette notion de « sous-route » pour une « sous-vue » qui m’aurait permis de réaliser cela sans effort.

L’équipe d’AngularUI tente de résoudre ce problème en proposant le composant ui-router mais il n’est actuellement qu’en version 0.0.1 et n’est donc pas utilisable en production pour le moment.
Un autre contournement a été tenté à cet adresse, sans rencontrer le succès ni l’intérêt des développeurs de Google pour l’intégrer nativement dans AnguarJS, il n’y a donc pour le moment aucune solution viable qui permette de faire cela.

  • Directive

L’utilisation conjointe des composants jQuery UI avec AngularJS n’est pas forcément native, et il faut parfois pour cela devoir écrire des Directives encapsulant le mécanisme du composant lui même.

Voici un exemple tout simple : comment récupérer et lier le choix d’un utilisateur dans le scope d’AngularJS, choix provenant d’une liste déroulante générée et affichée grâce au composant AutoComplete ?
Il faut pour cela déclarer une Directive « autocomplete » et l’utiliser dans la zone de recherche (<input>) du formulaire, voici un exemple complet sur cette page, il n’est plus possible de l’utiliser de la façon décrite sur la page du composant, il faut à présenter tout encapsuler dans une directive AngularJS.

En règle générale, l’écriture des directives est compliqué et nécessite d’avoir en tête qu’une directive ne doit faire que de la manipulation du DOM et rien d’autre.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 6 mars 2013, 2 02

    Encore un article qui va se révéler indispensable, bien vu 🙂

    Réponds !

  • PH de Kaliseo 6 mars 2013, 12 12

    Heu tu es sûr que Google n’indexe pas le contenu en JS ? D’après moi Google indexe les liens JS depuis 2009 (source : searchengineland.com), les formulaires AJAX depuis 2011 (source : googlewebmastercentral.blogspot.fr) et même les commentaires FB.

    De plus, tu peux indiquer à Google d’indexer du contenu JS comme pour Twitter : https://developers.google.com/webmasters/ajax-crawling/?hl=fr

    Réponds !

  • Mimie 6 mars 2013, 13 01

    Ce que je dis c’est que GoogleBot et BingBot ne savent pas exécuter tout le javascript contenu dans nos pages, notamment les manipulations du DOM en javascript.
    Pour qu’il puisse indexer du contenu JS il y a effectivement un moyen d’y parvenir : le lien que tu donnes et le lien que j’ai donné dans le billet sur l’implémentation de cette technique, mais il y a beaucoup de choses à mettre en place pour qu’il y parvienne.
    Si tu ne fais rien de plus que coder en AngularJS sans te soucier du reste en pensant que tes URLs seront automatiquement accessibles pour les bots, ça ne fonctionnera pas.

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Chris: “Bonjour, Quel est le nom de la table du plugin W3Total Cache car je ne la trouve…Déc 1, 09:22
  • Greg: “Liens de l'article mis à jour.Nov 27, 14:32
  • Greg: “Vraiment pénible ce problème. Pour ma part je l'ai résolu en créant un raccourci manuel dans mes favoris et en…Nov 20, 23:28
  • Jacqueline: “Je suis sur Safari.... même problème. Mon appli pour iPad ne fonctionne pas non plus.Nov 18, 08:44
  • Greg: “Ouais mais c'est vrai que ton article était bien senti. Ca le fait que tu le lises depuis Feedly :)…Nov 3, 21:00
  • Youness: “Bonjour, Merci pour cette article il ma aider enormement lors de la creation de mom projet Ma question…Nov 3, 20:29
Share This