La création d'interfaces utilisateur avec le service HTML suit un grand nombre de modèles et de pratiques identiques à ceux d'autres types de développement Web. Toutefois, certains aspects sont propres à l'environnement Apps Script ou méritent d'être mis en évidence. Nous aborderons ci-dessous quelques bonnes pratiques à garder à l'esprit lorsque vous développez vos propres interfaces utilisateur de services HTML.
Pour illustrer ces bonnes pratiques, nous avons créé un exemple d'application Web à l'aide du service HTML appelé Tâches simples. Le code source complet et les instructions de configuration sont disponibles dans notre dépôt GitHub.
Séparer le code HTML, CSS et JavaScript
Conserver tout le code HTML, CSS et JavaScript dans un seul fichier peut rendre votre projet difficile à lire et à développer. Bien qu'Apps Script nécessite que le code côté client soit placé dans des fichiers .html, vous pouvez toujours séparer votre CSS et votre code JavaScript côté client en différents fichiers, puis les inclure dans la page HTML principale à l'aide d'une fonction personnalisée.
L'exemple ci-dessous définit une fonction include() personnalisée côté serveur dans le fichier Code.gs pour importer le contenu des fichiers Stylesheet.html et JavaScript.html dans le fichier Page.html. Lorsqu'elle est appelée à l'aide de l'impression de scriptlets, cette fonction importe le contenu du fichier spécifié dans le fichier actuel. Notez que les fichiers inclus contiennent des balises <style> et <script>, car il s'agit d'extraits HTML et non de fichiers .css ou .js purs.
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>
Stylesheet.html
<style>
p {
color: green;
}
</style>
JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
Charger les données de manière asynchrone, et non dans des modèles
Le HTML basé sur un modèle permet de créer rapidement des interfaces simples, mais son utilisation doit être limitée pour garantir la réactivité de votre UI. Le code des modèles est exécuté une fois lors du chargement de la page, et aucun contenu n'est envoyé au client tant que le traitement n'est pas terminé. La présence de tâches de longue durée dans le code de scriptlet peut ralentir l'interface utilisateur.
Utilisez les tags scriptlet pour des tâches ponctuelles rapides, telles que l'inclusion d'autres contenus ou la définition de valeurs statiques. Toutes les autres données doivent être chargées à l'aide d'appels google.script.run.
Il est plus difficile de coder de cette manière asynchrone, mais cela permet à l'interface utilisateur de se charger plus rapidement et de présenter une icône de chargement ou un autre message de chargement à l'utilisateur.
À éviter : chargez des modèles
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>
À faire : chargez de manière asynchrone
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
Dans l'exemple d'application Simple Tasks, la page de service HTML Page.html charge les données de cette façon et n'utilise la création de modèles que pour inclure un autre code source dans la page.
Charger des ressources à l'aide de HTTPS
Si votre page est diffusée à l'aide du mode bac à sable IFRAME plus récent, inclure des fichiers JavaScript ou CSS non diffusés via HTTPS entraînera des erreurs telles que l'erreur ci-dessous.
Contenu mixte: la page à l'adresse "https://..." a été chargée via HTTPS, mais a demandé un script non sécurisé "http://...". Cette requête a été bloquée. Le contenu doit être diffusé via HTTPS.
La plupart des bibliothèques populaires sont compatibles avec HTTP et HTTPS. Pour passer au Pixel, il suffit généralement d'insérer un "s" dans l'URL.
Utiliser la déclaration de type de document HTML5
Si votre page est diffusée à l'aide du nouveau mode sandbox IFRAME, veillez à inclure l'extrait de code suivant en haut de votre fichier HTML.
<!DOCTYPE html>
Cette déclaration de type de document indique au navigateur que vous avez conçu la page pour les navigateurs modernes et qu'elle ne doit pas afficher votre page à l'aide du mode quirks. Même si vous ne prévoyez pas de tirer parti des API JavaScript ou des éléments HTML5 modernes, cela vous aidera à garantir que votre page s'affiche correctement.
Charger JavaScript en dernier
De nombreux développeurs Web recommandent de charger le code JavaScript en bas de la page pour améliorer la réactivité, ce qui est encore plus important avec le service HTML. Si vous déplacez vos balises <script> à la fin de votre page, le contenu HTML s'affiche avant le traitement du code JavaScript, ce qui vous permet de présenter un indicateur de chargement ou un autre message à l'utilisateur.
Tirez parti de jQuery
jQuery est une bibliothèque JavaScript populaire qui simplifie de nombreuses tâches courantes de développement Web.