Facebook’un teknoloji yığınını yeniden kurma hikâyesi

 (engineering.fb.com)
15 puan yazan xguru 2020-05-09 | 2 yorum | WhatsApp'ta paylaş

Basit bir PHP ile başlayan Facebook’un, bu yeni tasarıma uyum sağlamak için React + Relay(GraphQL)’e geçerken izlediği süreç ve çıkardığı dersler

CSS, JS, Data, Navigation alanlarının her birine hızlı bir uygulama için temel ilkeler uygulandı

  1. Yalnızca gerekli kaynakları mümkün olan en kısa sürede iletmek

  2. Kullanıcı deneyimi için mühendislik yaklaşımı

CSS

  • Atomic CSS ile CSS’i %80 azalttılar ve gereksiz CSS’in indirilmesini engellediler

  • Erişilebilirlik için rems kullanıldı; px → rems manuel dönüşümündeki hataları azaltmak için bunu build aracında otomatik dönüştürecek şekilde ayarladılar

  • Theming (karanlık mod) için CSS değişkenleri kullanıldı

  • Titremeyi önlemek için Inline SVG kullanıldı (img içine SVG dosyası koymak yerine). Bu sayede renk değişimi de çalışma anında mümkün hale geldi

JS

  • 3 aşamalı code-splitting uygulanmış JS, aşamalara göre iletildi

Tier 1. Yükleme sırasında UI Skeleton’ı hızlıca göstermek için temel yerleşim

Tier 2. Ekranda görünen tüm içeriği tamamen render etmek için gereken JS. Tam çalışır durumda olmalı ve Tier 2’den sonra kod yüklense bile ekran düzeni değişmemeli

Tier 3. Ekran gösterildikten sonra gerekli olan her şey. Loglama kodu, gerçek zamanlı güncelleme abonelikleri vb.

  • 500KB’lık JS, 50KB Tier 1, 150KB Tier 2, 300KB Tier 3 olarak bölündü → yükleme ve ekran gösterimi çok daha hızlı tamamlandı

  • Bu bölünme sayesinde A/B testlerinde de her iki tarafta yalnızca gerekli kodların alınması sağlanabildi

  • Veri odaklı React uygulamaları oluşturmaya yardımcı olan Relay özellikleri kullanılarak, hangi verinin getirileceğine göre yalnızca gerekli bileşenler yüklenecek şekilde değiştirildi

  • Ürün bazında JS Budget (bütçe) sistemi getirildi. Performans hedefleri, teknik kısıtlar ve ürünle ilgili değerlendirmelere göre bütçe belirlendi. Böylece zaman geçtikçe kodun büyümesi engellendi.

Data

  • Relay kullanılarak tüm veri çekme işlemleri GraphQL kullanılacak şekilde standartlaştırıldı

  • Relay sayesinde sayfa isteği aşamasından itibaren önce gerekli veriler paralel olarak indirildi. Bu da ekranı daha hızlı göstermeyi mümkün kıldı

  • GraphQL’in dahili uzantısı olan @stream kullanılarak, haber akışı gibi veriler birden fazla round-trip olmadan tek bir sorguyla parça parça gönderildi

  • @defer + React Suspense ile hemen gerekli olmayan verilerin daha sonra yüklenmesi sağlandı

Navigation

  • SPA navigasyonunda yeni sayfa yüklenirken kaynak yükleme süresi ve round-trip’i azaltmak için Route Map oluşturuldu

  • Gerektikçe Route Map’e route bilgisi mümkün olduğunca hızlı şekilde parçalara ayrılarak yüklendi

  • Kaynaklar mümkün olduğunca erken prefetched edildi (hover sırasında prefetch, mouse down sırasında kod ve veri getirme, click gerçekleşince React durumunu değiştirme)

  • Navigasyonlar arasında boş ekran göstermek yerine, React Suspense transition kullanılarak yeni route getirilmeden önce mevcut route gösterilmeye devam edildi

  • EntryPoints (kod dallanma noktaları ile veri sorgularını saran küçük dosyalar) kullanılarak kod ve veri indirmeleri paralelleştirildi

İlgili okumalar

2 yorum

 
xguru 2020-05-10

Facebook’un yeni tasarımının CSS’inden öğrendiklerimiz: https://tr.news.hada.io/topic?id=1819

Yazıya da birlikte göz atmanız faydalı olacaktır.
 
xguru 2020-05-09

Relay - React için üretime hazır GraphQL istemcisi https://relay.dev/