Pro dan kontra dari aplikasi web hanya HTML / JavaScript [ditutup]

Saya berasal dari latar belakang bentuk ASP.NET dan telah menemukan pengkodean sisi server yang sangat kuat di masa lalu. Namun, baru-baru ini, saya ingin menghapus kode sisi server front-end dan menggantinya dengan HTML / JavaScript murni, yang mengakses data melalui layanan web JSON. Saya tidak punya pengalaman nyata dalam hal ini, jadi saya ingin mendengar apakah ini model yang sudah dicoba dan diuji. Juga, apa perangkap yang mengelilinginya?

Saya menemukan kontrol pengguna ASP.NET sangat berguna, jadi saya ingin menjaga teori di belakangnya dengan menyimpan templat markup dalam file HTML terpisah di server. Ini akan diambil dan digunakan masing-masing melalui jQuery AJAX dan jQuery HTML templates plugin.

Masukan apa pun akan sangat dihargai.

PS Maaf untuk pertanyaan noob, tetapi apakah jenis arsitektur Web ini apa yang disebut sebagai web-2.0 atau apakah saya benar-benar keluar jalur?

Saya telah menggunakan teknik ini secara eksklusif untuk aplikasi web yang sedang kami kerjakan. Backend saya di-host di Google App Engine menggunakan Java SDK, dan frontend saya menggunakan HTML, CSS, dan JavaScript (dengan jQuery).

Proyek ini lebih kecil dengan hanya saya dan desainer Web, dan kami berdua merasa bahwa metode ini telah membantu kami bekerja lebih cepat dan mendapatkan sesuatu untuk dipasarkan lebih cepat.

Keuntungan: Bekerja dengan Desainer Web

Keuntungan utama dari teknik ini adalah bahwa desainer Web, yang tahu beberapa PHP tetapi tidak menganggap dirinya seorang programmer, dapat bekerja tanpa terbebani dalam HTML dan CSS tanpa harus menyeberang melalui garis JSP yang tak terhitung jumlahnya, tag taglib, dan sisi server lainnya markup yang telah kami beri tahu selama bertahun-tahun seharusnya membuat hidup seorang pengembang front-end jauh lebih mudah.

Tanpa semua markup sisi server, kami sudah lebih gesit. Perancang web telah bertukar dan merevisi desain aslinya 3 atau 4 kali, dengan sedikit perubahan pada bagian saya.

Komentarnya kepada saya adalah bahwa dia merasa HTML itu hidup karena dia dapat mengeditnya dan kemudian segera melihat perubahan pada mesinnya dengan data dinamis. Kami sama-sama mendapat manfaat dari ini karena integrasi sebagian besar otomatis.

Kode sisi server dan Handoff HTML / CSS

Dalam proyek-proyek sebelumnya, dia harus menyerahkan HTML dan CSS ke pengembang Java yang kemudian akan mengambil HTML dan CSS-nya dan sepenuhnya menulis ulang menggunakan teknologi JSP. Ini akan membutuhkan banyak waktu, dan biasanya akan menghasilkan perbedaan yang halus namun penting dalam rendering halaman yang sebenarnya serta validasinya di validator W3C.

Secara keseluruhan, kami berdua cukup senang dengan teknik ini, dan saya masih memiliki nol halaman JSP atau kode sisi server di halaman HTML saya.

Perangkap Teknik REST / JSON

Mungkin jebakan terbesar adalah yang belum kita temui. Saya sepenuhnya berharap untuk memiliki beberapa ketidaksepakatan dengan pengembang Java yang lebih berpengalaman yang telah dicuci otak oleh apa yang dikatakan oleh yayasan Apache dan tim Spring mengenai bagaimana perpustakaan tag memudahkan para pengembang frontend untuk bekerja dengan kode tersebut. Saya sepenuhnya berharap akan ada kurva belajar ketika proyek ini berkembang dan kami mengambil lebih banyak pengembang yang mungkin harus melepaskan teknik usang yang, dalam pengalaman saya, telah membuat pekerjaan para desainer Web lebih sulit .

Perangkap lain adalah bahwa kode JavaScript telah menjadi sangat besar. Ini lebih merupakan masalah mungkin karena saya menggunakan teknik ini untuk pertama kalinya, dan karena kami telah memperkenalkan sedikit hutang teknis dalam bekerja menuju rilis cepat. Mungkin memilih kerangka kerja yang lebih baik akan membantu meringankan sebagian besar kode. Menurut pendapat saya, semua ini tidak menjadi showstopper, dan saya didorong untuk terus menggunakan teknik ini dan memperbaiki keterampilan saya di bidang ini.

Keuntungan: Aplikasi Lain Dapat Dibangun Pada Platform

Terakhir, saya harus menyebutkan keuntungan tersembunyi. Karena ada tingkat pemisahan yang bagus antara layanan Web RESTful backend saya dan frontend saya, saya juga membuat platform yang saya dapat dengan mudah diperluas.

Salah satu operasi kami ingin mencoba pembuktian konsep di aplikasi lain, dan terima kasih kepada layanan RESTful saya, kami dapat membuat antarmuka aplikasi yang sama sekali berbeda untuk menyelesaikan masalah yang sama sekali berbeda. Bukti konsep yang dikembangkan dengan cepat menggunakan HTML, CSS, dan JavaScript sendiri, tetapi menggunakan layanan RESTful sebagai sumber data dan backend.

Pada akhirnya, manajer proyek lain melihat apa yang telah saya lakukan, dan segera menjadi jelas bahwa fitur tersebut perlu lebih dari sekadar bukti konsep, sehingga timnya mengimplementasikannya.

Saya tidak dapat cukup menekankan betapa dapat digunakannya kembali arsitektur ini, baik pada level aplikasi maupun level HTML / CSS / JavaScript, dan saya pasti akan mendorong Anda untuk mencoba ini di proyek berikutnya.

Ini memang strategi yang bisa dilakukan, tetapi itu bukan peluru perak.

Pro :

• jika dilakukan dengan benar, aplikasi yang dikembangkan dengan cara ini sangat responsif
• Anda memiliki pemisahan logika yang jelas (di server) dan presentasi (pada klien); server tidak perlu khawatir sama sekali dengan aspek presentasi aplikasi
• berpotensi menggunakan bandwidth jaringan yang lebih efisien (Anda hanya mengirim data mentah, tidak ada boilerplate presentasi)
• lebih mudah untuk mengembangkan GUI seperti desktop, karena Anda kurang bergantung pada paradigma permintaan / respons

Kekurangan :

• Anda harus menulis kode klien Anda dalam Javascript, atau bahasa yang dapat dikompilasi ke Javascript, karena itulah satu-satunya hal yang tersedia di browser
• penggunaan sumber daya pada klien mungkin lebih tinggi, sehingga aplikasi mungkin tidak berfungsi dengan baik pada perangkat di bawah standar (pikirkan browser seluler dll.)
• itu tidak akan berfungsi sama sekali dengan javascript dinonaktifkan; jika memiliki situs web yang menghadap ke publik, Anda harus berpikir keras apakah Anda bersedia mengambil risiko ini (terutama jika Anda mempertimbangkan SEO dan aksesibilitas - pendekatan javascript-berat biasanya menghancurkan pada dua bidang ini)
• banyak logika harus ditulis dua kali: sekali di klien, dan sekali lagi di server (karena Anda tidak pernah bisa mempercayai klien)
• konkurensi dapat menjadi neraka, jadi Anda perlu merancang kode sisi klien Anda dengan sangat hati-hati dan bersiaplah untuk segala macam masalah konkurensi

Ini pasti mungkin, dan mungkin bisa dibesarkan sebagai praktik terbaik. Apa yang Anda usulkan adalah memisahkan UI dari logika bisnis sehingga ada pemisahan keprihatinan yang bersih. Ini sangat bagus.

Terlalu sering kerangka kerja kami mencoba untuk mengacaukan hal-hal bersama dan Anda berakhir dengan perangkat lunak monolitik di mana UI, logika bisnis dan data semuanya saling terkait satu sama lain. Itu membuatnya lebih sulit untuk mempertahankan dan memodifikasi.

Setelah Anda memecah aplikasi menjadi 2 bagian, Anda dapat mengganti UI sepenuhnya dengan yang lain - program desktop, atau UI lain untuk seluler dibandingkan dengan browser desktop.

Bit rumit yang akan Anda temukan ketika melakukan ini adalah bahwa sedikit kode yang secara teoritis seharusnya ada di server akan lebih baik ditempatkan pada klien - validasi misalnya, lebih cepat dan lebih responsif bagi pengguna untuk meletakkan kode validasi pada formulir pada klien daripada menekan server untuk memeriksa, katakanlah, bidang teks hanya berisi karakter alfanumerik. Hal yang sama sering berlaku untuk lapisan data dan bisnis. Anda hanya perlu membuat keputusan praktis dan informasi tentang kapan harus melanggar perbedaan antara lapisan.

Salah satu kelemahannya adalah perlu menduplikasi beberapa logika dalam JavaScript dan ASP.net. Ini mungkin bukan masalah besar bagi Anda tergantung pada aplikasi Anda. Ini sering muncul karena Anda tidak ingin harus meminta server untuk memeriksa setiap hal kecil ("Apakah pengguna diizinkan untuk menekan tombol ini atau memilih opsi ini dalam situasi ini?") Tetapi Anda juga tidak ingin bergantung pada klien sebagai satu-satunya yang melakukan validasi karena pengguna memiliki kendali atas klien.

Jika Anda masih menggunakan ASP.NET WebForms dan ingin mempercepat aplikasi Anda, inilah yang harus Anda lakukan:

• Rancang aplikasi Anda dengan SOLID dalam pikiran
• Nonaktifkan ViewStatepada semua halaman dan kontrol pengguna

• Jangan gunakan kontrol sisi server

  <%: VeiwModel.Title%> alih-alih <asp: Literal id = "Title" runat = "server">

• Di backend, ganti metode OnInit dan lakukan semua inisialisasi di sana:

  protected override void OnInit (System.EventArgs e) {CreateViewModel (); base.OnInit (e); }

• Kompres semua file .css dan .js menjadi 1 menggunakan SquishIt

• Malas memuat gambar
• Tembolok objek kompleks

Akhirnya, lihat www.porsche.se. Bukankah itu situs web yang sangat cepat?