Mengapa JSX baik, ketika skrip JSP buruk?

React.js menyediakan JSX sebagai sintaks seperti XHTML untuk membangun pohon komponen dan elemen. JSX mengkompilasi ke Javascript, dan bukannya memberikan loop atau kondisional di JSX yang tepat, Anda menggunakan Javascript secara langsung:

<ul>
  {list.map((item) =>
    <li>{item}</li>
  )}
</ul>

Apa yang saya belum bisa jelaskan adalah, mengapa ini dianggap baik jika konstruksi analog dianggap buruk di JSP?

Sesuatu seperti ini di JSP

<ul>
   <% for (item in list) { %>
     <li>${item}</li>
   <% } %>
</ul>

dianggap masalah keterbacaan yang harus diselesaikan dengan tag seperti <c:forEach>. Alasan di balik tag JSTL juga sepertinya bisa diterapkan ke JSX:

• itu sedikit lebih mudah dibaca ketika Anda tidak beralih antara sintaks seperti XHTML (kurung sudut, bersarang) dan Java / Javascript (curlies, koma, parens)
• ketika Anda memiliki bahasa lengkap dan platform yang tersedia untuk digunakan di dalam fungsi rendering, ada sedikit untuk mencegah Anda memasukkan logika yang tidak termasuk di sana.

Satu-satunya alasan saya dapat memikirkan mengapa JSX berbeda adalah:

• di Jawa, Anda memiliki insentif untuk melakukan hal yang salah - JSP akan di-hot-load, jadi tergoda untuk memasukkan kode ke dalam JSP untuk menghindari siklus membangun kembali / memulai kembali. Pemeliharaan dikorbankan untuk produktivitas langsung. Melucuti skrip dan membatasi kumpulan template yang sudah diperbaiki secara efektif merupakan cara untuk menegakkan kemampuan pemeliharaan. Tidak ada distorsi semacam itu di dunia JS.

• Sintaks JSP dan Java kikuk dengan tambahan <% ... %>untuk membedakan kode Java dari pembuatan elemen, dan dengan sintaksis asli Java yang kurang foreachkonsep atau fungsi kelas satu (hingga saat ini). Hukuman sintaksis menggunakan Javascript asli untuk loop dan conditional di JSX adalah tidak-nol (menurut saya) tetapi tidak seburuk JSP, dan bisa dibilang tidak cukup buruk untuk menjamin memperkenalkan elemen JSX-spesifik untuk loop dan conditional.

Apakah ada hal lain yang saya lewatkan?

Terutama, orang-orang yang membuat JSX tidak setuju dengan orang-orang yang tidak menyukai JSP. Lihat diskusi mereka di sini: Mengapa kita membangun Bereaksi? serta Menampilkan Data

Template didasarkan pada ide untuk membuat pembagian antara logika dan presentasi halaman. Pada teori ini, kode javascript (atau java) Anda seharusnya tidak peduli dengan markup apa yang ditampilkan, dan markup Anda tidak boleh berkaitan dengan logika apa pun yang terlibat. Divisi ini pada dasarnya adalah mengapa orang mengkritik berbagai bahasa templat yang dengan mudah mengizinkan pencampuran kode dengan templat Anda (PHP / JSP / ASP).

Bereaksi didasarkan pada komponen. Para penulis reaksi berpendapat bahwa logika dan presentasi komponen terkait erat, dan mencoba membaginya tidak masuk akal. Sebagai gantinya, halaman harus dipecah oleh potongan logis. Jadi, Anda dapat memecah bar header, komentar, posting, pertanyaan terkait, dll menjadi komponen yang terpisah. Tetapi tidak masuk akal untuk mencoba dan membagi logika untuk pertanyaan terkait dari presentasi.

Perbedaan utama antara sesuatu seperti JSX dan sesuatu seperti JSP adalah bahwa JSP adalah bahasa templat yang menyertakan sedikit java untuk logika. JSX adalah javascript dengan ekstensi sintaks untuk membuatnya mudah untuk membangun fragmen html. Penekanannya berbeda. Karena JSX menggunakan pendekatan ini, akhirnya menghasilkan pendekatan yang lebih baik, lebih bersih kemudian dilakukan oleh JSP atau teman-teman.

Tetapi pada akhirnya, itu datang ke fakta bahwa orang-orang yang membuat reaksi tidak suka template. Mereka pikir itu ide yang buruk, dan Anda harus meletakkan markup dan logika presentasi di tempat yang sama.

Sebagai orang luar untuk Bereaksi, saya melihat JSX sebagai "bau kerangka" lain di kebun binatang kerangka yang sangat padat. Saya masih tidak yakin bahwa ini bukan masalahnya.

Saya pikir definisi yang bisa diterapkan dari "berguna" adalah bahwa perpustakaan / kerangka / pola memecahkan lebih banyak masalah daripada yang disebabkannya. Saya belum yakin bahwa JSX cocok dengan definisi itu. Ini adalah pepatah "memeras balon" ... Anda memecahkan masalah di sini, itu muncul di sana. Bagi saya, JSX tidak menyelesaikan masalah tertentu ... itu hanya "berbeda."

Gagasan untuk memperkenalkan semantik yang dapat dikompilasi yang membutuhkan proses pembangunan yang diformalkan berguna dalam beberapa keadaan: misalnya, kompilasi file .css yang KURANG memberikan beberapa struktur yang sangat dibutuhkan di sekitar css, yang merupakan struktur hierarki dengan impor dan penggantian, dengan demikian menjadi sangat rentan terhadap "solusi spageti." Tapi pre-compiler Javascript ... tidak terlalu banyak.

Pendeknya:

• Pengembang front-end diharapkan mengetahui skrip dan template
• JSX dan JSP keduanya bahasa templating
• JavaScript adalah bahasa scripting
• Java bukan bahasa scripting

Referensi

• Apakah Memisahkan HTML dan JavaScript Berbahaya? | Bitnative oleh Cory House

• Mengapa skrip dianggap berbahaya dan cara menonaktifkan skrip di program Anda?

• Bagaimana cara menghindari kode Java dalam file JSP? - Stack Overflow

Meskipun saya tidak menggunakan JSX, berdasarkan uraian Anda, tugas fragmen JSX adalah untuk menyajikan data, yaitu komponen tampilan dalam bahasa MVC. Fragmen JSX mungkin tidak tahu atau tidak peduli dari mana data berasal yang Anda inginkan.

Halaman JSP yang terstruktur dengan baik hanya akan berisi arahan JSTL seperti yang Anda sebutkan. Arahan JSTL hanya menyederhanakan JSP Anda sehingga mereka tidak berantakan dengan mengambil dari ruang lingkup, memeriksa nol dll. Mengejutkan berapa banyak kekacauan ini menghapus dan juga mendorong Anda untuk menjaga itu dideklarasikan.

Sama seperti fragmen JSX; satu-satunya tugas JSP adalah mencari tahu bagaimana menyajikan data yang telah diterimanya tanpa khawatir dari mana asalnya.

Singkatnya, apakah tampilan Anda adalah JSX atau JSP, jika Anda melakukannya dengan benar maka tampilan Anda hanya akan menyajikan data.

Mengenai mengapa Anda mungkin menggeser presentasi ke klien alih-alih melakukannya di server, ini memberi Anda lebih banyak fleksibilitas. Situs web Anda dapat memperoleh datanya melalui layanan web (misalnya, REST) ​​dan hanya menjadi klien lain. Jika nanti Anda memutuskan bahwa Anda menginginkan aplikasi Android atau iOS asli, mereka dapat menggunakan rangkaian layanan web yang sama dengan situs web Anda.