Dans le cadre de la refonte de notre site, nous avons choisi d'utiliser prismic.io pour la gestion des contenus.

Pourquoi et comment avons-nous utilisé l'outil ? Quels en sont les avantages et les inconvénients ?

Let's find it out !

Contexte et enjeux

Nous n'avons pas de type de contenu complexe à gérer, et nous souhaitions orienter notre refonte sur l'interface utilisateur.

Découpler le back-office du front-office était une solution efficace pour nous affranchir du développement d'un outil d'administration, et de rester concentrés sur le front et la prise en main d'AngularJs.

Nous avions également l'enjeu de reprendre la majorité des anciens articles de notre site, dans le journal.

Pourquoi avoir utilisé prismic.io ?

  • La mise en place est rapide et indolore.
  • Le back-office est simple d'utilisation.
  • L'API est disponible et répond rapidement.
  • Multiplier les appels à l'API ne fait pas fléchir prismic.io.
  • L'utilisation des WebHooks permet de notifier votre application de toute nouvelle publication de contenu.

Notre utilisation de prismic.io

Nos types de contenu

prismic.io utilise un système de masques de document pour définir les types de contenu. Leur définition se fait au format json dans l'administration de l'interface. Le json de votre masque est validé à la soumission pour éviter les erreurs.

Différents types de champs sont disponibles, allant du simple Text à l'Embed, en passant par le format Date.

Voici la liste de nos masques de document :

document-masks

Ils sont nombreux mais simplistes, et nous ont permis de gérer assez finement le front. En plus des contenus classiques, nous utilisons certains documents comme un gestionnaire de configuration et de publications. Par exemple, pour la journée de lancement de notre site, nous avions mis en place une page d'accueil évenentielle : celle-ci affichait de façon alternée un player Youtube diffusant un live et la home classique. Le controller gérant l'affichage de la home interroge notre document prismic de type "video". Une simple checkbox et un lien vers notre stream nous permet d'afficher ou de masquer le flux youtube.

L'interrogation de prismic.io

Nous interrogeons prismic.io depuis notre front AngularJs.

  • Voici le Service qui nous permet de récupérer les 100 dernières actualités présentes dans prismic.io :

    (function () {
'use strict';

angular
.module('lanetscouadeApp')
.service('newsService', function ($http, $q, Prismic) {
    var $this = this;
    $this.news = [];
    $this.getNews = function() {
        var deferred = $q.defer();
        if ($this.news !== false) {
            deferred.resolve($this.news);
        }
        else {
            Prismic.ctx().then(function(ctx) {
                ctx.api.form('everything').ref(ctx.ref).query('[[:d = at(document.type, "news")]]')
                .orderings('[my.news.date desc]')
                .pageSize('100')
                .submit(function(error, docs) {
                    $this.news = docs.results;
                    deferred.resolve($this.news);
                });
            });
        }
        return deferred.promise;
    };
});
}());

  • Injecté dans notre Controller, ce service est accessible très facilement pour alimenter notre $scope :

    (function () {
'use strict';

angular.module('lanetscouadeApp')
.controller('JournalHomeCtrl', ['$scope', 'newsService', function ($scope, newsService) {
    // On accède au service, et on remplit notre variable de scope
    newsService.getNews().then(function(news) {
        $scope.news = news;
    });
}]);
}());

Tips

Par défault, prismic.io offre un accès au form "everything", ce qui veut dire que vous accédez à n'importe quel type de document, depuis l'API ou depuis l'interface.

Dans le cadre de notre page de communautés, il nous faut récupérer des documents de 5 types différents.

Afin d'optimiser les performances et éviter d'enchainer des requêtes complexes à l'API, nous avons créé un form (nommé community) sur prismic, regroupant les types de contenu spécifiques à cette page.

collections

L'utilisation d'un "form" custom (à créer dans le back-office de Prismic) peut largement réduire le nombre de vos requêtes, ou les simplifier significativement si vous tentez de récupérer des documents de différents types :

$this.getCommunityContent = function () {
    Prismic.ctx().then(function(ctx){
        ctx.api.form('community').ref(ctx.ref).query()
        .submit(function(error, docs) {
            // Do Stuff with your data
        });
    });
};

Quelques limitations...

  • Nativement, prismic.io ne nous permet pas encore de fixer des slugs par contenu, et d'interroger l'API à partir de ceux-ci. On passe donc par les Document.id pour récupérer les données, ce qui n'est pas de plus bel effet dans les URLs. (exemple : http://journal.lanetscouade.com/article/VK8ICCkAANsGvLlH/homos-la-haine--quelques-chiffres-sur-la)
  • Vous notez également la mauvaise génération des slugs côté prismic.io, qui mange le dernier terme du titre de notre article, si le slug n'est pas généré sur un champ de type "structuredText" avec "heading".
  • L'API ne permet pas le chargement complet des documents associés à un contenu (linkedDocument). On est donc obligés de faire autant de requêtes qu'il y a de documents reliés.
  • Modifiez la définition des vignettes dans votre masque de document, et vous devrez re-uploader toutes les images impactées.
  • prismic.io ne prend pas en charge la retaille des gifs animés.
  • Pour notre journal, nos paragraphes permettent aux rédacteurs d'ajouter des images (WYSIWYG). Cependant, il n'est pas possible d'avoir des formats différents pour le Desktop et le mobile ; la conséquence est qu'on a des chutes de performance importantes sur le mobile.

Bonus

A l'heure actuelle il n'est pas possible d'importer des contenus dans prismic.io. Après discussion avec l'équipe prismic , une version experimentale de prismic permet d'importer des contenus depuis un fichier JSON...

N'hésitez donc pas à entrer en contact avec eux pour accéder à cette version !