Chrome Ekibi olarak kullanıcı deneyimine ve gelişen bir web ekosistemine önem veriyoruz. Kullanıcıların web'de yalnızca statik dokümanlarla değil, zengin ve son derece etkileşimli uygulamalar kullanırken de mümkün olan en iyi deneyimi yaşamasını istiyoruz.
Açık kaynak araçlar ve çerçeveler, geliştiricilerin web için modern uygulamalar geliştirmesine olanak tanırken iyi geliştirici deneyimlerini de destekler. Bu çerçeveler ve araçlar, her ölçekten şirketin yanı sıra web için içerik üreten bireyleri güçlendirir.
Çerçevelerin, geliştiricilere performans, erişilebilirlik, güvenlik ve mobil cihazlara hazırlık gibi önemli kalite özelliklerinde yardımcı olma konusunda da büyük rol oynayabileceğine inanıyoruz. Çerçeve, her geliştirici ve site sahibinden bu alanlarda uzman olmasını ve sürekli değişen en iyi uygulamalara ayak uydurmasını istemek yerine, bunları yerleşik çözümlerle destekleyebilir. Bu sayede geliştiriciler, ürün özelliklerini geliştirmeye odaklanabilir.
Özetlemek gerekirse, kullanıcı deneyimi kalitesinin yüksek bir düzeye ulaşması, web için geliştirme yapmanın bir yan etkisi haline gelmelidir.
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çevelerden bazılarıyla birlikte çalışarak web performansını iyileştirmeye çalışıyoruz. Ayrıca Vue, ESLint ve webpack gibi popüler araçları ve kitaplıkları da destekledik. Bugün bu çalışmaya Aurora adını veriyoruz.
Kuzey ışıkları, gökyüzünde parıldayan doğal bir ışık gösterisidir. Çerçevelerle oluşturulan kullanıcı deneyimlerinin parlamasına yardımcı olmaya çalışıyoruz. Bu nedenle, bu adın uygun bir seçim olduğunu düşündük.
Önümüzdeki aylarda Aurora hakkında daha fazla bilgi paylaşacağız. Bu, küçük bir Chrome mühendisi ekibi (şirket içinde WebSDK kod adıyla bilinir) ile çerçeve yazarları arasındaki bir ortak çalışmadır. Amacımız, oluşturma işlemini yaptığınız 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'da Google Arama, Haritalar, Resim Arama, Google Fotoğraflar gibi büyük ölçekli web uygulamalarını oluşturmak ve sürdürmek için çerçeveler ve araçlar kullanırken çok şey öğrendik. Çerçevelerin, güçlü varsayılan değerler ve belirli bir bakış açısına sahip araçlar sağlayarak tahmin edilebilir uygulama kalitesinde nasıl önemli bir rol oynayabileceğini keşfettik.
Çerçeveler, hem DX'yi hem de UX'i etkilemek için benzersiz bir bakış açısına sahiptir. Çünkü sistem genelinde (istemci ve sunucu, geliştirme ve üretim ortamları) çalışır ve derleyici, paketleyici, lint gibi araçları entegre eder.
Çözümler çerçeveye yerleştirildiğinde geliştirici ekipleri bu çözümleri kullanabilir ve zamanlarını ürün için en önemli olana, yani kullanıcılara mükemmel özellikler sunmaya odaklayabilir.
Biz yığının her katmanında bulunan araçları iyileştirmeye çalışırken Next.js, Nuxt ve Angular CLI gibi çerçeveler, bir uygulamanın yaşam döngüsünün her adımını yönetir. Bu nedenle ve React'in temel kullanıcı arayüzü çerçevesi ekosisteminde en yaygın olarak kullanılması nedeniyle, optimizasyonlarımızın çoğu, ekosistemin geri kalanına yayılmadan önce Next.js'de kanıtlanmaya başlandı.
Aurora, popüler teknoloji yığınlarının doğru katmanına çözümler getirerek ölçekte başarıyı destekler. Tarayıcılar ile çerçeveler arasındaki boşluğu doldurarak web için geliştirme yapmanın yan etkisi olarak yüksek kaliteyi sağlar ve web platformunu iyileştirmek için bir geri bildirim döngüsü görevi görür.
Çalışma sürecimiz nasıl?
Aurora'nın tarayıcılar ile geliştirici ekosistemi arasında köprü kurması için benimsediğimiz ilkeler: alçakgönüllülük, merak, bilimsel sorgulama ve gerçekçilik. İyileştirmeler konusunda çerçeve yazarlarıyla birlikte çalışır, toplulukla iş birliği yapar ve herhangi bir değişiklik yapmadan önce gereken incelemeleri yaparız.
Üzerinde çalıştığımız yeni özellikler için uyguladığımız adımları özetlemek gerekirse:
- Temsil edici uygulamalar kullanarak popüler bir gruptaki kullanıcı deneyimi sorunlarını belirleyin.
- "Güçlü varsayılanlar"a vurgu yaparak bu sorunu gideren prototip çözümler.
- Özelliğin uyarlanabilir olduğundan emin olmak için başka bir çerçeve grubuyla doğrulayın.
- Genellikle performans için laboratuvar testiyle birkaç üretim uygulamasında deney yaparak özelliği doğrulayın.
- Topluluk geri bildirimlerini ele alarak RFC sürecini kullanarak tasarımı yönlendirin.
- Özelliği, genellikle bir işaretin arkasında bulunan popüler bir yığına yerleştirin.
- Kaliteyi ve geliştirici iş akışı entegrasyonunu değerlendirmek için özelliği temsili bir üretim uygulamasında etkinleştirin.
- Özelliği benimseyen veya yükseltme yapan temsili üretim uygulamalarındaki metrikleri izleyerek performans iyileştirmesini ölçün.
- Özelliği, yükseltme yapan tüm kullanıcıların yararlanabilmesi için grupta varsayılan olarak etkinleştirin.
- Bu yöntemin geçerliliği kanıtlandıktan sonra özelliği kullanıma sunmak için ek çerçevelerle çalışın.
- Geri bildirim döngüsü ile web platformundaki boşlukları tespit edin.
- Sonraki sorunlara geçin.
Temel araçlar ve eklentiler (webpack, Babel, ESLint, TypeScript vb.) birçok çerçevede paylaşılır. Bu sayede, tek bir çerçeve yığınına katkıda bulunsanız bile dalga etkisi oluşturabilirsiniz.
Ayrıca Chrome Framework Fund, açık kaynak araç ve kitaplıkları finansal olarak destekler. Yukarıdaki çalışmalarımızın diğer çerçevelere ve araçlara aktarılabilmesi için sorunlar ve çözüm katmanlarında yeterli örtüşme olduğunu umuyoruz ancak daha fazlasını yapabileceğimizi biliyoruz. Bu nedenle, geliştiricilerin başarılı olmasına yardımcı olan kitaplıkların ve çerçevelerin gelişmesini sağlamak için elimizden geleni yapmak istiyoruz. Chrome Framework Fund'a yatırım yapmaya devam etmemizin nedenlerinden biri de budur. Bugüne kadar Webpack 5, Nuxt ve ESLint'te performans ve iyileştirmeler için çalışmalara destek verdi.
Çalışmalarımız şimdiye kadar neleri sağladı?
Çalışmalarımız; resimler, JS, CSS, yazı tipleri gibi kaynaklar için temel optimizasyonlara odaklandı. Aşağıdakiler de dahil olmak üzere birden fazla çerçevenin varsayılan ayarlarını iyileştirmek için çeşitli optimizasyonlar yaptık:
- Next.js'de resim yüklemeyle ilgili en iyi uygulamaları kapsayan bir resim bileşeni ve ardından aynı konuda Nuxt ile ortak çalışma. Bu bileşenin kullanımı, boyama süreleri ve düzen kaymasında önemli iyileştirmeler sağladı (örnek: nextjs.org/give adresinde Largest Contentful Paint'te% 57 ve Cumulative Layout Shift'te% 100 azalma).
- Derleme sırasında web yazı tipi beyanları için CSS'nin otomatik olarak satır içine yerleştirilmesi. Bu özellik Angular (Google Yazı Tipleri) ve Next.js (Google Yazı Tipleri ve Adobe Yazı Tipleri) için kullanıma sunuldu. Bu sayede Largest Contentful Paint ve First Contentful Paint'te (örnek) önemli iyileştirmeler yapıldı.
- Boyama sürelerini azaltmak için hem Angular hem de Next.js'de Critters'ı kullanarak kritik CSS'yi satır içi hale getirme. Bu özellik, yazı tipi CSS satır içi ekleme özelliğiyle birlikte kullanıldığında, tipik ve büyük ölçekli bir Angular uygulamasında Lighthouse performans puanlarında 20-30 puan artış sağladı.
- Next.js'te, özel bir eklenti ve paylaşılabilir yapılandırma içeren hazır ESLint desteği. Bu eklenti, derleme sırasında çerçeveye özgü yaygın sorunları yakalamayı kolaylaştırarak daha tahmin edilebilir bir yükleme performansı sağlar.
- Web Vitals ve diğer özel metrikler aracılığıyla sayfa performansını daha kolay analiz etmenize olanak tanımak için Create React App ve Next.js'de yerleşik bir performans aktarıcısı kullanıma sunuldu.
- Next.js ve Gatsby'de kullanıma sunulan ayrıntılı parçalara ayırma özelliği, paket boyutlarında yüzde 30 ila 70 oranında düşüş sağlarken önbelleğe alma performansını iyileştirir. Bu, Webpack 5'te varsayılan ayar haline gelmiştir.
- Modern tarayıcılarda paket boyutunu iyileştirmek için Next.js ekibiyle birlikte eski tarayıcılar için ayrı bir polyfill paketi.
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ına karmaşıklık eklemeden avantajlarından kolayca yararlanabilmesi için çok önemlidir.
2021 için neler planlıyoruz?
Bu yılın geri kalanında, çerçeve gruplarının kullanıcı deneyimini ve Core Web Vitals gibi metriklerde ne kadar iyi performans gösterdiklerini iyileştirmelerine yardımcı olmaya odaklanacağız. Bu çalışmada şunlar yer alır:
- En iyi uygulamaların uygulanması için uygunluk. Daha fazla bilgi edinmek için blog yayınına göz atın.
- Resimler, yazı tipleri ve önemli CSS'yi optimize etmek için yaptığımız ortak çalışmalardan yararlanarak ilk yükleme performansını optimize etme.
- Komut dosyası bileşeni üzerinde çalışma temelimizi temel alarak ve üçüncü tarafların en iyi şekilde nasıl sıraya ekleneceği ve sıralanacağı konusunda derinlemesine araştırmalar yaparak üçüncü taraf komut dosyalarını (üçüncü taraflar) minimum performans etkisiyle yükleme
- Büyük ölçekte JavaScript performansı (ör. Next.js'de React sunucu bileşenlerini destekleme).
Ekibimiz, bu fikirlerle ilgili RFC'ler ve tasarım dokümanlarıyla ilgili daha düzenli bilgi yayınlamayı hedefleyecek. Böylece, bu gelişmeleri takip etmek isteyen tüm çerçeveler veya geliştiriciler bu bilgilerden yararlanabilir.
Sonuç
Aurora ekibi (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie), Next.js, Nuxt ve Angular'daki varsayılan kullanıcı deneyimini iyileştirmek için açık kaynak çerçeve topluluğuyla yakın bir şekilde çalışmaya devam etmeyi dört gözle bekliyor. Zaman içinde daha fazla çerçeve ve aracı kapsayacak şekilde etkileşimimizi artıracağız. Önümüzdeki yıl ekibimizin yayınlayacağı daha fazla blog yayını, konuşma ve RFC için bu sayfayı takip edin :)