Kapan seharusnya JavaScript menghasilkan HTML?

Saya mencoba menghasilkan HTML sesedikit mungkin dari JavaScript. Sebagai gantinya, saya lebih suka memanipulasi markup yang ada kapan pun saya bisa dan hanya menghasilkan HTML ketika saya perlu secara dinamis memasukkan elemen yang bukan kandidat yang baik untuk menggunakan Ajax. Ini, saya percaya, membuatnya lebih mudah untuk mempertahankan kode dan dengan cepat membuat perubahan karena markup lebih mudah dibaca dan dilacak. Aturan praktis saya adalah: HTML untuk struktur dokumen, CSS untuk presentasi, JavaScript untuk perilaku.

Namun, saya telah melihat banyak kode JS yang menghasilkan gundukan HTML, termasuk seluruh bentuk dan dialog modal yang berat. Secara umum, metode apa yang dianggap praktik terbaik? Dalam keadaan apa seharusnya JavaScript digunakan untuk menghasilkan HTML dan kapan seharusnya tidak?

Setiap kali saya menjumpai generasi HTML yang berat dalam javascript, itu hampir semata-mata dalam plugin UI yang berdiri sendiri. Masuk akal, karena memungkinkan untuk merangkum seluruh plugin dalam file .js tunggal (+ a .css untuk menyesuaikan gaya), sehingga membuatnya mudah digunakan kembali, terdistribusi, dan independen dari kerangka kerja yang digunakan dalam aplikasi.

Jadi, jika Anda menulis plugin javascript yang berdiri sendiri atau komponen UI generik yang ingin Anda gunakan di berbagai aplikasi, pendekatan semacam itu memiliki kelebihan. Kalau tidak, saya pikir ini lebih bersih, lebih mudah untuk menulis dan lebih mudah untuk mempertahankan ketika Anda menjaga generasi html dari javascript dan di sisi server.

Saya pikir masalahnya adalah bahwa Anda membandingkan sisi server yang ditulis dengan rapi dengan generasi HTML sisi klien ad-hoc yang ditulis dengan buruk. Tentu saja kode yang ditulis dengan rapi lebih mudah dibaca, dirawat, dan dilacak.

Anda menyebut kode sisi klien "gundukan HTML", tetapi tentu saja itu adalah HTML yang sama di mana pun itu dibuat. "Gundukan" adalah benjolan besar kode.

Ada banyak sisi klien template perpustakaan di luar sana. Mereka bekerja mirip dengan yang di sisi server. Adapun yang Anda lebih suka, tradeoff kinerja rumit, tetapi JSON biasanya lebih kompak daripada HTML dan membuat templat pada klien dapat menghilangkan beberapa panggilan server. Di sisi lain, klien mungkin memiliki JS dinonaktifkan, atau terlalu lambat untuk praktis, sehingga tergantung pada audiens target Anda juga. Secara keseluruhan saya pikir pendekatannya cukup sebanding, dengan faktor terbesar adalah kemampuan browser audiens target Anda.

Tapi itu tergantung pada apa yang Anda lakukan, apakah Anda lebih suka JS ke lingkungan server Anda, solusi templating mana yang Anda sukai, dll.

Ada kecenderungan untuk menggunakan templat sisi klien, dalam kasus ekstrem Anda akan memiliki server yang hanya menyediakan RESTful API misalnya dalam format JSON, sambil melakukan semua rendering sisi klien. Keuntungan dari pendekatan itu adalah bahwa kode JS dan templat adalah sumber daya statis yang dapat di-cache, proksi dan didistribusikan melalui CDN. Yang tidak dapat dilakukan jika Anda memiliki HTML dinamis sisi server yang dihasilkan. Juga, mengembalikan hanya data dari RESTful API dalam format ringan menggunakan sumber daya sisi server jauh lebih sedikit, membuat respons lebih cepat. Selain lebih ringan, transfer jaringan lebih sedikit, yang lagi-lagi membuatnya lebih cepat. Dengan cara ini Anda dapat memiliki aplikasi latensi rendah yang sangat responsif bahkan pada koneksi lambat seperti 3G. Dengan demikian pendekatan ini populer untuk halaman dan aplikasi seluler.

Ada banyak perpustakaan menerapkan JS template, salah satu yang populer adalah Murni , Kumis dan dust.js . Kemudian digunakan oleh LinkedIn, mereka telah menggambarkan keuntungan dalam artikel mereka "Meninggalkan JSP di debu: memindahkan LinkedIn ke templat sisi klien dust.js" .

Keuntungan menghasilkan HTML pada klien, adalah Anda membongkar pekerjaan rendering untuk setiap klien, yang biasanya duduk menunggu respons. Membebaskan lebih banyak sumber daya server untuk hanya mengirimkan data JSON dan konten statis (HTML, JS dan CSS).

Kami melakukan aplikasi web yang menghasilkan HTML eksklusif dengan Javascript. 87% hit server adalah data JSON, konten statis umumnya dimuat satu kali, kemudian dari cache browser.

Tetapi Anda tidak dapat menggunakannya - setidaknya tidak mudah - jika Anda membutuhkan SEO. Atau jika Anda menargetkan populasi yang menonaktifkan Javascript, tapi saya tidak yakin yang ini masih relevan dengan Youtube, Twitter, Facebook, Gmail, ... secara alami memaksa orang untuk mengaktifkannya.

Mengenai pemuatan halaman dinamis, orang harus menyadari bahwa di balik semua "JQuery AJAX Cloud!" ajaib, hanya dua hal yang mungkin terjadi:

1. Kode elemen sedang disuntikkan dalam div (buruk), atau
2. Konten sedang dimuat dalam iframe (lebih baik, tapi itu tidak sama ...)

Mengenai pertanyaan awal, saya hanya membuat konten HTML melalui Javascript ketika saya membuat aplikasi web dari beberapa jenis yang membaca data XML atau JSON yang disimpan di server, dan itu banyak berubah.

Tidak masuk akal untuk memuat konten statis pada halaman dengan Javascript, karena selalu ada kemungkinan itu tidak memuat dengan benar, atau klien akan menonaktifkannya ("ambil iklan sial itu!"). Selain itu, sangat sulit untuk mengubah konten HTML ketika dihancurkan di dalam document.write()rantai yang jelek document.createElement().

Jadi kamu benar; baik ketik HTML mentah, atau jika konten dinamis-ish diperlukan, gunakan skrip sisi-server untuk menampilkan apa yang diperlukan. Gunakan Javascript untuk menyuntikkan HTML hanya jika situs dimaksudkan untuk bekerja tanpa koneksi internet, atau kasus serupa.

Satu catatan terakhir, jika Anda ingin mengimplementasikan xmlhttprequests, eh, AJAX, ke situs web, mungkin cara terbaik / teraman untuk melakukannya adalah dengan menyimpan data dalam format data (seperti XML), memuatnya, dan mengeluarkannya sesuai kebutuhan. pada klien. document.writedan element.innerHTMLsebenarnya bukan cara terbaik untuk memanipulasi konten, dan pasti akan menyebabkan sakit kepala potensial di masa mendatang (mengapa skrip ini tidak berjalan? <i>Tag rusak saya membuat miring semuanya! dll.).

Mantra saya tentang itu adalah: ketika lebih mudah dan tidak ada yang peduli tentang markup.

Anda juga dapat memanfaatkan keduanya dan menetapkan batas di mana terlalu sulit untuk memedulikan markup dan Anda lebih suka fokus pada pohon DOM. Misalnya, formulir yang memiliki baris dinamis (mis. "Tambahkan lampiran lain"), Anda mungkin menginginkan formulir dalam HTML, tombol "tambahkan baris", dan tombol kirim ... Anda mungkin tidak ingin membuat HTML dengan bahasa sisi server Anda atau sesuatu.

Aturan praktis lainnya adalah usabilitas ulang. Jika solusi Anda dapat diterapkan untuk masalah lain di sisi klien, enkapsulasi dalam js.

Kami membangun aplikasi satu halaman (ala Google Mail) dan sama sekali tidak ada generasi HTML sisi server di aplikasi kami sama sekali. Alih-alih, kami menggunakan Backbone.js untuk menyusun sisi klien dan Setang kami untuk merender JSON kami ke dalam templat yang masuk ke halaman. Ini memang bekerja dengan sangat baik dan kami akan menutup aplikasi pertama kami yang menggunakannya dan kami akan menangani proyek yang lebih besar di masa depan.

Setiap jenis klien gemuk di mana server hanya digunakan untuk bertahan data dan mengembalikan hasil permintaan adalah anak poster untuk waktu di mana Anda ingin JavaScript untuk menghasilkan HTML. Pastikan untuk menggunakan mesin template yang bagus untuk membuatnya bersih dan mudah.

Saya membuat kode html di jquery karena saya menggunakan portlet dan setelah eksekusi kode jsp, saya perlu membuat loop dengan kode html, yang tidak bisa saya dapatkan di java untuk loop dengan beberapa kode javascript di dalamnya. Jadi saya membuat daftar array java di javascript array dan menggunakan string untuk menghasilkan html.