La creazione di interfacce utente con il servizio HTML segue molti degli stessi pattern e pratiche degli altri tipi di sviluppo web. Tuttavia, esistono alcuni aspetti che sono specifici dell'ambiente Apps Script o che meritano di essere sottolineati. Di seguito illustreremo alcune best practice da tenere a mente durante lo sviluppo di UI per i tuoi servizi HTML.
HTML, CSS e JavaScript separati
Conservare tutto il codice HTML, CSS e JavaScript in un unico file può rendere il tuo progetto difficile da leggere e sviluppare. Anche se Apps Script richiede che il codice lato client venga inserito in file .html, puoi comunque separare il CSS e il JavaScript lato client in file diversi e poi includerli nella pagina HTML principale con una funzione personalizzata.
L'esempio seguente definisce una funzione include() lato server personalizzata nel file Code.gs per importare i contenuti dei file Stylesheet.html e JavaScript.html nel file Page.html. Quando viene chiamata utilizzando la stampa di scriptlet, questa funzione importa il contenuto del file specificato nel file corrente. Tieni presente
che i file inclusi contengono tag <style> e <script> perché
si tratta di snippet HTML e non di file .css o .js puri.
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>Carica i dati in modo asincrono, non nei modelli
L'HTML basato su modelli può essere utilizzato per creare rapidamente interfacce semplici, ma il suo utilizzo deve essere limitato per garantire che l'interfaccia utente sia adattabile. Il codice nei modelli viene eseguito una volta al caricamento della pagina e nessun contenuto viene inviato al client fino al completamento dell'elaborazione. La presenza di attività che richiedono molto tempo nel codice dello scriptlet può causare un rallentamento dell'interfaccia utente.
Utilizza i tag scriptlet per attività rapide una tantum, come l'inclusione di altri contenuti o l'impostazione di valori statici. Tutti gli altri dati devono essere caricati utilizzando
le chiamate google.script.run.
La programmazione in questo modo asincrono è più difficile, ma consente di caricare l'interfaccia utente più rapidamente e offre l'opportunità di presentare all'utente un'animazione di attesa o un altro messaggio di caricamento.
Non: carica nei modelli
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Esegui: carica in modo asincrono.
<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>Carica le risorse utilizzando HTTPS
Se la tua pagina viene pubblicata utilizzando la IFRAME
modalità sandbox più recente, l'inclusione di file JavaScript o CSS non pubblicati utilizzando HTTPS comporterà errori come quello riportato di seguito.
Contenuti misti: la pagina "https://..." è stata caricata tramite HTTPS, ma ha richiesto uno script non sicuro "http://...". Questa richiesta è stata bloccata; i contenuti devono essere pubblicati tramite HTTPS.
Le librerie più diffuse supportano sia HTTP che HTTPS, quindi il passaggio di solito consiste solo nell'inserire una "s" aggiuntiva nell'URL.
Utilizza la dichiarazione del tipo di documento HTML5
Se la tua pagina viene pubblicata utilizzando la IFRAME
modalità sandbox più recente, assicurati di includere il seguente snippet di codice nella parte superiore del file HTML.
<!DOCTYPE html>
Queste dichiarazioni del tipo di documento indicano al browser che hai progettato la pagina per i browser moderni e che non deve visualizzarla utilizzando la modalità non standard. Anche se non prevedi di utilizzare elementi HTML5 moderni o API JavaScript, questo ti aiuterà a garantire la visualizzazione corretta della tua pagina.
Carica JavaScript per ultimo
Molti sviluppatori web consigliano di caricare il codice JavaScript nella parte inferiore della pagina per aumentare la reattività, il che è ancora più importante con il servizio HTML. Se sposti i tag <script> alla fine della pagina, i contenuti HTML verranno visualizzati prima dell'elaborazione del codice JavaScript, consentendoti di presentare un'animazione di attesa o un altro messaggio all'utente.
Sfrutta jQuery
jQuery è una popolare libreria JavaScript che semplifica molte attività comuni nello sviluppo web.