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.

 

Revue de presse Inno #10

Design

Qu’est ce que design system ?

Par Patrick Bracquart

Depuis plusieurs années, la complexité des sites et applications nous ont poussé à repenser le design et les méthodologies tant les champs de compétences nécessaires se sont élargis (analyste web, designer UI/UX, designer d’interaction, développeur front-end, …). C’est dans ce contexte qu’est apparu le design system.

Le design system est le référentiel UI/UX d’un projet. C’est un guide qui va servir de support pour toute la chaîne de production, peu importe le sujet (style de vie, alimentation, services…), le terminal (ordinateur portable, mobile, montre intelligente…), ou encore le livrable (site web, application mobile, interface de gestion…).

Design System

Plus complet qu’une ligne directrice, le design system ne fait pas qu’annoncer les éléments du design (atomic) et les interactions. Il renseigne aussi sur les normes de développement à suivre, l’accessibilité, l’iconographie, la vidéo, etc. afin que tout reste parfaitement cohérent.

Mobile

Comment utiliser les espaces de nommage versatiles en Swift ?

Par Thibault Wittemberg

Avec Swift, certaines API, telles que RxSwift, utilisent une technique qui confine le code qu’elles exposent dans un espace de nommage dédié. Cela facilite grandement la lecture du code et permet par ailleurs d’étendre cet espace de nommage pour lui ajouter vos propres fonctionnalités.

Espaces de nommage versatiles en Swift

Dans cet article (en anglais), nous verrons qu’il est assez simple de créer votre propre espace de nommage et d’une façon si générique, que cela permet à un contributeur externe de l’étendre de façon élégante.

SVG Summit 2016: plein feu sur le format vectoriel ouvert SVG

Affiche Web du SVG Summit 2016Le SVG est une bibite rare! À la fois code et image, il peut être léger (comme le logo de Google dont une variante mobile ne pèse que 305 bytes!) mais aussi très chargé, soit plusieurs Mo. Il peut être interactif ou statique et n’a pas de résolution fixe. On peut le visionner dans un navigateur ou dans un logiciel graphique… On en vient à se demander ce que ça mange en hiver!

En janvier dernier, pour en savoir plus, j’ai assisté à la toute première conférence en ligne sur le sujet, organisé par Environments for Humans  : Le SVG Summit 2016. La liste des présentateurs était un heureux mélange d’illustrateurs, d’animateurs et d’intégrateurs. Ils ont tous parlé de l’usage qu’ils font du SVG dans le cadre de leurs pratiques respectives.

▶ Suite : Introduction au SVG


Conclusion

Après 15 ans d’existence, le SVG reçoit enfin l’attention qu’il mérite. L’avenir de cette technologie aujourd’hui implémentée dans tous les navigateurs modernes est prometteur. Elle continuera de nous en mettre plein la vue dans les années à venir.

Design web: comment tirer parti de l’innovation des logiciels libres

Émilien Edmond évolue aussi vite que le web! Designer UX/UI principal chez Savoir-faire Linux depuis bientôt trois ans, il adapte continuellement ses processus de travail. Le 18 mars dernier, il inaugurait la piste Design du Web à Québec (#WAQ) 2015 en lançant un message clair aux designers et enseignants qui utilisent encore l’arsenal logiciel classique du design propriétaire sans se poser de question. D’après lui, le moment est venu d’examiner — ou de réexaminer — de très près ce que leur propose aujourd’hui un certain nombre de logiciels libres.

Édités par des startups ou des chefs de file du secteur comme Adobe, portés ou appuyés par la communauté, ces logiciels s’adaptent rapidement aux réalités changeantes du Web et plusieurs d’entre eux arrivent aujourd’hui à maturation. En quoi leur utilisation pourrait-elle avoir un impact positif sur le travail des designers Web? Sont-ils fiables et matures? Y a-t-il encore des freins à leur utilisation? Si oui, comment les débloquer? Quelles sont les futures innovations auxquelles il faut s’attendre? Voici les principaux sujets abordés par Émilien dans cette conférence.

Sans oublier la présentation, rapide mais commentée, de plusieurs logiciels et sources d’information complémentaire:

  • Pencil: maquettes et prototypes (24’40 »)
  • Inkscape: dessin vectoriel (25’23 »)
  • Scribus: PAO (26’14 »)
  • Krita: dessin et illustration (26’31 »)
  • Gravit: éditeur graphique (27’03 »)
    NB: les sources de ce logiciel ne sont plus disponibles depuis mai 2015, mais un fork de la version GPL d’août 2014 est disponible sur Github.
  • Brackets: éditeur texte (28’05 »)
  • Framer: animation (28’57 »)

Et pour rester à l’affût de l’innovation du design libre et ouvert:

Pourquoi et comment établir un processus de design web?

Processus de design dans le cadre de projet web adaptatif

Depuis l’agrandissement du bureau Savoir-faire Linux de Québec subséquent au rachat de L3interactive, une entreprise spécialisée dans le développement web en logiciel libre, l’équipe design et, plus largement, frontend travaille et améliore son processus de design.

Ce processus est souvent passé en revue et amélioré en fonction des post-mortem ou des simples observations consignées au fil du déroulement des projets.

Pourquoi établir un processus de design?

Les raisons sont multiples mais, principalement, cela nous permet d’optimiser le déroulement du travail au cours d’un projet et de contrôler la qualité du produit livré. Les étapes de création deviennent aussi très claires pour le client.

Un processus peut-être considéré comme une feuille de route théorique des étapes et des bonnes pratiques à suivre, dotée d’une certaine flexibilité en fonction des équipes, du projet ou du client.

Le processus en détails

Pour chaque projet nous adoptons la méthodologie agile, ce qui permet principalement de voir le projet se monter au fur à mesure des itérations et de le réorienter au besoin. Chaque étape de ce processus est de plus soumise à une assurance qualité du visuel et des fonctionnalités garantissant la conformité et la qualité de nos livrables.

Processus de design - Site web responsive - Savoir-faire Linux

1. Recherche et définition

Recherche et définition en début de projet web

Un premier rendez-vous est nécessaire pour apprendre à se connaître, pour nous assurer que nous comprenons le secteur d’activité et la nature de l’entreprise cliente. Nous abordons entre autres les motifs de la refonte, les objectifs à atteindre, les cibles visées et les appareils à supporter.

Dès cette première réunion, nous établissons les protocoles de communication, les étapes, les livrables, les échéanciers, les rôles et les attentes.

Les informations utiles sont retranscrites dans la documentation.

2. Documentation

Documentation projet web

Véritable bible, le document de référence est mis à jour dès le début du mandat et jusqu’à la fin des maquettes filaires. Il permet d’expliquer, d’annoter tout ce qui est nécessaire à la bonne compréhension du projet. Chaque intervenant, chez Savoir-faire Linux comme chez le client, est ainsi à même de bien comprendre le projet. L’arborescence des sites est intégrée au document.

Exemple de documentation

3. Les maquettes filaires (wireframes)

Exemple de wireframe

Une fois que nous avons tous les éléments en main, des premières maquettes filaires (ou wireframes) cliquables sont produits. Afin de réduire le coût, nous ne produisons que celles qui sont nécessaires à la couverture de l’ensemble des besoins. Elles sont déclinés dans les deux résolutions extrêmes (ordinateur de bureau et mobile).

Même si le projet comporte la portabilité sur tablette, en règle générale, nous ne nous attaquons à celle-ci qu’à partir du prototype. Le projet ayant déjà été pensé aux deux résolutions extrêmes, nous réutiliserons alors les comportements conçu soit pour le mobile, soit pour l’ordinateur de bureau.

Exemple de maquette filaire

4. Le prototype

Exemple de prototypage rapide

Cette étape permet de projeter rapidement les wirefames et d’être sûr que tout fonctionne bien. Le prototype est un bon outil pour vérifier les hypothèses établies en phase de wireframe. Plus tôt l’on se rendra compte des ajustements à faire, moins cela aura d’impact sur le projet en termes de calendrier ou de budget.

Exemple de prototype html

Exemple de prototypage rapide (animation de jpeg) target= »_blank »

5. Les maquettes graphiques

Exemple de maquette graphiques

En accord avec la charte graphique de l’entreprise ou selon la direction que celle-ci souhaite donner à son projet web, nous développons des maquettes graphiques pour ordinateur et mobile. Toutes les maquettes filaires ne sont pas forcément déclinés. Le but consiste à couvrir les gabarits nécessaires de façon à donner une projection cohérente du futur site web. Souvent, au lieu de faire une page, nous extrayons ses composants que nous designons directement dans une page UI, composée de tous les éléments nécessaires du site web.

Exemple de maquettes graphiques

6. Le guide de style

guide-de-style

La création d’un guide de style est une pratique plutôt émergente mais nécessaire, surtout dans le cadre d’un projet adaptatif ou d’un site comportant beaucoup de contenu. Ce guide rassemble une collection de règles ou de composants définissant les conventions de style à utiliser pour le projet. En général, on retrouve les éléments de la page UI, mais de façon interactive. Cette étape est faite par un intégrateur graphique, qui retranscrit les éléments des maquettes en code pouvant être interprété par les navigateurs. On cherche ainsi à réduire le coût tout en augmentant la qualité. Le client pourra par ailleurs réutiliser ce document pour d’autres projets.

Guide de styles

7. L’intégration graphique

intégration graphique

Nous finalisons l’intégration graphique en repartant du prototype développé et y intégrant les éléments du guide de style, en commençant par la version mobile afin d’optimiser ses performances. Nous faisons en sorte que tout le contenu soit régi par la feuille de style (CSS), que son intégration soit conforme aux normes du W3C ainsi qu’aux principes d’accessibilité. Le respect de ces standards à notamment un impact positif sur le référencement.

Site web de la SSQ

8. Lancement

La récompense de tant d’efforts est arrivée. Nous avons pour coutume de dire que la mise en ligne n’est pas la fin d’un site internet, mais au contraire, son commencement. En effet, un site web est une matière vivante qui nécessite une entretien régulier afin d’être toujours à son meilleur.

Exemples de réalisation