Le nouveau site de l'agence La Netscouade a été mis en ligne le 20 janvier 2015.

AngularJs, Prismic, Sf2... on vous présente les composants de cette application constellaire !

L'application

Le site institutionnel et le journal (site de news), tournent sous la même app AngularJs.

Chaque partie (sous-domaine pour le journal) dispose de son routing dédié (nous utilisons angular-ui-router). Les contenus éditoriaux sont gérés dans Prismic, un produit dont on vous avait déjà parlé dans cet article.

Le Feed "Live"

Mécanisme global

Le flux en temps réel présent sur le site est géré par Slack. Un channel lui est dédié qui permet d'utiliser les intégrations connues avec l'outil. Il est donc facile de récupérer les tweets d'un compte, par exemple.

Pour certains services, l'intégration n'est pas prévue avec Slack, comme par exemple Instagram. Il a donc fallu passer par un autre service qui fait la connexion entre les deux. Un premier test a été effectué avec Zapier. En creusant un peu plus la documentation Instagram, nous sommes tombés sur la possibilité de faire du 'real-time'.

Les callbacks Instagram

Le mode real-time permet d'être notifié lorsqu'un événement est déclenché. Pour cela il suffit d'enregistrer un nouveau client sur un compte Instagram, d'authentifier l'utilisateur sur cette application et de rajouter l'URL qui est appelée lorsque l'événement va se déclencher - par exemple la publication d'un nouveau post. Aucune interface n'est prévue pour faire cette configuration; des commandes curl sont données dans la documentation.

Webhooks Slack

Une fois que tous les services sont rapatriés dans notre channel dédié, il faut maintenant notifier notre application qu'il y a un nouveau message. Slack propose des Outgoing Webhooks, qui permettent de lancer une requête POST sur une URL définie. Dans notre cas, nous ajoutons ce nouveau message dans un fichier json que notre application AngularJS ira interroger.

Balise base et attribut xlink:href

Afin d'utiliser le HTML5 History API avec AngularJs, nous avons configuré l'application comme ceci : $locationProvider.html5mode({ enabled: true, requireBase: false });

Notez qu'avec le paramètre requireBase à false, nous n'avons pas pu supprimer la balise <base href="/" /> de notre index.html.

Le problème est qu'avec l'utilisation de cette balise <base>, le ciblage des symbols réalisé avec le xlink:href se compromet à chaque changement d'URL.

SEO (AngularJs + Prerender)

La partie d'optimisation pour les moteurs de recherche fut importante pour nous, il ne fallait pas perdre l'ancien référencement et les nouveaux articles du journal devaient s'afficher correctement lors du partage sur les réseaux sociaux. Par défaut, les variables apparaissent dans google à la place de sa vraie valeur, exemple:

meta.getTitle()

Pour éviter cela, un service existe, Prerender. La mise en place dépend de la technologie que vous utilisez. Dans notre cas, nous utilisons apache pour mettre en place ce service. Le code est disponible ici. Il suffit de mettre le token prerender ainsi que l'URL de votre site à la place de celui de l'exemple. Une fois la configuration terminée, dès qu'un bot (Google, slack, twitter, etc...) essaie d'accéder au site, il aura une version HTML servie par le service prerender.

Optimiser le rendu HTML

Dans le cas d'une application AngularJs, il n'est pas facile pour prerender de savoir si la page a fini de charger. Il existe une variable qui permet de dire à prerender que la page est prête à être enregistrée dans le cache.

window.prerenderReady = false;

Une fois que tout est chargé, il suffit de mettre à jour cette variable avec la valeur true

window.prerenderReady = true;