Bukan yang kuharapkan, tapi mungkin yang kita butuhkan

Video dimulai dengan pengumuman framework JavaScript baru yang dibuat oleh tim Remix, yakni Ryan Florence dan Michael Jackson yang juga merupakan penulis asli React Router. Framework ini disebut Remix versi 3, namun sebenarnya adalah framework yang sepenuhnya baru dan berbeda dari Remix sebelumnya. Pembicara menekankan bahwa ini menarik karena berasal dari tim yang berpengalaman membangun Remix JS. Video ini akan membahas apa itu framework baru tersebut, memberikan pendapat tentangnya, dan mendiskusikan apakah kita benar-benar memerlukan framework JavaScript lainnya serta peluang adopsinya di era di mana large language model secara default menghasilkan aplikasi React.

Pembicara menjelaskan sejarah Remix sebagai meta framework React yang menjadi alternatif dari Next.js. Remix dirilis beberapa tahun lalu, dengan versi 2 diluncurkan sekitar tahun 2022, kemudian di tahun 2024 Remix v2 pada dasarnya digabungkan dengan React Router. Sekarang ketika menggunakan React Router, developer bisa menggunakannya sebagai library routing biasa atau dalam mode framework untuk membuat aplikasi React full stack dengan fitur pengambilan data, pemuatan data, dan mutasi data. Penjelasan ini memberikan konteks penting tentang bagaimana Remix berkembang dari meta framework React menjadi sesuatu yang lebih besar dan independen.

Bagian ini mengklarifikasi bahwa Remix v3 bukan lagi meta framework React atau alternatif Next.js lainnya, melainkan framework JavaScript full stack yang benar-benar baru, ditulis dari awal (from scratch). Framework ini memiliki semua fitur dan API yang diinginkan oleh Ryan Florence dan Michael Jackson dalam framework JavaScript baru. Tujuannya adalah memecahkan masalah yang mereka lihat dan alami di ekosistem JavaScript, khususnya dengan lanskap library dan framework yang ada, terutama React yang merupakan library dan framework utama di industri saat ini. Ini menandai perubahan signifikan dari pendekatan Remix sebelumnya.

Pembicara membahas demo pertama yang ditampilkan dalam live stream empat jam tentang Remix v3, dengan fokus pada API-nya. Salah satu hal utama yang menjadi sorotan adalah penggunaan this.update, yang mengimplikasikan dua hal tidak biasa bagi developer JavaScript modern: penggunaan keyword this (yang sudah jarang digunakan di React modern) dan manual updating. Framework ini memanfaatkan keyword this untuk mengekspos beberapa API, dan developer masih menulis fungsi komponen seperti di React, namun dengan cara yang sedikit berbeda. Ini menjadi pembeda utama dari framework JavaScript modern lainnya yang mengandalkan reactive state management.

Bagian ini menjelaskan perbedaan fundamental antara Remix v3 dengan React dalam hal updating UI. Di React, Vue, dan Angular, framework menentukan kapan harus update secara otomatis ketika state berubah melalui setState. Namun di Remix v3, developer mengelola state di variabel standar tanpa hook useState, dan harus secara eksplisit memanggil this.update kapan pun UI perlu diperbarui. Developer bisa mengubah banyak variabel tanpa memanggil this.update dan UI tidak akan berubah, atau memanggil this.update setelah mengubah variabel untuk memicu pembaruan UI. Pendekatan ini memberikan kontrol penuh kepada developer tentang kapan rendering terjadi, berbeda dari batching otomatis di React.

Pembicara membahas reaksi internet terhadap pendekatan manual updating ini dan memberikan perspektifnya sendiri. Meskipun beberapa orang memiliki masalah dengan pendekatan ini, pembicara berpendapat bahwa ini adalah pendekatan baru yang layak dicoba, sementara pendekatan lama (automatic updating) memang bekerja dengan baik namun bisa menimbulkan masalah di mana tidak jelas mengapa sesuatu diperbarui atau tidak. Di aplikasi kompleks, terutama dengan React modern yang memiliki banyak hook, bisa sangat membingungkan untuk memahami apa yang terjadi. Ini adalah salah satu alasan mengapa tim Remix kembali ke API yang lebih sederhana dengan kontrol penuh bagi developer, mengurangi kompleksitas dan meningkatkan prediktabilitas.

Bagian ini mengungkapkan tujuan yang sangat penting dari Remix v3: agar mudah digunakan oleh large language model (LLM). Tim Remix menyatakan dalam posting blog bahwa developer akan bisa memasukkan artikel dokumentasi atau contoh ke dalam chat dengan LLM, memberikan konteks, dan membuat LLM membantu menghasilkan kode. Ini penting karena sebagai framework baru, tidak ada LLM yang dilatih pada basis kode ini, dan untuk masa mendatang yang dapat diprediksi mereka tidak akan dilatih padanya karena sekitar 80% dari semua contoh kode front-end adalah React, khususnya React dengan shadcn. Oleh karena itu, mereka perlu menemukan cara lain untuk memungkinkan developer membuat LLM sadar akan cara menulis kode Remix v3, yang merupakan alasan lain mengapa mereka menjaga API tetap sederhana, ekspresif, dan mudah dipahami.

Tim Remix sangat menekankan penggunaan web primitives dan fitur yang tersedia di browser modern serta backend. Mereka sangat mengandalkan native events dan kemampuan bawaan untuk men-dispatch custom events di browser. Framework ini juga mengandalkan abort signals untuk mengomunikasikan bahwa komponen telah unmounted dan untuk menghentikan event listeners secara otomatis. Pembicara merasa bahwa web developers tidak mengikuti apa yang dapat dilakukan browser modern, dan banyak kemampuan yang sudah ada selama bertahun-tahun namun tidak digunakan atau bahkan tidak diketahui. Ada banyak yang bisa dilakukan dengan DOM dan browser API tanpa memerlukan library pihak ketiga tambahan, dan Remix v3 mencoba memanfaatkan kemampuan bawaan ini dengan prinsip kesederhanaan.

Meskipun menggunakan web primitives, Remix v3 tetap merupakan framework di mana developer membuat komponen dengan fungsi dan menggunakan kode JSX, bukan membuat node DOM dengan createElement. Namun, manajemen state bekerja dengan cara yang berbeda - lebih ramping tanpa hooks, karena fungsi komponen tidak akan dipanggil berulang kali seperti di React. Developer akan memiliki dua jenis fungsi komponen: fungsi yang mengembalikan JSX (stateless component) dan fungsi yang mengembalikan fungsi yang mengembalikan JSX (stateful component). Ini mirip dengan pendekatan React old-school di tahun 2017 dengan class components dan functional components, namun di Remix semua menggunakan fungsi dengan jenis yang berbeda. Pendekatan ini memberikan cara yang sangat sederhana untuk membedakan komponen stateful dan stateless.

Pembicara menjelaskan lebih detail tentang perbedaan dua jenis komponen di Remix v3. Jika fungsi mengembalikan JSX langsung, itu adalah komponen stateless yang tidak bisa memanggil this.update untuk memicu re-render. Komponen ini bisa menerima props dan akan dieksekusi ulang jika parent component di-render ulang. Untuk membuat komponen stateful, fungsi tidak mengembalikan JSX langsung, melainkan mengembalikan fungsi yang kemudian mengembalikan JSX. Ketika memanggil this.update di komponen stateful, fungsi yang dikembalikan akan dieksekusi lagi. Ini adalah API yang sangat sederhana dan cara yang jelas untuk membedakan antara fungsi komponen stateful atau stateless, memberikan kontrol eksplisit kepada developer tentang bagaimana komponen berperilaku.

Remix v3 bukan hanya framework front-end, melainkan framework full stack yang menggabungkan front-end dan back-end. Tim akan mengirimkan library komponen untuk memudahkan pembuatan form yang kompleks. Di sisi backend, framework ini dilengkapi dengan router yang sangat capable dan powerful - yang masuk akal karena tim telah membangun React Router selama 10 tahun terakhir. Developer bisa mengembalikan kode JSX dan komponen Remix di route mereka dan meng-hydrate komponen-komponen tersebut di server. Mereka juga memiliki alternatif sendiri untuk React Server Components, alternatif yang lebih sederhana yang memungkinkan developer mengembalikan komponen yang dibuat untuk update setelah disajikan di client dengan mengambil ulang bagian-bagian DOM.

Ketika menghapus sesuatu misalnya, developer bisa mengirim request dari client ke server dan mendapatkan kembali beberapa kode HTML yang bisa di-hydrate lagi untuk memperbarui bagian-bagian DOM. Remix v3 memberikan semua fitur untuk membangun aplikasi full stack modern seperti single page application yang cepat, sama seperti yang bisa dilakukan dengan Next.js, React Router dalam mode framework, atau framework lain seperti TanStack Start. Namun, tujuan yang jelas adalah melakukannya dengan cara yang lebih sederhana. Ini adalah visi mereka: memberikan cara sederhana untuk membangun aplikasi full stack modern tanpa kompleksitas yang berlebihan, dengan API yang straightforward dan mudah dipelajari.

Pembicara mengajukan dua pertanyaan besar: apakah kita membutuhkan framework ini dan apakah ini akan berhasil. Meskipun kita memiliki banyak framework JavaScript dan banyak orang mengatakan sudah terlalu banyak, pembicara selalu berpikir bahwa inovasi dan mencoba ide-ide baru adalah hal yang baik. Ia tidak berpikir kita membutuhkan framework baru yang hanya seperti React dengan beberapa perbedaan kecil, tetapi pendekatan yang benar-benar baru dengan manual updating dan detail-detail lainnya adalah ide yang bagus dan layak dicoba. Kedengarannya menarik dan ini mungkin memberi developer alternatif yang lebih sederhana untuk React, yang meskipun luar biasa, telah menjadi cukup kompleks selama bertahun-tahun. Jadi ya, kita mungkin memang membutuhkan alternatif yang lebih sederhana ini.

Pembicara membahas peluang kesuksesan Remix v3 di era large language models yang biasanya merekomendasikan React secara default. Namun, orang yang tidak tahu cara menulis kode bukan target audiens langsung, sehingga ini bukan masalah besar. Developer berpengalaman mungkin tertarik menggunakan Remix dan mengarahkan LLM dengan bantuan contoh-contoh resmi untuk menghasilkan kode Remix, semata-mata karena mereka ingin memiliki basis kode yang lebih sederhana. Sebagai developer, kita masih menyentuh kode kita meskipun mungkin menghasilkan sebagian besarnya dengan AI - kita masih mengontrol LLM, menyesuaikan bagian-bagian kode, dan menulis bagian yang lebih besar jika ada fitur yang sangat spesifik. Jadi developer masih peduli tentang tech stack, dan framework yang mudah digunakan dengan LLM serta memiliki cukup sumber daya untuk mengajari LLM cara menggunakannya bisa menjadi peluang sukses yang valid.

Yang penting adalah bahwa Remix dimiliki oleh Shopify sejak tahun 2022, yang berarti tim Remix menjadi bagian dari Shopify. Shopify tentu saja tertarik untuk memiliki framework yang terawat secara aktif dan digunakan, tidak hanya di dalam perusahaan untuk halaman marketing mereka, tetapi juga untuk toko-toko Shopify. Sangat mungkin bahwa tujuannya adalah menjadikan Remix sebagai opsi bagi vendor Shopify yang ingin membangun toko mereka sendiri di atas platform Shopify dan menyesuaikan etalase toko atau halaman-halaman yang membentuk keseluruhan toko. Memiliki framework yang mudah digunakan dan mudah digunakan dengan large language model bisa sangat besar dampaknya. Meskipun ini masih bukan jaminan, memiliki Shopify di belakang Remix tentu saja bernilai banyak dan memberikan fondasi yang kuat untuk pertumbuhan framework ini.

Pembicara menyimpulkan bahwa ia cukup positif tentang masa depan Remix karena dukungan Shopify dan komunitas yang mungkin kecil namun sangat antusias. Tim Remix juga memiliki track record yang luar biasa, sudah mengembangkan React Router dan sebagainya, yang memberikan kredibilitas tinggi. Pembicara mengungkapkan kegembiraan untuk melihat apa yang akan ditawarkan framework ini dan ingin akhirnya menggunakannya sendiri, meskipun saat ini belum benar-benar memungkinkan karena masih dalam tahap awal. Di akhir video, pembicara mengajak penonton untuk memberikan pendapat mereka tentang apakah kita membutuhkan framework ini dan apakah Remix v3 akan sukses, serta merekomendasikan untuk menonton seluruh konferensi empat jam jika tertarik untuk belajar lebih dalam tentang framework baru ini.