HTML Hizmeti: En İyi Uygulamalar

HTML hizmetiyle kullanıcı arayüzleri oluşturmak, diğer web geliştirme türleriyle aynı kalıp ve uygulamaların çoğunu takip eder. Bununla birlikte, Apps Script ortamına özgü veya vurgulanmaya değer bazı yönler vardır. Aşağıda, kendi HTML hizmeti kullanıcı arayüzlerinizi geliştirirken göz önünde bulundurmanız gereken bazı en iyi uygulamalara değineceğiz.

HTML, CSS ve JavaScript'i ayırın

Tüm HTML, CSS ve JavaScript kodlarını tek bir dosyada tutmak, projenizin okunmasını ve geliştirilmesini zorlaştırabilir. Apps Script, istemci tarafı kodunun .html dosyalarına yerleştirilmesini gerektirse de CSS ve istemci tarafı JavaScript'inizi farklı dosyalara ayırabilir ve ardından bunları özel bir işlevle ana HTML sayfasına ekleyebilirsiniz.

Aşağıdaki örnekte, Stylesheet.html ve JavaScript.html dosyasının içeriğini Page.html dosyasına aktarmak için Code.gs dosyasında özel bir sunucu tarafı include() işlevi tanımlanmaktadır. Baskı komut dosyaları kullanılarak çağrıldığında bu işlev, belirtilen dosya içeriğini geçerli dosyaya aktarır. Dahil edilen dosyaların, saf .css veya .js dosyaları değil HTML snippet'leri oldukları için <style> ve <script> etiketleri içerdiğini unutmayın.

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>

Verileri şablonlarda değil, eşzamansız olarak yükleme

Şablonlu HTML, basit arayüzleri hızlıca oluşturmak için kullanılabilir ancak kullanıcı arayüzünüzün duyarlı olması için kullanımı sınırlı olmalıdır. Şablonlardaki kod, sayfa yüklendiğinde bir kez yürütülür ve işleme tamamlanana kadar istemciye içerik gönderilmez. Komut dosyası kodunuzda uzun süren görevlerin olması kullanıcı arayüzünüzün yavaş görünmesine neden olabilir.

Diğer içerikleri dahil etme veya statik değerler ayarlama gibi hızlı ve tek seferlik görevler için komut dosyası etiketlerini kullanın. Diğer tüm veriler google.script.run çağrıları kullanılarak yüklenmelidir. Bu şekilde eşzamansız kodlama yapmak daha zordur ancak kullanıcı arayüzünün daha hızlı yüklenmesine olanak tanır ve kullanıcıya bir döndürme çubuğu veya başka bir yükleme mesajı gösterme fırsatı verir.

Yapmayın: Şablonlara yükleme

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Yap: Eşzamansız olarak yükleyin.

<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>

HTTPS kullanarak kaynakları yükleme

Sayfanız daha yeni IFRAME korumalı alan modu kullanılarak sunuluyorsa HTTPS kullanılarak sunulmayan JavaScript veya CSS dosyalarının dahil edilmesi aşağıdaki gibi hatalara neden olur.

Karma İçerik: "https://..." adresindeki sayfa HTTPS üzerinden yüklendi ancak güvenli olmayan bir komut dosyası ("http://...") istedi. Bu istek engellendi. İçerik HTTPS üzerinden sunulmalıdır.

En popüler kitaplıkların çoğu hem HTTP hem de HTTPS'yi desteklediğinden geçiş yapmak genellikle URL'ye bir "s" eklemekten ibarettir.

HTML5 doküman türü beyanını kullanın

Sayfanız daha yeni IFRAME korumalı alan modu kullanılarak yayınlanıyorsa HTML dosyanızın en üstüne aşağıdaki kod snippet'ini eklediğinizden emin olun.

<!DOCTYPE html>

Bu belge türü bildirimleri, tarayıcıya sayfayı modern tarayıcılar için tasarladığınızı ve sayfanızı Quirks modu kullanarak oluşturmaması gerektiğini bildirir. Modern HTML5 öğelerinden veya JavaScript API'lerinden yararlanmayı planlamasanız bile bu, sayfanızı doğru şekilde görüntülemenize yardımcı olur.

JavaScript'i en son yükleme

Birçok web geliştiricisi, duyarlılığı artırmak için JavaScript kodunu sayfanın en altına yüklemeyi önerir. Bu, HTML hizmeti için daha da önemlidir. <script> etiketlerinizi sayfanızı sonuna taşımak, HTML içeriğinin JavaScript işlenmeden önce oluşturulmasına olanak tanır. Böylece kullanıcıya bir döndürme çubuğu veya başka bir mesaj gösterebilirsiniz.

jQuery'den yararlanma

jQuery, web geliştirmede yaygın olarak kullanılan birçok görevi basitleştiren popüler bir JavaScript kitaplığıdır.