Web çerçevesi ekosistemini geliştirmek

Chrome, web çerçevesi ekosistemine aktif olarak katkıda bulunur ve Chrome Dev Summit 2019’daki konuşmamız, geçen yıl üzerinde çalıştıklarımızı kapsar.

Ek ayrıntılar ve kaynaklarla birlikte konuşmanın genişletilmiş bir özeti için okumaya devam edin.

Web’i nasıl daha iyi hale getiririz? #

Chrome ekibindeki herkesin amacı, web’i daha iyi hale getirmektir. Tarayıcı API’lerini ve Chrome’a ​​güç veren temel JavaScript ve WebAssembly motoru olan V8’i geliştirmeye çalışıyoruz, böylece geliştiriciler harika web sayfaları oluşturmalarına yardımcı olacak özelliklerle donatılıyor. Ayrıca, açık kaynaklı araçlara birçok yönden katkıda bulunarak bugün halihazırda üretimde olan web sitelerini iyileştirmeye çalışıyoruz.

Çoğu web geliştiricisi mümkün olduğunda açık kaynak araçlarına güvenirler ve tamamen özel altyapı oluşturmamayı tercih ederler. İstemci tarafı JavaScript çerçeveleri ve kullanıcı arabirimi 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ığıyla ilgili veriler, Tepki, AçısalVe Vuegösterir ki:

• katılımcıların yüzde 72’si MDN’nin İlk Yıllık Web Geliştiricisi ve Tasarımcısı Anketi bu çerçevelerden ve kitaplıklardan en az birini kullanın.
• Üzerinde 320.000 site HTTP Arşivi tarafından analiz edilen ilk 5 milyon URL’de bu çerçevelerden ve kitaplıklardan en az biri kullanılıyor.
• Harcanan zamana göre gruplandırıldığında, ilk 100 URL’den 30’u bu çerçevelerden ve kitaplıklardan en az birini kullanıyor. (Dahili veriler üzerinde araştırma yapılmıştır.)

Bu şu demek daha iyi açık kaynak araçları doğrudan daha iyi bir web ile sonuçlanabilir Chrome mühendislerinin doğrudan harici çerçeve ve kitaplık yazarlarıyla çalışmaya başlamasının nedeni budur.

Web çerçevelerine 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:

• kullanıcı arabirimi çerçeveleri (veya kitaplıklar), örneğin bir uygulamanın görünüm katmanı üzerinde kontrol sağlayan (örneğin bir bileşen modeli aracılığıyla) Preact, React veya Vue.
• Web çerçevelerisunucu tarafı işleme gibi yerleşik yerleşik özelliklere sahip uçtan uca bir sistem sağlayan Next.js, Nuxt.js ve Gatsby gibi. Bu çerçeveler, genellikle görünüm katmanı için bir UI çerçevesinden veya kitaplığından yararlanır.

Geliştiriciler çerçeveleri kullanmamayı seçebilirler 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. Fikir sahibi olmasına rağmen, web çerçeveleri bu endişelerin birçoğunu varsayılan olarak halleder.

Bu gönderinin geri kalanında, Chrome ekibinin katkıları da dahil olmak üzere, yakın zamanda farklı çerçeveler ve araçlarda gerçekleştirilen birçok iyileştirme vurgulanmaktadır.

Açısal #

Angular ekibi, çerçevenin 8. sürümüne bir dizi iyileştirme gönderdi:

• Yavaş yükleme yolları için standart dinamik içe aktarma sözdizimi desteği.
• Web çalışanı desteği işlemleri ana iş parçacığından ayrı bir arka plan iş parçacığında çalıştırmak için.
• SarmaşıkAngular’ın daha iyi yeniden derleme performansı ve paket boyutlarında azalma sağlayan yeni işleme motoru şu sürümlerde mevcuttur: Önizleme modu Mevcut projeler için.

Bu iyileştirmeler hakkında daha fazla bilgiyi şu adresten edinebilirsiniz: “Angular Sürüm 8” ve Chrome ekibi, gelecek yıl daha fazla özellik eklendikçe onlarla yakın bir şekilde çalışmayı dört gözle bekliyor.

Sonraki.js #

Sonraki.js React’i bir görünüm katmanı olarak kullanan bir web çerçevesidir. Pek çok geliştiricinin istemci tarafı bir çerçeveden beklediği bir UI bileşen modeline ek olarak, Next.js bir dizi yerleşik varsayılan özellik sağlar:

• Varsayılan kod bölmeli yönlendirme
• Derleme ve paketleme (kullanarak Babil Ve web paketi)
• Sunucu tarafı oluşturma
• Sayfa başına düzeyde veri getirme mekanizmaları
• Kapsüllenmiş stil (ile tarz-jsx)

Next.js, azaltılmış paket boyutları için optimize eder ve Chrome ekibi, performansı daha da artırmaya yardımcı olabileceğimiz alanları belirlememize yardımcı oldu. Yorum isteklerini (RFC’ler) ve çekme isteklerini (PR’ler) görüntüleyerek her biri hakkında daha fazla bilgi edinebilirsiniz:

1. Birden çok yoldan getirilen yinelenen kod miktarını azaltan, daha ayrıntılı paketler yayan, geliştirilmiş bir web paketi parçalama stratejisi (RFC, halkla ilişkiler).
2. Next.js uygulamalarındaki toplam JavaScript miktarını kod değişikliği olmadan %20’ye kadar azaltabilen modül/nomodül modeliyle farklı yükleme (RFC, halkla ilişkiler).
3. Kullanıcı Zamanlama API’sini kullanan iyileştirilmiş performans ölçümü izleme (halkla ilişkiler).

Ayrıca, Next.js’yi kullanmanın hem kullanıcı hem de geliştirici deneyimini geliştirmek için aşağıdakiler gibi diğer özellikleri de araştırıyoruz:

• Bileşenlerin aşamalı veya kısmi hidrasyonunun kilidini açmak için eşzamanlı modu etkinleştirme.
• Hataları ve uyarıları daha iyi ortaya çıkarmak için tüm kaynak dosyaları ve oluşturulan varlıkları analiz eden web paketi tabanlı bir uyumluluk sistemi (RFC).

Nuxt.js #

Nuxt.js düşünülmüş bir kurulum sağlamak için Vue.js’yi farklı kitaplıklarla birleştiren bir web çerçevesidir. Next.js’ye benzer şekilde, kullanıma hazır pek çok özelliği içerir:

• Varsayılan kod bölmeli yönlendirme
• Derleme ve paketleme (kullanarak Babil Ve web paketi)
• Sunucu tarafı oluşturma
• Her sayfa için zaman uyumsuz veri alma
• Varsayılan veri deposu (Vuex)

Doğrudan farklı araçların performansını iyileştirmek için çalışmanın yanı sıra, çerçeve fonu daha açık kaynaklı çerçevelere ve kitaplıklara parasal destek sağlamak. Bizimle son destek Nuxt.js’ye, daha akıllı sunucu oluşturma ve görüntü optimizasyonları dahil olmak üzere birkaç özelliğin yakın gelecekte kullanıma sunulması planlanıyor.

Babil #

Bahsedilen çerçevelerin neredeyse tamamında önemli bir temel aracın performansını iyileştirme konusunda da ilerleme kaydettik–Babil.

Babel, daha yeni sözdizimi içeren kodu farklı tarayıcıların anlayabileceği şekilde derler. kullanımı yaygınlaştı @babel/preset-env seçilen tüm ortamlar için gereken yeterli çoklu doldurmayı sağlamak üzere farklı tarayıcı hedeflerinin belirlenebildiği modern tarayıcıları hedeflemek. Hedefleri belirlemenin bir yolu, &LTscript type="module"> tüm tarayıcıları hedeflemek için ES Modüllerini destekleyin.