Comment concevoir un thème personnalisé et léger sous Liferay ?

Cet article survient suite à la réalisation, par notre équipe Plateformes d’intégration et Intelligence Artificielle, d’un site informationnel pour l’un de nos clients, une grande entreprise canadienne de télécommunication et de médias, en utilisant Liferay 7 (la dernière version du portail Liferay).

Alexis, développeur front-end, vous partage son expérience sur ce projet afin de vous expliquer comment il est possible de créer un thème léger et rapide à charger avec Liferay.

En 2015, nous avons découvert le site de Bugaboo, réalisé sous Liferay 6.2. Une chose nous a surpris : l’absence des librairies front-end du thème Liferay.
Depuis l’idée a fait son chemin et un mandat similaire est arrivé à Savoir-faire Linux : Réaliser le site web informationnel d’une grande entreprise canadienne de télécommunications et média, avec Liferay.

Avant toute chose, nous devons nous accorder sur un point, la vitesse de chargement d’un site web est un élément déterminant de la rétention des utilisateurs : après 3 secondes [de chargement], jusqu’à 40% d’entre eux vont quitter le site » (Gomez Inc., 2010, en anglais). Pour plus d’informations, voir Lara Callender Hogan (en anglais).

Liferay n’est pas en soi une solution technique qui peut répondre à tous les besoins. Il est tout à fait possible de faire des sites web avec, mais malheureusement la méthode « recommandée », c’est-à-dire étendre le thème Liferay par défaut, aurait été un échec technique pour le site informationnel de notre client à cause d’un allongement considérable du temps de chargement. C’est alors que, basé sur nos expériences avec nos précédents projets, il a été choisi d’adapter en profondeur le thème Liferay afin de pouvoir répondre aux besoins précis de notre client. Dans ce qui va suivre, nous partageons avec vous notre retour et nos résultats.

Le portail Liferay, un outil puissant qui a besoin d’accompagnement

Liferay est un gestionnaire de contenu (CMS) et un portail écrit en Java fournissant de nombreuses fonctionnalités spécifiques aux développeurs comme une gestion avancée des utilisateurs, des droits d’accès, des documents, etc. Dans notre cas, en tant que société de services, nous avons la possibilité de l’adapter autant que nous le voulons aux besoins de nos clients. Par contre, étant pensé pour être un portail modulaire, il y a quelques défauts liés aux thèmes et aux performances à considérer avant de concevoir un site web avec. En voici la liste :

  • Le thème de base de Liferay charge par défaut toutes les librairies front-end ainsi que l’ensemble des styles que Liferay et ses portlets ont besoin. Cependant, une grande partie du code et des dépendances s’avère inutile pour un visiteur non-connecté (soit la majorité de nos utilisateurs dans le cadre de ce projet). De nombreux problèmes de performance apparaissent donc à cause de cette surcharge inutile de code.
  • Liferay impose la présence de son Design Language, Lexicon (ou plutôt, sa seule implémentation: Clay). Cela provoque également plusieurs problèmes :
    • Manque de correspondance entre le Design Language et les besoins visuels requis pour ce projet, limitant grandement les designs réalisables et ou en compliquant grandement la personnalisation,
    • Conflits au sein des règles CSS, augmentant le temps de développement,
    • Les mises à jour et corrections du thème de base de Liferay peuvent briser les styles développés provoquant alors une augmentation significative du temps de maintenance,
    • L’administration des contenus étant à même les pages, les styles développés peuvent briser le comportement des styles d’administration participant aussi à l’augmentation du temps de développement et de maintenance.

Comment alors réaliser un thème léger sous Liferay ?

La solution pour bénéficier de la puissance de Liferay tout en gardant le contrôle de la vitesse de chargement des pages est de créer un thème léger ne contenant aucune des librairies Liferay front-end comme senna.js, AlloyUi, Lexicon/Clay, etc.

Cependant, dans Liferay 7, ce n’est pas aussi facile que cela n’y paraît, notamment dû à l’impossibilité d’avoir une vue d’administration (indépendante) pour le site. Pour échapper à cela, nos fantastiques développeurs back-end de l’équipe ont développé un module, le « Theme Switcher », qui permet de forcer l’affichage d’un thème en fonction du rôle d’un utilisateur. Dans notre cas, cela nous permet d’afficher un thème classique Liferay uniquement aux administrateurs du site. Voici le lien vers le GitHub du « Theme Switcher » : savoirfairelinux/liferay-theme-switcher

5 étapes pour la mise en place d’un thème léger sous Liferay

Un exemple de thème léger pour Liferay disponible sur notre GitHub : savoirfairelinux/lightweight-liferay-theme. Ce thème utilise une architecture Maven, mais libre à vous de le modifier.

Étape 1 – Nettoyage du thème

Retirez les inclusions du fichier portal_normal.ftl, principalement: <@liferay_util["include"] page=top_head_include />. Mais aussi <@liferay_util["include"] page=body_top_include /> et j’en passe…

Étape 2 – Réparation du thème

Malheureusement la variable top_head_include ne contient pas que les librairies CSS et javascript de Liferay, mais aussi beaucoup d’autres choses. Il est donc nécessaire de ré-inclure les balises du head qui nous intéressent.

Par exemple,

  • Les meta-tags que l’utilisateur peut définir dans chaque pages (keywords, description, etc…):

<@liferay_theme["meta-tags"] />

  • La définition des urls canoniques:
<#if !is_signed_in && layout.isPublicLayout() > 
  <#assign completeURL = portalUtil.getCurrentCompleteURL(request) > 
  <#assign canonicalURL = portalUtil.getCanonicalURL(completeURL, themeDisplay, layout) > 

  <link href="${htmlUtil.escapeAttribute(canonicalURL)}" rel="canonical" /> 

  <#assign availableLocales = languageUtil.getAvailableLocales(themeDisplay.getSiteGroupId()) > 

  <#if availableLocales?size gt 1 > 
    <#list availableLocales as availableLocale> 
      <#if availableLocale == localeUtil.getDefault() > 
        <link href="${htmlUtil.escapeAttribute(canonicalURL) }" hreflang="x-default" rel="alternate" /> 
      </#if> 
      <link href="${htmlUtil.escapeAttribute(portalUtil.getAlternateURL(canonicalURL, themeDisplay, availableLocale, layout)) }" hreflang="${localeUtil.toW3cLanguageId(availableLocale)}" rel="alternate" /> 
  </#list> 
  </#if> 
</#if> 

Pour savoir quoi aller chercher, et comment, basez-vous sur la jsp qui est utilisée pour générer la variable top_head_include : https://github.com/liferay/liferay-portal/blob/7.0.x/portal-web/docroot/html/common/themes/top_head.jsp

Étape 3 – Organisation

Un des problèmes, et vous l’aurez peut-être deviné : les tâches liferay-theme-tasks fonctionneront difficilement.

Cependant, bonne nouvelle : Vous pouvez organiser votre futur thème de la manière dont vous le souhaiter et selon les standards de développement de votre équipe (sass, less, es6, etc.). Dans le cas de notre client, nous avons utilisé et agrémenté le gulpfile habituel pour nos projets web. Le tout chapeauté par Maven et des modules front-end.

Étape 4 – Automatisation du déploiement du thème léger

Cette partie a été la plus longue, je vous avoue, mais elle vous est maintenant disponible clé en main, dans la tâche gulp ‘deployLocal:syncTheme’ du thème d’exemple !

Il s’agit de la mise en place d’un déploiement « live » des fichiers du thème.

D’un point de vue global, le but est de ne pas avoir à compiler ni à attendre le déploiement du thème pour chaque modification de CSS ou de javascript (fonctionnalité normalement présente dans les liferay-theme-tasks). Dans le contexte OSGI de Liferay 7, il n’est pas facile d’accéder directement aux fichiers du thème (CSS, javascript, templates, etc.).

L’idée est alors de modifier la manière dont le thème est déployé dans OSGI, en le faisant pointer non pas vers le fichier .war du thème compilé (en mode webbundle, celui par défaut), mais plutôt vers le dossier extrait de ce .war (en mode webbundledir).

Étape 5 – Profitez

Vous avez maintenant un thème Liferay, qui contient uniquement ce que vous désirez pour votre projet, et qui est déployable comme n’importe quel autre thème Liferay.

Tests et résultats

Dans le but d’évaluer les avantages en terme de performances de la mise en place d’un thème léger, vous pouvez lancer un test, sur une même page avec le même contenu, avec 3 cas possibles de choix de thème. De notre côté, nous avons lancé ces tests sur un serveur Liferay configuré pour la production avec 8 CPU, 28Go de RAM et un disque SSD. Ci-dessous les 3 cas pour lesquels nous avons lancé le test.

Les 3 cas possibles de choix de thème

  1. Utilisation d’un thème vanille de Liferay, un thème classique
  2. Utilisation du thème léger que nous avons développé pour le site informationnel de notre client
  3. Utilisation du thème classique avec l’ajout des styles CSS et javascript du thème que nous avons développé pour notre client

Pour réaliser les mesures, nous avons utilisé une instance locale de speedtest.io (6.0.3) avec Chrome 62. Pour chacun des cas, 10 appels ont été réalisés. Ci-dessous un résumé des résultats :

Résultat du cas 1 : Le thème classique de Liferay

  • 52 requests
  • 1064.77 kb
  • DOMContentLoaded : 1.24s (±31.95ms)
  • Chargement : 2.06s (±52.89ms)
  • speedIndex : 1349 (±34.99)

Nous considérons ces résultats comme corrects car ils se trouvent dans la moyenne que l’on peut trouver actuellement sur le web. Néanmoins, il y a tout de même un grand nombre de requêtes, dépassant le seuil des 40, habituellement recommandé.

Résultat du cas 2 : Le thème léger

  • 37 requests
  • 800.38 kb
  • DOMContentLoaded : 588ms (±42.96ms)
  • Chargement : 1.17s (±55.17ms)
  • speedIndex : 863 (±39.57)

Moins de requêtes, une page plus légère, ce thème personnalisé est plus performant que le thème classique de Liferay !

Résultat du cas 3 : Le thème classique avec les CSS et javascript du thème léger de notre client

  • 56 requests
  • 1214.59 kb,
  • DOMContentLoaded: 2.22s (±457.34ms),
  • Load: 2.97s (±458.11ms)
  • speedIndex: 2475 (±456.71)

Ce résultat est très important, car il s’agit d’un cas qui pourrait être réel. Un thème Liferay, avec un visuel complètement personnalisé mais plus que deux fois plus lent à charger…

Conclusion

Dans l’ensemble, cette expérience fut instructive et nous a fourni, ainsi qu’à notre client, des résultats à la hauteur de nos espérances.

Néanmoins, la mise en place d’un thème léger ne peut pas s’appliquer pour n’importe quel type de site web et devenir une solution unique pour vos projets web. De plus, avec cette méthode, certaines fonctionnalités (front-end) de plusieurs Portlet Liferay se trouvent inaccessibles.

 

Savoir-faire Linux, partenaire Platinium au Liferay Symposium 2017 Paris

En quête d’une expérience digitale enrichie ? Envie de créer des environnements personnalisés à travers le web, mobile et objets connectés ? Le Liferay Symposium est pour vous ! Le Symposium est l’occasion de poser vos questions, d’échanger sur les bonnes pratiques Web d’aujourd’hui et de découvrir Liferay,  le portail web open source de référence.

Partenaire Platinum du Liferay Symposium 2017 à Paris et expert en solutions Liferay, Savoir-faire Linux vous donne rendez-vous les 26 et 27 avril 2017 au Pavillon Dauphine pour rencontrer notre équipe, échanger avec l’éditeur et imaginer ensemble vos prochaines solutions d’affaires. Du site web client léger ou riche à l’application critique d’entreprise hautement sécurisée, en passant par la gestion de contenu web, la gestion documentaire, l’intégration d’applications métier… Liferay se présente comme la solution de référence mondiale, fiable, flexible et puissante pour propulser la stratégie numérique de votre entreprise !

Du 26 au 27 avril, plus de 200 membres de la communauté Liferay sont attendus : développeurs, chefs de projet, décideurs techniques ou métier et partenaires Liferay. À travers plusieurs présentations, partages des bonnes pratiques et retours d’expérience (dont Airbus, Danone, CNAF, Msheireb et TOTAL), nous tenterons de repenser les parcours clients, de casser les silos organisationnels et de créer des nouvelles expériences digitales cohérentes sur l’ensemble des canaux… Bref, autant d’impératifs et de sujets qui seront abordés lors de cette 7ème édition.

Ne manquez pas l’occasion d’en apprendre plus sur les solutions Liferay et de découvrir l’expertise de nos équipes au service de l’expérience client !

  • 26 avril : Rencontre technique
  • 27 avril : Symposium

Liferay Community Excellence Award 2015: Savoir-faire Linux de nouveau à l’honneur

Liferay Community Excellence Award 2015Montréal, 24 novembre 2015 — Savoir-faire Linux®, une équipe exceptionnelle de 110 consultants en logiciel libre basés à Montréal, Québec, Toronto et Paris, s’est vu décerner un Liferay Community Excellence Award lors du Liferay North America Symposium qui se tenait, la semaine dernière, à Chicago. Cette prestigieuse récompense est attribuée chaque année à une dizaine de partenaires Liferay ayant démontré un engagement exceptionnel auprès de la communauté et apporté à celle-ci une contribution significative.

« Nous sommes très honorés que Liferay nous remette ce Prix d’excellence pour la cinquième année consécutive, s’est réjoui Christophe Villemer, Vice-président exécutif de Savoir-faire Linux, dans une courte vidéo de remerciement mise en ligne le 17 novembre, peu après la cérémonie. Je suis particulièrement fier de notre équipe qui travaille très fort avec nos clients et la communauté (…), Sven Werlen, Marat Gubaidullin et tous nos développeurs et formateurs certifiés. »

liferay_sp_webLiferay développe la solution leader des portails d’entreprise et outils collaboratifs sous licence open-source. Savoir-faire Linux a commencé a explorer cette plate-forme basée sur la technologie Java en 2008 et figure aujourd’hui dans le Top 30 mondial, les partenaires Platinum de Liferay.

« Liferay croit beaucoup à la force des communautés ouvertes pour le développement de logiciels de grande qualité, commente James Falkner, le gestionnaire de la Communauté Liferay. Le Prix d’excellence communautaire en constitue un élément important, car il reconnaît les entreprises phares qui donnent plus qu’elles ne reçoivent et qui partagent le même esprit d’ouverture. Savoir-faire Linux continue à prendre une part importante dans notre succès et Liferay est heureux de témoigner de leurs accomplissements dans notre communauté. »

Que récompense le Liferay Community Award?

Dans un projet open-source de ce type, l’excellence communautaire s’exprime de plusieurs façons:

En se démarquant par leur excellence communautaire, les meilleurs partenaires gagnent en compétence et en influence, prospérant ainsi en même temps que la communauté.

Savoir-faire Linux tient d’ailleurs à féliciter les autres récipiendaires des Community Excellence Awards 2015: ACA-IT (Benelux), Ambientia (Finlande), Arcusys (Finlande), Cignex Datamatics (Asie, Amérique, Europe), Permeance Technologies (Australie), SMC (Italie), EmDev (Russie) et XTIVIA (U.S.A.). Comme l’a écrit notre éditeur de médias sociaux sur Twitter: « Un pour tous, tous pour… Liferay! »

Our Team Receiving the Liferay Community Award 2015 in Chicago
Remise du Liferay Community Excellence Award 2015 à Savoir-faire Linux. De gauche à droite: Christophe Villemer ↘ Sven Werlen ↗ James Falkner → Nicolas Juneau → Serjik Sayad.

 

À la découverte de Liferay 7 au Liferay North America Symposium #LRNAS2015

merci-chicagoAlors que tous les êtres humains de bonne volonté étaient endeuillés par l’assassinat barbare d’au moins 129 innocents à Paris — à quelques coins de rues à peine de notre bureau européen — une petite délégation de notre équipe montréalaise s’envolait vers Chicago samedi et dimanche, afin de participer au Liferay North America Symposium. Elle y trouva une ville magnifique, un hâvre de paix, la solidarité et une communauté Liferay au grand cœur. Merci, Chicago!

La grande question au Symposium, cette année, c’est la prochaine version finale de Liferay 7 qui est officiellement présentée pour la première fois en Amérique du Nord. On s’attend à ce qu’elle fasse sa marque, notamment dans les domaines de l’expérience utilisateur, de la personnalisation et de l’optimisation de la performance. Nos collègues Nicolas Juneau, Sven Werlen et Serjik Sayad comptent bien y acquérir le plus de connaissances possibles sur les bénéfices et les bonnes pratiques induits par cette nouvelle version de Liferay, tout en partageant notre propre expertise avec nos clients et partenaires présents à l’événement.

LRNAS 2015

Le Liferay North America Symposium à l’heure du DevOps

Liferay Symposium Gold SponsorLors du Liferay North America Symposium 2015, qui se tient à Chicago les 16 et 17 novembre, Sven Werlen présentera nos outils de déploiement Liferay automatisés. Grâce à ces outils, il suffit d’appuyer sur un bouton pour qu’une VM se monte, avec toute la pile logicielle requise par un environnement Liferay complet, basée sur JBoss, avec un serveur frontal, un serveur d’indexation et de recherche, etc. Si vous avez la chance de visiter le kiosque de Savoir-faire Linux, allez voir la démo, ça vaut la peine.

Le Liferay North American Symposium, c’est le plus grand rassemblement de développeurs, intégrateurs, clients et utilisateurs Liferay de l’année. Plusieurs de nos clients y seront présents. Pour la sixième année consécutive, le chef de file des portails web open-source figure en tête du fameux quadrant de Gartner et son succès n’est plus à démontrer. Or, cette fantastique dynamique repose en grande partie sur l’expertise et la motivation de sa vibrante communauté.

Le positionnement de Savoir-faire Linux dans cet écosystème est très particulier. Nous sommes à la fois Partenaire avancé Red Hat et Partenaire platine Liferay, deux chefs de file ayant annoncé au début de l’été une entente stratégique qui fait de la plate-forme JBoss de Red Hat le middleware privilégié pour les déploiements Liferay. Nous avons donc un accès privilégié à leurs ressources et disposons d’équipes de développeurs et administrateurs de systèmes certifiés par ces deux éditeurs, ce qui nous permet de mobiliser et d’optimiser de solides expertises Java, Web, DevOps et infonuagique autour des projets de nos clients. C’est ainsi que nous avons mis au point des méthodes de travail très sophistiquées, tant au niveau de l’intégration et du développement Liferay que du déploiement et de la maintenance.

Commanditaire Or de ce symposium, nous serons heureux d’y retrouver nos clients, collègues et amis et d’accueillir les visiteurs à notre kiosque afin de leur partager les petits secrets de nos outils DevOps. Et qui sait? Ayant eu l’honneur d’y recevoir un Liferay Community Excellence Award chaque année depuis 2011, nous gardons l’espoir d’en rapporter un cinquième à la maison cette année. 😉

Gold Sponsor depuis 2012