DomaiNesia

Ticker

6/recent/ticker-posts

Mencoba Remix v1, Fullstack Web Development Framework Berbasis React-Router

Setelah excited mengikuti livestream launcing Remix v1 di Youtube, sebuah fullstack web development framework besutan Michael Jackson (@mjackson) dan Ryan Florence (@ryanflorence) (dan terakhir Kent C Dodds @kentcdodds juga bergabung), saya mencoba langsung terjun ke framework baru ini sambil mengerjakan backend API untuk purwarupa aplikasi saya yang baru.

Berbekal nonton livestream tersebut, ditambah sebelumnya sudah menonton rilis Remix beta, serta setelah rilis versi 1 juga menonton sebentar tutorial remix jokes oleh @kentcdodds, saya langsung mencoba memasang Remix di laptop (sebetulnya saya sudah langsung memasangnya/install di laptop setelah saya menonton video rilis Remix beta yang sebenarnya dirilis sekitar 6 bulan lalu).

Setelah melakukan instalasi dengan npx create-remix@latest saya langsung mencoba mengamati isi dari file yang ada serta struktur projectnya. Sebenarnya bisa saja saya menelusuri dokumentasinya terlebih dahulu, namun rasanya sudah langsung kepingin hands on nerapin Remix di dalam project saya ini, jadi ya nyemplung langsung saja.

Kalau dilihat sepintas dari kodenya, karena Remix ini based on React maka banyak hal yang mirip/lumayan familiar. Namun seperti yang disampaikan @ryanflorence dalam beberapa livestream, pendekatan / paradigma programmingnya yang membuat Remix berbeda dengan paradigma programming awalnya di React. Di Remix, tidak ada istilah 'data fecth waterfall', meminjam istilah yang digunakan Ryan untuk menggambarkan cara kerja Remix. Jadi data yang akan di loading sudah ketahuan di awal dari komponen apa saja yang terdapat pada suatu route. Dengan demikian, data loading akan mudah diprediksi sehingga data yang diperlukan untuk suatu route secara spesifik dapat disediakan tanpa harus menunggu waterfall fetch tadi. Nah hal ini juga difasilitasi oleh paradigma nested layout yang digunakan di Remix.

komponen dasar dokumen layout di Remix

Nah, gambar di atas merupakan komponen dasar dokumen layout di Remix. Nantinya route yang terdapat di dalam aplikasi Remix akan diinject ke dalam komponen <Outlet /> yang terdapat di dalam <Layout />.

Jadi di sini "induk" (parent) nya adalah <Document />, kemudian "anak" (children) nya adalah <Layout />, serta layout masih punya children lagi yaitu <Outlet />. Semoga saya tidak keliru dalam mengartikan dan membahasakannya :) (kalau keliru, mohon koreksinya dan harap maklum, saya bukan programmer/orang IT by formal education he.. he.. he..)

Isi dari Document (Source: Remix Dev Blog demo app)

Nah, kemudian isi dari komponen <Document /> sendiri seperti gambar di atas ini. Jadi function Document() ini memiliki children di dalamnya. Komponen <LiveReload /> membantu kita saat melakukan development (NODE_ENV==="development") dengan secara otomatis melakukan reload aplikasi jika terdeteksi ada perubahan yang terjadi pada kode/source code.

Nah, di komponen induk ini ibaratnya adalah "base.html" templatenya lah kalau di Flask misalnya. Di Flask kan biasanya kita gunakan HTML template (dengan templating engine Jinja yang merupakan defaultnya Flask) untuk membuat template base dimana kode utama HTML seperti <head> dan <body> kita masuk disitu, sedangkan isi dari body dan head tersebut nantinya bisa disiapkan secara dinamis melalui workflow aplikasi.

Berikut ini kita lihat isi dari <Layout />.

 


Nah, di sini porsi HTML nya sudah mulai lebih banyak karena di dalam Layout ini konten aplikasi web kita sudah mulai banyak. Ini tergantung dari seberapa banyak bagian konten yang statis dan bagian konten yang dinamis disediakan oleh program. Di sini juga mulai banyak diterapkan CSS / styling untuk pengaturan tampilan laman web.

Namun layout ini masih punya children lagi, yaitu konten sebenarnya yang nantinya akan di provide oleh route yang ada dalam aplikasi Remix kita.

Kalau dalam Dev Blog demo app yang diberikan oleh Remix, isinya kurang lebih seperti berikut:


Hmm... di sini nampak penggunaan loader (useLoaderData()) untuk memuat data, penggunaan meta dan komponen Index nya sendiri untuk menampilkan data yang di load tadi. Dengan demikian sudah terlihat fungsionalitas fullstack Remix v1 ini (mulai dari backend yang berhubungan dengan mengambil atau mengolah data, serta frontend yang berhubungan penampilan data kepada user). Sebenanrnya di livestream dibahas juga hal mendasar lain yang menarik yaitu data mutation, tapi saya kayaknya harus banyak belajar dulu untuk dapat sharing tentang hal-hal yang lebih detail mengenai Remix ini.

Sementara ini dulu, paling tidak bisa menjadi catatan saya sendiri untuk mempelajari Remix! Saatnye nge-Remix!

Semoga bermanfaat! :)


Post a Comment

0 Comments