Perbandingan Dunia Nyata dari Kerangka Kerja Front-End dengan Tolok Ukur (pembaruan 2018)

Artikel ini adalah penyegaran dari A Real-World Comparison of Front-End Frameworks with Benchmarks from December 2017.

Dalam perbandingan ini, kami akan menunjukkan bagaimana implementasi berbeda dari aplikasi contoh RealWorld yang hampir identik saling menumpuk.

Aplikasi contoh RealWorld memberi kita:

  1. Real World App - Sesuatu yang lebih dari sekedar "todo". Biasanya "todos" tidak menyampaikan pengetahuan dan perspektif yang cukup untuk benar-benar membangun aplikasi nyata .
  2. Standar - Sebuah proyek yang sesuai dengan aturan tertentu. Menyediakan API back-end, markup statis, gaya, dan spesifikasi.
  3. Ditulis atau ditinjau oleh seorang ahli - Sebuah proyek dunia nyata yang konsisten yang, idealnya, seorang ahli dalam teknologi itu akan membangun atau meninjau.

Kritik dari versi terakhir (Des 2017)

✅️ Angular tidak diproduksi. Aplikasi demo yang terdaftar di repo RealWorld menggunakan versi pengembangan, tetapi berkat Jonathan Faircloth, sekarang dalam versi produksi!

✅ Vue tidak terdaftar di repo Dunia Nyata, dan karenanya tidak disertakan. Seperti yang bisa Anda bayangkan, di dunia front-end, ini menyebabkan banyak panas. Kenapa Anda tidak menambahkan Vue? Ada apa denganmu? Kali ini Vue.js hadir! Terima kasih Emmanuel Vilsbol .

Library / framework mana yang kita bandingkan?

Seperti pada artikel Desember 2017, kami menyertakan semua implementasi yang terdaftar di repo RealWorld. Tidak masalah jika itu memiliki banyak pengikut atau tidak. Satu-satunya kualifikasi adalah yang muncul di halaman repo RealWorld.

Metrik apa yang kami lihat?

  1. Kinerja: Berapa lama Aplikasi ini menampilkan konten dan dapat digunakan?
  2. Ukuran: Seberapa besar Aplikasinya? Kami hanya akan membandingkan ukuran file JavaScript yang dikompilasi. CSS sama untuk semua varian, dan diunduh dari CDN (Jaringan Pengiriman Konten). HTML juga umum untuk semua varian. Semua teknologi dikompilasi atau ditranspilasi ke JavaScript, jadi kami hanya mengukur file ini.
  3. Lines of Code: Berapa banyak baris kode yang penulis perlukan untuk membuat aplikasi RealWorld berdasarkan spesifikasi? Agar adil, beberapa aplikasi memiliki lebih banyak fitur, tetapi seharusnya tidak memiliki dampak yang signifikan. Satu-satunya folder yang kami ukur ada src/di setiap aplikasi.

Metrik # 1: Performa

Lihat uji cat bermakna pertama dengan Lighthouse Audit yang dikirimkan bersama Chrome.

Semakin cepat Anda melukis, semakin baik pengalaman orang yang menggunakan Aplikasi. Lighthouse juga mengukur First interactive, tetapi ini hampir identik untuk sebagian besar aplikasi, dan dalam versi beta.

Anda mungkin tidak akan melihat banyak perbedaan dalam hal kinerja.

Metrik # 2: Ukuran

Ukuran transfer dari tab jaringan Chrome. Header respons GZIP ditambah isi respons, seperti yang dikirimkan oleh server.

Semakin kecil filenya, semakin cepat unduhannya (dan semakin sedikit yang harus diurai).

Ini tergantung pada ukuran framework Anda serta dependensi tambahan yang Anda tambahkan, dan seberapa baik alat build Anda dapat membuat bundel kecil.

Anda dapat melihat bahwa Svelte, Dojo 2, dan AppRun melakukan pekerjaan yang cukup baik. Saya tidak bisa mengatakan cukup tentang Elm — terutama ketika Anda melihat grafik berikutnya. Saya ingin melihat bagaimana Hyperapp dibandingkan… mungkin lain kali, Jorge Bucaran?

Metrik # 3: Garis Kode

Menggunakan cloc kami menghitung baris kode di folder src setiap repo. Baris kosong dan komentar bukan bagian dari perhitungan ini Mengapa ini berarti?

Jika debugging adalah proses menghapus bug perangkat lunak, maka pemrograman harus menjadi proses menempatkannya di - Edsger Dijkstra

Semakin sedikit baris kode yang Anda miliki, maka kemungkinan menemukan kesalahan semakin kecil. Anda juga memiliki basis kode yang lebih kecil untuk dipelihara.

Kesimpulannya

Saya ingin mengucapkan banyak terima kasih kepada Eric Simons yang telah membuat repo Aplikasi Contoh RealWorld, dan kepada banyak kontributor yang menulis penerapan yang berbeda.

Pembaruan: Terima kasih kepada Jonathan Faircloth karena menyediakan versi produksi Angular.

Dan jika Anda menemukan artikel ini menarik, Anda harus mengikuti saya di Twitter dan Medium.