Bu, web.dev'in mühendislik blogundaki ilk yayındır. Önümüzdeki aylarda, çalışmalarımızdan elde edilen harekete geçirici analizleri paylaşmayı umuyoruz. Bu nedenle, Mühendislik Blogu etiketine sahip gönderileri 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. Deneyimli kullanıcılar Measurement sayfamızın, Chrome'un Geliştirici Araçları'ndan da erişilebilen Lighthouse'un yalnızca bir arayüzü olduğunu fark etmiş olabilir. web.dev adresinde oturum açmak, sitenizde düzenli olarak Lighthouse denetimleri yapmanızı sağlar. Böylece, puanının zaman içinde nasıl değiştiğini görebilirsiniz. Ölçüm sayfasını biraz sonra 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, async ve await dahil olmak üzere yalnızca type="module"'i 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 zorunlu değildir.
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. Bunlar, geçersiz alan adlarına yönelik yönlendirmeleri ve yakında kullanıma sunulacak bir uluslararası hale getirme özelliği için kullanıcının tercih ettiği dili ayrıştıracak kodu içerir.
Statik oluşturma
web.dev'deki her sayfa Markdown ile yazılmıştır. Tüm sayfalarda, her yayınla ilgili meta verileri açıklayan ön konu bulunur. 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 rastgele ö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 bu özelliği, farklı içerik türlerini (yayınlar ve codelab'ler gibi) doğru şekilde çerçevelemek ve aynı zamanda üst düzey bir HTML düzenini paylaşmak için 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 sayfa oluşturur.
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şullar gibi tipik şablon oluşturma özelliklerine sahiptir ancak aynı zamanda daha fazla HTML oluşturan veya diğer mantığı çağıran kısa kodları tanımlamamıza 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. Kısa kodlar, bağımsız değişkenlerinden biri içerilen içerik olmak üzere, bağımsız değişkenleri kabul eder. 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:
- Global durum, Analytics ve SPA yönlendirmesi için kod içeren önyükleme kodu
- 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 genel 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 çağrılarını tetikler.
Ayrıca, ulaştığınız URL'ye bağlı olarak sitemize birkaç farklı giriş noktası belirtir ve dinamik import() özelliğini 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 yoksayar ve DOM'da kalanları oluşturur.
Her Web Bileşeni, connectedCallback(), disconnectedCallback() ve attributeChangedCallback() gibi yöntemler içeren bir sınıftır.
web.dev'in özel öğeleri, çoğunlukla karmaşık bileşenler için basit bir temel sağlayan LitElement öğesinden 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 çoğu 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.
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 denetlemenizi ve ardından Ölçüm sayfasından başka bir sayfaya geçmenizi sağlar. Geri dönerseniz 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.