Transcript
00:00:00Awalnya kita punya JSX, lalu kita punya TSX, tapi kita sudah terjebak dengan ini selama bertahun-tahun.
00:00:04Apakah ini tidak bisa ditingkatkan? Mungkin bisa, dengan TSRX.
00:00:08Ini mirip, tapi sebenarnya berbeda.
00:00:10Kita tidak menggunakan fungsi, kita menggunakan komponen, kita menggunakan string untuk teks kita,
00:00:14ada pernyataan if biasa di sini, dan juga tidak ada pernyataan return.
00:00:17Jadi apa ini sebenarnya, mengapa dibuat, dan haruskah Anda menggunakannya? Mari kita cari tahu.
00:00:21[Musik]
00:00:26Mungkin ada beberapa dari Anda yang sebenarnya pernah melihat kode seperti ini sebelumnya,
00:00:29dan itu karena ini sebenarnya dipersembahkan oleh pembuat Ripple.
00:00:31Ini adalah kerangka kerja front-end baru yang pernah dibahas Rich di saluran ini enam bulan lalu,
00:00:35jadi silakan subscribe agar tetap mendapatkan info terbaru tentang hal-hal seperti ini.
00:00:38Apa yang mereka lakukan adalah mengekstrak sintaksis yang digunakan dalam Ripple,
00:00:41dan membuatnya berfungsi dengan React, Preact, Solid, Vue, dan tentu saja Ripple,
00:00:45dan banyak orang yang sangat antusias dengan hal ini.
00:00:47Sekarang TSRX mendeskripsikan dirinya sebagai cara menulis komponen UI yang tetap mudah dibaca dan ditempatkan bersama,
00:00:52sehingga struktur, gaya, dan alur kontrol hidup berdampingan,
00:00:55dan hasilnya tetap sepenuhnya kompatibel dengan TypeScript.
00:00:58Tetapi kecuali Anda pernah menggunakan Ripple sebelumnya, Anda mungkin masih sedikit bingung dengan apa artinya itu,
00:01:01jadi mari kita bahas fitur-fiturnya.
00:01:03Untuk memulainya, Anda menggunakan ini dengan berkas TSRX, yang berarti kita memerlukan langkah kompiler,
00:01:07tetapi itu sangat mudah diatur dengan plugin Vite,
00:01:10dan ada juga opsi lain untuk kerangka kerja dan runtime lainnya.
00:01:13Sedangkan untuk komponen sebenarnya, alih-alih menulis "function" di sini, kita menulis "component",
00:01:17dan ini sebagian besar hanyalah kata kunci untuk kompiler itu sendiri,
00:01:20tetapi ini juga memperjelas bahwa bagian ini akan berisi beberapa logika rendering.
00:01:24Saya mungkin menganggapnya sebagai peningkatan kecil pada kenyamanan penggunaan.
00:01:27Namun satu hal yang perlu diperhatikan adalah kita tidak memiliki pernyataan return di sini,
00:01:30dan itu karena TSRX menggunakan JSX berbasis pernyataan,
00:01:33sehingga Anda tidak perlu mengembalikan pohon komponen,
00:01:35Anda cukup menulis markup Anda di mana pun Anda ingin merendernya.
00:01:37Ini berarti kita sebenarnya bisa langsung memasukkan tag paragraf lain di atas kartu ini di bagian atas komponen,
00:01:42dan itu akan langsung dirender di tempat ia ditulis.
00:01:44Anda masih bisa menggunakan return dalam komponen, tetapi harus berupa return kosong,
00:01:47dan itu hanya digunakan untuk pengembalian awal, sehingga UI dan logika setelah itu akan dilewati.
00:01:51Ini membantu saya untuk menganggap komponen TSRX sebagai sesuatu yang sangat linier,
00:01:54jadi urutan penulisan kode sumber kita adalah urutan renderingnya,
00:01:57cukup dibaca dari atas ke bawah,
00:01:59tetapi saya juga bisa melihat bahwa ini mungkin membuat kita lebih sulit untuk melihat dengan cepat apa yang dirender oleh sebuah komponen,
00:02:03sedangkan dalam sesuatu seperti React, kita biasanya akan langsung melompat ke bagian return.
00:02:06Manfaat lain dari JSX berbasis pernyataan adalah kita bisa menggunakan lebih banyak JavaScript biasa.
00:02:10Sebagai contoh, rendering bersyarat menjadi sangat sederhana.
00:02:13Ini hanyalah pernyataan if biasa dengan else-if dan else jika Anda membutuhkannya.
00:02:17Dalam kondisinya, kita hanya perlu menempatkan JSX kita sebagai sebuah pernyataan.
00:02:20Bentuk yang sama seperti ini di React sering kali berubah menjadi ternary bersarang,
00:02:23karena dalam JSX, setiap percabangan harus berupa sebuah ekspresi,
00:02:26jadi saya merasa bahwa versi TSRX terkadang bisa lebih mudah dibaca,
00:02:29terutama ketika kita memiliki pernyataan yang lebih kompleks,
00:02:31tetapi di sisi lain, saya juga bisa melihat bahwa ini mungkin menambah lebih banyak kebosanan,
00:02:35terutama ketika Anda hanya membutuhkan kondisi yang sederhana.
00:02:37Hal yang sama juga berlaku untuk pernyataan switch.
00:02:39Anda bisa menggunakan switch JavaScript biasa dengan kasus-kasus Anda
00:02:41dan JSX yang ingin Anda render untuk masing-masing kasus tersebut.
00:02:44Ini sedikit lebih sederhana daripada bagaimana Anda menangani ini di React,
00:02:47di mana Anda memerlukan fungsi untuk menggunakan pola yang sama,
00:02:49jadi TSRX sedikit lebih bersih di sini,
00:02:51tetapi area yang secara pribadi kurang saya sukai dari TSRX adalah dalam rendering daftar.
00:02:55Di sini kita membuang ".map" dan sebagai gantinya kita menggunakan perulangan for-of,
00:02:58dan TSRX sebenarnya telah memperluas perulangan ini sehingga kita bisa mendapatkan indeksnya
00:03:01serta identitas yang stabil dengan kunci.
00:03:03Kemudian ketika Anda ingin melewati sebuah item, Anda cukup menggunakan "continue",
00:03:06jadi sekali lagi, ini sedikit lebih dekat dengan alur vanilla JavaScript,
00:03:08tetapi seperti yang saya katakan, bagi saya, saya sudah sangat terbiasa menggunakan ".map", ".filter", dan sebagainya,
00:03:12jadi saya mungkin akan tetap menggunakan cara itu,
00:03:14dan perlu dicatat juga bahwa Anda tidak bisa menggunakan jenis perulangan lainnya
00:03:17seperti for, for-in, while, dan do-while.
00:03:19Ini hanya berfungsi untuk perulangan for-of saja.
00:03:21Kini melanjutkan tren penggunaan JavaScript biasa,
00:03:23cara kita membuat batasan kesalahan (error boundaries) di TSRX adalah dengan blok try-catch yang sederhana.
00:03:27Tidak ada yang aneh-aneh dan penjelasannya cukup jelas.
00:03:30Kita juga bisa menggunakan blok try-catch yang sama jika kita memerlukan batasan asinkron (async boundaries),
00:03:33kita hanya perlu menambahkan blok pending
00:03:35lalu menulis komponen pemuatan (loading) Anda di sana.
00:03:38Kompiler sebenarnya menangani penerjemahan kode ini
00:03:40dan menyelesaikannya ke kerangka kerja apa pun yang Anda gunakan,
00:03:42jadi di React, Preact, dan Solid, ini sebenarnya menggunakan lazy,
00:03:45dan di Ripple, ini adalah padanan dari Ripple.
00:03:47Namun berbicara tentang React secara khusus,
00:03:48fitur-fitur yang telah kita lihat sejauh ini
00:03:50tampaknya memungkinkan kita untuk melanggar salah satu aturan utama React,
00:03:53yaitu aturan hooks.
00:03:54Kita sekarang bisa menempatkannya setelah kondisi dan pengembalian awal,
00:03:57dan bahkan di dalam perulangan.
00:03:58Semuanya akan berfungsi seperti biasa.
00:04:00Ini memungkinkan kita untuk menempatkan kode kita lebih dekat ke tempat ia sebenarnya dibutuhkan,
00:04:03dan hasil akhirnya bahkan tidak melanggar aturan.
00:04:06Kompiler hanya akan menaikkan (hoist) setiap hook ke bagian atas fungsi yang dihasilkan secara diam-diam,
00:04:09sehingga React tetap melihatnya dalam urutan yang stabil,
00:04:11tetapi Anda bisa menulisnya di tempat yang semestinya.
00:04:14Bagi saya pribadi, sebagai seseorang yang telah menggunakan React selama bertahun-tahun,
00:04:16ini adalah salah satu hal yang paling sulit untuk saya biasakan,
00:04:18dan ini juga merupakan fitur di mana kita membuat kompiler
00:04:20melakukan lebih banyak keajaiban di balik layar,
00:04:22khususnya di sekitar suatu kerangka kerja,
00:04:24dan saya rasa jika saya melakukan debugging pada bagian ini,
00:04:26saya mungkin akan sedikit bingung kode mana yang berada di mana.
00:04:28Berikutnya, kita memiliki cakupan leksikal (lexical scoping),
00:04:30sehingga setiap elemen bersarang membuat cakupannya sendiri,
00:04:32jadi kita bisa mendeklarasikan const label di tiga blok div yang berbeda di sini,
00:04:36dan deklarasi tersebut tidak saling bertabrakan.
00:04:37Bahkan ada satu di bagian atas fungsi di sini yang tidak dibaca oleh apa pun,
00:04:40dan sekali lagi, itu tidak menimbulkan konflik.
00:04:41Hal yang sama berlaku untuk setiap pernyataan if, for, switch, atau try.
00:04:44Masing-masing memiliki cakupannya sendiri,
00:04:46sehingga variabel yang kita deklarasikan, fungsi yang kita jalankan,
00:04:48dan nilai yang kita peroleh, tidak bocor ke cakupan lainnya.
00:04:51Ini adalah salah satu fitur yang berfokus pada penempatan kode secara bersamaan,
00:04:54dan sekali lagi, ini membuat komponen kita terbaca dengan cara yang linier dari atas ke bawah.
00:04:57Beralih dari JavaScript sekarang, mari kita bahas tentang gaya (styling).
00:05:00Di TSRX, kita sebenarnya memiliki gaya yang tercakup (scoped styles),
00:05:02jadi Anda cukup menempatkan blok style di komponen Anda,
00:05:04dan CSS yang kita tulis di sana hanya berlaku untuk komponen tersebut,
00:05:08dengan hash unik yang dilampirkan ke nama kelas saat dikompilasi.
00:05:11Jadi komponen kartu ini memiliki kelas "card",
00:05:13dan perhatikan di sini, komponen ini juga mencoba menggunakan kelas "card" tersebut,
00:05:16tetapi ia tidak mendapatkan gaya kartu sama sekali,
00:05:17karena ia tidak memiliki blok style sendiri.
00:05:19Ia tidak mendapatkan gaya dari induknya,
00:05:21karena tidak memiliki hash unik tersebut.
00:05:22Namun jika Anda ingin berbagi gaya di beberapa komponen,
00:05:24TSRX memiliki kata kunci "style",
00:05:26jadi induk melewatkan nama gaya dengan kata kunci ini
00:05:29ke komponen yang menerima nama kelas sebagai prop,
00:05:31dan itu akan memastikan bahwa hash unik yang dihasilkannya ikut serta bersamanya.
00:05:35Jadi sekarang perhatikan bahwa ia memiliki gaya yang sama dengan induknya.
00:05:37Secara teknis Anda juga bisa menggunakan pemilih global di sekitar gaya Anda
00:05:40untuk keluar dari cakupan dan menerapkan gaya tersebut secara global,
00:05:42tapi menurut saya itu akan menjadi agak berantakan,
00:05:44dan Anda akan kehilangan jejak dari mana gaya Anda berasal.
00:05:46Secara pribadi, saya adalah penggemar berat Tailwind,
00:05:48jadi saya mungkin tidak akan sering menggunakan fitur ini,
00:05:50dan saya akan tetap menggunakan Tailwind,
00:05:51meskipun demikian ini adalah fitur yang cukup keren.
00:05:53Berikutnya, fitur bagi Anda yang telah memperhatikan dengan saksama.
00:05:56Dalam blok kode yang saya tunjukkan,
00:05:57ada sedikit perbedaan dalam cara penanganan teks dalam pernyataan ini.
00:06:01Teks polos di dalam elemen harus diberi tanda kutip ganda.
00:06:04Kita tidak bisa begitu saja menulisnya seperti yang kita lakukan di JSX.
00:06:07Namun Anda masih bisa menggunakan nilai dinamis,
00:06:08dan pada baris seperti yang ini,
00:06:10yang berada di antara dua string bertanda kutip ganda,
00:06:12TSRX hanya akan menggabungkan ini menjadi satu string saat dikompilasi.
00:06:16Pilihan lain yang Anda miliki adalah cukup menggunakan template literal.
00:06:19Ini memberikan hasil yang sama.
00:06:20Bagi saya, ini telah menjadi salah satu hambatan kecil dalam menggunakan TSRX
00:06:23karena saya sudah memiliki memori otot yang sangat kuat untuk tidak menggunakan tanda kutip untuk teks.
00:06:26Namun fitur berbasis teks lainnya,
00:06:27adalah bahwa TSRX sebenarnya dapat menangani string yang berisi markup HTML asli,
00:06:31dan Anda memiliki dua cara untuk merendernya.
00:06:33Yang pertama adalah dengan menggunakan kata kunci "text",
00:06:35yang akan merender teks yang telah di-escape,
00:06:38sehingga Anda dapat melihat string HTML literal,
00:06:40dan ini juga aman dari cross-site scripting.
00:06:42Jadi ini berguna ketika Anda ingin menjamin bahwa sesuatu akan berupa string,
00:06:45dan sumber string tersebut sedikit ambigu,
00:06:48sehingga Anda tidak perlu mengetahui tipenya saat menulis kode ini.
00:06:51Opsi kedua adalah jika Anda ingin merender string tersebut sebagai HTML,
00:06:54kita cukup menggunakan kata kunci "html",
00:06:56dan ini akan menguraikannya sebagai HTML asli,
00:06:58tetapi fitur ini hanya berfungsi di Ripple, dengan Vue yang mendukung subset yang lebih sempit.
00:07:02Fitur lain yang tidak terkait dengan React,
00:07:03tetapi mungkin menarik bagi Anda yang menggunakan Ripple,
00:07:06Vue, atau Solid adalah destrukturisasi malas (lazy destructuring).
00:07:08Jika Anda melakukan destrukturisasi props secara normal di kerangka kerja ini,
00:07:10Anda mengambil cuplikan dari setiap nilai pada waktu pemanggilan,
00:07:12dan hal itu merusak reaktivitas per akses.
00:07:14Jadi di TSRX Anda cukup menambahkan tanda ampersand sebelum props,
00:07:18dan meskipun terlihat seperti destrukturisasi biasa,
00:07:20setiap pengikatan sebenarnya dikompilasi kembali ke pencarian properti di tempat ia digunakan.
00:07:23Jadi runtime melihat setiap akses secara individual,
00:07:25sehingga pembaruan sinyal tetap memicu render ulang,
00:07:28artinya Anda dapat mempertahankan kemudahan ergonomis dari destrukturisasi,
00:07:30dan kerangka kerja tersebut tetap mempertahankan reaktivitasnya.
00:07:32Fitur terakhir yang akan saya tunjukkan adalah peningkatan kenyamanan penggunaan yang bagus dan sederhana.
00:07:35Pernahkah Anda memiliki prop di mana nilai yang Anda berikan ke prop tersebut memiliki nama yang sama dengan prop itu sendiri,
00:07:40paling sering pada sesuatu seperti fungsi on-change?
00:07:42Nah, dengan TSRX Anda sebenarnya bisa menulis ini sebagai singkatan,
00:07:45mirip dengan bagaimana kita bisa melakukannya dengan objek JavaScript.
00:07:47Ini bersih dan sederhana.
00:07:49Jadi secara keseluruhan, TSRX terasa seperti mencoba memadukan kembali alur JavaScript normal ke dalam JSX
00:07:53dan juga menambahkan beberapa peningkatan kecil pada kenyamanan penggunaan,
00:07:55dan saya cukup menyukai banyak elemennya.
00:07:57Saya benar-benar berpikir kelemahan utama bagi saya adalah bahwa ini terlalu spesifik dan terlalu terlambat
00:08:01ketika kita sudah memiliki AI yang menulis sebagian besar kode kita,
00:08:03dan kode yang mahir ditulis oleh AI tampaknya adalah JSX dan React.
00:08:07Namun demikian, saya memang mencoba memberikan beberapa demo kepada Claude menggunakan TSRX,
00:08:10dan ia berhasil menulisnya dengan baik hanya berdasarkan llm.txt dari situs tersebut,
00:08:14tetapi saya rasa saya akan tetap menggunakan React biasa saja.
00:08:17Kelemahan lainnya adalah rasanya, terutama untuk React,
00:08:19ini menambahkan lebih banyak keajaiban kompiler di atasnya,
00:08:21and ini juga merusak alur kerja yang telah saya pelajari selama bertahun-tahun,
00:08:24jadi ini secara pribadi bukan untuk saya, tetapi itu tidak berarti ini buruk.
00:08:27Saya rasa orang-orang yang beralih dari Svelte mungkin akan sangat menyukai ini,
00:08:30dan jika Anda sudah menggunakan Ripple, Anda mungkin sudah menyukai ini.
00:08:33Jadi beri tahu saya di kolom komentar di bawah jika Anda menyukainya,
00:08:35selagi Anda di sana silakan subscribe, dan seperti biasa, sampai jumpa di video berikutnya.
00:08:40[Musik]
Community Posts
No posts yet. Be the first to write about this video!
Write about this video