Framework Karşılaştırması
Bu sayfayı okuyorsanız, muhtemelen uygulama geliştirmek için başka framework'ler kullandınız ve Mithril.js'nin sorunlarınızı daha etkili bir şekilde çözmenize yardımcı olup olmayacağını merak ediyorsunuz.
Neden [favori framework'ünüzü buraya yazın]?
Gerçek şu ki, çoğu modern framework hızlı, karmaşık uygulamalar oluşturmak için çok uygun ve bunları etkili bir şekilde nasıl kullanacağınızı biliyorsanız sürdürülebilir. Hemen hemen her popüler framework'ü kullanan son derece karmaşık uygulamaların örnekleri var: Udemy Angular kullanıyor, AirBnB React kullanıyor, Gitlab Vue kullanıyor, Guild Wars 2 Mithril.js kullanıyor (evet, oyunun içinde!). Açıkçası, bunların hepsi üretim kalitesinde framework'lerdir.
Genel bir kural olarak, ekibiniz zaten başka bir framework/kütüphane/yığına yoğun bir şekilde yatırım yapmışsa, maliyetli bir yeniden yazımı haklı çıkaracak çok güçlü bir neden yoksa, ona bağlı kalmak daha mantıklıdır.
Ancak, yeni bir projeye başlıyorsanız, Mithril.js'yi denemeyi düşünebilirsiniz. Böylece, onu kullananların 10 KB'tan (sıkıştırılmış) daha az kodla ne kadar çok şey başardığını görebilirsiniz. Mithril.js, birçok tanınmış şirket (örneğin Vimeo, Nike, Fitbit) tarafından kullanılmakta ve büyük açık kaynaklı platformlara (örneğin Lichess, Flarum) güç vermektedir.
Neden Mithril.js kullanmalısınız?
Tek bir cümleyle: çünkü Mithril.js pragmatiktir. Bu 10 dakikalık kılavuz iyi bir örnektir: bileşenleri, XHR'yi ve yönlendirmeyi öğrenmek bu kadar sürer - ve bu, kullanışlı uygulamalar oluşturmak için gereken doğru miktarda bilgidir.
Mithril.js, anlamlı işleri verimli bir şekilde yapmakla ilgilidir. Dosya yüklemeleri mi yapıyorsunuz? Belgeler size nasıl olduğunu gösteriyor. Kimlik doğrulama mı? O da belgelenmiş. Çıkış animasyonları mı? İşte burada. Ekstra kütüphaneler yok, sihir yok.
Karşılaştırmalar
React
React, Facebook tarafından geliştirilen bir görüntüleme kütüphanesidir.
React ve Mithril.js birçok benzerliği paylaşır. React'i zaten öğrendiyseniz, Mithril ile uygulama oluşturmak için ihtiyacınız olan her şeyi zaten biliyorsunuz.
- Her ikisi de sanal DOM, yaşam döngüsü metotları ve anahtar tabanlı uzlaştırma kullanır.
- Her ikisi de görünümleri bileşenler aracılığıyla düzenler.
- Her ikisi de görünümler içinde bir akış kontrol mekanizması olarak JavaScript kullanır.
React ve Mithril.js arasındaki en belirgin fark, amaçlarındadır. React bir görüntüleme kütüphanesidir, bu nedenle tipik bir React tabanlı uygulama, yönlendirme, XHR ve durum yönetimi için üçüncü taraf kütüphanelere güvenir. Kütüphane odaklı bir yaklaşım kullanmak, geliştiricilerin yığınlarını tam olarak ihtiyaçlarına göre özelleştirmelerine olanak tanır. Bunu daha az hoş bir şekilde ifade etmek gerekirse, React tabanlı mimarilerin projeden projeye büyük ölçüde farklılık gösterebileceği ve bu projelerin 1MB boyut sınırını aşma olasılığının çok daha yüksek olduğudur.
Mithril.js, yönlendirme ve XHR gibi yaygın gereksinimler için yerleşik modüllere sahiptir ve kılavuz bu modüllerin deyimsel kullanımını gösterir. Bu yaklaşım, tutarlılığa ve kolay entegrasyona değer veren ekipler için tercih edilir.
Performans
Hem React hem de Mithril.js, render performansı konusunda çok hassastır, ancak farklı yollarla ele alırlar. Geçmişte React'in iki DOM render uygulaması vardı (biri DOM API'sini, diğeri innerHTML'i kullanıyordu). Yaklaşan fiber mimarisi, iş birimlerinin zamanlamasını ve önceliklendirilmesini sunar. React ayrıca, üretim dağıtımları için çeşitli kontrolleri ve hata mesajlarını devre dışı bırakan ve çeşitli tarayıcı özel optimizasyonları yapan gelişmiş bir derleme sistemine sahiptir. Ek olarak, React'in shouldComponentUpdate kancasını ve değişmez veri yapısı kütüphanelerinin hızlı nesne eşitliği kontrol özelliklerini kullanarak sanal DOM uzlaştırma sürelerini azaltan çeşitli performansa yönelik kütüphaneler de vardır. Genel olarak konuşursak, React'in performansa yaklaşımı, nispeten karmaşık çözümler tasarlamaktır.
Mithril.js, az ama öz düşünce okulunu takip eder. Önemli ölçüde daha küçük, agresif bir şekilde optimize edilmiş bir kod tabanına sahiptir. Bunun nedeni, küçük bir kod tabanının daha kolay denetlenip optimize edilebilmesi ve sonuç olarak daha az kod çalıştırılmasıdır.
İşte kütüphane yükleme sürelerinin bir karşılaştırması, yani her framework için JavaScript kodunu ayrıştırmak ve çalıştırmak için gereken süre, ilk satıra bir console.time() çağrısı ve yalnızca framework kodundan oluşan bir komut dosyasının sonuna bir console.timeEnd() çağrısı eklenerek. Okumayı kolaylaştırmak için, işte mütevazı bir 2010 masaüstü bilgisayarda Chrome'da dosya sisteminden çalışan, paketlenmiş komut dosyalarına manuel olarak eklenmiş günlük kaydı koduyla en iyi 20 sonuç:
| React | Mithril.js |
|---|---|
| 55.8 ms | 4.5 ms |
Kütüphane yükleme süreleri, uzun süre açık kalmayan uygulamalarda (örneğin, mobildeki her şey) önemlidir ve önbelleğe alma veya diğer optimizasyon teknikleri yoluyla iyileştirilemez.
Bu bir mikro kıyaslama olduğu için, donanım sonuçları önemli ölçüde etkileyebilir. Bu nedenle, bu testleri kendiniz tekrarlamanız önerilir. Webpack gibi paketleyici framework'lerinin, statik modül çözümlemesini taklit etmek için bağımlılıkları zamanlayıcı çağrılarından önce taşıyabileceğini unutmayın, bu nedenle derlenmiş CDN dosyalarından kodu kopyalamalı veya paketleyici kütüphanesinden çıktı dosyasını açmalı ve paketlenmiş komut dosyasına manuel olarak yüksek çözünürlüklü zamanlayıcı çağrıları console.time ve console.timeEnd eklemelisiniz. new Date ve performance.now kullanmaktan kaçının, çünkü bu mekanizmalar istatistiksel olarak güvenilir değildir.
Okuma kolaylığınız için, işte bu kıyaslamanın web'de CDN'leri kullanmaya uyarlanmış bir sürümü: React için kıyaslama burada ve Mithril.js için kıyaslama burada. React'e eşdeğer kapsamda olacak şekilde yalnızca render modülünü kıyaslamak yerine, tüm Mithril.js'yi kıyasladığımızı unutmayın. Ayrıca, bu CDN odaklı kurulumun disk önbelleğinden kaynakları getirmekten kaynaklanan bazı ek yükler getirdiğini unutmayın (kaynak başına ~2ms). Bu nedenlerden dolayı, buradaki sayılar tamamen doğru değildir, ancak Mithril.js'nin başlatma hızının React'ten belirgin şekilde daha iyi olduğunu gözlemlemek için yeterli olmalıdır.
İşte biraz daha anlamlı bir kıyaslama: 10.000 div (ve 10.000 metin düğümü) oluşturmak için betik süresini ölçmek. Yine, React ve Mithril.js için kıyaslama kodu burada. En iyi sonuçları aşağıda gösterilmiştir:
| React | Mithril.js |
|---|---|
| 99.7 ms | 42.8 ms |
Bu sayılar, Mithril.js'nin yalnızca önemli ölçüde daha hızlı başlatılmakla kalmayıp, React kullanıma hazır olmadan önce 20.000'den fazla sanal DOM düğümünü işleyebileceğini göstermektedir.
Güncelleme performansı
Güncelleme performansı, ilk render performansından daha da önemli olabilir, çünkü Tek Sayfa Uygulaması çalışırken güncellemeler birçok kez gerçekleşebilir.
Güncelleme performansını kıyaslamak için kullanışlı bir araç, Ember ekibi tarafından geliştirilen DbMonster adlı bir araçtır. Bir tabloyu olabildiğince hızlı günceller ve saniyedeki kare sayısı (FPS) ve JavaScript sürelerini (min, max ve ortalama) ölçer. FPS sayısını değerlendirmek zor olabilir, çünkü tarayıcı yeniden çizme sürelerini ve setTimeout sıkıştırma gecikmesini de içerir, bu nedenle bakılacak en anlamlı sayı ortalama render süresidir. Bir React uygulaması ve bir Mithril.js uygulaması karşılaştırabilirsiniz. Örnek sonuçlar aşağıda gösterilmiştir:
| React | Mithril.js |
|---|---|
| 12.1 ms | 6.4 ms |
Geliştirme performansı
Akılda tutulması gereken bir diğer şey de, React'in geliştirme sürümünde ekstra kontroller ve yardımcı hata mesajları eklemesi nedeniyle, yukarıdaki kıyaslamalar için kullanılan üretim sürümünden daha yavaş olmasıdır. Bunu göstermek için, yukarıdaki 10.000 düğüm kıyaslaması burada, React'in geliştirme sürümü kullanılarak.
Drop-in değiştirmeler
React ile API uyumluluğu olduğunu iddia eden bazı projeler (bazıları uyumluluk katmanı kütüphaneleri aracılığıyla) bulunsa da, bunlar tam olarak uyumlu değildir (örneğin, PropType desteği genellikle eksik, yapay olaylar bazen desteklenmiyor ve bazı API'lerin farklı anlamları var). Bu kütüphanelerin tipik olarak resmi React API'sinin parçası olmayan kendi özelliklerini de içerdiğini unutmayın; bu, birinin React Fiber'a geri dönmeye karar vermesi durumunda ileride sorunlu hale gelebilir.
Küçük indirme boyutu (React'e kıyasla) hakkındaki iddialar doğrudur, ancak bu kütüphanelerin çoğu Mithril.js'nin render modülünden biraz daha büyüktür. Preact tek istisnadır.
Agresif performans iddialarına karşı dikkatli olun, çünkü bu projelerden bazıları tarafından kullanılan kıyaslamaların güncel olmadığı ve manipüle edilebilir olduğu bilinmektedir. Boris Kaul (kıyaslamaların bazılarının yazarı), kıyaslamaların nasıl oyunlaştırıldığı hakkında ayrıntılı olarak yazmıştır. Akılda tutulması gereken bir diğer şey de, bazı kıyaslamaların agresif bir şekilde gelişmiş optimizasyon özelliklerini kullanması ve böylece potansiyel performansı, yani bazı uyarılar verildiğinde mümkün olan performansı göstermesidir, ancak tüm kod tabanınızı aktif olarak gözden geçirmek, optimizasyon adaylarını belirlemek ve optimizasyon uyarılarının getirdiği regresyon risklerini değerlendirmek için zaman harcamadığınız sürece gerçekçi olarak olası değildir.
Tipik performans özelliklerini gösterme ruhuyla, bu karşılaştırma sayfasında sunulan kıyaslamalar, aynı koşullarda, naif, deyimsel bir şekilde (yani, normalde kodunuzun %99'unu yazacağınız şekilde) uygulanır ve bir veya diğer framework'ü yapay olarak daha iyi göstermek için hileler veya gelişmiş optimizasyonlar kullanılmaz. Buradaki herhangi bir DbMonster uygulamasının daha deyimsel bir şekilde yazılabileceğini düşünüyorsanız, bir PR katkıda bulunmaya teşvik edilirsiniz.
Karmaşıklık
Hem React hem de Mithril.js, diğer framework'lere kıyasla nispeten küçük API yüzeylerine sahiptir, bu da öğrenme eğrisini kolaylaştırmaya yardımcı olur. Bununla birlikte, deyimsel Mithril.js, düz ES5 ve başka bağımlılıklar olmadan okunabilirlik kaybı olmadan yazılabilirken, deyimsel React, karmaşık araçlara (örneğin Babel, JSX eklentisi, vb.) büyük ölçüde güvenir ve bu karmaşıklık düzeyi genellikle sözdizimi uzantıları (örneğin Redux'ta standart olmayan nesne yayma sözdizimi), mimariler (örneğin değişmez veri kütüphaneleri kullananlar) veya çanlar ve ıslıklar (örneğin sıcak modül yeniden yükleme) şeklinde ekosisteminin popüler kısımlarına kadar uzanır.
Karmaşık araç zincirleri Mithril.js ve diğer framework'lerle de mümkün olsa da, Mithril kullanırken KISS ve YAGNI ilkelerini izlemeniz şiddetle tavsiye edilir.
Öğrenme eğrisi
Hem React hem de Mithril.js nispeten küçük öğrenme eğrilerine sahiptir. React'in öğrenme eğrisi çoğunlukla bileşenleri ve yaşam döngülerini anlamayı içerir. Mithril.js bileşenleri için öğrenme eğrisi neredeyse aynıdır. Mithril.js'de öğrenilecek daha fazla API olduğu açıktır, çünkü Mithril.js ayrıca yönlendirme ve XHR'yi de içerir, ancak öğrenme eğrisi React, React Router ve superagent veya axios gibi bir XHR kütüphanesini öğrenmeye oldukça benzer olacaktır.
Deyimsel React, JSX ve uyarıları hakkında çalışma bilgisi gerektirir ve bu nedenle Babel ile ilgili küçük bir öğrenme eğrisi de vardır.
Belgeleme
React belgeleri açık ve iyi yazılmıştır ve iyi bir API referansı, başlamak için öğreticiler ve çeşitli gelişmiş kavramları kapsayan sayfalar içerir. Ne yazık ki, React yalnızca bir görüntüleme kütüphanesi olmakla sınırlı olduğundan, belgeleri React'in gerçek hayattaki bir uygulama bağlamında deyimsel olarak nasıl kullanılacağını araştırmaz. Sonuç olarak, birçok popüler durum yönetimi kütüphanesi vardır ve bu nedenle React kullanan mimariler şirketten şirkete (veya hatta projeler arasında) önemli ölçüde farklılık gösterebilir.
Mithril.js belgeleri ayrıca giriş öğreticileri, gelişmiş kavramlar hakkında sayfalar ve giriş/çıkış türü bilgileri, çeşitli yaygın kullanım durumları için örnekler ve kötüye kullanım ve anti-pattern'lere karşı tavsiyeler içeren kapsamlı bir API referans bölümü içerir. Ayrıca hızlı başvuru için bir kopya kağıdı da içerir.
Mithril.js belgeleri ayrıca, bir geliştiriciye web standartlarının artık daha büyük yerleşik kütüphanelerle aynı düzeyde olabileceğini bildirmek uygun olduğunda, gerçek hayattaki uygulamalarda yaygın kullanım durumlarına basit, metale yakın çözümler gösterir.
Angular
Angular, Google tarafından geliştirilen bir web uygulama framework'üdür.
Angular ve Mithril.js oldukça farklıdır, ancak birkaç benzerliği paylaşırlar:
- Her ikisi de bileşenleştirmeyi destekler
- Her ikisinde de web uygulamalarının çeşitli yönleri için bir dizi araç vardır (örneğin yönlendirme, XHR)
Angular ve Mithril.js arasındaki en belirgin fark, karmaşıklıklarındadır. Bu, görünümlerin nasıl uygulandığında en kolay şekilde görülebilir. Mithril.js görünümleri düz JavaScript'tir ve akış kontrolü, üçlü operatörler veya Array.prototype.map gibi JavaScript yerleşik mekanizmalarıyla yapılır. Öte yandan Angular, HTML görünümlerini genişletmek için bir direktif sistemi uygular, böylece HTML öznitelikleri ve interpolasyonları içinde JavaScript benzeri ifadeleri değerlendirmek mümkün olur. Angular aslında bunu başarmak için JavaScript'te yazılmış bir ayrıştırıcı ve bir derleyici ile birlikte gelir. Bu yeterince karmaşık görünmüyorsa, aslında iki derleme modu vardır (performans için dinamik olarak JavaScript işlevleri üreten varsayılan bir mod ve İçerik Güvenliği Politikası kısıtlamalarıyla başa çıkmak için daha yavaş bir mod).
Performans
Angular, yıllar içinde performans açısından çok ilerleme kaydetti. Angular 1, büyük $scope yapılarının sürekli olarak farklılaştırılması ihtiyacı nedeniyle yavaşlama eğiliminde olan kirli kontrol olarak bilinen bir mekanizma kullandı. Angular 2, çok daha performanslı olan bir şablon değişiklik algılama mekanizması kullanır. Bununla birlikte, Angular'ın iyileştirmelerine rağmen, Mithril.js'nin küçük kod tabanı boyutunun sağladığı denetim kolaylığı nedeniyle Mithril.js genellikle Angular'dan daha hızlıdır.
Angular ve Mithril.js arasında yükleme sürelerinin karşılaştırmasını yapmak zordur. Bunun birkaç nedeni vardır. Birincisi, Angular 1 ve 2'nin aslında tamamen farklı kod tabanları olması ve her iki sürümün de resmi olarak desteklenmesi ve sürdürülmesidir (ve şu anda kullanımda olan Angular kod tabanlarının büyük çoğunluğu hala sürüm 1'i kullanmaktadır). İkinci neden, hem Angular hem de Mithril.js'nin modüler olmasıdır. Her iki durumda da, belirli bir uygulamada kullanılmayan framework'ün önemli bir bölümünü kaldırmak mümkündür.
Bununla birlikte, bilinen en küçük Angular 2 paketi, Brotli algoritmasıyla sıkıştırılmış 29kb'lık bir hello world (standart gzip kullanılarak 35kb'dir) ve Angular'ın en kullanışlı işlevselliğinin çoğu kaldırılmıştır. Karşılaştırma için, tüm özellikleriyle birlikte Mithril.js çekirdeğini içeren bir Mithril.js hello world yaklaşık 10kb gzipped olacaktır.
Ayrıca, Angular ve Mithril.js gibi framework'lerin önemsiz olmayan uygulamalar için tasarlandığını unutmayın, bu nedenle Angular'ın API yüzeyinin tamamını kullanmayı başaran bir uygulamanın yalnızca 29kb yerine birkaç yüz kb framework kodu indirmesi gerekir.
Güncelleme performansı
Güncelleme performansını kıyaslamak için kullanışlı bir araç, Ember ekibi tarafından geliştirilen DbMonster adlı bir araçtır. Bir tabloyu olabildiğince hızlı günceller ve saniyedeki kare sayısı (FPS) ve JavaScript sürelerini (min, max ve ortalama) ölçer. FPS sayısını değerlendirmek zor olabilir, çünkü tarayıcı yeniden çizme sürelerini ve setTimeout sıkıştırma gecikmesini de içerir, bu nedenle bakılacak en anlamlı sayı ortalama render süresidir. Bir Angular uygulaması ve bir Mithril.js uygulaması karşılaştırabilirsiniz. Her iki uygulama da naiftir (yani optimizasyon yok). Örnek sonuçlar aşağıda gösterilmiştir:
| Angular | Mithril.js |
|---|---|
| 11.5 ms | 6.4 ms |
Karmaşıklık
Angular, sunduğu araç miktarı (çeşitli direktifler ve hizmetler şeklinde) açısından Mithril.js'den üstündür, ancak aynı zamanda çok daha karmaşıktır. Angular'ın API yüzeyini Mithril.js'ninkiyle karşılaştırın. Hangi API'nin daha açıklayıcı ve ihtiyaçlarınızla daha alakalı olduğuna kendiniz karar verebilirsiniz.
Angular 2'nin anlaşılması gereken çok daha fazla kavramı vardır: dil düzeyinde, Typescript önerilen dildir ve bunun üzerine bağlamalar, borular, "güvenli gezgin operatörü" gibi Angular'a özgü şablon sözdizimi de vardır. Ayrıca modüller, bileşenler, hizmetler, direktifler vb. gibi mimari kavramları ve nerede neyin kullanılmasının uygun olduğunu da öğrenmeniz gerekir.
Öğrenme eğrisi
Elmaları elmalarıyla karşılaştırırsak, Angular 2 ve Mithril.js benzer öğrenme eğrilerine sahiptir: her ikisinde de bileşenler mimarinin merkezi bir yönüdür ve her ikisinde de makul yönlendirme ve XHR araçları vardır.
Bununla birlikte, Angular'ın Mithril'den öğrenilecek çok daha fazla kavramı vardır. Genellikle önemsiz bir şekilde uygulanabilen birçok şey için Angular'a özgü API'ler sunar (örneğin çoğullaştırma esasen bir switch ifadesidir, "gerekli" doğrulama basitçe bir eşitlik kontrolüdür, vb.). Angular şablonları ayrıca Mithril.js'de JavaScript'in yerel olarak yaptığı şeyi taklit etmek için çeşitli soyutlama katmanlarına sahiptir - Angular'ın ng-if/ngIf'si, bir ifade dizesini değerlendirmek ve sözcüksel kapsamı taklit etmek için özel bir ayrıştırıcı ve derleyici kullanan bir direktiftir... ve benzeri. Mithril.js çok daha şeffaf olma eğilimindedir ve bu nedenle hakkında akıl yürütmek daha kolaydır.
Belgeleme
Angular 2 belgeleri kapsamlı bir giriş öğreticisi ve bir uygulama uygulayan başka bir öğretici sağlar. Ayrıca gelişmiş kavramlar, bir kopya kağıdı ve bir stil kılavuzu için çeşitli kılavuzlara sahiptir. Ne yazık ki, şu anda API referansı çok arzulanan bir şey bırakıyor. Çeşitli API'ler ya belgelenmemiş ya da API'nin ne için kullanılabileceğine dair hiçbir bağlam sağlamıyor.
Mithril.js belgeleri ayrıca giriş öğreticileri, gelişmiş kavramlar hakkında sayfalar ve giriş/çıkış türü bilgileri, çeşitli yaygın kullanım durumları için örnekler ve kötüye kullanım ve anti-pattern'lere karşı tavsiyeler içeren kapsamlı bir API referans bölümü içerir. Ayrıca hızlı başvuru için bir kopya kağıdı da içerir.
Mithril.js belgeleri ayrıca, bir geliştiriciye web standartlarının artık daha büyük yerleşik kütüphanelerle aynı düzeyde olabileceğini bildirmek uygun olduğunda, gerçek hayattaki uygulamalarda yaygın kullanım durumlarına basit, metale yakın çözümler gösterir.
Vue
Vue, Angular'a benzer bir görüntüleme kütüphanesidir.
Vue ve Mithril.js'nin birçok farklılığı vardır, ancak bazı benzerlikleri de paylaşırlar:
- Her ikisi de sanal DOM ve yaşam döngüsü metotları kullanır
- Her ikisi de görünümleri bileşenler aracılığıyla düzenler
Vue 2, sanal DOM sistemi olarak Snabbdom'un bir çatalını kullanır. Ek olarak, Vue ayrıca yönlendirme ve durum yönetimi için ayrı modüller olarak araçlar sağlar. Vue, Angular'a çok benzer ve benzer bir direktif sistemi, HTML tabanlı şablonlar ve mantık akışı direktifleri sağlar. Angular'dan, bir bileşenin veri ağacındaki yerel metotların üzerine yazan bir maymun yamalama reaktif sistemi uygulamasıyla farklılık gösterir (Angular 1, benzer sonuçlar elde etmek için kirli kontrol ve özet/uygulama döngüleri kullanırken). Angular 2'ye benzer şekilde, Vue HTML şablonlarını işlevlere derler, ancak derlenmiş işlevler Angular'ın derlenmiş render işlevlerinden ziyade Mithril.js veya React görünümlerine daha çok benzer.
Karşılaştırılabilir özelliklere sahip oldukları düşünüldüğünde, Vue Angular'dan önemli ölçüde daha küçüktür, ancak Mithril.js kadar küçük değildir (Vue çekirdeği yaklaşık 23kb gzipped iken, Mithril.js'deki eşdeğer render modülü yaklaşık 4kb gzipped'dir). Her ikisi de benzer performans özelliklerine sahiptir, ancak kıyaslamalar genellikle Mithril.js'nin biraz daha hızlı olduğunu gösterir.
Performans
İşte kütüphane yükleme sürelerinin bir karşılaştırması, yani her framework için JavaScript kodunu ayrıştırmak ve çalıştırmak için gereken süre, ilk satıra bir console.time() çağrısı ve yalnızca framework kodundan oluşan bir komut dosyasının sonuna bir console.timeEnd() çağrısı eklenerek. Okumayı kolaylaştırmak için, işte mütevazı bir 2010 masaüstü bilgisayarda Chrome'da dosya sisteminden çalışan, paketlenmiş komut dosyalarına manuel olarak eklenmiş günlük kaydı koduyla en iyi 20 sonuç:
| Vue | Mithril.js |
|---|---|
| 21.8 ms | 4.5 ms |
Kütüphane yükleme süreleri, uzun süre açık kalmayan uygulamalarda (örneğin, mobildeki her şey) önemlidir ve önbelleğe alma veya diğer optimizasyon teknikleri yoluyla iyileştirilemez.
Güncelleme performansı
Güncelleme performansını kıyaslamak için kullanışlı bir araç, Ember ekibi tarafından geliştirilen DbMonster adlı bir araçtır. Bir tabloyu olabildiğince hızlı günceller ve saniyedeki kare sayısı (FPS) ve JavaScript sürelerini (min, max ve ortalama) ölçer. FPS sayısını değerlendirmek zor olabilir, çünkü tarayıcı yeniden çizme sürelerini ve setTimeout sıkıştırma gecikmesini de içerir, bu nedenle bakılacak en anlamlı sayı ortalama render süresidir. Bir Vue uygulaması ve bir Mithril.js uygulaması karşılaştırabilirsiniz. Her iki uygulama da naiftir (yani optimizasyon yok). Örnek sonuçlar aşağıda gösterilmiştir:
| Vue | Mithril.js |
|---|---|
| 9.8 ms | 6.4 ms |
Karmaşıklık
Vue, Angular'dan büyük ölçüde ilham almıştır ve Angular'ın yaptığı birçok şeye sahiptir (örneğin direktifler, filtreler, çift yönlü bağlamalar, v-cloak), ancak aynı zamanda React'ten ilham alan şeylere de sahiptir (örneğin bileşenler). Vue 2.0 itibariyle, tek dosyalık bileşenlere ve çeşitli webpack tabanlı dil dönüştürme eklentilerine ek olarak, hyperscript/JSX sözdizimini kullanarak şablonlar yazmak da mümkündür. Vue hem çift yönlü veri bağlama hem de isteğe bağlı bir Redux benzeri durum yönetimi kütüphanesi sağlar, ancak Angular'dan farklı olarak hiçbir stil kılavuzu sağlamaz. Bir şeyi yapmanın birçok yolu yaklaşımı, uzun ömürlü projelerde mimari parçalanmaya neden olabilir.
Mithril.js'nin çok daha az kavramı vardır ve tipik olarak uygulamaları bileşenler ve bir veri katmanı açısından düzenler. JavaScript'in özelliklerini kullanmanın doğrudan sonucu, daha az araca ihtiyaç duyulması ve daha basit bir proje kurulumudur.
Belgeleme
Hem Vue hem de Mithril.js iyi belgelere sahiptir. Her ikisi de örneklerle iyi bir API referansı, başlamak için öğreticiler ve çeşitli gelişmiş kavramları kapsayan sayfalar içerir.
Ancak, Vue'nun bir şeyi yapmanın birçok yolu yaklaşımı nedeniyle, bazı şeyler yeterince belgelenmemiş olabilir. Örneğin, hyperscript'leri büyük ölçüde örtbas edilmiştir.
Mithril.js belgeleri, bir konu Mithril kapsamı dışındaki şeyleri içeriyorsa, genellikle çok detaylı bilgi vermeyi tercih eder. Örneğin, bir konu 3. taraf bir kütüphaneyi içerdiğinde, Mithril.js belgeleri 3. taraf kütüphane için kurulum sürecini adım adım anlatır. Mithril.js belgeleri ayrıca, bir geliştiriciye web standartlarının artık daha büyük yerleşik kütüphanelerle aynı düzeyde olabileceğini bildirmek uygun olduğunda, gerçek hayattaki uygulamalarda yaygın kullanım durumlarına genellikle basit, metale yakın çözümler gösterir.
Mithril.js'nin öğreticileri de Vue'nunkinden çok daha fazla alanı kapsar: Vue öğreticisi, büyük çekirdek API'sini kapsamak için birkaç sayfadan geçtikten sonra basit bir yerel yapılacaklar listesiyle sona erer. Mithril.js'nin 10 dakikalık kılavuzu API'sinin çoğunu kapsar ve hatta bir sunucudan veri getirme ve yönlendirme gibi gerçek hayattaki uygulamaların temel yönlerini ele alır. Bu yeterli değilse, daha uzun, daha kapsamlı bir öğretici de vardır.