Web FullStack menggunakan Phoenix LiveView - Memulai Pembangunan
Tags: elixir, phoenixframework, liveview
Published: 2020-07-31 09:38:35

---
title: Web FullStack menggunakan Phoenix LiveView - Memulai Pembangunan
series: Web FullStack menggunakan Phoenix LiveView
---

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](https://github.com/lucaong/cubdb), edit file mix.exs, tambahkan '{:cubdb, "~> 1.0.0-rc.4"},' dibaris terakhir sesudah '{:plug_cowboy, "~> 2.0"}', hasil akhir seperti ini

{% gist https://gist.github.com/rizki96/7f8050d0cc58f196d8d27fdcb6255637 file=mix-deps.exs %} 

* 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

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/localhost4000-1.png" width="400" alt="Tampilan web untuk localhost:4000" />

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.

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/create-live-file.png" width="300" alt="" />

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

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=todo_live.ex-1 %}

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

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=todo_live.html.leex-1 %}

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.

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=router.ex-1 %}

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

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/todo-page-1.png" width="400" alt="" />

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.

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/components-todos-1.png" width="300" alt="" />

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

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/add-todo-form.ex-1.png" width="300" alt="" />

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

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=add_todo_form.ex-1 %}

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.

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=todo_live.ex-2 %}

{% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=todo_live.html.leex-2 %}

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

<img src="https://raw.githubusercontent.com/rizki96/liveview_todo/master/content/todo-page-2.png" width="400" alt="" />

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. {% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=add_todo_form.ex-2 %}

2. menambahkan kode event handler **"add_todo"** pada file 'todo_live.ex', seperti dibawah ini. {% gist https://gist.github.com/rizki96/ac11ef827fb83abbc988680442066f74 file=todo_live.ex-3 %}

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.