Pure Front end JavaScript dengan API Web versus tampilan MVC dengan ajax

13

Ini lebih merupakan diskusi untuk apa pendapat orang-orang hari ini tentang cara membagi aplikasi web.

Saya terbiasa membuat aplikasi MVC dengan semua pandangan dan pengontrolnya. Saya biasanya akan membuat tampilan penuh dan mengirimkannya kembali ke browser pada permintaan halaman penuh, kecuali ada area spesifik yang saya tidak ingin langsung terisi dan kemudian akan menggunakan peristiwa pemuatan halaman DOM untuk memanggil server untuk memuat area lain menggunakan AJAX.

Juga, ketika datang ke refresh halaman parsial, saya akan memanggil metode tindakan MVC yang akan mengembalikan fragmen HTML yang kemudian bisa saya gunakan untuk mengisi bagian halaman. Ini untuk area yang saya tidak ingin memperlambat pemuatan halaman awal, atau area yang lebih cocok dengan panggilan AJAX. Salah satu contoh akan untuk paging tabel. Jika Anda ingin pindah ke halaman berikutnya, saya lebih suka jika panggilan AJAX mendapatkan info itu daripada menggunakan refresh halaman penuh. Tetapi panggilan AJAX masih akan mengembalikan sebuah fragmen HTML.

Pertanyaanku adalah. Apakah pemikiran saya tentang ini kuno karena saya berasal dari latar belakang bersih daripada latar belakang ujung murni?

Pengembang front-end cerdas yang bekerja dengan saya, lebih suka melakukan kurang lebih dalam tampilan MVC, dan lebih suka melakukan segala sesuatu di front end. Langsung ke panggilan API web yang mengisi halaman. Sehingga daripada memanggil metode tindakan MVC, yang mengembalikan HTML, ia lebih memilih untuk mengembalikan objek standar dan menggunakan javascript untuk membuat semua elemen halaman.

Cara pengembang ujung depan berarti semua manfaat yang biasanya saya dapatkan dengan validasi model MVC, termasuk validasi sisi klien, akan hilang. Ini juga berarti bahwa setiap manfaat yang saya dapatkan dengan membuat tampilan, dengan template html sangat diketik dll akan hilang.

Saya percaya ini berarti saya harus menulis validasi yang sama untuk validasi front end dan back end. Javascript juga perlu memiliki banyak metode untuk membuat semua bagian DOM. Misalnya, ketika menambahkan baris baru ke tabel, saya biasanya menggunakan tampilan parsial MVC untuk membuat baris, dan kemudian mengembalikan ini sebagai bagian dari panggilan AJAX, yang kemudian akan disuntikkan ke dalam tabel. Dengan menggunakan cara front end murni, javascript akan mengambil objek (untuk, katakanlah, produk) untuk baris dari panggilan api, dan kemudian membuat baris dari objek itu. Membuat setiap bagian dari baris tabel.

Situs web yang dimaksud akan memiliki banyak bidang yang berbeda, mulai dari administrasi, formulir, pencarian produk, dll. Situs web yang menurut saya tidak perlu dirancang dengan cara aplikasi satu halaman.

Apa pendapat semua orang tentang ini?

Saya tertarik untuk mendengar dari devs front end dan devs back end.

eyeballpaul
sumber
Diskusi serupa tentang SO tentang pemisahan API dan klien stackoverflow.com/questions/10941249/…
Don Cheadle

Jawaban:

9

Saya juga agak skeptis bahwa setiap aplikasi web baru perlu SPA tetapi satu hal yang saya jual 100% sebagai generalis dengan sebagian besar pengalamannya di sisi klien adalah bahwa arsitektur berorientasi layanan yang lepas data daripada HTML ke klien adalah cara untuk menentukan apakah Anda memuat laman / tampilan prebuilt dari server dan melakukan banyak hal dinamis dengan data setelah pemuatan laman atau membangun hampir semuanya 100% dengan JavaScript.

Alasan ini lebih disukai daripada dev sisi klien sama seperti alasan tidak ada yang menginginkan HTML dalam database. Apa yang seharusnya dilakukan oleh sisi klien ketika mereka ingin menggunakan tabel misalnya ketika mereka telah menyerahkan HTML? Biaya kinerja penanganan semua yang ada di klien sepele dibandingkan dengan membuat permintaan server lain untuk melakukannya untuk Anda. Juga, pembuatan HTML cukup tercakup dalam JS-land. Menyortir data dan membuat baris tabel HTML baru darinya adalah pekerjaan yang sangat sepele untuk pengembang sisi klien yang berpengalaman.

Dan apa gunanya arsitektur back end ke ujung depan untuk perangkat lain yang mungkin perlu melakukan sesuatu yang eksotis seperti widget implement yang 100% kanvas atau struktur HTML yang sama sekali berbeda? Mengapa dev sisi klien harus memuat studio visual atau mengetuk pintu dev ujung belakang untuk membuat tweak presentasi yang ketat?

Adapun kekhawatiran Anda tentang hilangnya validasi templat yang sangat diketik, percayalah ketika saya mengatakan bahwa jika Anda berurusan dengan pengembang sisi klien yang kompeten, Anda tidak akan menemukan .NET framework atau alat studio visual yang lebih cocok untuk diamond-to-dust-crushingly anal tentang HTML yang terbentuk dengan baik dan valid daripada dirinya sendiri.

Dari perspektif full-stack, saya menyukainya karena itu berarti saya tidak akan pernah harus memancing logika bisnis atau aplikasi, beberapa yutz memutuskan untuk jatuh ke lapisan templating. Belum lagi beban per pengguna yang dikeluarkan dari server Anda sementara dalam banyak kasus sebenarnya meningkatkan pengalaman memuat bagi pengguna di peramban modern dengan komputer modern.

Saya pikir itu juga lebih mudah untuk alasan tentang arsitektur back end ketika Anda telah sepenuhnya mengisolasinya dari semua hal presentasi. Anda tidak lagi mengambil data untuk menggabungkannya ke dalam beberapa HTML. Anda menariknya bersama-sama untuk membuat struktur data implementasi-independen yang lebih mementingkan penggunaan umum daripada apa yang akan dilakukan dengan itu di sisi lain. IMO, yang cenderung mengarah pada konsistensi yang lebih dalam bagaimana hal-hal ditangani karena data sekarang menjadi tujuan akhir daripada langkah kedua ke terakhir dari suatu proses dan ada lebih sedikit peluang untuk masalah yang tidak terkait untuk mendapatkan kawat mereka dilintasi.

Erik Reppen
sumber
Poin bagus tentang memisahkan kode HTML dari logika sisi server. Saya sangat benci ketika semua bahasa bercampur aduk. Terkadang Anda melihat kode yang melakukan C #, SQL, HTML, JavaScript, RazorSharp atau PHP dalam file sial yang sama. Juga komentar non-Inggris. Tentu berhasil dan mungkin cukup cepat untuk menulisnya, tetapi merupakan masalah pemeliharaan setelah beberapa minggu.
ColacX
5

Saya akan menawarkan nilai 2 sen saya yang sangat subjektif (untuk apa nilainya;)). Tidak ada jawaban benar atau salah untuk ini dan ada banyak pertimbangan dunia nyata selain poin Anda, misalnya:

  • Apakah Anda memiliki pengalaman yang relevan di rumah? membangun aplikasi yang digerakkan oleh sisi klien sangat berbeda dengan aplikasi yang digerakkan oleh server dengan keahlian yang sama sekali berbeda.
  • Berapa lama waktu yang Anda inginkan dan browser mana yang perlu Anda dukung? - semakin banyak yang Anda lakukan pada klien, semakin banyak masalah browser yang akan Anda hadapi; IE8 menyakitkan dan kinerja JavaScript sangat buruk, tetapi ada banyak bisnis yang menjalankan pengaturan XP / IE.
  • Perangkat apa yang akan dilihat pengguna situs Anda? Penguraian dan pengoperasian JavaScript mungkin cepat pada versi terbaru Chrome - tetapi tidak pada perangkat seluler yang lebih tua, terutama bukan sejumlah besar JavaScript dengan banyak logika bisnis di dalamnya
  • Seberapa penting pemuatan awal? Templating server lebih cepat daripada templating klien

Daftar ini sama sekali tidak lengkap dan terdengar seperti bashing sisi klien yang bukan maksud saya, saya telah membuat situs dengan penekanan besar pada ujung depan.

Bagi saya itu benar-benar tergantung pada pengalaman pengguna dan penggunaan kembali API. Untuk mengatasi masing-masing dari ini.

Jika Anda akan membuat aplikasi atau menawarkan API, ada banyak akal dalam menggunakan proyek .Net API, ini kemudian membentuk logika, memeriksa dan implementasi lintas platform. Dalam skenario ini, pendekatan sisi klien yang lengkap mungkin menguntungkan, API dapat dikelola secara terpisah dan hanya menyediakan antarmuka untuk aplikasi Anda. Anda dapat mengubah logika dan refactor dengan nyaman dan hanya perlu menjaga antarmuka tetap sama. Anda dapat dengan mudah menulis aplikasi yang berbeda untuk media yang berbeda semuanya menggunakan kode latar belakang yang sama.

Argumen terkuat untuk solusi front end murni (menurut saya) adalah pengalaman pengguna.

Apakah (ketika mempertimbangkan semua kerugiannya) aplikasi browser JavaScript murni menawarkan peningkatan substansial pada kegunaan dan pengalaman pengguna di situs web tradisional?

Saat membuat situs yang berfungsi seperti aplikasi asli; Saya berpendapat jawabannya adalah ya. Namun sebagian besar situs tidak memotong bersih ini, jadi ini masalah menilai apakah alur kerja masing-masing pengguna mendapat manfaat dari antarmuka yang sangat dinamis.

Saya mengambil pandangan yang cukup pragmatis tentang ini, ini bukan masalah atau masalah; JavaScript jelas akan bermain dengan sangat gembira bersama dengan teknologi Server dan Anda tidak harus memilih satu atau yang lain - setiap situs bukan aplikasi web satu halaman - tetapi tidak ada yang menghentikan Anda menggunakan Knockout, backbone dan sejenisnya pada setiap halaman untuk memperbaiki hal-hal yang dianggap perlu.

SWa
sumber
Poin menarik.
eyeballpaul
3

Saya memiliki hubungan cinta-benci dengan aplikasi berat front end.

Di satu sisi, saya suka menulis JavaScript dan saya suka browser sebagai lingkungan eksekusi.

Di sisi lain, keduanya terasa seperti mobil balap Formula 1 dengan lubang di mesin. Ini benar-benar bermuara pada ini: Dapatkah Anda mencegah duplikasi logika bisnis antara C # dan JavaScript? Jika demikian, gunakan metode apa pun untuk menghasilkan tampilan yang Anda anggap layak. Jika Anda menduplikasi logika bisnis dalam dua bahasa, Anda mungkin memiliki pengembang front-end yang hanya ingin menulis JavaScript, dan tidak cukup melihat gambaran besarnya.

Adapun perbedaan teknis:

Rendering sebagian dan mengirimkannya ke klien:

  • Mudah dan cepat untuk diimplementasikan
  • Mencegah logika bisnis backend agar tidak diduplikasi di ujung depan
  • Dapat menghasilkan payload HTTP yang jauh lebih besar ke browser. Bukan hal yang buruk di desktop dengan koneksi bandwidth tinggi. Sangat buruk pada ponsel yang lemah saat Anda sedang duduk di atas jam sibuk yang mempercepat lintasan dengan kecepatan 60mph dan 1.000 ponsel lainnya secara simultan memutus hubungan dari satu menara sel dan mencoba menyambung kembali ke menara sel berikutnya.

Memberikan JSON dan merender template sisi klien:

  • Dapat menghasilkan payload HTTP yang lebih kecil daripada HTML, yang dapat membuat aplikasi tampak lebih responsif terhadap koneksi jaringan yang tidak dapat diandalkan atau lambat
  • Banyak bahasa templating JavaScript fitur lengkap, artinya kita tidak perlu backend hanya untuk menghasilkan beberapa HTML

Kadang-kadang saya pikir kerangka kerja JavaScript yang lebih baru membuang bayi keluar dengan air mandi --- kawan, saya harap saya tidak menjadi pemrogram kurmudgeon yang pemarah ...

Greg Burghardt
sumber
1
Duplikasi semacam logika APA SAJA adalah masalah yang telah saya pikirkan juga. Namun beberapa poin menarik.
eyeballpaul
0

Dalam aplikasi terakhir saya, saya menggabungkan api REST dan JavaScript front-end.

Apa yang saya lakukan adalah:

  • Saya membuat API REST untuk operasi CRUD.
  • Saya membuat aplikasi Javascript yang memuat template HTML yang sudah ditentukan sebelumnya dan mengisi dengan data yang dikembalikan dari REST API.

Pada dasarnya front-end JS berkomunikasi dengan REST API untuk operasi CRUD dan mengisi HTML dengan data yang dikembalikan atau data yang dibuat, atau menghapus data yang dihapus atau memperbarui data yang diubah.

Jadi kami memiliki HTML murni, kami memiliki pemrosesan yang dilakukan pada klien, kami memiliki lebih sedikit penggunaan bandwidth dengan tidak harus memuat semua HTML dan dapat memberikan pengalaman yang benar-benar Web 2.0 kepada pengguna.

Saya tidak melakukan validasi bisnis di ujung depan untuk keamanan dan duplikasi kode, karena siapa pun dapat mengubah data sebelum mengirimnya ke server dan kami harus memvalidasi data di server lagi. Karena itu, ini akan mudah diretas. Semua validasi dilakukan di back-end. Validasi di sisi klien dibuat hanya untuk jenis input.

Pro:

  • Fasilitas untuk membuat perubahan dalam HTML karena faktanya itu tidak dihasilkan oleh JS;
  • Konsumsi bandwidth yang lebih rendah dengan menggunakan ajax dan JSON;
  • Konsumsi pemrosesan server yang lebih rendah, karena HTML diisi pada sisi klien;
  • Pengalaman pengguna yang ditingkatkan dengan menggunakan JS untuk mengubah layar, memungkinkan penggunaan efek dan meningkatkan kecepatan rendering.
  • Lebih baik menggunakan protokol HTTP, dengan menggunakan REST.

Cons:

  • 2 aplikasi yang harus dipertahankan;
  • Tergantung pada pemrosesan klien, yang dapat menjadi buruk karena perangkat keras yang buruk.

Semoga ini membantu.

Salam,

Bruno João
sumber
pekerjaan pemrosesan pada skala klien lebih baik. server biasanya harus menjalankan banyak aplikasi lain yang juga menghabiskan sumber daya server. Jika server macet semua orang menderita.
ColacX
Saya tidak mengerti maksud Anda. Tetapi jika server crash, tidak masalah arsitektur yang Anda pilih, semua orang menderita.
Bruno João
itulah sebabnya Anda harus membuat server melakukan lebih sedikit pekerjaan. dan memiliki logika yang kurang rumit. sehingga mengurangi ketegangan pada server. sehingga mengurangi risiko crash server. walaupun mungkin masih terjadi, mereka harus jarang terjadi. biasanya ketika Anda melakukan pembaruan, Anda berisiko memperkenalkan bug. lakukan lebih sedikit pembaruan di server. tetap bekerja sebanyak mungkin pada klien.
ColacX