web.dev mühendislik blogu 1: Siteyi nasıl oluşturuyoruz ve Web Bileşenleri'ni nasıl kullanıyoruz?

Bu, web.dev'in mühendislik blogundaki ilk yayındır. Önümüzdeki aylarda, çalışmalarımızdan elde ettiğimiz uygulanabilir analizleri paylaşmayı umuyoruz. Bu nedenle, Mühendislik Blogu etiketini içeren yayınları takip edin. Burada, statik sitemizin derleme sürecini ve (isteğe bağlı olarak) Web bileşenlerimizin arkasındaki JavaScript.

web.dev, modern web deneyimleri oluşturmayla ilgili içerikler sağlar ve sitenizin performansını ölçmenize olanak tanır. Bilgili kullanıcılar, Ölçüm sayfamızın yalnızca Chrome'un Geliştirici Araçları'nda da bulunan Lighthouse için bir arayüz olduğunu fark etmiş olabilir. web.dev'de oturum açarak sitenizde düzenli Lighthouse denetimleri çalıştırabilir ve sitenizin puanının zaman içinde nasıl değiştiğini görebilirsiniz. Ölçüm sayfasını birazdan tekrar ziyaret edeceğim. Bu sayfanın oldukça özel olduğunu düşünüyoruz. 🎊

Giriş

web.dev temel olarak bir Markdown dosyası koleksiyonundan oluşturulan statik bir sitedir. Markdown'ı HTML'ye dönüştürmeyi kolaylaştıran şık ve genişletilebilir bir araç olduğu için Eleventy'yi kullanmayı tercih ettik.

Ayrıca, yalnızca async ve await'i içeren type="module"'u destekleyen tarayıcılara sunduğumuz modern JavaScript paketlerini de kullanırız. Ayrıca, eski sürümlerin bir kısmında desteklenmeyen ancak sürekli güncellenen tarayıcılar tarafından desteklenen özellikleri de memnuniyetle kullanırız. Statik bir site olduğumuz için içeriğimizi okumak için JavaScript'i kullanmamız gerekmiyor.

Statik HTML oluşturma ve JavaScript'imizi Rollup ile bir araya getirme işlemlerini içeren derleme işlemi tamamlandıktan sonra web.dev, test için basit bir statik sunucuda barındırılabilir. Site neredeyse tamamen statik ancak özel bir Node.js sunucusundan yararlanabileceğimiz birkaç özel ihtiyacımız var. Geçersiz alanlar için yönlendirmeler ve yakında kullanıma sunulacak bir uluslararası hâle getirme özelliği için kullanıcı tercih ettiği dili ayrıştıracak kod da buna dahildir.

Statik oluşturma

web.dev'deki her sayfa Markdown ile yazılmıştır. Tüm sayfalarda, her gönderiyle ilgili meta verileri açıklayan ön kısım yer alır. Bu meta veriler her sayfanın düzenine aktarılarak başlıklar, etiketler vb. oluşturulur. Aşağıda bununla ilgili bir örnek verilmiştir:

---
layout: post
title: What is network reliability and how do you measure it?
authors:
  - jeffposnick
date: 2018-11-05
description: |
  The modern web is enjoyed by a wide swath of people…
---

The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.

Your creations can reach users all across the world...

Bu ön kısım, yazarlar, yayınlanma tarihi ve etiketler gibi keyfi özellikleri tanımlamamıza olanak tanır. Eleventy, ön bilgileri akıllıca bir şey yapmak istediğimiz neredeyse her eklentide, şablonda veya başka bir bağlamda veri olarak kullanır. Veri nesnesi, Eleventy'nin veri şelalesi olarak tanımladığı verileri de içerir. Bu veriler, her bir sayfadan, sayfanın kullandığı düzenden ve hiyerarşik klasör yapısında bulunan verilerden alınır.

Her benzersiz düzen, farklı bir içerik türünü tanımlar ve diğer düzenlerden devralınabilir. web.dev'de, tek bir üst düzey HTML düzenini paylaşırken farklı içerik türlerini (ör. yayınlar ve kod laboratuvarları) doğru şekilde çerçevelemek için bu özelliği kullanırız.

Koleksiyonlar

Eleventy, keyfi içerik koleksiyonları oluşturmanın programatik bir yolunu sunar. Bu sayede, sayfalandırma desteği oluşturduk ve yayın yazarları için sanal sayfalar (diskte eşleşen bir Markdown dosyası olmayan sayfalar) oluşturduk. Örneğin, yazar sayfalarımızı kalıcı bağlantısı için bir ifade (böylece şablon her yazar için yeniden oluşturulur) ve destekleyici bir koleksiyon içeren bir şablon kullanarak oluştururuz.

Bu, örneğin Addy'nin tüm yayınlarını içeren basit bir sayfayla sonuçlanır.

Sınırlamalar

Şu anda Eleventy'nin derleme sürecine kolayca bağlanamıyoruz çünkü zorunlu yerine beyan edici bir yapıya sahip: Ne istediğinizi değil, nasıl istediğinizi açıklıyorsunuz. Yalnızca komut satırı arayüzü üzerinden çağrılabildiğinden, Eleventy'yi daha büyük bir derleme aracının parçası olarak çalıştırmak zordur.

Şablon oluşturma

web.dev, orijinal olarak Mozilla tarafından geliştirilen Nunjucks şablonlama sistemini kullanır. Nunjucks, döngüler ve koşullu ifadeler gibi tipik şablonlama özelliklerine sahiptir ancak daha fazla HTML oluşturan veya başka mantık çağıran kısa kodlar tanımlamamıza da olanak tanır.

Statik içerik siteleri oluşturan çoğu ekip gibi, küçük bir başlangıç yaptık ve zaman içinde kısa kodlar ekledik. Şu ana kadar yaklaşık 20 kısa kod ekledik. Bunların çoğu yalnızca daha fazla HTML oluşturur (özel web bileşenlerimiz dahil). Aşağıda bununla ilgili bir örnek verilmiştir:

{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}

Sonuç şu şekilde görünür:

Ancak aslında aşağıdaki gibi görünen HTML oluşturur:

<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>

Bu makalenin kapsamı dışında olsa da web.dev, meta programlama dili olarak kısa kodlar da kullanır. Shortcode'lar bağımsız değişkenleri kabul eder. Bağımsız değişkenlerden biri, içerdiği içeriktir. Kısa kodların bir şey döndürmesi gerekmez. Bu nedenle, durum oluşturmak veya başka bir davranışı tetiklemek için kullanılabilirler. 🤔💭

Senaryo Yazma

Daha önce de belirtildiği gibi, web.dev statik bir site olduğundan JavaScript olmadan ve type="module"'ü veya diğer modern kodlarımızı desteklemeyen eski tarayıcılar tarafından sunulup kullanılabilir. Bu, web.dev'i herkes için erişilebilir hale getirme yaklaşımımızın son derece önemli bir parçasıdır.

Ancak modern tarayıcılar için kodumuz iki ana bölümden oluşur:

  1. Global durum, Analytics ve SPA yönlendirme kodunu içeren Bootstrap kodu
  2. Siteyi aşamalı olarak geliştiren Web Bileşenleri için kod ve CSS

Önyükleme kodu oldukça basittir: web.dev yeni sayfaları tek sayfalık uygulama (SPA) olarak yükleyebilir. Bu nedenle, yerel <a href="..."> öğelerindeki tıklamaları dinleyen bir global dinleyici yükleriz. SPA modeli, kullanıcının mevcut oturumuyla ilgili genel durumu korumamıza yardımcı olur. Aksi takdirde her yeni sayfa yüklemesi, kullanıcının oturum açmış durumuna erişmek için Firebase'e çağrılar tetikler.

Ayrıca, hangi URL'ye ulaştığınıza bağlı olarak sitemize birkaç farklı giriş noktası belirtir ve dinamik import() kullanarak doğru giriş noktasını yükleriz. Bu sayede, site kodla geliştirilmeden önce kullanıcılarımızın ihtiyaç duyduğu bayt sayısı azaltılır.

Web Bileşenleri

Web bileşenleri, JavaScript'de sağlanan çalışma zamanı işlevlerini kapsayan ve <web-codelab> gibi özel adlarla tanımlanan özel öğelerdir. Tasarım, web.dev gibi büyük ölçüde statik siteler için idealdir: Sitenin HTML'si güncellenirken tarayıcınız bir öğenin yaşam döngüsünü yönetir ve sayfaya eklendiklerinde veya sayfadan kaldırıldığında tüm öğeleri doğru şekilde bilgilendirir. Eski tarayıcılar ise Web Bileşenlerini tamamen yoksayarak DOM'da kalanları oluşturur.

Her Web Bileşeni, connectedCallback(), disconnectedCallback() ve attributeChangedCallback() içeren yöntemlere sahip bir sınıftır. web.dev'in özel öğeleri çoğunlukla karmaşık bileşenler için basit bir temel sağlayan LitElement'ten devralınır.

web.dev birçok sayfada Web Bileşenleri kullansa da bu bileşenlerin en çok ihtiyaç duyulduğu yer Ölçüm sayfasıdır. Bu sayfada gördüğünüz işlevlerin büyük bir kısmı iki öğe tarafından sağlanır:

<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>

Bu öğeler, daha fazla işlev sağlayan başka öğeler oluşturur. Bu öğelerin normal Markdown kaynak kodumuzun bir parçası olması önemlidir. İçerik ekibimiz, yalnızca Ölçüm düğümüne değil, herhangi bir sayfaya genişletilmiş işlevler ekleyebilir.

Web bileşenlerimizde en yaygın olarak React tarafından popüler hale getirilen Kapsayıcı Bileşen modeli kullanılır. Ancak bu model artık biraz eski. Her -container öğesi, genel durumumuza (unistore tarafından sağlanır) bağlanır ve ardından bir görsel öğe oluşturur. Bu öğe de stil veya diğer yerleşik işlevlere sahip gerçek DOM düğümlerini oluşturur.

Dünya geneli durum ile bunu kullanan HTML öğeleri arasındaki ilişkiyi gösteren bir şema.
Küresel durum ve web bileşeni

En karmaşık Web Bileşenlerimiz, genel işlemleri ve durumu görselleştirmek için mevcuttur. Örneğin, web.dev, en sevdiğiniz siteyi denetlemenize ve ardından Ölçüm sayfasından ayrılmanıza olanak tanır. Geri döndüğünüzde görevin hâlâ devam ettiğini görürsünüz.

Basit bileşenlerimiz, statik olan içerikleri iyileştirir veya global durumla hiçbir ilişkisi olmayan muhteşem görselleştirmeler (örneğin, her çizgi grafiği kendi <web-sparkline-chart>'sidir) oluşturur.

Sohbet edelim

web.dev mühendislik ekibi (Rob, Ewa, Michael ve Sam) yakında daha fazla teknik ayrıntılı inceleme yayınlayacaktır.

İşlemlerimizi nasıl yürüttüğümüzü öğrenmenin kendi projeleriniz için size bazı fikirler verdiğini umuyoruz. Bu blogla ilgili sorularınız veya konu önerileriniz varsa Twitter'da bize ulaşabilirsiniz.