ASP.NET Core 2.0 Razor vs Angular / React / etc

101

Saya dan tim saya telah menerima dana untuk mulai mengembangkan aplikasi web tingkat Perusahaan (tidak akan menjelaskan secara rinci tentang apa yang dilakukannya). Aplikasi akan memiliki banyak halaman web terpisah tetapi dua dari halaman tersebut lebih fokus dan sangat berat - berat seperti banyak interaksi pengguna, modals yang menampilkan data massal, koneksi websocket, chat, dll.

Saya telah ditugaskan ke Kepala Arsitek dalam proyek tersebut, jadi saya melakukan beberapa penelitian tentang kerangka kerja web terbaru. Untuk bagian belakang, kami telah melakukan beberapa pengujian dan telah memutuskan untuk menggunakan platform Azure SQL. Sejauh ini, saya menyukai peningkatan yang telah dilakukan, dan sedang dilakukan, pada ASP.NET dengan Core 2.0. Khususnya mesin Razor, di atas versi ASP.NET MVC sebelumnya.

Saya ingin mendapatkan beberapa pendapat ahli tentang Razor vs. Angular / React "baru" dan sejenisnya. Saya lebih peduli dengan kinerja. Bagaimana Core 2.0 Razor mendukung kerangka kerja rendering sisi klien? Apakah perbedaannya dapat diabaikan? Aplikasi kami menargetkan 1.000.000 pengguna potensial (kira-kira 100.000 secara bersamaan).

Terima kasih sebelumnya!

— TchPowDog
sumber

Yang Anda maksud dengan " Razor baru " adalah halaman Razor?

— Werner

Jadi mana yang Anda pilih pada akhirnya dan bagaimana hasilnya?

— stt106

Bagaimana Anda melanjutkan (atau apakah Anda melanjutkan) dengan proyek ini? Saya berada dalam situasi yang hampir sama dengan Anda sekarang dan akan menyukai pembaruan!

— JLo

Hai JLo dan stt106. Maaf, butuh waktu lama untuk menjawab. Kami akhirnya menggunakan front-end Angular dan backend ASP.NET Core API, menggunakan Azure SQL. Sejauh ini hal itu berhasil dengan baik bagi kami! Saya membayangkan React akan menjadi pengganti yang mirip dengan Angular jika Anda lebih nyaman dengannya. Saya harus belajar Angular, yang merupakan transisi yang sangat mudah, dan saya menyukainya sekarang!

— TchPowDog

Perbandingan kecepatan ASP.Net Core vs Angular / React di luar topik? Mungkin ada jawaban kanonik untuk itu. Adapun hari ini kami memiliki Core 2.2 dan segera 3.0.

— MikroDel

Jawaban:

Kami akhirnya menggunakan front-end Angular dan backend ASP.NET Core API, menggunakan Azure SQL. Kami menguji Core Razor dan, meskipun lebih baik daripada Razor lama, Angular pada akhirnya jauh lebih cepat bagi kami. Sejauh pengalaman pengguna berjalan, Angular (atau React) jauh lebih unggul dalam hal kinerja. Aspek pengikatan model dari Angular yang kami temukan menjadi keuntungan besar dari rendering sisi server. Menggunakan Razor (atau rendering sisi server secara umum) memang, bagaimanapun, memberikan integritas keseluruhan yang lebih baik sejauh data berjalan dan itu membuat transisi data yang lebih baik dari front-end ke back-end. Ada keterputusan yang sebenarnya antara kerangka kerja front-end dan API. Semua data yang diteruskan ke server harus dimasukkan ke objek yang diketik - ini berarti Anda harus mengelola dua set model POCO terpisah. Ini dapat menyebabkan masalah jika objek server dan objek front-end tidak sejajar. Saat ini, Entity Framework Core belum matang sehingga kami memiliki masalah dengan memperbarui objek, mengajukan kueri objek, termasuk objek turunan, dll.

Secara keseluruhan, pengaturan ini telah berhasil dengan baik bagi kami sejauh ini! Saya membayangkan React akan menjadi pengganti yang mirip dengan Angular jika Anda lebih nyaman dengannya. Saya harus belajar Angular, yang merupakan transisi yang sangat mudah, dan saya menyukainya sekarang!

— TchPowDog
sumber

Sejauh menjaga dua set model POCO disinkronkan, ada ekstensi yang sangat berguna untuk VS yang membuat antarmuka bersudut dari model MVC, lihat mesin ketik

— Andy Braham

Nah, secara pribadi, jika saya harus menggunakan Angular, saya akan menggunakan NoSql untuk bagian DB.

— Venzentx

Saya tidak bisa membayangkan memilih pisau cukur ASP.NET di atas Angular. Di masa lalu ASP.NET memberikan beberapa kode yang sudah dikenal untuk pengembang .NET, tetapi dengan RAZOR, kurva pembelajarannya lebih tinggi daripada menggunakan Angular. MVC memisahkan logika dari HTML.

— Tandai

@ Mark Saya tidak percaya itu. Razor Pages sempurna, khususnya cara menangani pengikatan data. Mereka terlalu bagus. Tapi sumber untuk skenarionya sangat cocok.

— Mosia Thabo

@MosiaThabo, Mark tidak sedang membicarakan Razor Pages, dia berbicara tentang Razor. Yang dimaksud OP saya. Dalam posting asli saya, saya tidak mengacu pada Razor Pages (atau sekarang disebut Blazor, menurut saya). Saya secara khusus berbicara tentang rendering sisi klien vs rendering sisi server. Razor Pages adalah rasa Angular / React dari Microsoft, yang menurut saya mereka anggap perlu karena keuntungan yang Anda miliki dengan Angular dan React.

— TchPowDog

Dengan menggunakan Angular / React with API di sisi server:

Anda menghilangkan proses pembuatan HTML di sisi server dan Anda menghemat cpu
api menghasilkan muatan kecil (json) dan Razor (html) dari kursus akan berukuran jauh lebih besar, pemuatan ulang halaman penuh yang konstan dan perjalanan pulang pergi pos balik. jadi api dan spa menghemat bandwidth
api dan spa dapat memiliki skenario pembuatan versi, penskalaan, dan penerapan yang berbeda
Dengan menggunakan api, Anda juga dapat mendukung aplikasi seluler dan jika Anda memulai dengan Razor, Anda mungkin memerlukan api di masa mendatang

Tetapi dengan menggunakan Angular / React, Anda harus khawatir tentang klien:

klien harus mengaktifkan javascript
klien harus memiliki browser modern
klien harus memiliki perangkat keras yang cukup kuat
SEO

— Mohsen Esmailpour
sumber

Saya memahami perbedaan kedua kerangka tersebut, saya lebih mementingkan kinerja.

— TchPowDog

Jalur pipa yang sama ada untuk keduanya tetapi saya tidak tahu ada patokan apa pun untuk halaman pisau cukur. tautan ini mungkin membantu - ASP.NET Razor Pages vs MVC: Bagaimana Razor Pages Sesuai di Toolbox Anda?

— Mohsen Esmailpour

Razor mendukung seluler, kerugiannya tidak terlalu penting yang terdaftar. Keduanya cepat dengan caranya sendiri. Saya lebih suka Angular, tetapi keduanya dioptimalkan. Razor mengoptimalkan kode dengan tidak menggunakan pohon seperti yang dilakukan MVC. Angular adalah sisi klien sehingga tidak benar-benar menggunakan pohon, tetapi juga mengoptimalkan data dalam HTML sampai batas tertentu.

— Nick Turner

@NickTurner Saya memahaminya tidak hanya melihat halaman web di ponsel cerdas Anda, tetapi juga aplikasi lengkap sendiri. Misalnya aplikasi Android, yang bisa mendapatkan data dari API server yang tidak berubah apa adanya, sementara di sisi lain menggunakan fungsionalitas yang disediakan Android - dukungan animasi yang lebih baik, pemberitahuan, pesan bersulang, dll.

— Raphael Schmitz

Saya tidak memiliki tolok ukur. Tapi, saya memiliki beberapa proyek yang menjalankan JQuery, Razor, .NET MVC (C #), AJAX. Bukan untuk skala yang Anda tangani.

Saran .. Pastikan untuk memikirkan semuanya dan ikuti praktik terbaik. Untuk menjaga hal-hal tetap dapat dipelihara, pastikan untuk memecah pengontrol, tampilan, model menjadi grup yang lebih kecil dan bermakna. Ketika saya mulai, saya membuat kesalahan dengan memasukkan semuanya ke dalam satu pengontrol Home, dan banyak tampilan di folder bersama. Pada awalnya baik-baik saja, tetapi ketika fitur creep dimulai, itu menjadi berantakan dan sulit untuk kembali dan mendesain ulang.

Saya juga menggunakan Linq2SQL. Saya membuat kesalahan dengan membuat model untuk semuanya dan kemudian menyadari bahwa saya bisa mengembalikan hasil yang ditetapkan dari kueri saya sebagai model. duh.

Jika Anda menggunakan .NET MVC dan mengkhawatirkan kinerja, berikut adalah hal-hal yang saya temui:

JANGAN mengembalikan tampilan parsial yang membuat blok HTML besar! Pastikan untuk meminimalkan semuanya. Singkirkan semua ruang putih. Gunakan nama ID yang lebih kecil. Luangkan waktu untuk membuat html yang seringan mungkin. Kembalikan JSON dan minta klien melakukan beberapa pekerjaan.

Berhati-hatilah dengan cara Anda mengembangkan CSS. Jangan menggunakan banyak gaya sebaris, luangkan waktu untuk memasukkannya ke dalam file CSS yang nantinya dapat Anda perkecil.

Hal yang sama berlaku untuk JS sisi klien Anda. Sangat menggoda untuk meletakkan JS di dalam tampilan parsial. Jaga semuanya tetap teratur.

Rendering di IE sangat buruk. Apalagi jika gambarnya banyak. Pastikan untuk mengompres gambar sebanyak mungkin, tanpa kehilangan kualitas tentunya.

— Keith Aymar
sumber