The document discusses Togu, a WYSIWYG content management framework based on HTML5 that allows for easy content creation and customization. It has native support for responsive design and components. Content can be edited in-place with drag and drop. Views are plain Mustache templates with custom directives, using two-way data binding and dependency injection. The server acts as a data provider with REST APIs, and the frontend design is agnostic from the backend implementation.
2. Backend based CMS
Time wasted by contributors
Lots of forms to fill, need to preview each time
WYSIWYG
Time wasted by developers
Often hard to customize for advanced features
3. Togu is aWYSIWIG Content Management
Framework based on HTML 5
Support for Desktop and Mobile devices
Native support for Responsive design websites
Large library of production-ready Components
4. Easy contents creation
WYSIWYG editing
Fast to develop and customize
Forget about the backend development
Write the frontend code and you are done
5. In place text editing
Insert and modify resources with Drag & Drop
Customize the website aspect in real time
Access translated contents in one click
History of modifications available in one click
Adapt contents depending on the device or
the location
Preview the website in mobile devices via an
integrated simulator
6.
7. Two-way data binding between the model
and the view
The views are plain Mustache templates with
custom directives
No more need to use jQuery Selectors
Events binding extremely simple
Dependency injection of Services into the
Controllers
Inspired by Polymer /AngularJS
8. The server acts as a Data Provider
Delivers HTML just for the first Request, rendering
the template to be SEO compliant
RESTWebServices expose the website data
Completely agnostic from the Frontend
design
No need to write a line of code in most cases
Easy to port to different languages
NodeJS / .NET / Java…
Aujourd’hui il y a deux types principales de CMS: les CMS classiques, comme Wordpress, Drupal, Joomla, et les CMS WYSIWYG.
Les premières sont généralement assez flexibles et simples pour les développeurs, mais risque d’être très compliqués pour les contributeurs et peu ergonomiques, car on n’a pas une aperçu immédiate du contenu.
Les deuxièmes ont l’avantage d’une aperçu directe du résultat finale, mais manque de flexibilité pour des interfaces très custom, comme de plus en plus demandé par le HTML5.
Togu est un Content Management Framework qui aide le développement de sites web administrables en WYSIWYG. Il est de nature responsive et il met à disposition une grande librairie de composants optimisés prêts à être utilisés en production.
Togu a comme objectif de simplifier la création de sites web en HTML 5 avec une interface d’édition WYSIWYG.
Le développeur n’aura pas besoin de modifier le backend ou l’interface d’administration, car assez génériques pour s’adapter à tous les usages. L’effort, parfois requis, est de remettre en forme le composant édité. Ceci se fait en appelant les mêmes fonctionnes écrites pour mettre en forme le composant, donc une tache très simple et rapide à mettre en place.
Parmi les caractéristiques de Togu, il y a l’édition du texte en temps réel, la possibilité d’ajouter et changer images, vidéos et blocs de contenu en Drag & Drop. Tout type de modification faite au site est immédiatement visualisable par l’éditeur, car le site s’adapte en temps réel.
L’éditeur a la possibilité d’accéder simplement aux versions traduites de la même page, et d’accéder aux différentes versions de la page en temps réel en quelque click.
Il peut également visualiser les contenus sur tablette et téléphone par le biais d’un simulateur intégré et les adapter selon le type de device, ou de géolocalisation.
Togu se base sur les Frameworks suivants:
ExtJS
Le Framework utilisé pour créer l’interface d’administration, il met à disposition des libraries robustes pour créer toutes les interfaces nécessaires à la gestion d’un CMS avancé
ExtCore
Utilisé dans le Frontend, permet de faire l’héritage JavaScript de classe de manière très propre et de créer des Objets JavaScript observables
jQuery
Permet d’avoir accès à une quantité énorme de plugins et de simplifier l’accès au DOM
Symfony
L’un des Frameworks Backend plus populaires, permet d’abstraire le modèle de données coté serveur, de connecter simplement Togu à des data sources externes et d’avoir une gestion des droits robuste.
L’architecture du Frontend de Togu est MVC.
Son data binding bidirectionnel entre le modèle et la vue permet de simplifier extrêmement le développement, car pour modifier l’aspect de la vue il suffit d’agir sur le modèle de données et vice-versa, une modification de la vue sera répercuté immédiatement sur le modèle.
Les vues sont des fichiers HTML5 qui utilisent la syntaxe des Mustaches pour les variables, on utilise des attributs pour spécifier les fonctionnalités des nœuds. A différence de Frameworks comme AngularJS ou Polymer, la syntaxe expressément simple est faite pour pouvoir obtenir le même rendu coté Backend que Frontend. Ceci permet une indexation correcte par les moteurs de recherche.
On peut assigner des nœuds DOM au contrôleur et binder des évènements de manière très simple, grâce aux directives.
Injection de service dans les controleurs permet d’avoir un couplage faible entre les Controleurs et les Services.
Les principes de développement sont inspirés par les Frameworks de Google Polymer et AngularJS, malgré une implémentation « from scratch » du Framework.
Le Backend de Togu a été conçu pour agir comme Data Provider: il livre qu’au navigateur un fichier HTML qui contient le DOM nécessaire à l’indexation par les moteurs de recherche. Le reste des communications est fait par des requêtes AJAX via des Webservices REST.
Étant donné que le Backend doit renvoyer que des données et ne pas prendre en charge l’affichage des interfaces d’administration et du Frontend, sa logique est très simple et le nombre de lignes de code nécessaire à son implémentation très réduit. Ceci fait que pour des sites éditoriaux souvent il n’est pas nécessaire d’écrire du code Backend ou ceci est très limité.
Un autre avantage de ce choix est que le Backend peut être porté dans des autres langages de programmation, comme NodeJS, .NET, Java
Le workflow de développent de Togu est composé de trois étapes principales:
Création des fichiers de Template
Définition des structures de données
Écriture du contrôleur (si nécessaire)
Comme dit en précédence, la syntaxe de Togu est du type Mustache, les variables sont écrites entre des accolades.
À l’aide des directives, on définit le nom du Template, on assigne des nœuds au controleur (cmf-far) et on bind des évenments (cmf-on)
On verra dans la suite comment les utiliser dans les controleurs
Ici le modèle de données qui définit les types des variables et nous permet de créer les interfaces d’administration pour un composant donné.
Chaque champ a son nom (ce qu’il est affiché dans le Template), le type, sa valeur par default, et les paramètres pour générer l’interface d’administration.
Son format peut sembler un peu compliqué et verbeux, c’est pour ça que dans la roadmap du projet il y a le développement d’une GUI en ExtJS pour le paramétrer et gagner du temps.
Ceci est le contrôleur pour le Template défini avant.
Ici on peut voir comment fonctionne l’injection de dépendance, via le paramètre inject, le bind des évènements (via le paramètre listen), comment affecter les valeurs du modèle (this.data.set) et comment accéder aux éléments du DOM (this.$)
Ceci est l’interface d’administration de Togu pour un site fait pour un atelier, on peut trouver le site sur www.onomatopees.fr.
Sur la gauche on peut voir la liste des pages du site web triés par catégorie, sur la droite la liste des composants de la page et en bas leur propriétés.
On peut faire Drag & Drop des nœuds de l’arbre des composants pour en changer l’ordre dans la grille. Pour modifier largeur et hauteur des blocs, changer lien et image de fond, il suffit de changer les valeurs dans le panneau Properties.
On peut enfin changer les textes en utilisant les “Properties” ou bien en cliquant et écrivant directement sur la page.
Le composant en surbrillance est le composant qu’on a montré dans l’exemple précèdent.
Le code qu’on a écrit nous suffit pour pouvoir faire Drag & Drop d’un lien de la partie gauche et le déposer directement dans le composant pour le changer à la volée.
Le même Drag & Drop peut être effectué depuis la bibliothèque d’images pour changer l’image de fond.
On peut apprécier la structure à arborescence des images, qui permet d’en trier une grosse quantité.
L’éditeur textuel de données nous permet d’accéder à la liste de tous les composants qui sont stockes dans la base de données, d’en inspecter et d’éditer leurs propriétés. Cette vue est très utile si on veut gérer un catalogue de produits, par exemple.
Et comme pour le reste elle nous permet de faire Drag & Drop d’un projet sur un autre pour le changer sur la page.
