Comment utiliser les infrastructures et les bibliothèques JavaScript sur HubSpot

À l'aide du CMS Hub, vous pouvez créer des applications web basées sur JavaScript. 

Si votre site web nécessite du code côté serveur ou un mécanisme d'abonnement au contenu, vous pouvez profiter des fonctions sans serveur de HubSpot et de la fonctionnalité d'abonnement au contenu si vous avez un abonnement Entreprise. Cependant, vous pouvez également créer votre propre système à l'aide de fournisseurs tiers tels qu'AWS Lambda combinés à une passerelle API pour exécuter du code côté serveur.

Si vous créez une application web qui doit atteindre les points de terminaison d'API nécessitant une authentification telle qu'un jeton d'accès d'application privée, vous ne devez pas exécuter ce code dans le navigateur. Vous exposerez vos informations d'identification à toute personne qui consulte la page. La bonne approche consiste à créer une couche d'abstraction entre le navigateur et l'API authentifiée : un point de terminaison d'API personnalisé qui ne nécessite pas d'exposer vos identifiants et qui est servi à partir du même domaine que le site web qui l'appelle.

L'activation du point de terminaison d'API personnalisé exécutera le code côté serveur qui peut effectuer la demande authentifiée. Ensuite, vous pouvez effectuer n'importe quel formatage des données ou de la logique commerciale que vous souhaitez garder secrète, et envoyer le résultat au navigateur. 

Habituellement, les fonctions sans serveur sont utilisées pour le faire car elles offrent une grande évolutivité et ne nécessitent pas de gérer et de maintenir votre propre serveur. Vous pouvez utiliser des fournisseurs comme AWS Lambda en association avec une passerelle d'API ou les fonctions sans serveur prioritaires de HubSpot. L'avantage des fonctions sans serveur HubSpot est que vous n'avez pas besoin de gérer plusieurs services distincts. L'expérience est simplifiée et directement intégrée au même système de fichiers de développeur dans lequel se trouvent les thèmes, les modèles et les modules.

Si vous n'avez pas besoin d'effectuer des appels d'API authentifiés, vous n'avez pas besoin de CMS Hub Entreprise pour votre application. React et Vue sont des infrastructures front-end qui n'ont pas besoin de fonctions sans serveur pour fonctionner. Ce que vous en faites est le plus important.

Pour les applications web, les développeurs utilisent généralement des infrastructures JavaScript qui permettent de gérer le statut et l'interface utilisateur.

CMS Hub n'a pas été spécialement conçu pour fonctionner avec une infrastructure spécifique, mais de nombreuses infrastructures JavaScript courantes fonctionnent sur CMS Hub. En vous appuyant sur HubSpot, vous devrez peut-être réfléchir différemment à la façon dont vous travaillez avec ces infrastructures. Toutefois, les principaux aspects nécessaires pour travailler avec ces infrastructures sont disponibles : la possibilité de rédiger desmodèles personnalisés, des modules et du code JavaScript. Nous vous permettons également d'effectuer votre codage localement afin que vous puissiez utiliser une étape de construction.

Nous collaborons avec notre communauté de développeurs dans le but d'établir des bonnes pratiques de création avec des infrastructures JavaScript courantes sur HubSpot. Bien qu'il soit possible de le faire, certains aspects du fonctionnement de CMS Hub peuvent vous obliger à configurer volontairement votre projet différemment de ce que vous pourriez sur une simple page HTML.

Certains aspects de votre workflow de développement peuvent également différer de ce à quoi vous êtes habitué. Nous vous demandons de nous faire part de vos commentaires afin que nous puissions améliorer l'expérience pour tous les développeurs. Pour ce faire, le meilleur endroit actuellement est notre forum des développeurs. À mesure que nous expérimenterons et apprendrons, nous continuerons à mettre à jour notre documentation en conséquence.

CMS Hub dispose d'un puissant système de modules, qui vous permet de créer des éléments CSS, JavaScript et HTML réutilisables avec accès à HubL, le langage de modélisation HubSpot. Les modules HubSpot vous permettent d'offrir beaucoup de contrôle et de puissance aux créateurs de contenu. Les infrastructures JavaScript modernes disposent souvent de leurs propres systèmes de modules. Ces systèmes sont tous créés indépendamment les uns des autres et, par conséquent, ont souvent des solutions différentes pour les problèmes que vous pourriez rencontrer. 

Le rendu côté serveur consiste à générer le code HTML pour une page à partir de la logique de modélisation sur le serveur avant d'envoyer un code HTML à un navigateur. 

Le rendu côté client se fait lorsqu'une version plus légère ou « incomplète » du code HTML est envoyée depuis le serveur et que JavaScript est utilisé pour générer le code HTML. Cela transfère le traitement de la logique du serveur au navigateur web (le client).

L'hydratation consiste à combiner les deux techniques. Tout d'abord, sur le serveur, autant de HTML que possible est généré. Ensuite, JavaScript évalue le code HTML fourni et y apporte des modifications plus légères lorsque l'utilisateur interagit avec la page ou les données reçues. Cela réduit la charge sur le client et potentiellement le temps nécessaire à l'utilisateur pour voir le contenu chargé.

Sur CMS Hub, le code HubL est traité côté serveur, puis mis en cache au niveau du réseau de diffusion de contenu. Vous pouvez ensuite utiliser JavaScript pour hydrater ou rendre côté client le code HTML du navigateur au visiteur du site.

L'analytique est importante pour la capacité de croissance de votre entreprise et son adaptation afin de résoudre les problèmes de vos clients et prospects. Lorsque vous créez une application monopage qui contient plusieurs vues, vous pouvez suivre le visiteur qui consulte différentes vues, sous forme de pages.

La plupart des plateformes d'analyse permettent de le faire avec JavaScript et HubSpot n'échappe pas à la règle. Transférez la vue de page lorsque votre application change de vue.

Le système de modules de HubSpot est un système côté serveur, générant un document HTML à partir de partials HubL + HTML et générant des CSS et du code JavaScript minifiés pour chaque module dans une page.

Si vous créez en utilisant les modules HubSpot, vous profiterez de différents avantages : 

• Les créateurs de contenu peuvent ajouter votre module à des pages qui présentent des zones de glisser-déposer ou des colonnes flexibles. Ils peuvent également déplacer et retirer le module eux-mêmes.
• Vous pouvez fournir des champs au créateur de contenu qui lui permettront de configurer les paramètres de votre application.
• Votre code n'est restitué sur la page que si le module est réellement utilisé.
• Module.css et module.js sont automatiquement minifiés. 

Toutefois, le système de modules HubSpot nécessite que les modules soient composés de fichiers spécifiques et à des endroits différents de ceux où vous pourriez normalement placer votre code.

Vous pouvez également créer votre application en tant que modèle plutôt que dans le cadre du module. Cela vous offre davantage de flexibilité avec la structure de votre fichier. Cependant, vous ne bénéficierez pas des avantages que les modules fournissent ; les créateurs de contenu ne seront pas en mesure d'ajouter cette application aux pages dans les zones de glisser-déposer et les colonnes flexibles. 

Certaines infrastructures JavaScript utilisent des accolades { } pour délimiter leur code. Le langage HubL utilise également ces caractères. Trois méthodes peuvent être utilisées pour vous assurer que vous n'avez pas de conflits entre votre infrastructure et HubL : vous pouvez utiliser la balise HubL brute pour envelopper votre JSX, définir le cadre pour utiliser un délimiteur différent ou utiliser une étape de construction qui compile le JavaScript au préalable.

L'intégration de Vue.js sans étape de construction dans un module est facile. 

Dans votre fichier module.html, utilisez require_js pour ajouter la bibliothèque Vue en vous assurant qu'elle ne sera chargée qu'une seule fois lors de l'ajout de votre module à une page.

Copiez le code HTML de l'introduction Vue.js et collez-le dans votre fichier module.html. Encadrez ce code dans une balise brute HubL pour l'empêcher d'être considéré comme du HubL.

Copiez le code JavaScript de l'introduction Vue.js et collez-le dans votre fichier module.js. Encadrez ce code dans un écouteur d'événement pour vérifier qu'il est exécuté une fois le chargement du contenu DOM terminé. Publiez votre module et prévisualisez-le. Votre application Vue de base devrait maintenant fonctionner.

Nous avons créé un boilerplate (bêta) pour vous aider à bien démarrer avec les modules HubSpot dans le cadre de la création d'une application VueJS. La façon la plus simple d'en tirer parti consiste à exécuter la commande hs create vue-app à partir de l'ILC de CMS. Des instructions sont disponibles dans le référentiel.

Ce boilerplate est nouveau et nous serions ravis d'avoir votre retour ! Faites-nous savoir ce qui pourrait être amélioré et tous les problèmes que vous rencontrez. La meilleure façon de fournir des commentaires consiste à soumettre les problèmes dans le référentiel GitHub.

Les CTA et les formulaires HubSpot ont leurs propres balises de script et gèrent eux-mêmes leur propre code HTML. Pour vous assurer que votre composant Vue ne modifie pas le formulaire ou le CTA, créez un élément HTML autour du code d'intégration de CTA/formulaire. Appliquez v-once à cet élément. Cela garantit que le code sera rendu une fois, puis ignoré par votre composant Vue.

Plutôt que d'utiliser HubL pour créer des modules et des partials, vous pouvez utiliser JavaScript et React. En plus d'assembler les composants React rendus par le serveur dans le code HTML généré par HubL, les modules et partials JavaScript prennent en charge l'interactivité côté serveur et côté client. Pour en savoir plus, consultez l'introduction aux éléments constitutifs JS de HubSpot.

Vous pouvez également consulter le boilerplate React pour bien démarrer avec une application React dans un module HubSpot. La façon la plus simple d'en tirer parti consiste à exécuter la commande hs create react-app à partir de l'ILC de CMS. Puis, suivez les instructions dans le référentiel.

Ce boilerplate est nouveau et nous serions ravis d'avoir votre retour ! Faites-nous savoir ce qui pourrait être amélioré et tous les problèmes que vous rencontrez. La meilleure façon de fournir des commentaires consiste à soumettre les problèmes dans le référentiel GitHub.

Il existe beaucoup de bibliothèques JavaScript et il nous est impossible de les documenter toutes individuellement. Des bonnes pratiques de base sont à connaître lorsque vous utilisez des bibliothèques JavaScript sur HubSpot.

Vous pouvez avoir des dizaines de modules et de modèles qui utilisent des bibliothèques JavaScript partagées. Ne vous inquiétez pas de charger ces bibliothèques plusieurs fois. Pour ce faire, vous devez utiliser la fonction HubL require_js. Les scripts chargés à l'aide de cette fonction ne seront chargés qu'une fois par page, indépendamment du nombre de modules ou de partials et du modèle qui les nécessite.

Cette utilisation peut dynamiser vos performances, car vous ne chargerez le fichier qu'une seule fois. Si des éléments d'une page n'ont pas besoin de cette bibliothèque, elle ne sera pas chargée du tout. Vous pouvez même utiliser cela avec la logique HubL pour charger des ressources uniquement si vous en avez vraiment besoin.

• Optimisation pour les performances
• L'accessibilité n'est pas une fonctionnalité
• Comment utiliser les composants web sur HubSpot
• Premiers pas avec les modules
• Premiers pas avec les fonctions sans serveur
• Créer un workflow de développement efficace
• Création de pages dynamiques avec HubDB
• Créer des modules et des partials avec JavaScript