/ javascript

Kenapa Menggunakan Immutable.js

Kenapa menggunakan Immutable.js dibanding menggunakan JavaScript Object?

Ade Yahya Prasetyo

By Ade Yahya Prasetyo

Kenapa tidak simply menggunakan JavaScript Object?

Saya pertama kali mendengar dan mulai aware terhadap Immutability adalah saat mengetahui bahwa facebook merilis library Immutable.js pada saat itu saya mulai belajar apa itu Mutable dan Immutable tetapi saya belum pernah mencoba Immutable.js

Pada artikel ini saya akan menjelaskan ulang tentang apa yang saya pahami mengenai Immutable.js

Kenapa dan Kapan kita harus menggunakan Immutable.js?

Contoh ketika kita memiliki 100.000 task pada todo list:

var todos = {
  t79444dae: { title: 'Task 50001', completed: false },
  t7eaf70c3: { title: 'Task 50002', completed: false },
  t2fd2ffa0: { title: 'Task 50003', completed: false },
  t6321775c: { title: 'Task 50004', completed: false },
  t2148bf88: { title: 'Task 50005', completed: false },
  t9e37b9b6: { title: 'Task 50006', completed: false },
  tb5b1b6ae: { title: 'Task 50007', completed: false },
  tfe88b26d: { title: 'Task 50008', completed: false },
  // (100,000 items)
}

dan kita ingin menandai task ke 50005 menjadi complete

function toggleTodo (todos, id) {
  return Object.assign({ }, todos, {
    [id]: Object.assign({ }, todos[id], {
      completed: !todos[id].completed
    })
  })
}

var nextState = toggleTodo(todos, 't2148bf88')

Ketika menggunakan JavaScript Object, untuk menjalankan single operation tersebut, aplikasi kita membutuhkan waktu 134ms.

Kenapa begitu lama untuk satu operation? karena ketika kita menggunakan Object.assign JavaScript mengcopy begitu saja setiap property yang ada, dan saat kita memiliki 100.000 data maka kita harus mengunggu 100.000 data selesai dicopy.

Kenapa bisa seperti itu?

Karena Object pada JavaScript Mutate by default, jadi saat cloning data JavaScript harus benar-benar mengcopy semua property agar menjadi Object yang benar-benar berbeda secara keseluruhan.

100,000 properties are being (shallowly) copied over to the destination.

Menggunakan Immutable.js

Sekarang kita akan menggunakan Immutable.js untuk data dan proses yang sama

var todos = Immutable.fromJS({
  t79444dae: { title: 'Task 50001', completed: false },
  t7eaf70c3: { title: 'Task 50002', completed: false },
  t2fd2ffa0: { title: 'Task 50003', completed: false },
  t6321775c: { title: 'Task 50004', completed: false },
  t2148bf88: { title: 'Task 50005', completed: false },
  t9e37b9b6: { title: 'Task 50006', completed: false },
  tb5b1b6ae: { title: 'Task 50007', completed: false },
  tfe88b26d: { title: 'Task 50008', completed: false },
  // (100,000 items)
})

dan merepresentasikan data kita menggunakan Immutable.Map

var nextState = toggleTodo(todos, 't2148bf88')

dan hasil akhirnya untuk operation ini, Immutable.js hanya membutuhkan waktu 1.2ms 100x lebih cepat dibanding JavaScript Object. Kenapa bisa begitu?

Persistent data structures

Persistent data structures adalah data struktur yang ketika terjadi perubahan dia akan mengembalikan data baru yang berubah dan tetap menjaga data asli sebelumnya ketimbang merubahnya in-place.

persistent data structures telah digunakan pada production di functional programming languages seperti Scala atau Haskell.

Implementasi ini based on data stucture yang disebut HAT-trie yang memungkinkan structural sharing dan meminimalisir data yang di-copy, bingung? akan saya coba jelaskan dengan cara yang lebih mudah!

Optimization menggunakan trie

bayangkan kita sedang menyimpan data key-value seperti berikut

kita dapat menyimpannya menggunakan JavaScript Object.

const data = {
  to: 7,
  tea: 3,
  ted: 4,
  ten: 12,
  A: 15,
  i: 11,
  in: 5,
  inn: 9
}

namun jika menggunakan trie, visualisasinya menjadi seperti berikut

ketika kita ingin mendapat data tertentu, kita harus mengikuti path yang benar mulai dari root, contoh ketika kita ingin mendapatkan data.in maka pathnya adalah root mengikuti label i dan n dan kita berada pada value 5

lalu bagaimana ketika merubah data ( secara Immutable? )

Anggap saja kita ingin merubah value dari key tea dari 3 menjadi 14.

Jadi kita tinggal membuat tree baru dengan perubahan yang ada, dan reuse nodes lama yang tidak berubah

tree lama tetap tidak dirubah karena tree baru membutuhkannya untuk referensi nodes yang tidak berubah.

seperti yang kita lihat pada gambar diatas, kita hanya mereconstruct 4 nodes baru dan yang lain menggunakan nodes lama.

Inilah yang dilakukan Immutable.js pada Immutable.Map.

Kesimpulan

Menggunakan Immutable.js dapat memberikan benefit performance yang lebih baik untuk aplikasi kita ketika memang melakukan proses pada data yang besar.