Bu, web.dev'in mühendislik blogundaki ilk yayındır. Önümüzdeki aylarda, çalışmalarımızdan elde edilen stratejik bilgileri paylaşmayı umuyoruz. Bu nedenle, Mühendislik Blogu etiketi içeren yayınları takip edin! Burada statik sitemiz için derleme sürecini ele alacağız ve (isteğe bağlı!) JavaScript'i kullanıyoruz.
web.dev, modern web deneyimleri oluşturma hakkında içerik sağlar ve sitenizin performansını ölçmenize olanak tanır. Deneyimli 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ş olabilirler. web.dev'de oturum açmak, sitenizde düzenli Lighthouse denetimleri çalıştırmanızı sağlar. Böylece, sitenizin puanının zaman içinde nasıl değiştiğini görebilirsiniz. Oldukça özel olduğunu düşündüğümüzden, Ölçüm sayfasına bir süre sonra yeniden bakacağım. 🎊
Giriş
web.dev, temelde Markdown dosyaları koleksiyonundan oluşturulan statik bir sitedir. Eleventy'yi, Markdown'ı HTML'ye dönüştürmeyi kolaylaştıran şık ve genişletilebilir bir araç olduğu için kullanmayı tercih ettik.
Ayrıca, yalnızca async ve await dahil olmak üzere yalnızca type="module"'i destekleyen tarayıcılara sunduğumuz modern JavaScript paketlerini kullanıyoruz.
Ayrıca eski tarayıcılar tarafından desteklenen ancak eski sürümlerin çok azı tarafından desteklenmeyen özellikleri de memnuniyetle kullanırız.
Statik bir site olduğumuzdan içeriğimizi okumak için JavaScript'in yalnızca zorunlu olması gerekmez.
Statik HTML oluşturma ve JavaScript'imizi Rollup ile paketlemeyi içeren derleme işlemi tamamlandıktan sonra web.dev, test amacıyla basit bir statik sunucuyla barındırılabilir. Site neredeyse tamamen statiktir, ancak özel bir Node.js sunucusundan yararlanan birkaç özel gereksinimimiz vardır. Bunlar, geçersiz alanlara yönelik yönlendirmelerin yanı sıra, yakında kullanıma sunulacak bir uluslararası hale getirme özelliği için kullanıcının tercih ettiği dili ayrıştırmaya yarayan kodu da içerir.
Statik oluşturma
web.dev'deki her sayfa Markdown ile yazılır. Tüm sayfalarda, her yayınla ilgili meta verileri açıklayan ön konu bulunur. Bu meta veriler her sayfanın düzenine beslenerek başlıklar, etiketler vb. oluşturur. Aşağıda 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 konu yazarlar, yayınlanma tarihi ve etiketler gibi rastgele özellikleri tanımlamamıza olanak tanır. Eleventy, ön konuyu kolayca akıllı bir işlem yapmak istediğimiz her eklentide, şablonda veya diğer bağlamlarda veri olarak gösteriyor. Veri nesnesi ayrıca Eleventy'nin veri basamakları olarak tanımladığı öğeyi de içerir. Bu veri, her bir sayfadan, sayfanın kullandığı düzenden ve hiyerarşik klasör yapısında bulunan verilerden alınan çeşitli verilerdir.
Her benzersiz düzen, farklı bir içerik türünü tanımlar ve diğer düzenlerden devralabilir. web.dev'de bu özelliği, tek bir üst düzey HTML düzenini paylaşırken farklı içerik türlerini (yayınlar ve codelab'ler gibi) doğru şekilde çerçevelemek için kullanıyoruz.
Koleksiyonlar
Eleventy, rastgele içerik koleksiyonları oluşturmak için programatik bir yöntem sunar. Bu sayede, sayfalara ayırma desteği oluşturabildik ve yayın yazarları için sanal sayfalar (disk üzerinde eşleşen bir Markdown dosyasına sahip olmayan sayfalar) oluşturabiliyoruz. Örneğin, yazar sayfalarımızı kalıcı bağlantısı için bir ifade içeren bir şablon (böylece şablon her yazar için yeniden oluşturulur) ve bir yedek koleksiyon kullanarak oluştururuz.
Bu, örneğin Addy'nin tüm yayınlarını içeren basit bir sayfa ile sonuçlanır!
Sınırlamalar
Şu anda Eleventy'nin geliştirme sürecini kolayca uygulayamıyoruz çünkü bu yöntem zorunlu değil, bildiricidir. Nasıl olmasını istediğinizi değil, ne istediğinizi açıklar. Eleventy yalnızca komut satırı arayüzünden çağrılabileceği için daha büyük bir derleme aracının parçası olarak çalıştırmak zordur.
Şablon
web.dev, Mozilla tarafından geliştirilen Nunjucks şablon sistemini kullanır. Nunjucks, döngüler ve koşullu komutlar gibi tipik şablon oluşturma ö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 biz de küçük başlangıçlar yaptık ve zaman içinde kısa kodlar ekledik. Şu ana kadar 20 kod ekledik. Bunların çoğu yalnızca ek HTML oluşturur (özel web bileşenlerimiz dahil). Aşağıda bir örnek verilmiştir:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
URL şu şekilde görünecektir:
Ancak aslında şuna benzeyen bir HTML oluşturur:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
web.dev, bu gönderinin kapsamı dışında olsa da bir tür metaprogramlama dili olarak kısa kodlar kullanır. Kısa kodlar bağımsız değişkenleri kabul eder ve bunların bağımsız değişkenlerinden biri içeriğin içeriği olur. Kısa kodların herhangi bir şey döndürmesi gerekmez. Bu nedenle, durum oluşturmak veya başka davranışları tetiklemek için kullanılabilirler. 🤔💭
Senaryo Yazma
Daha önce belirtildiği gibi, web.dev statik bir site olduğundan JavaScript olmadan ve type="module" veya diğer modern kodumuzu 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ılara yönelik kodumuz iki ana bölümden oluşur:
- Genel durum kodu, Analytics ve SPA yönlendirmesi için önyükleme kodu
- Siteyi kademeli 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 yüzden yerel <a href="..."> öğelerine yapılan tıklamaları izleyen genel bir işleyici yüklüyoruz.
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 yapılan ç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 olanı yükleriz.
Bu, site kodla geliştirilmeden önce kullanıcılarımızın ihtiyaç duyduğu bayt sayısını azaltır.
Web Bileşenleri
Web Bileşenleri, JavaScript'te sağlanan çalışma zamanı işlevlerini kapsülleyen özel öğelerdir ve <web-codelab> gibi özel adlarla tanımlanır.
Tasarım, web.dev gibi büyük oranda statik sitelere uygundur: Tarayıcınız, bir sitenin HTML'si güncellendikçe öğelerin yaşam döngüsünü yönetir, öğeleri sayfaya eklendiklerinde veya sayfadan ayrıldıklarında doğru bir şekilde bilgilendirir.
Eski tarayıcılar Web Bileşenleri'ni tamamen yok sayar ve DOM'da kalanları oluşturur.
Her Web Bileşeni, connectedCallback(), disconnectedCallback() ve attributeChangedCallback() dahil olmak üzere 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'ten devralır.
web.dev birçok sayfada Web Bileşenleri'ni kullansa da en fazla Ölçüm sayfası için gereklidir. Bu sayfada gördüğünüz işlevselliğin büyük kısmını sağlayan iki öğe vardı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 yeni öğeler oluşturur. Daha da önemlisi, bu öğeler normal Markdown kaynak kodumuzun sadece bir parçasıdır. İçerik ekibimiz, yalnızca Ölçüm düğümüne değil, herhangi bir sayfaya genişletilmiş işlevsellik ekleyebilir.
Web Bileşenlerimizde, React tarafından popüler hale gelen Kapsayıcı Bileşeni modeli yaygın olarak kullanılmaktadır ancak bu model artık daha basit bir modeldir.
Her -container öğesi, genel durumumuza bağlanır (unistore tarafından sağlanır) ve daha sonra, bir görsel öğe oluşturur. Görsel öğe de stile veya diğer yerleşik işlevlere sahip gerçek DOM düğümlerini oluşturmaya devam eder.
En karmaşık Web Bileşenlerimiz, genel işlemleri ve durumları görselleştirmek için tasarlanmıştır. Örneğin, web.dev en sevdiğiniz siteyi denetlemenizi ve ardından Ölçüm sayfasından ayrılmanızı sağlar. Geri dönerseniz görevin devam ettiğini görürsünüz.
Basit bileşenlerimiz sadece statik içeriği geliştirir veya harika görselleştirmeler oluşturur (örneğin, her çizgi grafiğin kendine ait bir <web-sparkline-chart> öğesi vardır). Bunların küresel durumla hiçbir ilgisi yoktur.
Sohbet edelim
Web.dev mühendislik ekibi (Rob, Ewa, Michael ve Sam) yakında daha ayrıntılı teknik incelemeler hazırlayacak.
Yaptığımız çalışmaların size kendi projeleriniz için fikir verdiğini umuyoruz. Bu blogla ilgili sorularınız veya konu istekleriniz varsa Twitter'dan bize ulaşın!