Chrome, daha iyi bir web için açık kaynaklı çerçevelerle işbirliği yapıyor
Chrome, web çerçevesi ekosistemine aktif olarak katkıda bulunmaktadır. Chrome Dev Summit 2019'daki konuşmamızda, geçen yıl üzerinde çalıştığımız konuları ele aldık.
Konuşmanın daha ayrıntılı bir özetini ve ek bilgileri/kaynakları öğrenmek için okumaya devam edin.
Web'i nasıl daha iyi hale getirebiliriz?
Chrome ekibindeki herkesin amacı, interneti daha iyi hale getirmektir. Geliştiricilerin harika web sayfaları oluşturmalarına yardımcı olacak özellikler sunmak için tarayıcı API'lerini ve Chrome'a güç veren temel JavaScript ve WebAssembly motoru olan V8'i iyileştirmeye çalışıyoruz. Ayrıca, açık kaynaklı araçlara çeşitli şekillerde katkıda bulunarak şu anda üretimde olan web sitelerini iyileştirmeye çalışıyoruz.
Çoğu web geliştiricisi mümkün olduğunda açık kaynak araçları kullanır ve tamamen özel bir altyapı oluşturmayı tercih etmez. İstemci taraflı JavaScript çerçeveleri ve kullanıcı arayüzü kitaplıkları, açık kaynak kullanımının giderek artan bir bölümünü oluşturuyor. En popüler üç istemci tarafı çerçevesi ve kitaplığı olan React, Angular ve Vue ile ilgili veriler şunları gösteriyor:
- MDN'nin İlk Yıllık Web Geliştirici ve Tasarımcı Anketi'ne katılanların% 72'si bu çerçevelerden ve kitaplıklardan en az birini kullanıyor.
- HTTP Archive tarafından analiz edilen ilk 5 milyon URL'deki 320.000'den fazla site,bu çerçevelerden ve kitaplıklardan en az birini kullanıyor.
- Harcanan süreye göre gruplandırıldığında, en iyi 100 URL'den 30'u bu çerçevelerden ve kitaplıklardan en az birini kullanıyor. (Araştırma, dahili veriler üzerinde yapılmıştır.)
Bu, daha iyi açık kaynak araçların doğrudan daha iyi bir web'e yol açabileceği anlamına gelir. Bu nedenle Chrome mühendisleri, harici çerçeve ve kitaplık yazarlarıyla doğrudan çalışmaya başladı.
Web çerçevelerine katkılar
Web sayfalarını oluşturmak ve yapılandırmak için en çok tercih edilen çerçeveler iki kategoriye ayrılır:
- Bir uygulamanın görünüm katmanı (örneğin, bir bileşen modeli aracılığıyla) üzerinde kontrol sağlayan 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ında oluşturma gibi belirli özelliklerin yerleşik olarak bulunduğu uçtan uca bir sistem sağlar. Bu çerçeveler genellikle görünüm katmanı için bir kullanıcı arayüzü çerçevesi veya kitaplığı kullanır.
Geliştiriciler, çerçeveleri kullanmamayı tercih edebilir ancak bir görünüm katmanı kitaplığı, yönlendirici, stil sistemi, sunucu oluşturucu vb. bir araya getirerek genellikle kendi çerçeve türlerini oluştururlar. Web çerçeveleri, belirli bir görüşe bağlı olsa da varsayılan olarak bu endişelerin çoğunu giderir.
Bu yayının geri kalanında, Chrome ekibinin katkıları da dahil olmak üzere, farklı çerçevelerde ve araçlarda yakın zamanda yapılan birçok iyileştirme vurgulanmaktadır.
Angular
Angular ekibi, framework'ün 8. sürümünde çeşitli iyileştirmeler yaptı:
- Daha yeni tarayıcılar için gereksiz polyfill'leri en aza indirmek amacıyla varsayılan olarak diferansiyel yükleme.
- Yolları geç yüklemek 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 yeni oluşturma motoru Ivy, mevcut projeler için önizleme modunda kullanılabilir. Ivy, daha iyi yeniden derleme performansı ve paket boyutlarında azalma sağlar.
Bu iyileştirmeler hakkında daha fazla bilgiyi "Angular'ın 8. sürümü" başlıklı makalede bulabilirsiniz. Chrome Ekibi, daha fazla özellik kullanıma sunuldukça önümüzdeki yıl boyunca Angular Ekibi ile yakın bir şekilde çalışmayı dört gözle bekliyor.
Next.js
Next.js, görünüm katmanı olarak React'i kullanan bir web çerçevesidir. Next.js, birçok geliştiricinin istemci tarafı çerçevesinden beklediği bir kullanıcı arayüzü bileşeni modelinin yanı sıra bir dizi yerleşik varsayılan özellik de sunar:
- Varsayılan kod bölme ile yönlendirme
- Derleme ve paketleme (Babel ve webpack kullanılarak)
- Sunucu taraflı oluşturma
- Verileri sayfa düzeyinde getirme mekanizmaları
- Kapsüllenmiş stil (styled-jsx ile)
Next.js, paket boyutlarını küçültmek için optimizasyon yapar. Chrome ekibi ise performansı daha da iyileştirebileceğimiz alanları belirlememize yardımcı oldu. Yorum isteklerini (RFC) ve çekme isteklerini (PR) görüntüleyerek her biri hakkında daha fazla bilgi edinebilirsiniz:
- Daha ayrıntılı paketler oluşturan, geliştirilmiş bir webpack parçalama stratejisi. Bu strateji, birden fazla rota üzerinden getirilen yinelenen kod miktarını azaltır ( RFC, PR).
- Next.js uygulamalarındaki toplam JavaScript miktarını kod değişikliği yapmadan% 20'ye kadar azaltabilen modüllü/modülsüz kalıbıyla farklı yükleme (RFC, PR).
- User Timing API'yi kullanan geliştirilmiş performans metriği izleme (PR).
Ayrıca, Next.js'in hem kullanıcı hem de geliştirici deneyimini iyileştirmek için başka özellikler de araştırıyoruz. Örneğin:
- Bileşenlerin aşamalı veya kısmi hydration işlemini etkinleştirmek için eşzamanlı modu etkinleştirme.
- Daha iyi hata ve uyarılar göstermek için tüm kaynak dosyaları ve oluşturulan öğeleri analiz eden, webpack tabanlı bir uygunluk sistemi (RFC).
Nuxt.js
Nuxt.js, Vue.js'yi farklı kitaplıklarla birleştirerek belirli bir kurulum sağlayan bir web çerçevesidir. Next.js'e benzer şekilde, kutudan çıktığı haliyle birçok özellik içerir:
- Varsayılan kod bölme ile yönlendirme
- Derleme ve paketleme (Babel ve webpack kullanılarak)
- Sunucu taraflı oluşturma
- Her sayfa için eşzamansız veri getirme
- Varsayılan veri deposu (Vuex)
Farklı araçların performansını iyileştirmek için doğrudan çalışmanın yanı sıra, daha fazla açık kaynaklı çerçeveye ve kitaplığa maddi destek sağlamak amacıyla çerçeve fonunu genişlettik. Kısa süre önce Nuxt.js'yi desteklemeye başladık. Bu kapsamda, akıllı sunucu tarafında oluşturma ve resim optimizasyonları gibi bazı özelliklerin yakın gelecekte kullanıma sunulması planlanıyor.
Babel
Ayrıca, belirtilen çerçevelerin neredeyse tamamında önemli bir temel aracın (Babel) performansını iyileştirme konusunda da ilerleme kaydettik.
Babel, daha yeni söz dizimi içeren kodu farklı tarayıcıların anlayabileceği bir koda derler.
@babel/preset-env'yi kullanarak modern tarayıcıları hedeflemek yaygın bir uygulama haline geldi. Bu sayede, seçilen tüm ortamlar için yeterli polifil sağlamak üzere farklı tarayıcı hedefleri belirtilebiliyor. Hedefleri belirtmenin 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. Tarayıcı hatalarını önlemek için modern söz dizimini eski söz dizimine dönüştürmek yerine, preset-modules, mümkün olan en yakın ve bozulmamış modern söz dizimine dönüştürerek her bir hatayı düzeltir. Bu sayede, çoğu tarayıcıya neredeyse değiştirilmeden sunulabilen modern bir kod elde edilir.
preset-env kullanan geliştiriciler de yakında preset-env'ya dahil edilecek bu optimizasyonlardan herhangi bir işlem yapmadan yararlanabilecek.
Sırada ne var?
Daha iyi deneyimler sunmak için açık kaynaklı çerçeveler ve kitaplıklarla yakın çalışmak, Chrome ekibinin hem kullanıcılar hem de geliştiriciler için temel olarak önemli olan şeyleri anlamasına yardımcı olur.
Web çerçevesi, kullanıcı arayüzü kitaplığı veya herhangi bir web aracı (paketleyici, derleyici, linter) üzerinde çalışıyorsanız çerçeve fonuna başvurun.