Site corporatif NCTA

L’Internet & Television Association (NCTA) représente les innovateurs réseaux et les créateurs de contenu qui connectent, divertissent, informent et inspirent les consommateurs chaque jour. Les membres de NCTA ont investi 250 milliards de dollars de capitaux privés pour bâtir la plateforme technologique la plus puissante au monde, atteignant 93 % des foyers américains et desservant 59 millions de clients. La NCTA représente une industrie qui soutient 2,7 millions d’emplois américains et emploie plus de 300 personnes dans chaque circonscription du Congrès américain.

Drupal 8 : création de Pages avec Symfony et Twig

Nous avons été parmi les premiers à adopter Drupal 8 et avons immédiatement compris les avantages d’une migration de D7 vers D8. Avec de tout nouveaux outils Drupal dans notre arsenal, comme les fondations Twig et Symfony, la création d’une modélisation de contenu proprement écrite et hautement réutilisable est devenue réalité. Le contenu est alimenté par la flexibilité des « paragraphs » et est rendu réutilisable et DRY (Don’t Repeat Yourself) grâce à la famille de modules « view modes ».

Aperçu de l’architecture

Parmi les fonctionnalités D8 que nous avons exploitées pour la refonte du site NCTA, on retrouve :

• Une expérience de création de contenu efficace et simplifiée utilisant « Panels » et « Display Suite », pour des vues riches et des mises en page structurées.
• Des pages dynamiques qui offrent un contrôle complet sur configurations SEO.
• Une « separation of concerns » claire dans la création de gabarits avec Twig.
• Des mises en page complexes, fournies par « Views » pour générer des blocs dynamiques avec des filtres contextuels.
• Une recherche multi-index personnalisée.
• Un « task runner frontend » entièrement moderne avec Node et Gulp.
• Un thème personnalisé basé sur Bootstrap.
• Une intégration étendue de formulaires Drupal en plusieurs étapes.
• L’exploitation de l’API REST pour créer des contenus dynamiques.

Résolution de problèmes avec D8 : comment rendre Drupal attrayant…

L’un des principaux défis avec Drupal, en particulier dans un contexte de partenariat avec une agence de design internationale comme DMI, est la nécessité d’intégrer un design moderne dans la mise en page de Drupal. Les premières versions de Drupal étaient centrées sur le contenu d’abord, le design ensuite, ce qui rendait l’intégration des designs graphiques complexes plus difficile. Nous avions toujours le même soucis : comment donner aux éditeurs de contenu la possibilité de personnaliser le contenu tout en adhérant à un design graphique moderne ?

Les éditeurs avaient besoin d’assembler des pages hétérogènes (héros, statistiques, citations, programmes, événements, articles, bannières) dans des ordres différents par page, et non par gabarits. Une portion du contenu devait être contrôlée manuellement, en utilisant une édition de blocs spécifiquement ciblée, mais une autre devait être générée automatiquement, basée sur le contexte.

Les mêmes types de contenu alimentaient de nombreuses pages de destination (« landings »), mais chaque page disposait de ses propres règles.

La mise en page devait être pilotée par l’éditeur, compatible avec le cache et réutilisable, avec un thème personnalisé.

Comme mentionné, le « theming » par défaut de Drupal encourage vraiment les modèles 1:1 par « bundle ». Cependant, grâce aux « Panels » et à une approche CSS contextuelle dynamique appliquant plusieurs sous-grilles, en-têtes et blocs associés qui changeaient en fonction du contexte de taxonomie, nous avons pu développer une expérience où chaque page semblait faite sur mesure.

Performance

Nous avons investi des efforts considérables dans l’optimisation des performances. En partenariat avec Acquia, nous avons pu optimiser chaque couche de technologies, de l’exécution du code à l’affichage de la page. Nous sommes devenus très compétents avec Drush et avons dû passer par la suppression automatisée de la cache, l’importation de configuration et l’automatisation précoce pour maintenir les environnements synchronisés efficacement. Pour nous préparer un site à trafic élevé, nous avons mis en œuvre la mise en cache Varnish avec une invalidation personnalisée des « cache tags », nous permettant de purger des URL ou des groupes de contenu spécifiques lorsque les éditeurs mettaient à jour des entités clés, plutôt que d’invalider l’ensemble de la cache du site. Nous avons ajusté le « caching » des vues, exploité BigPipe pour le rendu progressif et utilisé Redis pour le « caching backend » afin de minimiser la charge de la base de données. Combiné avec la surveillance New Relic et les outils de performance d’Acquia, ce travail a permis des gains impressionnants en performance.

SEO

NCTA a présenté un défi SEO intéressant : des « single page views » avec du contenu agrégé qui devaient agir comme des « unique page views ».

Nous avons conçu une solution pour obtenir le meilleur des deux mondes : permettre un rapport GTM (Google Tag Manager) précis et granulaire, avec des articles uniques basés sur la page ajoutant leur poids approprié à notre classement SEO, tout en maintenant une expérience d’application « single-page » fluide pour les sections exigeantes.