2020 ön uç çerçeve performans karşılaştırması ve değerlendirmesi
Bu karşılaştırmayı tekrar yapalım. Bu sefer 2020 sürümü ve önceki sürümler var: 2019, 2018, 2017.
Öncelikle açık konuşayım - bu makale kesinlikle size hangi ön uç çerçeveyi seçeceğinizi söylemek için yazılmadı. Bu, üç göstergeyi karşılaştıran küçük ve nispeten basit bir değerlendirmedir: temelde aynı uygulamaya dayalı, performansı, uygulama boyutunu ve farklı çerçeveler tarafından yapılan uygulamaların kod satırı sayısını değerlendirme.
Bunu akılda tutarak, özel değerlendirme yöntemine bakalım:
- Karşılaştırmamızın temeli RealWorld uygulamasıdır - bu uygulama, yapılması kolay bir uygulama değildir. Ortak yapılacaklar uygulamaları, gerçek uygulama yapısı için yeterli bilgi ve perspektif referansları sağlayamaz.
- Bir dereceye kadar standartlaştırılmıştır - bu, belirli kuralları karşılayan ve bir dizi spesifikasyona sahip bir projedir. Proje ayrıca arka uç API'leri, statik işaretleme ve stiller sağlar.
- Bir uzman tarafından yazılır veya gözden geçirilir - bu tutarlı, gerçek dünya projesidir ve projenin yapımı veya gözden geçirilmesi uzmanların katılımını içerir.
Hangi kütüphaneleri / çerçeveleri karşılaştıracağız?
Yazma sırasında, RealWorld deposunda 24 Conduit uygulaması vardır. Çerçevenin popüler olup olmadığı önemli değil. Katılım için tek koşul, RealWorld depo sayfasında görünmesidir.
Hangi göstergeleri karşılaştırıyoruz?
- Performans-Uygulamanın içeriği görüntülemesi ve kullanılabilir olması ne kadar sürer?
- Boyut-bu uygulama ne kadar büyük? Yalnızca derlenmiş JavaScript dosyasının boyutunu karşılaştıracağız. HTML ve CSS, tüm varyantlarda ortaktır ve CDN'den (İçerik Dağıtım Ağı) indirilir. Tüm teknolojiler derlenebilir veya JavaScript'e çevrilebilir, bu nedenle yalnızca bu dosyanın boyutuna bakarız.
- Kod satırları - Bir yazarın spesifikasyona dayalı bir RealWorld uygulaması oluşturması için kaç satır kod gerekir? Adil olmak gerekirse, belirli çerçeveler tarafından yapılan başvurular çok fazla dantel içeriğine sahiptir, ancak büyük bir etkisi olmamalıdır. Her uygulamada ölçmek istediğimiz tek klasör src / dosyasıdır. Otomatik olarak oluşturulup oluşturulmaması önemli değildir - yine de bakımını yapmanız gerekir.
Dizin 1: Performans
Chrome ile birlikte gelen Lighthouse Denetiminin performans puanını kontrol edeceğiz. Lighthouse tarafından döndürülen performans puanı 0 ile 100 arasındadır. 0 en düşüktür. Daha fazla ayrıntı için lütfen "Deniz Feneri Puanlama Kılavuzu" na bakın.
Test kurulumu
Temel
İçerik ne kadar hızlı çizilirse, kullanıcı işleri o kadar çabuk yapmaya başlayabilir ve uygulama deneyimi o kadar iyi olur.
Performans (0-100 puan) - ne kadar yüksekse o kadar iyi
Not: Demo uygulamalarının olmaması nedeniyle PureScript atlandı.
sonuç olarak
Deniz Feneri Denetimi yalan söylemez. Bu yılın bakımsız / güncellenmemiş çerçevesinde yapılan başvuruların 90 puanın altına düştüğünü görebilirsiniz. Uygulamanız 90'dan fazla puan alıyorsa, performansta çok fazla fark olmamalıdır. Spesifik olarak, AppRun, Elm ve Svelte gerçekten etkileyici.
Metrik 2: Boyut
Aktarım boyutu verileri, Chromeun ağ sekmesinden gelir. Sunucu, GZIP sıkıştırılmış yanıt başlıkları ve yanıt gövdesi sağlar.
Buradaki performans, çerçevenin boyutuna ve eklediği diğer bağımlılıklara bağlıdır. Ayrıca, derleme aracının kullanılmayan kodu paketten kaldırıp kaldırmayacağını da görebilirsiniz.
Temel
Dosya ne kadar küçükse, indirme hızı o kadar hızlıdır ve ayrıştırılacak daha az içerik vardır.
Aktarım boyutu (KB) - ne kadar küçükse o kadar iyidir
Not: Demo uygulamalarının olmaması nedeniyle PureScript atlandı.
Angular + ngrx + nx: Angular + ngrx + nx Burada bir hata yaptığım için beni suçlamayın, lütfen Chrome DevTools ağ sekmesini kontrol edin, bir hata yaparsam lütfen bana bildirin.
Rust + Yew + WebAssembly, .wasm dosyalarını da içerir
sonuç olarak
Svelte ve Stencil toplulukları tarafından yapılan etkileyici çalışma, uygulama boyutlarını 20 KB'nin altına düşürdü ki bu gerçekten bir başarıdır.
Gösterge 3: Kod satırlarının sayısı
Cloc kullanarak, her bir deponun src klasöründeki kod satırlarının sayısını sayabiliriz. Boş satırlar ve yorum satırları burada sayılmaz. Bu göstergeyi neden dikkate almalıyız?
Hata ayıklama, yazılım hatalarını ortadan kaldırma süreciyse, programlama, hataları yazılıma yerleştirme süreci olmalıdır. -EdsgerDijkstra
Temel
Bu gösterge, belirli bir kitaplığın / çerçevenin / dilin ne kadar kısa olduğunu gösterir. Yani, spesifikasyona göre, neredeyse aynı uygulamayı elde etmek için kaç satır koda ihtiyacınız var (bazılarında daha fazla dantel parçası var).
Mümkün olduğunca az sayıda kod satırı
Not: cloc, .svelte dosyalarını işleyemediği için atlanır.
Cloc .riot dosyalarını işleyemediğinden, riotjs-effector-universal-hot atlanır.
Angular + ngrx: / libs klasörü kullanılarak yapılan LoC hesaplamaları yalnızca .ts ve .html dosyalarını içerir. Bunun yanlış bir yöntem olduğunu düşünüyorsanız, lütfen bana doğru sayının ne olması gerektiğini ve nasıl hesaplanacağını söyleyin.
sonuç olarak
Yalnızca yeniden çerçeveli Imba ve ClojureScript bu uygulamayı 1000 satır kodda gerçekleştirebilir. Clojure, alışılmadık ifadeleriyle bilinir. Imba burada ilk kez ortaya çıktı (cloc geçen yıl .imba dosya biçimini analiz edemedi) ve durumunun devam edeceği görülüyor. LoC'nuzu önemsiyorsanız, buradan neyi seçeceğinizi bilmelisiniz.
sonuç olarak
Unutma, bu tamamen adil bir karşılaştırma değil. Bazı uygulamalar kod bölme kullanır, bazıları kullanmaz. Bazıları GitHub'da, bazıları Now'da ve bazıları Netlify'de barındırılıyor. Hala hangi çerçevenin en iyisi olduğunu bilmek istiyor musunuz? Bu soruyu düşünmek için size bırakın.
ortak problem
1. X, Y ve Z çerçeveleri neden değerlendirmeye dahil edilmiyor?
Çünkü RealWorld deposunda uygulama henüz tamamlanmadı. Katkıda bulunmayı düşünebilirsiniz! Bu çözümü uygulamak için favori kitaplığınızı / çerçevenizi kullanın, bir dahaki sefere test edeceğiz!
2. Neden ona "gerçek dünya" diyorsunuz?
Çünkü bu sadece yapılacak bir uygulama değil. RealWorld'de maaş, bakım, üretkenlik ve öğrenme eğrilerini karşılaştırmıyoruz. Diğer anketler bu soruların bazılarına cevap verebilir. RealWorld dediğimiz şey, tıpkı gerçek dünyadaki bir uygulama gibi bir sunucuya bağlanan, kimlik doğrulaması yapan ve kullanıcıların CRUD yapmasına izin veren bir uygulamadır.
3. Neden favori çerçevemi test etmiyorsunuz?
Yukarıdaki 1 numaralı maddeye bakın, ancak her ihtimale karşı tekrar bahsetmem gerekirse: çünkü uygulama RealWorld deposunda henüz tamamlanmadı. Tüm uygulamaları tamamlamadım - bu topluluk çabalarını gerektiriyor. Çerçevenizi karşılaştırmalı olarak görmek istiyorsanız, lütfen katkıda bulunmayı düşünün.
4. Kitaplığın / çerçevenin hangi sürümünü test ediyorsunuz?
Sürüm, yazım sırasında mevcuttur (Mart 2020). Buradaki bilgiler RealWorld deposundan gelir. İlgili verileri GitHub deposunda bulabilirsiniz.
5. Popüler bir çerçeveyi test etmeyi neden unuttunuz?
Aynı şekilde, # 1 ve # 3'e bakın. RealWorld deposunda uygulama henüz tamamlanmadı, bu kadar basit.
Beni takip edin ve bu makaleyi iletin, "bilgi almak" için bana özel bir mesaj gönderin, 4999 yuan değerinde ücretsiz bir InfoQ mini kitabı alabilirsiniz!
