Chrome daha iyi bir web için açık kaynak çerçevelerle iş birliği yapıyor
Chrome, web çerçevesi ekosistemine aktif bir şekilde katkıda bulunmaktadır. Chrome Dev Summit 2019'da yaptığımız konuşmada, geçen yıl üzerinde çalıştığımız konular ele alınmıştır.
Ek ayrıntılar ve kaynaklarla birlikte konuşmanın uzun bir özeti için okumaya devam edin.
Web'i nasıl daha iyi hale getirebiliriz?
Chrome ekibindeki herkesin amacı web'i daha iyi hale getirmektir. Tarayıcı API'larını ve Chrome'u destekleyen temel JavaScript ve WebAssembly motoru V8'i iyileştirerek geliştiricilerin başarılı web sayfaları oluşturmalarına yardımcı olacak özellikler sağlayabilmelerini sağlamak için çalışıyoruz. Ayrıca açık kaynak araçlara birçok şekilde katkıda bulunarak günümüzde üretimde olan web sitelerini iyileştirmeye de çalışıyoruz.
Çoğu web geliştiricisi, mümkün olduğunda açık kaynak araçlardan yararlanır ve tamamen özel bir altyapı oluşturmak istemez. İstemci taraflı JavaScript çerçeveleri ve kullanıcı arayüzü kitaplıkları, açık kaynak kullanımının giderek artan bir kısmını oluşturur. En popüler üç istemci tarafı çerçeve ve kitaplığı olan React, Angular ve Vue ile ilgili veriler, aşağıdaki verileri gösterir:
- MDN'nin İlk Yıllık Web Geliştiricisi ve Tasarımcı Anketi'ne katılan katılımcıların% 72'si bu çerçeve ve kitaplıklardan en az birini kullanıyor.
- HTTP Arşivi tarafından analiz edilen ilk 5 milyon URL içinde 320.000'den fazla site bu çerçeve ve kitaplıklardan en az birini kullanıyor.
- Harcanan süreye göre gruplandırıldığında ilk 100 URL'den 30'u bu çerçeveler ve kitaplıklardan en az birini kullanmaktadır. (Dahili veriler üzerinde araştırma yapıldı.)
Bu, daha iyi açık kaynak araçların doğrudan daha iyi bir web ile sonuçlanabileceği anlamına gelir. İşte bu yüzden Chrome mühendisleri doğrudan harici çerçeve ve kitaplık yazarlarıyla çalışmaya başladılar.
Web çerçevelerine yapılan katkılar
Web sayfalarını oluşturmak ve yapılandırmak için yaygın olarak kullanılan çerçeveler iki kategoriye ayrılır:
- Uygulamanın görünüm katmanı üzerinde kontrol sağlayan (örneğin, bir bileşen modeliyle) Preact, React veya Vue gibi kullanıcı arayüzü çerçeveleri (veya kitaplıklar).
- Next.js, Nuxt.js ve Gatsby gibi web çerçeveleri. Bu çerçeveler, sunucu tarafı oluşturma gibi özenli özellikleri yerleşik olarak içeren uçtan uca bir sistem sunar. Bu çerçeveler genellikle görünüm katmanı için bir kullanıcı arayüzü çerçevesinden veya kitaplıktan yararlanır.
Geliştiriciler çerçeveleri kullanmamayı tercih edebilir ancak görünüm katmanı kitaplığı, yönlendirici, stil sistemi, sunucu oluşturucu vb. bir araya getirerek genellikle kendi çerçeve türünü oluştururlar. Web çerçeveleri özenli olsa da varsayılan olarak bu endişelerin çoğunu halleder.
Bu yayının geri kalanında, Chrome ekibinin katkıları da dahil olmak üzere kısa süre önce farklı çerçevelerde ve araçlarda gerçekleşen birçok iyileştirme vurgulanıyor.
Angular
Angular ekibi, çerçevenin 8. sürümünde çeşitli iyileştirmeler yaptı:
- Yeni tarayıcılarda gereksiz çoklu dolguları en aza indirmek için varsayılan olarak diferansiyel yükleme.
- Geç yüklenen rotalar için standart dinamik içe aktarma söz dizimi desteği.
- İşlemleri ana iş parçacığından ayrı bir arka plan iş parçacığında çalıştırmak için web çalışanı desteği.
- Angular'ın daha iyi yeniden derleme performansı ve paket boyutlarının azaltılmasını sağlayan yeni oluşturma motoru Ivy, mevcut projeler için önizleme modunda kullanılabilir.
Bu iyileştirmeler hakkında daha fazla bilgiyi "Angular Sürümü 8" bölümünde bulabilirsiniz. Chrome ekibi, önümüzdeki yıl daha fazla özellik çıktıkça onlarla yakın bir şekilde çalışmayı sabırsızlıkla beklemektedir.
Next.js
Next.js, React'ı görünüm katmanı olarak kullanan bir web çerçevesidir. Next.js, birçok geliştiricinin istemci tarafı bir çerçeveden beklediği kullanıcı arayüzü bileşen modeline ek olarak bir dizi yerleşik varsayılan özellik sağlar:
- Varsayılan kod bölmeyle yönlendirme
- Derleme ve paketleme (Babel ve webpack kullanılarak)
- Sunucu tarafında oluşturma
- Sayfa başına veri getirme mekanizmaları
- Kapsüllü stil (styled-jsx ile)
Next.js, daha küçük paket boyutları için optimizasyon yapar ve Chrome ekibi, performansı daha da artırmaya yardımcı olabileceğimiz alanları belirlemeye yardımcı olur. Yorum isteklerini (RFC'ler) ve pull isteklerini (PR'ler) görüntüleyerek her biri hakkında daha fazla bilgi edinebilirsiniz:
- Birden çok rota (RFC, PR) üzerinden getirilen yinelenen kod miktarını azaltarak daha ayrıntılı paketler yayınlayan iyileştirilmiş bir web paketi parçalama stratejisidir.
- Next.js uygulamalarındaki toplam JavaScript miktarını, kod değişikliği olmadan (RFC, PR) %20'ye kadar azaltabilen modül/modülsüz kalıbı ile diferansiyel yükleme.
- User Timing API'den (PR) yararlanan iyileştirilmiş performans metriği izleme.
Ayrıca Next.js'nin kullanıcı ve geliştirici deneyimini iyileştirecek diğer özellikleri de keşfediyoruz. Örneğin:
- Bileşenlerin progresif veya kısmen sıvı alımının kilidini açmak için eşzamanlı modu etkinleştirme.
- Daha iyi hatalar ve uyarılar göstermek için tüm kaynak dosyaları ve oluşturulan öğeleri analiz eden, web paketi tabanlı bir uygunluk sistemi (RFC).
Nuxt.js
Nuxt.js, ayrıntılı bir kurulum sunmak için Vue.js'yi farklı kitaplıklarla birleştiren bir web çerçevesidir. Next.js'ye benzer şekilde, kullanıma hazır birçok özellik içerir:
- Varsayılan kod bölmeyle yönlendirme
- Derleme ve paketleme (Babel ve webpack kullanılarak)
- Sunucu tarafında oluşturma
- Her sayfa için eşzamansız veri getirme
- Varsayılan veri deposu (Vuex)
Doğrudan farklı araçların performansını artırmak için çalışmanın yanı sıra, daha fazla açık kaynak çerçeve ve kitaplıklara maddi destek sağlamak için çerçeve fonunu da genişlettik. Nuxt.js'ye son desteğimizle, daha akıllı sunucu oluşturma ve görüntü optimizasyonları gibi birkaç özelliğin yakın gelecekte kullanıma sunulması planlanıyor.
Babel
Ayrıca, söz konusu çerçevelerin hemen hepsinde (Babel) önemli bir aracın performansını iyileştirme konusunda da ilerleme kaydettik.
Babel, daha yeni söz dizimi içeren kodları farklı tarayıcıların anlayabileceği kodda derler.
Seçilen tüm ortamlar için gereken yeterli çoklu doldurmayı sağlamak amacıyla, farklı tarayıcı hedeflerinin belirtilebildiği modern tarayıcıları hedeflemek için @babel/preset-env kullanılması yaygın hale gelmiştir. Hedefleri belirlemenin bir yolu, ES Modüllerini destekleyen tüm tarayıcıları hedeflemek için <script
type="module"> kullanmaktır.
Bu durumu optimize etmek için yepyeni bir hazır ayarı kullanıma sunduk:
@babel/preset-modules. preset-modules, tarayıcı hatalarından kaçınmak için modern söz dizimini eski söz dizimine dönüştürmek yerine, mümkün olan en yakın bozuk olmayan modern söz dizimine dönüştürerek her bir hatayı düzeltir. Bu, çoğu tarayıcıya neredeyse değiştirilmemiş olarak sunulabilen modern bir kodla sonuçlanır.
Yakında preset-env uygulamasına dahil edileceğinden, preset-env kullanan geliştiriciler de bu optimizasyonlardan herhangi bir işlem yapmak zorunda kalmadan yararlanabilecek.
Sonraki adım
Daha iyi deneyimler sunmak için açık kaynak çerçeveler ve kitaplıklarla yakından çalışmak, Chrome ekibinin hem kullanıcılar hem de geliştiriciler için temelde neyin önemli olduğunu anlamasına yardımcı olur.
Bir web çerçevesi, kullanıcı arayüzü kitaplığı veya herhangi bir türde web aracı (paketleyici, derleyici, linter) üzerinde çalışıyorsanız çerçeve fonu için başvurun!