Chrome ekibi olarak kullanıcı deneyimine ve gelişen web ekosistemine önem veriyoruz. Kullanıcıların yalnızca statik dokümanlarla değil, aynı zamanda zengin ve etkileşimli uygulamalar kullanırken de web'de mümkün olan en iyi deneyimi yaşamalarını istiyoruz.
Açık kaynak araçlar ve çerçeveler, geliştiricilerin web için modern uygulamalar geliştirmelerini sağlarken iyi geliştirici deneyimlerini desteklemede de büyük rol oynar. Bu çerçeveler ve araçlar, her büyüklükten şirkete ve web için içerik oluşturan bireylere güç verir.
Çerçevelerin performans, erişilebilirlik, güvenlik ve mobil kullanıma hazırlık gibi temel kalite alanlarında geliştiricilere yardımcı olmada da büyük rol oynayabileceğine inanıyoruz. Çerçeve, her geliştiriciden ve site sahibinden bu alanlarda uzman olmalarını istemek ve sürekli değişen en iyi uygulamaları takip etmek yerine bunları yerleşik çözümlerle destekleyebilir. Bu da geliştiricileri güçlendirir ve ürün özellikleri oluşturmaya odaklanmalarını sağlar.
Özetle, yüksek bir kullanıcı deneyimi kalitesi standardının web için geliştirme yapmanın yan etkisi haline gelmesi gibi bir vizyonumuz var.
Aurora: Chrome ile açık kaynak web çerçeveleri ve araçları arasındaki ortak çalışma
Yaklaşık iki yıldır Next.js, Nuxt ve Angular gibi en popüler çerçevelerin bazılarıyla çalışarak web performansını iyileştirmeye çalışıyoruz. Ayrıca Vue, ESLint ve webpack gibi popüler araç ve kitaplıkları da finanse ettik. Bugün bu girişimin adını Aurora olarak değiştiriyoruz.
Kuzey ışıkları, gökyüzünde parıldayan doğal ışık görüntüsüdür. Çerçevelerle oluşturulan kullanıcı deneyimlerinin pırıl pırıl parlamasına yardımcı olmaya çalışırken bu adın uygun bir seçim olduğunu düşündük.
Önümüzdeki aylarda Aurora hakkında çok daha fazla ayrıntı paylaşacağız. Bu çalışma, Chrome mühendislerinden (dahili olarak kod adı verilen WebSDK) ve çerçeve yazarlarından oluşan küçük bir ekip tarafından gerçekleştirilen bir ortak çalışmadır. Amacımız, oluşturduğunuz tarayıcıdan bağımsız olarak üretim uygulamaları için mümkün olan en iyi kullanıcı deneyimini sunmaktır.
Stratejimiz nedir?
Google Arama, Haritalar, Görsel Arama, Google Fotoğraflar gibi büyük ölçekli web uygulamaları oluşturup bunları sürdürmek için çerçeveleri ve araçları kullanırken Google'da çok şey öğrendik. Çerçevelerin, güçlü varsayılanlar ve fikirli araçlar sağlayarak tahmin edilebilir uygulama kalitesinde nasıl önemli bir rol oynayabileceğini keşfettik.
Çerçeveler tüm sistemi (istemci, sunucu, geliştirme ve üretim ortamları) kapsadığından hem DX hem de kullanıcı deneyimini etkileme konusunda benzersiz bir bakış açısına sahiptir ve derleyici, paketleyici, linter gibi araçları entegre eder.
Çözümler bu çerçeveye derlendiğinde, geliştirici ekipleri bu çözümleri kullanabilir ve zamanlarını ürün için en önemli konuya, yani kullanıcılar için harika özellikler sunmaya odaklanabilir.
Yığının her katmanında bulunan araçları ve Next.js, Nuxt ve Angular CLI gibi çerçeveleri geliştirmek için çalışırken bir uygulamanın yaşam döngüsünün her adımını yönetir. Bu nedenle, temel kullanıcı arayüzü çerçevesi ekosistemindeki en geniş uygulama türü React olduğu için optimizasyonlarımızın çoğu, ekosistemin geri kalanına uygulanmadan önce Next.js'de kendini kanıtlayarak başladı.
Aurora, popüler teknoloji yığınlarının sağ katmanına çözümler sunarak geniş ölçekte başarıyı destekliyor. Tarayıcılar ve çerçeveler arasındaki boşluğu kapatarak web platformunu geliştirmenin yüksek kalitede bir yan etkisi olarak işlev görürken web platformunu iyileştirmek için bir geri bildirim döngüsü işlevi görür.
İş sürecimiz nedir?
Aurora'nın tarayıcılar ile geliştirici ekosistemi arasında nasıl köprü oluşturduğuyla ilgili ilkelerimiz şunlardır: tevazu, merak, bilimsel sorgulama ve pragmatizm. İyileştirmeler konusunda çerçeve yazarlarıyla birlikte çalışıyor, toplulukla işbirliği yapıyor ve herhangi bir değişikliği uygulamaya koymadan önce gerekli özeni gösteriyoruz.
Üzerinde çalıştığımız yeni özellikler için attığımız adımları özetlemek gerekirse:
- Temsili uygulamaları kullanarak popüler bir yığında kullanıcı deneyimi sorununu tanımlayın.
- "Güçlü varsayılanlar"ın vurgulandığı, bu sorunu ele alan prototip çözümleri .
- Uyarlanabilir olduğundan emin olmak için özelliği başka bir çerçeve grubuyla doğrulayın.
- Birkaç üretim uygulamasında denemeler yaparak (genellikle performans için laboratuvar testleriyle) özelliği doğrulayın.
- RFC sürecini kullanarak ve topluluk geri bildirimlerini dikkate alarak Drive tasarımı yapın.
- Özelliği, popüler bir yığına (genellikle bir bayrağın arkasına) yerleştirin.
- Kaliteyi ve geliştirici iş akışı entegrasyonunu değerlendirmek için bu özelliği temsili bir üretim uygulamasında etkinleştirin.
- Özelliği kullanan veya yükseltilen temsili üretim uygulamalarındaki metrikleri izleyerek performans artışını ölçün.
- Geçiş yapan tüm kullanıcılar için bu özelliği yığında varsayılan olarak etkinleştirin.
- Kanıtlandıktan sonra, özelliği kullanıma sunmak için ek çerçevelerle çalışın.
- Geri bildirim döngüsüyle web platformundaki boşlukları tespit edin.
- Sonraki sorulara geçin.
Temel araçlar ve eklentiler (web paketi, Babel, ESLint, TypeScript vb.) birçok çerçevede paylaşılır. Bu, tek bir çerçeve yığınına katkıda bulunurken bile dalga efektleri oluşturulmasına yardımcı olur.
Ayrıca Chrome Framework Fonu, fonlu açık kaynak araçları ve kitaplıkları destekler. Yukarıdaki çalışmalarımızla ilgili sorunlar ve çözüm katmanlarının, diğer çerçeve ve araçlara çevrilmesi için yeterli düzeyde örtüştüğünü umsak da daha fazlasını yapabileceğimizi biliyoruz. Bu amaçla, geliştiricilerin başarılı olmasına yardımcı olan kitaplık ve çerçevelerin gelişmesini sağlamak için üzerimize düşeni yapmak istiyoruz. Bu nedenle Chrome Framework Fonu'na yatırım yapmaya devam edeceğiz. Bugüne kadar Webpack 5 ve Nuxt'a yönelik çalışmaları, performansı ve ESLint'i iyileştirmeyi destekliyordu.
Çalışmalarımız şimdiye kadar hangi çalışmaların kilidini açtı?
Çalışmalarımız resimler, JS, CSS ve yazı tipleri gibi kaynaklar için temel optimizasyonlara odaklanmıştır. Birden fazla çerçevenin varsayılan değerlerini iyileştirmek için çeşitli optimizasyonlar gerçekleştirdik. Örneğin:
- Next.js'de resim yüklemeyle ilgili en iyi uygulamaları içeren ve ardından aynı kaynakta Nuxt ile yapılan ortak çalışmayı içeren bir Resim bileşeni. Bu bileşenin kullanılması, boyama süreleri ve düzen kaymasında önemli iyileştirmeler sağladı (örnek: nextjs.org/give adresindeki Largest Contentful Paint'te% 57 ve Cumulative Layout Shift'te% 100 azalma).
- Derleme sırasında Web Yazı Tipi bildirimleri için CSS'yi otomatik olarak satır içine alma. Bu özellik, Angular (Google Fonts) ve Next.js'ye (Google Fonts ve Adobe Fonts) girerek Largest Contentful Paint ve First Contentful Paint (örnek) için önemli iyileştirmeler sağladı.
- Boyama sürelerini azaltmak için kritik CSS'leri hem Angular hem de Next.js'de Ölçütler kullanarak satır içine alın. Bu özellik, yazı tipi CSS satır içi özelliğiyle birlikte kullanıldığında klasik, büyük ölçekli bir Angular uygulamasındaki Lighthouse performans puanlarında 20-30 puanlık iyileşmeyle sonuçlandı.
- Next.js'de, derleme sırasında çerçeveye özgü yaygın sorunları yakalamayı kolaylaştırmak için özel bir eklenti ve paylaşılabilir yapılandırma içeren, kullanıma hazır ESLint desteği sayesinde daha tahmin edilebilir yükleme performansı sunulur.
- Web verileri ve diğer özel metrikler aracılığıyla sayfa performansıyla ilgili daha kolay analiz sağlamak için Create React App ve Next.js'de yerleşik bir performans değiştiriciye yer verildi.
- Next.js ve Gatsby'de kullanıma sunulan ayrıntılı parçalama, paket boyutlarının %30 ila 70 oranında küçülmesini ve önbelleğe alma performansını iyileştirdi. Bu seçenek, Webpack 5'te varsayılan olarak ayarlandı.
- Next.js ekibiyle işbirliği yaparak, modern tarayıcılarda paket boyutunu iyileştirmek amacıyla eski tarayıcılar için ayrı bir polyfill parçası.
Bu özelliklerin her biri varsayılan olarak etkinleştirilecek şekilde otomatikleştirilmiştir veya yalnızca basit bir etkinleştirme işlemi gerektirir. Bu, geliştiricilerin iş akışlarını karmaşık hale getirmeden faydalarını kolayca elde etmelerini sağlamak için çok önemlidir.
2021'de neler yapmayı planlıyoruz?
Bu yılın geri kalanında, çerçeve yığınlarının kullanıcı deneyimini iyileştirmesine ve Önemli Web Verileri gibi metriklerde ne kadar iyi performans sergilemesine yardımcı olmaya odaklanacağız. Bu çalışma şunları içerecektir:
- En iyi uygulamaları zorunlu kılma uygunluğu. Daha fazla bilgi edinmek için blog yayınına göz atın.
- Resimleri, Yazı Tiplerini ve Kritik CSS'yi optimize etmek için ortak çalışmalarımızı geliştirerek ilk yükleme performansını optimize ediyoruz.
- Bir Komut Dosyası bileşeni üzerindeki çalışma temelimizi geliştirerek ve 3P'lerin en iyi şekilde nasıl sıralanacağına ve sıralanacağına dair derin araştırmalar gerçekleştirerek minimum performans etkisine sahip üçüncü taraf komut dosyalarını (3P'ler) yükleme.
- Geniş ölçekte JavaScript performansı (ör. Next.js'de React Sunucu Bileşenlerinin desteklenmesi).
Ekibimiz, RFC'ler hakkında daha düzenli bilgiler yayınlamayı ve bu fikirlere yönelik tasarım belgeleri sunmayı amaçlayacaktır. Böylece, bunları takip etmek isteyen her çerçeve veya geliştirici bunu yapabilir.
Sonuç
Aurora ekibi (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) Nuxtjs topluluğunun açık kaynak ve kullanıcı deneyimini iyileştirmeye devam edilmesiyle birlikte, Nuxtjs topluluğu, Etkileşimimizi zamanla daha da fazla çerçeveyi ve aracı kapsayacak şekilde genişleteceğiz. Ekibimizin önümüzdeki yıl yazacağı diğer blog yayınları, konuşmalar ve RFC'ler için bu sayfayı takip edin :)