Chrome daha iyi bir web için çalışmak üzere açık kaynak çerçevelerle birlikte çalışıyor
Chrome, web çerçevesi ekosistemine aktif olarak katkıda bulunur ve Chrome Dev Summit'teki konuşmamız 2019 yılı, geçen yıl neler yaptığımızı anlatıyor.
Konuşmanın ek ayrıntılar ve kaynaklarla birlikte daha uzun bir özetini görmek için okumaya devam edin.
Web'i nasıl daha iyi hale getirebiliriz?
Chrome ekibindeki herkesin hedefi web'i daha iyi hale getirmektir. Tarayıcı API'lerini iyileştirmek için çalışıyoruz V8 (Chrome'u destekleyen temel JavaScript ve WebAssembly motoru), böylece geliştiricilerin yeni web sayfaları oluşturmalarına yardımcı olacak özelliklerle donatılmıştır. Ayrıca, Google'da faaliyet gösteren ve açık kaynaklı araçlara birçok biçimde katkıda bulunarak şu anda üretimde olduğunu görüyoruz.
Web'in büyük bir kısmı geliştiriciler Mümkün olduğu her durumda açık kaynaklı araçlardan yararlanır ve tamamen özel geliştirmenin harika bir yoludur. İstemci tarafı JavaScript çerçeveleri ve kullanıcı arayüzü kitaplıkları, açık kaynak kullanımını teşvik edersiniz. En popüler üç istemci tarafı çerçeve ve kitaplığıyla ilgili veriler, React, Angular ve Vue, programları şu bilgileri sağlar:
- Katılımcıların% 72’si MDN'nin İlk Yıllık Web Geliştiricisi ve Tasarımcı Anketi bu çerçevelerden ve kitaplıklardan en az birini kullanmanız gerekir.
- Şundan fazla: 320.000 site: HTTP Arşivi tarafından analiz edilen ilk 5 milyon URL, bu çerçeve ve kitaplıklardan en az birini kullanmaktadır.
- Harcanan zamana göre gruplandırıldığında, en iyi performans gösteren 100 URL'den 30'u bu çerçevelerden en az birini kullanıyor ve kitaplıklar. (Araştırmalar dahili veriler üzerinde yapılmıştır.)
Bu da daha iyi açık kaynaklı 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 kütüphane yazarlarıyla çalışmaya başladı.
Web çerçevelerine katkı
Web sayfalarını oluşturmak ve yapılandırmak için yaygın olarak kullanılan çerçeveler iki kategoriye ayrılır:
- Kontrol sağlayan Preact, React veya Vue gibi kullanıcı arayüzü çerçeveleri (veya kitaplıkları) uygulamanın görünüm katmanı üzerinden (örneğin, bir bileşen modeli aracılığıyla) seçebilirsiniz.
- Uçtan uca sistem sağlayan Next.js, Nuxt.js ve Gatsby gibi web çerçeveleri yerleşik olarak bulunan, sunucu tarafı oluşturma gibi ayrıntılı özelliklerle donatılmıştır. Bu çerçeveler genellikle görünüm katmanı için bir kullanıcı arayüzü çerçevesinden veya kitaplığından faydalanmak.
Geliştiriciler çerçeveleri değil, bir görünüm katmanı kitaplığı, yönlendirici ve stil sistemi, sunucu oluşturucu ve benzeri öğeler için, genellikle kendi türlerini oluşturup bahsedeceğim. Web çerçeveleri, üzerinde düşünülmüş olsa da bu endişelerin birçoğunu varsayılan olarak halleder.
Bu gönderinin geri kalanında, son zamanlarda farklı çerçevelerde yapılan birçok iyileştirme vurgulanıyor. ve çeşitli araçlar hakkında daha fazla bilgi edineceksiniz.
Angular
Angular ekibi, çerçevenin 8. sürümünde birçok iyileştirme gerçekleştirdi:
- Farklı yükleme ölçütü gereksiz çoklu dolguları en aza indirmek için varsayılan olarak kullanılır.
- Geç yükleme 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.
- Ivy, Angular'ın yeni albümü Daha iyi derleme performansı ve paket sayısında azalma sağlayan oluşturma motoru önizleme modunda kullanılabilen sağlayabilir.
Bu iyileştirmeler hakkında daha fazla bilgiyi "Angular Sürümü 8" Ayrıca, Chrome ekibi de önümüzdeki yıl daha fazla özellik sayesinde onlarla yakın bir şekilde çalışmayı arazi.
Next.js
Next.js, React'i görüntüleme katmanı olarak kullanan bir web çerçevesidir. Ek olarak, Birçok geliştiricinin istemci taraflı çerçeveden beklediği kullanıcı arayüzü bileşeni modelidir. Next.js, yerleşik varsayılan özelliklerin sayısı:
- Varsayılan kod bölmeyle yönlendirme
- Derleme ve paketleme (Babel ve web paketi)
- Sunucu tarafı 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ı olur. Her biri hakkında daha fazla bilgi edinmek için isteklerini görüntüleyebilirsiniz aşağıdaki adımları izleyin:
- Daha ayrıntılı paketler yayınlayan ve birden fazla rota üzerinden getirilen yinelenen kod miktarı (RFC, PR).
- modül/modülsüz desen Bu da Next.js uygulamalarındaki toplam JavaScript miktarını kod kullanmadan% 20'ye kadar azaltabilir (RFC, PR).
- User Timing API'yi kullanan iyileştirilmiş performans metriği izleme (PR).
Ayrıca, Google'ın çevrimiçi özelliklerini kullanarak hem kullanıcı hem de geliştirici deneyimini iyileştirmek için örneğin, Next.js:
- Bileşenlerin aşamalı veya kısmi hidrasyonunun kilidini açmak için eşzamanlı modu etkinleştirme.
- Tüm kaynak dosyaları ve oluşturulan öğeleri analiz eden, web paketi tabanlı bir uygunluk sistemi daha iyi hatalar ve uyarılar ortaya çıkarır (RFC).
Nuxt.js
Nuxt.js, Vue.js'yi farklı kitaplıklarla birleştiren bir web çerçevesidir. bu yöntem üzerine düşünmeli. Next.js'ye benzer şekilde, birçok kullanıma hazır özellik içerir:
- Varsayılan kod bölmeyle yönlendirme
- Derleme ve paketleme (Babel ve web paketi)
- Sunucu tarafı 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 kaynağa mali destek sağlamak için çerçeve fonu çerçeveleri ve kitaplıkları kullanın. En son desteği Nuxt.js için daha akıllı sunucu işlemesi ve görüntü kalitesi gibi özelliklerin yakın gelecekte kullanıma sunulması planlanıyor. optimize edebilirsiniz.
Babel
Ayrıca, neredeyse tüm sektörlerde temel araçların performansını geliştirmede de ilerleme kaydettik. yani Babel'i de kabul ediyoruz.
Babel, daha yeni söz dizimini içeren kodları farklı tarayıcıların anlayabileceği şekilde derler.
Hedeflemek için @babel/preset-env kullanımı yaygın hale geldi
yeterli çoklu dolgu sağlamak için farklı tarayıcı hedeflerinin belirtilebileceği modern tarayıcılar
için gerekli değildir. Hedef belirlemenin bir yolu, İspanyolcayı destekleyen tüm tarayıcıları hedeflemek için <script
type="module"> kodunu kullanmaktır
Modüller.
Bu durumu optimize etmek için yepyeni bir hazır ayarı kullanıma sunduk.
@babel/preset-modules adresine gidin. Modern söz dizimini dönüştürmek yerine
tarayıcı hatalarını önlemek amacıyla eski söz dizimine göre preset-modules,
mümkün olan en yakın kesintisiz modern söz dizimi. Bu sayede, hemen hemen teslim edilebilecek modern kodlarla
değiştirilmemiş olarak gösterilir.
Halihazırda preset-env kullanan geliştiriciler de gerek kalmadan bu optimizasyonlardan yararlanabilirler.
preset-env bölümüne de dahil edileceğinden herhangi bir işlem yapmanız gerekmez.
Sırada ne var?
Daha iyi deneyimler sağlamak için açık kaynak çerçeveleri ve kitaplıklarla yakın işbirliği içinde çalışmak Chrome ekibi, hem kullanıcılar hem de geliştiriciler için nelerin temelde önemli olduğunu anlar.
Bir web çerçevesi, kullanıcı arayüzü kitaplığı veya herhangi bir web aracı (paketleyici, derleyici, linter) üzerinde çalışıyorsanız çerçeve fonu için başvurun.