Zenexity a annoncé hier le lancement de Prismic.io, un CMS (Content Managment System) de type Saas (Software as a Service). Destiné à faciliter la gestion du contenu d’un site web, l’approche est radicalement différente des autres CMS du marché, voire singulière.
Prismic.io s’adresse à 2 populations : les éditeurs de contenu et les développeurs. Les premiers souhaitent un outil simple, puissant et capable de s’adapter à leur métier. Les seconds veulent une solution basée sur des API Web standards, capable de fonctionner avec tous les langages du Web.
Après avoir créé son compte sur la plate-forme hébergée, vous pouvez « cloner » un projet existant pour démarrer. Si vous voulez vous faire une idée de ce qu’il est possible de faire avec Prismic.io, allez voir le site « les Bonnes Choses« . Imaginez pour commencer une place de marché avec plusieurs modèles de site, comme des projets sur Github. Par exemple « agence immobilière » ou « magasin d’habit » ou « site des ressources humaines »… Cette étape permet de comprendre comment fonctionne la plate-forme.
Des masques de document
La notion de page n’existe pas en tant que telle sur Prismic.io. Vous allez plutôt définir vos types d’objets, des masques de document, qui ensuite seront utilisés et appelés pour construire le site. Pour mieux expliquer cela, je vais vous montrer comment nous pourrions nous en servir pour recoder l’express-board.
Par exemple, pour mon site d’offres d’emploi, je peux définir les types suivants :
- un recruteur
- une offre d’emploi
- un profil de candidat
La définition d’un méta-modèle prend 5mn, tout se fait en JSON. A cette étape, c’est donc plutôt le développeur en accord avec l’éditeur de contenu, qui va travailler.
Voici par exemple ma définition d’une offre d’emploi
{
"Main" : {
"JobpostTitle" : {
"type" : "StructuredText",
"label" : "Titre de l'annonce",
"config" : {
"single" : "heading1",
"placeholder" : "Titre court de l'annonce"
}
},
"contract_type" : {
"type" : "Select",
"fieldset" : "Characteristics",
"config" : {
"label" : "Contract type",
"options" : [ "CDI", "CDD", "Stage ou alternance", "Freelance", "Autre" ]
}
},
"jobDescription" : {
"type" : "StructuredText",
"fieldset" : "Description du poste",
"config" : {
"minHeight" : "200px"
}
},
"image" : {
"type" : "Image",
"config" : {
"constraint" : {
"width" : 500.0,
"height" : 500.0
},
"thumbnails" : [ {
"name" : "Icon",
"width" : 250.0,
"height" : 250.0
} ]
}
},
"jobpostSalary" : {
"type" : "StructuredText",
"label" : "Salaire, indemnité, rémunération",
"config" : {
"single" : "paragraph",
"placeholder" : "Précisez la fourchette de salaire brut ou le montant du TJM"
}
},
"jobpostCity" : {
"type" : "StructuredText",
"label" : "Ville et Pays",
"config" : {
"single" : "paragraph",
"placeholder" : "Ville"
}
},
"jobpostRef" : {
"type" : "StructuredText",
"label" : "Votre référence",
"config" : {
"single" : "paragraph",
"placeholder" : "Référence de votre annonce pour le candidat"
}
},
"jobpostContactInfo" : {
"type" : "StructuredText",
"label" : "Comment postuler",
"config" : {
"single" : "paragraph",
"placeholder" : "Précisez votre adresse email ainsi que les modalités pour postuler"
}
}
}
}
Première notion intéressante, vous pouvez donc définir un masque de création de document (un modèle) composé de plusieurs familles d’éléments, tout en donnant certaines contraintes de présentation. Ceci permet donc de créer du contenu structuré. L’édition du contenu ne produit pas de HTML, contrairement à certains moteurs de CMS. L’édition de contenu créé du contenu structuré. Ce sera à vous, en tant que développeur, d’appeler et de charger ce contenu, puis de l’afficher avec votre technologie favorite (Java, Scala, JS, Ruby, PHP…).
Le premier point fort, Prismic est un gestionnaire de contenu structuré, qui s’adapte à votre métier, et qui vous laisse la liberté de définir vos types de contenu.
Editeur et révision
Le backoffice de Prismic.io est complètement hébergé sur les serveurs de Zenexity et sur Amazon AWS. Après vous être connecté, une vue de type « ligne de temps » vous donne les dernières modifications effectuées par vos collaborateurs. Un outil de diff très puissant, codé par Sadek et Guillaume, permet de voir les mises à jour récentes, par type de document. Dans la colonne de gauche, « Releases » permet de créer des versions du contenu de son site. Ainsi, je peux préparer du contenu pour les soldes de Noël ou une opération spéciale, sans affecter la version actuellement en ligne. Ce que je trouve assez génial, c’est qu’il y a beaucoup d’idées et de concepts venant de Git. C’est complètement invisible pour l’utilisateur moyen. Cependant un développeur verra très vite que les bonnes idées de Git… s’appliquent plutôt très bien à la gestion de contenu. Disons que Prismic.io pourrait être le github de la gestion de contenu. Mettre en production une version, c’est finalement similaire à git pull –rebase…
Deuxième point fort : l’interface du back-office. Simple, puissante, facile à utiliser. Vous n’avez pas à apprendre des termes bizarres ou techniques. On sent bien que l’interface a été travaillée depuis plus d’un an. C’est simple et facile, et surtout, très rapide.
Gestion du temps, publication future
Troisième point fort de Prismic.io : la gestion du contenu est liée à une ligne de temps. Imaginez la situation suivante : vous vendez des vêtements en vente privée sur un site internet. Les ventes démarrent chaque lundi. Comment préparer la vente de lundi prochain ? Et les ventes des semaines suivantes ? Avec la gestion des « releases », Prismic.io permet de programmer et surtout de voir votre site tel qu’il sera lundi prochain. Vous pouvez ainsi faire valider votre version, puis ensuite programmer le changement sur la plate-forme. C’est un vrai besoin, que ce soit dans les sites B to C, mais aussi sur les intranets, les sites d’annonces, les portails ou encore les médias en ligne.
Prismic.io est un gestionnaire de contenu qui travaille par événement, ce qui permet de revenir dans le passé ou de voir différentes versions de votre contenu dans le futur.
Chargement des données par collection
Nous avons donc la possibilité de définir des types de données (produit, catalogue, offre d’emploi, magasin, fiche produit…). Chaque document peut ensuite être marqué avec des Tags. Si je souhaite mettre en avant cette superbe jupe à 79 EUR qui fera craquer n’importe qui, il me suffit d’ajouter le tag « Featured ». J’ai convenu avec le développeur qu’il devra charger les documents marqués « Featured » sur la page d’accueil du site.
Et c’est là que le développeur intervient. Dans la vision de Prismic.io, la mise en page et la construction du code HTML… doit se faire par un développeur. Plutôt que de vouloir absolument publier du contenu HTML, Prismic.io vous donne du contenu structuré, au format JSON. C’est vous, développeur, qui ensuite allez faire le travail de présentation.
Quelque part… c’est ce que nous faisons depuis très longtemps. Lorsque vous allez chercher du contenu dans une base MySQL, qu’ensuite vous utilisez votre framework Web favori pour construire votre site… oui, en fait c’est ce que nous sommes habitués à faire.
Ce qui change donc, c’est que Prismi.io est une source de données comme une autre. Dans votre code, vous allez requêter prismic.io, via une API Web, et vous pourrez charger du contenu au format JSON.
Voici par exemple ce que vous chargerez :
[
-{
id: "UYuv6d_mqU0GZe1h"
type: "jobpost"
href: https://express-board.prismic.io/api/documents/search? ref=Uk0Y7LO5328MbYih&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22UYuv6d_mqU0GZe1h%22%29+%5D%5D
tags: [ ]
-slugs: [
"developpeur-frontend-hf"
]
-data: {
+ … -jobpost: {}
}
}
]
Prismic.io n’utilise pas du SQL ou autre, mais le principe des prédicats. C’est assez intuitif et facile à utiliser. Les documents ne se rangent pas dans des dossiers. Au lieu de cela, lorsque vous souhaitez charger une famille de documents, il suffit de définir une requête comme « toutes les offres d’emploi avec le tag [Featured] et [Java] ». Mais ce qui est intéressant, c’est que Prismic.io ne se contente pas de vous cracher une page de résultat. Au lieu de cela, le résultat de votre recherche sera aussi composé et basé sur vos différents types de document. Si par exemple je souhaite charger l’ensemble du contenu avec le mot « chocolat » sur le site « les bonnes choses », le résultat de la recherche sera lui aussi structuré. Regardez par vous même http://lesbonneschoses.prismic.me/search?query=chocolate
J’imagine que dans votre projet, vous gérer quelque part du contenu. C’est la fiche d’un présentateur de Devoxx, un descriptif produit, un contrat type, la fiche d’un hôtel, une offre d’emploi, des photos de vos produits…
Imaginez un instant qu’il soit possible de retirer de votre projet, tout le code d’édition, de création et de mise à jour de ce contenu. Imaginez déléguer à un service sécurisé, sauvegardé et répliqué vos données. Sur l’express-board, je n’aurai pas à stocker mes offres dans une base MySQL. Sur Zaptravel, je pourrai avoir mes hotels, mes points d’intérêts, mes descriptions et photos de chaque villle… Vous vous souvenez de l’article « les Secrets des Architectes Web » ? Lorsque je parlais d’intégration de différents services Webs, c’est aussi en ayant en tête ce projet.
Ce qu’il manque pour l’instant
Il manque encore quelques fonctionnalités pour que l’ensemble soit complètement utilisable. Le premier point sur lequel il me semble important de pouvoir avancer, ce sera l’édition externe du contenu, en dehors du back-office de Prismic.io. S’il est souhaitable d’utiliser ce back-office pour des clients internes (équipe marketing, ressources humaines, chef produit), je pense qu’il faut un autre point d’entrée pour permettre la création et l’édition (des speakers qui proposent un sujet, un annonceur qui poste une offre d’emploi). Ce point n’est pas bloquant. Il est déjà possible cependant de coder et ensuite de poster ce contenu vers Prismic.io. Mais j’aimerai pouvoir proposer la saisie intelligente d’une offre d’emploi avec le masque de présentation et l’éditeur WYSIWYG. Idem pour une proposition de sujet pour Devoxx France… Vous voyez où je veux aller…
Révolution singulière
Prenez n’importe quel site institutionnel. N’importe quel intranet d’entreprise. Imaginez un écosystème interconnecté, où il sera possible d’aller chercher les fiches produits de Nestlé, librement accessibles, pour les mixer avec les recettes d’un site de cuisine… Un système où chaque équipe peut aller chercher du contenu et des informations, sans la barrière technologique. Le tout, sans devoir être un expert HTML ou un architecte web.
Imaginez aussi votre RH, qui s’inscrit sur Prismic.io. Elle clone un projet type d’intranet et commence à créer des pages pour sa société.
Et bien c’est ce que j’ai vu hier, en assistant à la démonstration de la RH de Zenexity.
Bref, à suivre.
0 no like
L’idée me plait bien, et connaissant l’équipe derrière le projet ça promet!
C’est juste dommage qu’il n’y ait pas de version gratuit pour les développeurs, j’aurais bien aimé jouer un peu avec pour me faire un vrai avis
N’hésite pas à te faire un avis, Loïc, c’est justement gratuit pour les développeurs !
Même une fois hors de la bêta, tu pourras créer un repository totalement gratuitement, développer ton projet dessus, et ne t’inscrire à un plan payant (selon ton besoin et la taille de ton équipe) qu’une fois ton projet prêt à passer en production.
Tu as plus d’infos dans la FAQ, ici : https://prismic.io/pricing
Bonnes expérimentations !
Dommage tout de même d’être un produit français et de ne faire un site qu’en anglais…
Et, sinon, j’ai aussi un peu de mal avec les pages d’accueil à rallonge.
Allez, bon courage.
Salut Rudy !
C’est cool ! Ca me fait un peu penser à la syntaxe de JStore (en Java)
Quelques questions:
1. Sur la vidéo de « dev JS » comment gères tu l’authentification et la visibilité des contenus vu que tu récupères le tout « client side » en REST
A moins que ce ne soit pas adapté aux sites avec une notion de compte utilisateur ?
2. Comment gérer le multilinguisme ? Il faut multiplier les « instances » ou faire évoluer les schémas ?
3. Dans le cas de requêtes multi sites comment gère tu la fusion des résultats (l’ordre de tri) ? Typiquement pour 2 sites A et B avoir « A1 B1 A3 »
4. Dans le même esprit que 3. comme gère tu le pager ? Tu ne récupères pas toutes les données en JSON ? J’imagine que c’est du Mongo en dessous ?
Bon on se voit à ParisWeb jeudi 🙂
Hello monsieur JP, ça fait plaisir de te croiser ici ! 🙂
1 – Les permissions sont gérées dans la writing room, et le front-office récupère les permissions de l’utilisateurs grâce à OAuth2. Pour donner plus de recul : le concept est vraiment que le gestionnaire de contenus ne devrait pas se mêler des affaires du front-office, qui est une autre application avec ses propres priorités technico-fonctionnelles, et doit simplement fournir au front-office les meilleurs outils pour manipuler ce contenu ; et bien sûr, les permissions d’accès à ce contenu font partie de ces outils.
Du coup, la question de « prismic.io est-il adapté au sites qui… ? » ne se pose plus, car tout est faisable côté front-office, selon la technologie / le framework que tu décides d’utiliser.
2 – Nous pensons que le multi-linguisme est un mot généralise qui contient de très nombreux cas d’utilisation (autant de contenus dans toutes les langues ? les mêmes contenus ? sont-ils liés quand même ? …), et que ça fait partie de ces features que les utilisateurs ont très souvent besoin de modifier dans les CMS pour adapter à leurs cas.
Nous avons déjà mis en place de l’internationalisation dans des exemples à venir, et on est en train de travailler sur un billet de blog qu’on va publier bientôt pour décrire comment bien faire de l’internationalisation avec prismic.io. En attendant, n’hésite pas à me décrire ton cas précis, et je t’aiderai à le mettre en place.
3 – prismic.io ne fonctionne pas par site, mais pas repository de contenu. Un même repository peut servir plusieurs sites (d’ailleurs, un même site peut aussi s’appuyer sur plusieurs repository !)
Le writing-room fournit des outils pour travailler efficacement sur des repository très larges. L’idée est donc de mettre dans le même repository tous les contenus susceptibles de travailler ensemble ; le problème du multi-site n’existe donc pas.
4 – En dessous, c’est une combinaison de plusieurs outils techniques dédiés à leur tâche, plusieurs applications qui travaillent efficacement ensemble ; au cas où ça ne se voyait pas encore beaucoup, Zenexity (récemment renommé « Zengularity », d’ailleurs) croit très fort en les Web Oriented Architectures ! MongoDB fait en effet partie de l’architecture à certains endroits ; on s’apprête à publier aussi des billets techniques sur notre architecture pour rassasier les poilus de l’architecture comme toi. 😉
Aujourd’hui, on ne peut pas pager les requêtes, il faut donc récupérer tout le JSON ; c’est une problématique sur laquelle l’équipe travaille, pour autoriser de meilleures optimisations des requêtes.
J’aurais aimé te voir à Paris Web, mais je suis bien trop loin à l’autre bout du monde ! J’animerai l’atelier sur mon bouquin via Skype, aidé de Jérémie, qui lui, sera sur place, bien sûr.
Profites-en bien !!!!! 🙂
Tu as une idée de projet avec lequel tu veux expérimenter sur prismic.io ? Je reste à dispo pour t’aider au besoin !
Merci,
Je n’ai pas de projet précis en tête, j’essaye de comprendre et de me projeter par rapport aux JCMS distribués.
Typiquement sur le Multilinguisme de JCMS un client qui veux que ses contenus soient en 25 langues
– soit on flag les champs comme multilangue (et les IHM suivent)
– soit on fait 25 contenus car ils divergent trop
Donc si je comprends bien, l’idée est toujours d’attaquer un repository avec les bons contenus sinon cela entraîne trop de conflits.
Je posais la question car avec la réplication partielle et optimiste on se posait justement la question de la meilleur manière de faire avec des source de données hétérogènes.
Clairement, l’internationalisation, c’est un sujet complexe, et c’est notoirement très difficile d’avoir une réponse qui satisfasse tous les cas.
De notre côté, ça nous entraîne encore plus à vouloir prendre le temps d’y réfléchir fortement avant de vouloir sortir une « feature » internationalisation.