JavaScript çerçevesi ekosisteminin uygunluğu
Giriş blogu yayınımızda Google Arama, Haritalar ve Fotoğraflar gibi büyük ölçekli web uygulamaları geliştirip sürdürmek için çerçeveler ve araçlar geliştirip kullanırken çok şey öğrendiğimize değindik. Geliştiricileri kullanıcı deneyimini olumsuz etkileyebilecek kod yazmaya karşı koruyarak, çerçevelerin performans ve uygulama kalitesine ilişkin sonuçları değiştirmede ö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 kaynaklı hale getirmeyi planladığımız ele alınmaktadır.
Uygunluk Nedir?
Uygunluk, Google'da yeni bir gelişmeydi. Ekipler, kapsamlı kod incelemeleri yapan ve doğruluk sorunlarının ötesinde uygulama kalitesini ve sürdürülebilirliğini etkileyen unsurları işaretleyen az sayıda deneyimli idareciyle çalıştı. Bunu giderek büyüyen uygulama geliştirici ekiplerine ölçeklendirmek amacıyla, en iyi uygulamaları otomatik ve uygulanabilir bir şekilde kodlayan bir Uygunluk sistemi geliştirildi. Bu, koda katkıda bulunan sayısı ne olursa olsun uygulama kalitesi ve kod tabanı sürdürülebilirliği çıtasının sürekli olarak yüksek olmasını sağladı.
Uygunluk, geliştiricilerin iyi aydınlatılmış yolda kalmasını sağlayan bir sistemdir; güven oluşturur ve öngörülebilir sonuçlar elde edilmesini sağlar. Ekiplerin üretkenliğini artırır ve ekipler büyüdükçe ve eş zamanlı olarak daha fazla özellik geliştirildikçe ölçek için hayati bir önem kazanır. Geliştiricilerin performans, erişilebilirlik, güvenlik gibi çeşitli alanlarda küçük ayrıntılardan ve değişen ortamdan kurtulmaları için geliştiricilerin ürün özellikleri oluşturmaya odaklanmalarını sağlar. Herkes istediği zaman Uygunluk kapsamı dışında kalmayı seçebilir. Ekipler, taahhüt istedikleri her şeyi uygulama seçeneğine sahip oldukları ölçüde özelleştirilebilir olmalıdır.
Uygunluk, güçlü varsayılanlara dayanır ve yazma zamanında zorunlu kılınabilecek işlem yapılabilir kurallar sağlar. Bu, şu 3 ilkeye ayrılır.
1. Güçlü varsayılanlar
Uygunluğun temel bir unsuru, geliştiricilerin kullandığı araçların güçlü varsayılanlara sahip olmasını sağlamaktır. Bu, çözümlerin yalnızca çerçeveler halinde derlendiği değil, aynı zamanda çerçeve tasarım kalıplarının doğru şeyi yapmayı ve karşıt kalıpları takip etmeyi zorlaştırdığı anlamına gelir. Çerçeve, uygulama tasarımı ve kod yapısı konusunda geliştiricileri destekler.
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 iştir. Örneğin, kritik CSS'leri ayıklama ve önemli resimlere öncelik verme.
2. İşlem yapılabilir kurallar
Temel optimizasyonlar yapılmış olsa bile geliştiricilerin seçim yapması gerekir. Geliştirici girdisinin ne kadar gerekli olduğu söz konusu olduğunda çeşitli optimizasyon olasılıkları vardır:
- Geliştirici girişi gerektirmeyen varsayılan ayarlar (ör. kritik CSS'yi satır içine alma).
- Geliştiricinin kaydolmasını zorunlu kıl. Örneğin, resimleri boyutlandırmak ve ölçeklendirmek için çerçeve tarafından sağlanan bir resim bileşenini kullanma.
- Geliştiricinin etkinleştirmesini ve özelleştirmesini zorunlu kılın. Örneğin, önemli resimleri erkenden yüklenecek şekilde etiketleme.
- Belirli bir özellik değil, ancak yine de geliştiricinin karar vermesi gereken şeyler. Örneğin, erken oluşturmayı geciktiren yazı tiplerinden veya eşzamanlı komut dosyalarından kaçınmak.
Geliştiricilerin herhangi bir karar alması gereken 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 uyduramaz ve zamanlarını en iyi şekilde kullanamazlar. Uygunluk açısından, geliştiriciler değişiklik yapmaya devam etse bile uygulamanın belirli bir standardı karşılamaya devam etmesini sağlamak için güçlü varsayılanlar kadar uygun ve uygulanabilir kurallar da önem taşır.
3. Yazma zamanı
Performans sorunlarını geliştirme yaşam döngüsünün erken aşamalarında tespit edip engellemek önemlidir. Kod yazmadan önceki yazma süresi, ideal olarak sorunları yakalamak ve çözmek için uygundur. Sonrasında bir sorun geliştirme yaşam döngüsünde yakalanırsa ele almak o kadar zor ve pahalı olur. Bu durum doğruluk sorunları için geçerli olsa da performans sorunları için de geçerlidir. Çünkü bu sorunların çoğu, kod tabanına katıldıktan sonra geriye dönük olarak ele alınmayacaktır.
Günümüzde performansla ilgili geri bildirimlerin çoğu; dokümantasyon ve tek seferlik denetimler aracılığıyla bant dışıdır ya da üretime dağıtımdan sonra metrik regresyonu aracılığıyla çok geç paylaşılmaktadır. Bunu yazma zamanına taşımak istiyoruz.
Çerçevelere Uygunluk
Yükleme performansında yüksek kullanıcı deneyimi çıtasını korumak için aşağıdaki soruların yanıtlanması gerekir:
- Optimum yüklemeyi oluşturan unsurlar ve bunu olumsuz yönde etkileyebilecek yaygın sorunlar nelerdir?
- Geliştiricinin herhangi bir müdahalesine ihtiyaç duymadan hangi çözümler kullanılabilir?
- Geliştiricilerin bu çözümleri kullanmasını ve en iyi şekilde yararlanmasını nasıl sağlayabiliriz?
- Geliştirici, yükleme performansını etkilemek için başka hangi seçimleri yapabilir?
- Yazma aşamasındayken (yukarıda 3. ve 4. sırada) bu seçenekler hakkında bize bilgi verebilecek kod kalıpları nelerdir?
- Bu kod kalıplarını değerlendirmek için hangi kuralları oluşturabiliriz? Bunlar, iş akışlarına sorunsuz bir şekilde entegre olurken, yazma zamanında geliştiriciye nasıl gösterilebilir?
Google'da sahip olduğumuz Uygunluk modelini açık kaynak çerçevelere getirmek için ekibimiz Next.js üzerinde yoğun bir şekilde deneme yapmıştır. Daha hassas vizyonumuzu ve planlarımızı paylaşmaktan heyecan duyuyoruz. Kod kalıplarını değerlendirebilecek en iyi kural grubunun, statik kod analizi ve dinamik denetimlerin bir kombinasyonu olması gerektiğini fark ettik. Bu kurallar, aşağıdakiler de dahil olmak üzere birden çok yüzeyi kapsayabilir:
- ESLint
- TypeScript
- Kullanıcının geliştirme sunucusundaki dinamik kontroller (DOM oluşturma sonrası)
- Modül paketleyici (web paketi)
- CSS araçları (hâlâ keşif aşamasındadır)
Farklı araçlar aracılığıyla kurallar sağlamanın avantajlarından yararlanarak, kuralların tutarlı olmasını sağlayabiliriz ve aynı zamanda yükleme performansını doğrudan etkileyen kullanıcı deneyimi sorunlarını kapsama alabiliriz. 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'si uyarılar göstererek geliştiricilerden küçük kod değişiklikleri yapmalarını ister.
- Derleme sırasında, çözülmemiş sorunlar kullanıcının terminalinde tekrar gösterilir.
Özetle, ekipler Önemli Web Verileri veya yükleme performansı gibi önem verdikleri sonuçları seçer ve koda katkıda bulunan tüm kullanıcılar için ilgili kural kümelerini etkinleştirir.
Bu, yeni projeler için gerçekten işe yarasa da, büyük kod tabanlarını tüm kural kümelerine uyacak şekilde yükseltmek kolay değildir. Google'da, ayrı ayrı kaynak kodu satırları, tüm dizinler, eski kod tabanları veya uygulamanın aktif geliştirme kapsamında olmayan bölümleri gibi farklı düzeylerde devre dışı bırakmaya yönelik kapsamlı bir sistemimiz vardır. Açık kaynak çerçeveleri kullanan ekiplere bunu getirmek için etkili stratejiler araştırıyoruz.
Next.js'deki uygunluk
ESLint, JavaScript geliştiricileri arasında yaygın olarak kullanılır. Next.js uygulamalarının% 50'den fazlası, derleme iş akışlarının bir kısmında ESLint'i kullanır. Next.js v11, geliştirme sırasında ve derleme sırasında çerçeveye özgü yaygın sorunların tespit edilmesini kolaylaştırmak için özel eklenti ve paylaşılabilir yapılandırma içeren kullanıma hazır ESLint desteğini kullanıma sundu. Bu, geliştiricilerin yazma sırasında önemli sorunları çözmesine yardımcı olabilir. Belirli bir bileşenin, Sayfa için HTML bağlantısı yok gibi performansa zarar verebilecek şekilde kullanılması veya kullanılmaması buna örnek olarak verilebilir. Belirli bir yazı tipinin, stil sayfasının veya komut dosyasının sayfada kaynak yüklemesini olumsuz yönde etkilemesi de mümkündür. Örneğin, Eşzamanlı komut dosyası yok.
ESLint'e ek olarak, hem geliştirme hem de üretimde entegre tür denetimi, TypeScript desteğiyle v9'dan beri Next.js'de desteklenmektedir. Çerçeve (Resim, Komut Dosyası, Bağlantı) tarafından sağlanan birden fazla bileşen, web sayfalarına içerik eklerken geliştiricilere yüksek performanslı bir yaklaşım sunmak amacıyla HTML öğelerinin (<img>, <script>, <a>) bir uzantısı olarak derlenmiştir. Tür kontrolü, atanan özelliklerin ve seçeneklerin desteklenen değerler ve türler kapsamında kabul edilebilir kapsamda olmasını sağlayarak bu özelliklerin uygun kullanımını destekler. Örnek için gerekli Resim genişliği ve yüksekliği bölümüne bakın.
Durum Bilgileri ve Yer Paylaşımlarıyla İlgili Hataları Gösterme
Daha önce de belirtildiği gibi, Uygunluk kuralları birden çok alanda gösterilebilir. Hataları doğrudan tarayıcıda, kullanıcının yerel geliştirme ortamında göstermenin bir yolu olarak durum bilgileri ve yer paylaşımları araştırılmaktadır.
Geliştiricilerin güvendiği birçok hata kontrol ve denetleme aracı (Lighthouse, Chrome Geliştirici Araçları Sorunları sekmesi) pasiftir ve bilgileri almak için bir tür kullanıcı etkileşimi gerektirir. Hatalar doğrudan mevcut araçlarında ortaya çıktığında ve sorunu düzeltmek için yapılması gereken somut ve belirli önlemler verildiğinde geliştiricilerin harekete geçme olasılığı daha yüksektir.
Diğer Çerçevelere Uygunluk
Uygunluk, ilk olarak diğer çerçevelere (Nuxt, Angular vb.) genişletmek amacıyla Next.js'de incelenmektedir. ESLint ve TypeScript zaten birçok farklı çerçevede kullanılmaktadır, ancak uyumlu, tarayıcı düzeyinde çalışma zamanı sistemi kavramı aktif olarak araştırılmaktadır.
Sonuç
Uygunluk, en iyi uygulamaları, geliştiriciler için basit kod kalıpları olarak işlem yapılabilir kural kümeleri şeklinde kodlar. Aurora ekibi yükleme performansına odaklanmıştır ancak erişilebilirlik ve güvenlik gibi diğer en iyi uygulamalar da onlar kadar uygundur.
Uygunluk kurallarına uymak öngörülebilir sonuçlarla sonuçlanır ve kullanıcı deneyimi konusunda çıtayı yüksek tutmak, teknoloji yığınınızı geliştirmenin yan etkisine dönüşebilir. Uygunluk, ekipleri üretken hale getirir ve zaman içinde ekipler ve kod tabanları büyüse bile uygulama için yüksek kalite çıtası sağlar.