JavaScript çerçevesi ekosisteminde uygunluk
Tanıtım amaçlı blog yayınımızda, Google Arama, Haritalar, Fotoğraflar gibi büyük ölçekli web uygulamalarını geliştirmek ve sürdürmek için çerçeveler ve araçlar oluşturup kullanırken çok şey öğrendiğimizden bahsetmiştik. Geliştiricileri, kullanıcı deneyimini olumsuz yönde etkileyebilecek kodlar yazmaya karşı koruyarak, performans ve uygulama kalitesiyle ilgili sonuçları değiştirmede çerçevelerin önemli bir rol oynayabileceğini kanıtladık.
Google'da bu metodolojiyi tanımlamak için "Uyumluluk" terimini kullandık. Bu makalede, bu kavramı JavaScript çerçevesi ekosistemine nasıl açık kaynak olarak sunmayı planladığımız açıklanmaktadır.
Uygunluk nedir?
Google'da uygunluk, bir evrimdi. Ekipler, kapsamlı kod incelemeleri yapan ve uygulama kalitesini ve sürdürülebilirliğini doğruluk sorunlarının ötesinde etkileyen unsurları işaretleyen, çok deneyimli küçük bir geliştirici grubuna güveniyordu. Bu süreci, büyüyen uygulama geliştirici ekiplerine ölçeklendirmek için en iyi uygulamaları otomatik ve uygulanabilir bir şekilde kodlayacak bir uygunluk sistemi geliştirildi. Bu sayede, kod katkıda bulunanların sayısından bağımsız olarak uygulama kalitesi ve kod tabanı sürdürülebilirliği için tutarlı bir şekilde yüksek bir standart sağlandı.
Uygunluk, geliştiricilerin aydınlık yolda kalmasını sağlayan bir sistemdir. Bu sistem, güven oluşturur ve tahmin edilebilir sonuçlar sağlar. Ekipleri üretken hale getirir ve ekipler büyüdükçe ve aynı anda daha fazla özellik geliştirildikçe ölçeklendirme için çok önemli hale gelir. Geliştiricilerin ürün özelliklerini oluşturmaya odaklanmalarını sağlayarak onları ayrıntılardan ve performans, erişilebilirlik, güvenlik gibi çeşitli alanlarda değişen ortamdan kurtarır. Herkes uygunluğu dilediğinde devre dışı bırakabilir. Ayrıca, ekiplerin taahhüt etmeye karar verdikleri her şeyi uygulama seçeneği olacak şekilde özelleştirilebilir olmalıdır.
Uygunluk, güçlü varsayılanlar ve yazım sırasında uygulanabilecek uygulanabilir kurallar sağlamaya dayanır. Bu, aşağıdaki 3 ilkeye ayrılır.
1. Güçlü varsayılanlar
Uyumluluğun temel özelliklerinden biri, geliştiricilerin kullandığı araçların güçlü varsayılan ayarlara sahip olmasını sağlamaktır. Bu, çözümlerin yalnızca çerçevelere yerleştirildiği değil, aynı zamanda çerçeve tasarım kalıplarının doğru şeyi yapmayı kolaylaştırdığı ve anti-kalıpları izlemeyi zorlaştırdığı anlamına gelir. Çerçeve, geliştiricilere uygulama tasarımı ve kod yapısı konusunda destek sunar.
Yükleme performansı için her kaynak (yazı tipleri, CSS, JavaScript, resimler vb.) optimize edilmelidir. Bu, baytların kırpılmasını, gidiş dönüşlerin azaltılmasını ve ilk oluşturma, görsel hazırlık ve kullanıcı etkileşimi için gerekenlerin ayrılmasını içeren karmaşık bir sorundur. Örneğin, kritik CSS'yi ayıklamak ve önemli resimlere öncelik vermek.
2. Eyleme dönüştürülebilir kurallar
Temel optimizasyonlar uygulanmış olsa bile geliştiricilerin seçim yapması gerekir. Geliştirici girişi ne kadar gerekli olursa olsun, optimizasyonlar için çeşitli seçenekler vardır:
- Kritik CSS'yi satır içine alma gibi geliştirici girişi gerektirmeyen varsayılanlar.
- Geliştiricinin etkinleştirmesini gerektirir. Örneğin, resimleri boyutlandırmak ve ölçeklendirmek için çerçeve tarafından sağlanan bir resim bileşeni kullanmak.
- Geliştiricinin etkinleştirmesini ve özelleştirmesini gerektirir. Örneğin, önemli resimleri erken yüklenecek şekilde etiketleme.
- Belirli bir özellik değil, geliştirici kararı gerektiren konulardır. Örneğin, erken oluşturmayı geciktiren yazı tiplerinden veya senkronize komut dosyalarından kaçının.
Geliştiricilerin karar vermesini gerektiren optimizasyonlar, uygulamanın performansı için risk oluşturur. Özellikler eklendikçe ve ekibiniz büyüdükçe en deneyimli geliştiriciler bile sürekli değişen en iyi uygulamalara ayak uyduramıyorlar. Üstelik bu, zamanlarını en iyi şekilde kullanmaları için de uygun bir yöntem değil. Uygun, uygulanabilir kurallar, geliştiriciler değişiklik yapmaya devam ederken uygulamanın belirli bir standardı karşılamaya devam etmesini sağlamak için uyumluluk açısından güçlü varsayılanlar kadar önemlidir.
3. İçerik oluşturma süresi
Geliştirme yaşam döngüsünün başlarında performans sorunlarını tespit edip önlemek önemlidir. Kodun gönderilmesinden önceki içerik oluşturma zamanı, sorunları tespit etmek ve ele almak için idealdir. Bir sorun, geliştirme yaşam döngüsünün ne kadar geç bir aşamasında yakalanırsa çözümü o kadar zor ve maliyetli olur. Bu durum, doğruluk sorunları için geçerli olmakla birlikte performans sorunları için de geçerlidir. Bu sorunların çoğu, kod tabanına bağlandıktan sonra geriye dönük olarak ele alınmaz.
Günümüzde performans geri bildirimlerinin çoğu, dokümanlar veya tek seferlik denetimler aracılığıyla bant dışı olarak sağlanıyor ya da üretime dağıtıldıktan sonra metrikler gerileme yoluyla çok geç bir zamanda gösteriliyor. Bu özelliği içerik oluşturma aşamasına getirmek istiyoruz.
Çerçevelerde Uygunluk
Yükleme performansı için yüksek bir kullanıcı deneyimi çıtası sağlamak amacıyla aşağıdaki soruların yanıtlanması gerekir:
- Optimum yükleme nedir ve bu süreci olumsuz yönde etkileyebilecek yaygın sorunlar nelerdir?
- Geliştirici girişi gerektirmeyen hangi çözümler yerleştirilebilir?
- Geliştiricinin bu çözümleri kullanmasını ve bunlardan en iyi şekilde yararlanmasını nasıl sağlayabiliriz?
- Geliştirici, yükleme performansını etkileyen başka hangi seçimleri yapabilir?
- İçerik üretme aşamasında bu seçenekler (yukarıdaki 3. ve 4. seçenekler) hakkında bize bilgi verebilecek kod kalıpları nelerdir?
- Bu kod kalıplarını değerlendirmek için hangi kuralları formüle edebiliriz? Bu öğeler, geliştiricinin iş akışına sorunsuz bir şekilde entegre edilirken içerik oluşturma sırasında geliştiricinin önüne nasıl getirilebilir?
Google'da kullandığımız uygunluk modelini açık kaynak çerçevelere getirmek için ekibimiz Next.js'de yoğun bir şekilde deneysel çalışmalar yaptı. Geliştirdiğimiz vizyonu ve planları paylaşmaktan heyecan duyuyoruz. Kod kalıplarını değerlendirebilecek en iyi kural grubunun statik kod analizi ve dinamik kontrollerin bir kombinasyonu olması gerektiğini fark ettik. Bu kurallar aşağıdakiler dahil olmak üzere birden fazla yüzeyi kapsayabilir:
- ESLint
- TypeScript
- Kullanıcının geliştirme sunucusunda dinamik kontroller (DOM oluşturulduktan sonra)
- Modül paketleyici (webpack)
- CSS araçları (hâlâ keşif aşamasında)
Farklı araçlar aracılığıyla kurallar sağlamanın avantajlarından yararlanarak kuralların tutarlı olmasını sağlayabilir ve aynı zamanda yükleme performansını doğrudan etkileyen tüm kullanıcı deneyimi sorunlarını kapsayabiliriz. Ayrıca, bu kurallar geliştiricilere farklı zamanlarda da gösterilebilir:
- Geliştirme sunucusunda yerel geliştirme sırasında tarayıcı ve kullanıcının IDE'sinde geliştiricilerin küçük kod değişiklikleri yapmasını isteyen uyarılar gösterilir.
- Çözüme ulaştırılmayan sorunlar, derleme sırasında kullanıcının terminalinde yeniden gösterilir.
Özetlemek gerekirse ekipler, Core Web Vitals veya yükleme performansı gibi önem verdikleri sonuçları seçer ve tüm kod katkıda bulunanların uyması için ilgili kural kümelerini etkinleştirir.
Bu yöntem yeni projeler için çok iyi olsa da büyük kod tabanlarını tüm kural kümelerine uygun olacak şekilde yükseltmek kolay değildir. Google'da, kaynak kodunun tek tek satırları, dizinlerin tamamı, eski kod tabanları veya uygulamanın etkin geliştirme aşamasında olmayan bölümleri gibi farklı düzeylerde kapsam dışında kalmayı sağlayan kapsamlı bir sistemimiz vardır. Açık kaynaklı çerçeveleri kullanan ekiplere bu özelliği sunmak için etkili stratejileri etkin bir şekilde araştırıyoruz.
Next.js'de uygunluk
ESLint, JavaScript geliştiricileri arasında yaygın olarak kullanılır. Next.js uygulamalarının% 50'sinden fazlası, derleme iş akışlarının bir bölümünde ESLint kullanır. Next.js 11 sürümü, geliştirme ve 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 hazır ESLint desteğini kullanıma sundu. Bu, geliştiricilerin içerik oluşturma aşamasında önemli sorunları düzeltmesine yardımcı olabilir. Örneğin, belirli bir bileşenin Sayfa için HTML bağlantısı yok durumunda olduğu gibi performansa zarar verebilecek bir şekilde kullanılması veya kullanılmaması. Ayrıca, belirli bir yazı tipi, stil sayfası veya komut dosyası bir sayfadaki kaynak yüklemeyi olumsuz yönde etkileyebilir. Örneğin, No synchronous script (zaman uyumlu komut dosyası yok).
ESLint'e ek olarak, TypeScript desteğiyle Next.js'in 9. sürümünden beri hem geliştirme hem de üretim aşamalarında entegre tür denetimi desteklenmektedir. Çerçeve tarafından sağlanan birden fazla bileşen (Görüntü, Komut Dosyası, Bağlantı), geliştiricilere web sayfasına içerik ekleme konusunda yüksek performanslı bir yaklaşım sunmak için HTML öğelerinin (<img>, <script>, <a>) bir uzantısı olarak oluşturulmuştur. Tür denetimi, atanan özelliklerin ve seçeneklerin desteklenen değerler ve türlerin kabul edilebilir kapsamında olmasını sağlayarak bu özelliklerin uygun şekilde kullanılmasını destekler. Örnek için zorunlu resim genişliği ve yüksekliği bölümüne bakın.
Bildirimler ve yer paylaşımlarıyla hataları gösterme
Daha önce de belirtildiği gibi, uygunluk kuralları birden fazla alanda gösterilebilir. Hızlı mesajlar ve yer paylaşımları, hataları kullanıcının yerel geliştirme ortamındaki tarayıcıda doğrudan göstermenin bir yolu olarak şu anda araştırılmaktadır.
Geliştiricilerin kullandığı birçok hata ayıklama ve denetim aracı (Lighthouse, Chrome Geliştirici Araçları Sorunlar sekmesi) pasiftir ve bilgi almak için bir tür kullanıcı etkileşimi gerektirir. Geliştiriciler, hatalar doğrudan mevcut araçlarında gösterildiğinde ve sorunu düzeltmek için yapılması gereken somut ve belirli işlemler sağlandığında işlem yapma olasılığı daha yüksektir.
Diğer Çerçevelerde Uygunluk
Uyumluluk, öncelikle diğer çerçevelere (Nuxt, Angular vb.) genişletilmek amacıyla Next.js'de araştırılıyor. ESLint ve TypeScript, birçok farklı şekilde birçok çerçevede kullanılıyor olsa da uyumlu, tarayıcı düzeyinde bir çalışma zamanı sistemi kavramı aktif olarak araştırılıyor.
Sonuç
Uygunluk, en iyi uygulamaları basit kod kalıpları olarak geliştiriciler tarafından uygulanabilen kural kümelerinde kodlar. Aurora ekibi yükleme performansına odaklandı ancak erişilebilirlik ve güvenlik gibi diğer en iyi uygulamalar da aynı derecede geçerlidir.
Uygunluk kurallarını uygulamak, tahmin edilebilir sonuçlara yol açmalıdır. Kullanıcı deneyimi açısından yüksek bir çıtaya ulaşmak, teknoloji grubunuzda geliştirme yapmanın bir yan etkisi olabilir. Uyumluluk, ekiplerin üretken olmasını sağlar ve zaman içinde ekipler ve kod tabanları büyüdükçe uygulama için yüksek bir kalite standardı sağlar.