00:00:00Apakah Anda penggemar berat Python? Maksud saya, apakah Anda tipe orang yang hanya ingin menulis kode Python
00:00:05dan tidak ada yang lain? Jika ya, maka saya punya sesuatu yang tepat untuk Anda. Ini adalah sebuah framework bernama
00:00:11Reflex, yang bertujuan untuk mengatasi hambatan dan kerumitan dalam mengubah kode Python full-stack
00:00:17menjadi aplikasi web yang siap produksi. Di video ini, kita akan melihat apa itu
00:00:22Reflex, cara kerjanya, dan mari kita lihat mengapa framework ini begitu populer.
00:00:30Masalah utama yang ingin diselesaikan Reflex adalah keharusan bagi pengembang Python untuk mempelajari
00:00:36tumpukan teknologi yang sepenuhnya berbeda, termasuk JavaScript, React, routing, dan bundler, hanya untuk bisa
00:00:43membangun antarmuka web fungsional untuk kode mereka. Reflex memungkinkan pengembang membangun aplikasi full-stack
00:00:50dalam 100% Python murni, jadi Anda bisa fokus menggunakan satu bahasa untuk seluruh stack tanpa harus
00:00:56berpindah konteks. Mereka juga mengeklaim bahwa sejak peluncurannya, pengembang telah membangun lebih dari 1 juta aplikasi
00:01:03dengan framework ini dan mereka juga mengeklaim bahwa 30% dari perusahaan Fortune 500 menggunakannya untuk
00:01:10peralatan internal mereka. Dan baru-baru ini, mereka mulai merambah ke dunia AI dan meluncurkan
00:01:15alat bernama Reflex Build, yang memungkinkan Anda membuat aplikasi hanya dari satu perintah teks saja.
00:01:21Selain itu, mereka mendukung integrasi untuk SDK dan alat lain yang memudahkan Anda menghubungkan aplikasi
00:01:26ke layanan populer lainnya seperti Databricks, Okta, Stripe, AWS, dll. Kedengarannya memang mengesankan,
00:01:34tapi saya ingin mencobanya sendiri untuk melihat bagaimana cara kerjanya secara langsung.
00:01:40Mari kita mulai dengan membuat direktori baru, ReflexTest, lalu masuk ke dalamnya menggunakan cd. Dari sini,
00:01:44dokumentasinya mengatakan kita bisa menjalankan tiga perintah ini untuk memulai proyek Reflex. Mari kita mulai
00:01:48dengan menjalankan pip install reflex dan kemudian reflex init. Di sini kita ditawari untuk memulai dengan salah satu
00:01:53templat mereka. Namun untuk demo ini, kita buat sederhana saja dan pilih opsi aplikasi reflex kosong.
00:01:57Setelah selesai, kita bisa membuka proyek tersebut di editor kode. Dan jika kita buka
00:02:02folder reflex test, di sinilah seluruh aplikasi kita berada di file reflex test.py. Kita bisa melihat
00:02:09bahwa di sana ada bagian komponen RX dan kelas state. Mari jalankan Reflex Build di terminal untuk meluncurkan
00:02:15aplikasi kita. Aplikasi akan berjalan di port 3000, dan kita bisa melihat hasilnya di browser.
00:02:20Sekarang mari kita lihat bagaimana Reflex mengelola state. Kita bisa mulai dengan menambahkan variabel hitungan sederhana.
00:02:25Dan untuk mengubah nilai ini, kita juga perlu mendefinisikan fungsi yang akan melakukannya. Jadi, di bawah
00:02:29variabel count, kita bisa mendefinisikan fungsi increment yang akan menambah hitungan sebanyak satu. Dan
00:02:34disarankan untuk menambahkan dekorator RX event di atasnya, yang memungkinkan pengecekan tipe statis yang tepat dan
00:02:39memastikan handler event menerima jumlah dan tipe argumen yang benar. Kemudian kita bisa menambahkan
00:02:44tombol sederhana dalam pernyataan return dari komponen RX. Ini akan menampilkan hitungan di
00:02:48bidang teks dan memicu fungsi increment saat diklik. Reflex mendukung hot reloading. Jadi jika
00:02:53kita simpan filenya sekarang dan buka browser, kita akan melihat tombol hitungan yang nilainya bertambah
00:02:58setiap kali kita menekannya. Sekarang mari kita coba sesuatu yang lebih menarik. Mari buat array item
00:03:02di dalam state kita. Secara teori, kita seharusnya bisa merender item-item ini sebagai daftar dengan melakukan
00:03:08looping for inline seperti ini. Tapi ini tidak akan berhasil karena nilai ini tidak diketahui saat waktu kompilasi.
00:03:13Cara kerja Reflex adalah ketika Anda menjalankan aplikasi, bagian front-end dikompilasi ke kode JavaScript
00:03:18yang berjalan di browser, yang dalam istilah Reflex disebut waktu kompilasi. Bagian back-end tetap
00:03:23berupa Python dan berjalan di server selama masa pakai aplikasi. Ini disebut runtime
00:03:27dalam istilah Reflex. Jadi kita tidak bisa melakukan loop for Python murni di dalam render komponen kita,
00:03:32tapi kita bisa melakukan operasi Python murni di luar blok render komponen. Lalu bagaimana cara kita melakukan looping di dalam
00:03:37blok komponen? Untuk kasus ini, kita perlu mendefinisikan fungsi render item sederhana yang akan
00:03:42merender item kita seperti ini. Lalu kita perlu menggunakan fungsi RxForEach di dalam blok render komponen
00:03:47untuk melakukan looping for tersebut. Sekarang kita melihat item kita terender dengan benar. Hal yang sama berlaku untuk
00:03:53rendering kondisional. Kita tidak bisa menggunakan pernyataan if-else biasa di dalam blok return. Sebaliknya,
00:03:58kita perlu menggunakan fungsi RxConditional seperti ini. Dan jika kita sekarang mengklik tombolnya lebih dari lima
00:04:02kali, kita akan melihat teks muncul di aplikasi kita. Hal terakhir yang perlu dilihat adalah bagaimana cara kita mengambil dan
00:04:08merender data. Untuk demo ini, mari kita ambil fakta acak yang tidak berguna dari API fakta acak
00:04:12dan menampilkannya di kotak teks. Pertama, mari tambahkan variabel boolean yang akan menunjukkan apakah
00:04:17data sedang diambil, dan string kosong sederhana yang akan menampung fakta kita. Lalu kita bisa mendefinisikan
00:04:22fungsi pengambilan data asinkron yang akan menyetel data fetching ke true. Kemudian fungsi itu akan menggunakan
00:04:27pustaka HTTPX untuk mengambil fakta acak dan menyimpannya di variabel state fakta kita. Saya juga
00:04:33menambahkan jeda singkat satu detik dengan async IO agar kita benar-benar bisa melihat proses pengambilan data secara
00:04:38real-time. Setelah operasi selesai, kita kembalikan boolean data fetching ke false. Perhatikan bahwa kita
00:04:43menambahkan operasi yield di sini. Jadi setiap kali kita ingin memperbarui UI berkali-kali dalam satu event
00:04:48handler, kita bisa menggunakan yield saat ingin mengirimkan pembaruan ke renderer. Dalam kasus ini, segera
00:04:52setelah status pengambilan data berubah, kita ingin memperbarui UI untuk mencerminkan perubahan tersebut. Jangan lupa juga untuk
00:04:57menambahkan impor HTTPX dan async IO di bagian atas. Terakhir, di fungsi render kita, kita bisa menggunakan
00:05:03fungsi RX conditional sederhana untuk menampilkan spinner pemuatan atau faktanya berdasarkan state saat ini. Dan jika
00:05:08kita ingin fungsi ini terpicu setiap kali halaman dimuat, kita perlu menambahkan dekorator untuk
00:05:12komponen RX kita yang akan memicu fungsi fetch data saat halaman dimuat. Sekarang jika kita muat ulang halaman kita,
00:05:18kita bisa melihat fakta acak sedang diambil dan dirender di halaman. Hal terakhir yang ingin saya lakukan
00:05:22di sini adalah melihat folder .web. Seperti yang kita lihat, semua yang baru saja kita tulis dikompilasi dan
00:05:27dirender ke dalam aplikasi React di balik layar, yang menggunakan vite dan tailwind sebagai pondasinya. Bahkan
00:05:33ia memiliki react router untuk penanganan rutenya. Jujur saja, begitu saya melihat ini, saya merasa sangat
00:05:38kecewa. Saya kira mereka membangun compiler JavaScript kustom atau sesuatu yang orisinal.
00:05:42Tapi ini berarti Reflex hanyalah lapisan abstraksi lain di atas React. Jadi saya memiliki
00:05:47perasaan campur aduk tentang Reflex. Di satu sisi, idenya sangat keren untuk memiliki framework full-stack Python
00:05:53tunggal yang memungkinkan Anda menulis semuanya dalam Python murni. Tapi saya sangat kecewa saat
00:05:59tahu bahwa di balik layar, ini hanyalah pembungkus aplikasi React dan tidak menggunakan Python asli. Ini justru
00:06:05membuatnya lebih rumit, karena Anda sekarang terpaksa mempelajari arsitektur baru dan memahami
00:06:11bagaimana Reflex menangani manajemen state, belum lagi semua kasus khusus yang bisa terjadi, lebih baik Anda
00:06:16tetap menggunakan React karena itu sudah teruji dan merupakan framework yang solid. Jadi jika saya akan membuat
00:06:22proyek dengan back-end Python, saya masih akan menggunakan framework JavaScript untuk front-end saya.
00:06:28Reflex tidak meyakinkan saya untuk beralih sepenuhnya ke full-stack Python. Tapi itu hanyalah pendapat saya.
00:06:34Apa pendapat Anda tentang Reflex? Apakah Anda suka ide framework full-stack Python seperti ini?
00:06:39Saya sangat penasaran ingin tahu pendapat Anda. Dan teman-teman, jika Anda menyukai video ini, pastikan untuk
00:06:44memberitahu kami dengan menekan tombol like di bawah video. Dan jangan lupa untuk berlangganan channel kami.
00:06:50Saya Andris dari Better Stack dan sampai jumpa di video berikutnya.