TYPO3 – Méthodes de templating en 2014

Blog

Bonjour à tous,

en ce dimanche matin qui semble s'annoncer très beau,  j'ai voulu en profiter pour revenir sur les méthodes de templating sur TYPO3 :p. Ce sujet a été abordé lors de la T3uni 2014, voici un récapitulatif des échanges sur ce sujet, avec ma touche personnelle, ce qui, je l'espère, permettra de vous aider dans votre choix !

Les méthodes principales :

Méthode classique de templating TYPO3

Historiquement TYPO3 a une méthode de templating dites "classique", dont le principe est de placer des markers textes dans le code HTML, par exemple ###LINK###. Ces markers sont ensuite substitués par du code dynamique. Cette méthode impacte aussi la présentation du Back Office car elle est basée sur des colonnes, historiquement 4 colonnes (LEFT, NORMAL, RIGHT, BORDER). On utilisait comme on pouvait ces 4 colonnes pour les affecter à des zones du site pour que l'utilisateur Back End puisse y saisir des contenus. On peut cacher des colonnes, mais aussi en rajouter, pas de manière super intuitive il fallait quand même faire un peu de code PHP et du typoscript. Par contre les colonnes étaient côte à côte, et l'organisation du Back Office ne correspondait pas du coup au Front Office, ce qui n'était pas très intuitif pour les contributeurs.

Méthode de templating TYPO3 Automaketemplate

Cette méthode permettait de se séparer un peu du fonctionnement en markers, mais au final ce n'était ni plus ni moins que la méthode classique avec une légère surcouche.

Méthode de templating TYPO3 TemplaVoila

Kasper Skårhøj, le créateur de TYPO3, a travaillé pour la société Dassault et a développé une nouvelle méthode de templating : le fameux TemplaVoila ! Cette méthode permet en cliquant tout simplement sur le code des maquettes HTML, via une interface graphique, de les lier à des fonctions dynamiques sans rajouter des markers manuellement dans le code, et d'avoir un rendu Back Office (via les Back End Layout) adapté à l'organisation Front Office. Il est important de noter pour éviter les confusions que le nom Back End Layout a été repris aujourd'hui mais ne correspond plus à ce qui est utilisé dans TemplaVoila.

TemplaVoila apportait aussi la possibilité de créer des contenus flexibles (Flexible Content) personnalisés, et ce très facilement en quelques clics.

Méthode de templating TYPO3 TemplaVoila Framework

Est apparu après TemplaVoila Framework développée par Ron Hall et Jeff Segars, qui est une sur-couche de TemplaVoila. Mon ami Cyril Wolfangel en fût un fervent défenseur, mais pour ma part je n'ai jamais accroché, surement parce que je n'ai jamais pris le temps de m'y mettre sérieusement, et parce que le fait de rajouter encode une couche à un TemplaVoila qui était déjà décrié par certains comme lourd me rebutait. Si vous voulez en savoir plus sur cette méthode vous pouvez aller voir l'article de Cyril sur son site :

http://www.cyril-wolfangel.com/integrateur-typo3/2013/05/26/methodes-dintegration-avec-typo3-03-templavoila-framework/

Elle permet de créer des skins réutilisables mais aussi d'avoir un Back Office personnalisé où tout se fait en drag'n drop. Un Back Office qui est aussi capable de recalculer toutes les largeurs d'images dynamiquement en fonction de leurs zones, qui est capable de gérer des contenus flexibles (on sépare une zone en sous zones, et on la re-segmente si on le souhaite), et qui permettait de profiter de TemplaVoila avec sa partie Flexible Content.

Méthode de templating TYPO3 FLUID

Cette méthode est plus récente, elle s'approche de la méthode classique, mais avec des possibilités plus avancées permettant de faire des boucles, des conditions, et d'écrire du typoscript directement dans le HTML ! Elle se rapproche de smarty. On y revient ci-dessous.

Autres méthodes

Il existe aussi d'autres méthodes, mais très peu utilisées, tel que Jetts ou des extensions intégrant Smarty par exemple.

Aujourd'hui donc ?

Une méthode qui tend à disparaître : TemplaVoila. Elle a fait l'objet de beaucoup de débats et a été très critiquée, mais c'est une méthode qui a beaucoup servi TYPO3, c'est la première méthode qui avait une approche non développeur et elle permettait de faire des choses très agréables à utiliser pour l'utilisateur final.

Le soucis principal de cette méthode et ce qui a pu rebuter pas mal d'intégrateurs/développeurs c'était son stockage en XML des données structurées dans un champ de la table tt_content et pages. Ce qui rend notamment impossible les requêtes SQL sur les données TemplaVoila stockées. Il est aussi plus compliqué de faire évoluer graphiquement un site sous TemplaVoila car le fond n'est pas complètement décorrélé de la forme (il faut tout remapper, éclater les objets, en recréer, etc...).

A noter aussi les problèmes internes à l'équipe TemplaVoila, à savoir que le développeur principal a laissé tomber le projet et que celui-ci a été repris par d'autres personnes, mais comme ce n'est pas une extension du core, ça a refroidi pas mal d'utilisateurs de l'extension...

TemplaVoila a donc servi à populariser le CMS, mais il faut maintenant utiliser quelque chose de plus proche du core, de plus natif, mais aussi de plus évolué que la méthode classique : FLUID.

Nous déconseillons d'attaquer de nouveaux projets sur TemplaVoila, par contre vous pouvez continuer à l'utiliser sur les sites existants, elle a d'ailleurs été rendue compatible avec la version TYPO3 6.2.

FLUID se rapproche donc de SMARTY, qui est donc un moteur de templating qui permet d'intégrer des éléments avec une logique de présentation à l'intérieur du template, par exemple des boucles, des conditions assez simples comme sur les menus, pour afficher ou masquer un menu, en fonction du type de page ou des propriétés de page.
Cette méthode est intégrée au noyau de TYPO3.
FLUID ne s'occupe que de la partie FRONT, il remplace donc la méthode "à l'ancienne" d'intégration classique à partir des markers et subparts. Seul il ne fait pas plus, pour pouvoir intervenir sur le BACK, il faut utiliser l'extension de Backend Layout qui est maintenant dans le coeur, et qui permet de retirer les colonnes classiques de TYPO3 pour avoir des zones qui ressemblent à ce que l'on a en FRONT. Il y a néanmoins des choses que l'on ne peut pas encore faire par rapport à ce que donnait comme possibilités TemplaVoila, par exemple intégrer des indications textuelles pour les contributeurs, ou aussi donner la main au client pour modifier ces zones et créer ses propres modèles.

L'extension Grid Elements permet d'ajouter la possibilité aux contributeurs d'intégrer des zones multiples de contenus pour donc découper encore une zone de contenu proposée avec Backend Layout. Elle permet aussi de limiter les contenus en fonction d'une zone donnée.

Il y a aussi l'extension Themes, mais celle-ci fera l'objet d'un article à part entière, elle est là pour remplacer TemplaVoila Framework, avec du code plus proche du core de TYPO3.

Donc en clair, si il y a une méthode à utiliser c'est FLUID, avec aussi Backend Layout afin de rendre le Back Office plus agréable pour les contributeurs.

Merci de votre lecture, et n'hésitez pas à intervenir en laissant des commentaires :).