HTML Hizmeti: En İyi Uygulamalar

HTML hizmetiyle kullanıcı arayüzleri oluşturmak, standart web geliştirme işlemine benzer. Ancak belirli yönler Apps Komut Dosyası ortamına özgüdür. Bu rehberde, duyarlı ve güvenli HTML hizmeti kullanıcı arayüzleri geliştirme ile ilgili en iyi uygulamalar vurgulanmaktadır.

Ayrı HTML, CSS ve JavaScript

Tüm HTML, CSS ve JavaScript'i tek bir dosyada birleştirmek projelerin bakımını zorlaştırabilir. Apps Komut Dosyası, istemci tarafı kodunun .html dosyalarında olmasını gerektirse de CSS ve istemci tarafı JavaScript'i kendi dosyalarına ayırmanız ve bunları özel bir işlevle ana HTML sayfasına eklemeniz gerekir.

Aşağıdaki örnekte, Code.gs içinde include sunucu tarafı işlevi kullanılarak Stylesheet.html ve JavaScript.html, Page.html'e aktarılmaktadır. Yazdırma komut dosyaları ile çağrıldığında bu işlev, dosya içeriğini doğrudan ekler. Bunlar bağımsız .css veya .js dosyaları değil, HTML snippet'leri olduğundan <style> ve <script> etiketlerini içermeleri gerekir.

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ükleyin.

Şablonlu HTML, arayüzleri hızlı bir şekilde oluşturmak için kullanılabilir ancak kullanıcı arayüzünüzün duyarlı olmasını sağlamak için kullanımı sınırlandırılmalı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. Küçük komut dosyası kodunuzda uzun süren görevler olması, kullanıcı arayüzünüzün yavaş görünmesine neden olabilir.

Diğer içerikleri ekleme veya statik değerleri ayarlama gibi hızlı ve tek seferlik görevler için scriptlet etiketlerini kullanın. Diğer tüm veriler google.script.run çağrıları kullanılarak yüklenmelidir. Bu şekildeki asenkron kodlama daha zordur ancak kullanıcı arayüzünün daha hızlı yüklenmesini sağlar ve kullanıcıya bir yükleme animasyonu veya başka bir yükleme mesajı gösterme fırsatı verir.

Yapmayın: Şablonlara yükleme yapmayın.

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

Yapılacaklar: 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>

Kaynakları HTTPS kullanarak yükleme

IFRAME Koruma alanı modunda, tüm JavaScript ve CSS dosyaları HTTPS üzerinden sunulmalıdır. Bu dosyaların güvenli olmayan şekilde sunulması aşağıdaki gibi hatalara neden olur:

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

En popüler kitaplıkların çoğu hem HTTP hem de HTTPS'yi destekler. Bu nedenle, geçiş genellikle URL'ye ek bir "s" eklemekten ibarettir.

HTML5 belge türü bildirimini kullanın

Sayfanız daha yeni olan IFRAME sandbox 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ü bildirimi, tarayıcıya sayfayı modern tarayıcılar için tasarladığınızı ve sayfanızı uyumsuzluk modu kullanılarak oluşturmaması gerektiğini bildirir. Modern HTML5 öğelerinden veya JavaScript API'lerinden yararlanmayı planlamıyor olsanız bile bu, sayfanızın doğru şekilde görüntülenmesini sağlar.

JavaScript'i en son yükleme

Birçok web geliştirici, yanıt verme hızını artırmak için JavaScript kodunun sayfanın en altında yüklenmesini önerir. Bu durum, HTML hizmetiyle daha da önemlidir. <script> etiketlerinizi sayfanızın sonuna taşıdığınızda HTML içeriği, JavaScript işlenmeden önce oluşturulur. Böylece kullanıcıya bir yükleme simgesi veya başka bir mesaj gösterebilirsiniz.

jQuery'nin avantajlarından yararlanma

jQuery, web geliştirme alanındaki birçok yaygın görevi basitleştiren popüler bir JavaScript kitaplığıdır.

HTML Hizmeti: En İyi Uygulamalar Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.