Web FullStack menggunakan Phoenix LiveView - Memulai Pembangunan

Banyak dari web developer saat ini menggunakan teknologi frontend seperti diantaranya ReactJS, AngularJS dan VueJS yang dipadukan dengan RESTful framework, GraphQL atau menggunakan teknologi seperti websocket untuk berinteraksi dengan backend service. Terkadang solusi ReactJS, AngularJS atau frontend framework lainnya terlalu kompleks jika hanya ditujukan untuk komunikasi dengan backend, tanpa misalnya penggunaan fitur Offline First atau fitur lain yang memungkinkan berjalan mandiri tanpa backend service. Terlebih bila backend service berbeda bahasa pemrograman dengan frontend, dikhawatirkan terjadi gap atau pemisah diatara keduanya.

Untuk pengguna Elixir ada pilihan yang menarik untuk melakukan pembangunan Web Fullstack sehingga tidak terjadi gap atau pemisah antara frontend hingga backend, yaitu dengan menggunakan framework Phoenix LiveView. Apa yang menjadi kelebihan Phoenix framework dengan LiveView ini untuk Web Fullstack ? Phoenix framework seperti pada web framework lainnya membawakan konsep MVC, memiliki gaya development mengikuti framework Ruby on Rails, yang membawa konsep convention over configuration dimana banyak aturan telah disepakati pada permulaan konsep framework dibangun, code generator atau scaffolding untuk meminimalisir kesalahan dan memudahkan developer untuk memulai pembangunan. Sedangkan kelebihan LiveView untuk Web Fullstack dibandingkan menggunakan teknologi lain adalah,

1. Kode yang dibangun di dominasi dengan kode Elixir dan HTML, meminimalisir penggunaan Javascript, Javascript tetap digunakan hanya pada kondisi siklus callback tertentu, yang telah ditetapkan oleh LiveView. Pada LiveView mekanisme ini dikenal dengan istilah Javascript Hooks.

2. Komunikasi antara Frontend dan Backend sangat alami dan seamless (tanpa ada penghalang/barrier dan gap), tidak memerlukan kode http client atau websocket client di sisi Frontend, atau membangun RESTFul endpoint di sisi Backend. Karena tiap perubahan object dan event yang terjadi baik di frontend dan backend bisa langsung saling diakses oleh kedua pihak frontend dan backend tersebut.

3. Pertukaran data antara Frontend dan Backend dapat diminimalkan, dengan mekanisme DOM patching dan temporary assigns data yang dikirim dari server ke frontend minimal hanya terbatas DOM element yang berubah nilainya pada browser, begitu juga dari frontend ke server hanya data yang berasal dari DOM element yang terjadi event saja datanya akan dikirimkan.

Seperti apa proses pembangunan framework Phoenix LiveView ? Mari simak berikut ini.

• Untuk memulai dibutuhkan Erlang OTP minimal versi 21, Elixir minimal versi 1.9 dan NodeJS versi 12 (membutuhkan NPM), cara instalasi erlang & elixir diberbagai platform bisa lihat disini https://elixir-lang.org/install.html.
• Setelah erlang dan elixir terinstall, pastikan perintah 'mix' telah terinstall, coba dengan menjalankan 'mix help'
• install phoenix framework 'mix archive.install hex phx_new 1.5.4'
• buat project baru 'mix phx.new liveview_todo --no-dashboard --no-ecto --live'
• cd liveview_todo
• edit file mix.exs, ubah bagian '{:phoenix_live_view, "~> 0.13.0"}' menjadi '{:phoenix_live_view, "~> 0.14.0"}'
• Menggunakan database CUBDB, edit file mix.exs, tambahkan '{:cubdb, "~> 1.0.0-rc.4"},' dibaris terakhir sesudah '{:plug_cowboy, "~> 2.0"}', hasil akhir seperti ini

• mix deps.get
• cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development && cd ..
• mix compile
• mencoba untuk menjalankan web server 'mix phx.server' dan akses alamat 'http://localhost:4000' pada browser

Setelah semuanya berjalan baik dan webserver bisa dijalankan, mari kita mulai membuat kode liveview. Paling tidak ada 2 pendekatan untuk memulai kode liveview, yaitu dengan menggunakan scaffolding dan dengan cara manual membuat file dengan akhiran '_live.ex'. Sayangnya dengan cara scaffolding sangat erat berintegrasi dengan library Ecto (membutuhkan postgresql, mysql atau SQL Server), kita menggunakan cara ke 2 yaitu secara manual membuat file dengan akhiran '_live.ex'. Langsung saja kita buat file baru dengan nama 'todo_live.ex' pada direktori 'lib/liveview_todo_web/live', dan proses ini berlaku suatu konvensi atau perjanjian bahwa untuk membuat file html yang akan digunakan oleh 'todo_live.ex', developer hanya butuh membuat sebuah file lagi yaitu 'todo_live.html.leex'. Hal ini mengikuti konsep convention over configuration, dimana banyak hal sudah ditentukan / disepakati dari permulaan tentang aturan-aturan yang berlaku di framework. Hasil akhir seperti gambar dibawah.

Untuk mencoba apakah halaman liveview bisa diakses, dibutuhkan minimal kode seperti berikut pada file 'todo_live.ex'.

Dan untuk mencoba apakah halaman 'todo_live.html.leex' dapat bekerja dengan benar, coba untuk memasukkan kode html sebagai berikut.

Dan tambahkan juga pada file 'router.ex' URL yang akan dipetakan ke file 'todo_live.ex'. File 'router.ex' terdapat pada direktori 'lib/liveview_todo_web'. Tambahkan line: 'live "/todo", TodoLive, :index', seperti berikut ini.

Jika masih menjalankan 'mix phx.server', coba akses dengan browser ke halaman 'http://localhost:4000/todo', maka akan muncul halaman seperti berikut.

Seperti juga ReactJS dan framework frontend lainnya, LiveView juga memiliki konsep Component. Component adalah sebuah cara / metode melakukan pemecahan element User Interface agar nantinya dapat dipergunakan ulang di halaman lain (Reuse) dan diharapkan dengan Component ini juga akan lebih efisien dalam pertukaran data antara browser dan server, dimana static Component dapat diberlakukan mekanisme cache pada browser. Berikut cara membangun Component pada LiveView. Pertama tentukan dimana Component akan ditempatkan pada project. Kali ini akan diberikan tempat pada direktori 'lib/liveview_todo_web/live' dengan membuat direktori baru yaitu 'components'. Dan tambahkan juga direktori 'todos' ke dalam direktori 'components'. Sehingga akan terlihat seperti dibawah.

Dan tambahkan juga Component pertama kita dengan membuat file 'add_todo_form.ex' di dalam direktori 'todos'. Akan terlihat seperti dibawah.

Dalam file 'add_todo_form.ex' tambahkan kode seperti dibawah ini.

Untuk menggunakan Component 'add_todo_form.ex', bisa mulai menambahkan Component tersebut ke dalam file 'todo_live.html.leex' dan menambahkan baris 'alias LiveviewTodoWeb.Todos.AddTodoFormComponent' ke dalam file 'todo_live.ex'. Sehingga file 'todo_live.ex' dan 'todo_live.html.leex' yang terbaru akan berbentuk seperti dibawah ini.

Dan jika halaman 'http://localhost:4000/todo' diakses dari browser, akan muncul Component 'add_todo_form.ex' yang telah dibuat tadi.

Setelah ini bagaimana mengirimkan informasi event yang akan dikirim ke server, misalnya ketika tombol 'Add Todo' diklik ? Caranya cukup mudah, ada 2 langkah yang harus dilakukan, yaitu

1. menambahkan kode: '[phx_submit: :add_todo]' di dalam Component 'add_todo_form.ex', sehingga akan berbentuk seperti dibawah ini.

2. menambahkan kode event handler "add_todo" pada file 'todo_live.ex', seperti dibawah ini.

Apabila dicoba untuk memasukkan kata 'testing' dari halaman 'http://localhost:4000/todo' ke dalam input text dan kemudian klik tombol 'Add Todo', maka pada log server akan muncul '[debug] %{"text" => "testing"}'. Artinya event yang dikirimkan dari browser telah berhasil dikirim dan ditampilkan pada log yang terdapat di server.

Demikian bagian pertama dari pengenalan mengenai Phoenix LiveView. Untuk lebih lengkapnya, repositori tutorial ini dapat diakses melalui https://github.com/rizki96/liveview_todo. Dan nanti pada bagian berikutnya akan coba dijelaskan mengenai proses penambahan data, update data dan hal-hal yang berhubungan dengan database, dan bagaimana melakukan pengiriman data yang efisien dengan mekanisme Phoenix LiveView ini.