Branching Git Alternatif dengan Worktree

Tentu kita udah nggak asing lagi dengan branch, merge, stash, dan istilah Git yang lain. Dalam artikel ini saya ingin bahas satu fitur Git yang jarang atau mungkin nggak pernah kita dengar sebelumnya, yaitu worktree.

Branch bisa dibilang seperti virtual-directory. Setiap branch isinya boleh beda, tapi lokasi fisiknya masih sama dalam satu direktori root. Waktu kita checkout sebuah branch, isi direktori root ini diganti file yang ada di branch itu. Ini bisa dianggap fitur Git atau kelemahan (liability), tergantung situasi.

Sejak versi 2.5 Git punya fitur namanya worktree yang memungkinkan kita bikin branch di direktori di luar root.

Terus apa bedanya dengan bikin klon di direktori lain?

Misalnya kita punya 2 repositori lokal hasil klon remote yang sama, masing-masing klon nggak punya hubungan langsung dengan yang lain. Klon di direktori dir_1/, nggak tau apa2 tentang klon di dir_2/.

Nah kalo worktree, semua masih berhubungan seperti branch biarpun lokasinya beda.

Continue reading →

ReactJS : Higher Order Component

Higher-order Component (HOC) adalah teknik untuk bikin komponen ReactJS baru dari komponen yang udah ada. Jadi kita bisa bikin komponen baru yang punya fitur atau fungsi tambahan dengan cara komposisi yaitu satu atau lebih komponen digabung & dibungkus komponen lain.

Kalo di bahasa OOP, ini cocok sama prinsip: Favor composition over inheritance

Misalnya kita punya komponen A & B. Kita bisa pake HOC untuk bikin komponen baru C yang isinya A & B plus fitur-fitur & komponen/elemen DOM yang lain. Jadi komponen C kurang lebih bisa digambarin kayak begini. Dua komponen yang lain tetep bisa dipake sendirian:

Contoh implementasi HOC antara lain di React-Redux, di mana kalo kita mau bikin komponen yang bisa merespon update di Store & kirim objek Action kita tulis kode begini:

Continue reading →

ReactJS: Controlled & Uncontrolled Input

Controlled Input adalah elemen form yang nilainya (value / state) dikontrol oleh React. Lawannya adalah Uncontrolled Input, state-nya dikontrol oleh elemen itu sendiri seperti normalnya form biasa.

Nilai yang dimasukin ke Controlled Input diproses dulu oleh React (onChange callback) baru inputnya diupdate. Dalam contoh di atas, text yang dimasukin ke text input nggak langsung dipake sebagai input.value tapi dikonversi dulu ke huruf besar oleh handleNameChange. value dari inputnya sendiri baru diset setelah state berubah (setelah setState()).

Jadi Controlled Input dalam contoh di atas cara kerjanya kurang lebih begini:

Manajemen State dengan Redux (tanpa React)

Redux adalah library untuk manajemen state aplikasi JavaScript. Library ini memang lebih sering dipake bareng React, tapi sebenernya bersifat framework agnostic. Jadi bisa dipake dengan atau tanpa framework. Mau pake VueJS, bisa. Pake Angular, ok. Pake Pure JS, boleh.

Dalam tutorial ini saya akan bahas contoh pemakaian Redux dalam aplikasi ES6.

Tapi sebelumnya, apa itu State?

Secara harfiah, state artinya kondisi/keadaan. Jadi yang dimaksud Application State kurang lebih adalah semua informasi/data yang bisa menggambarkan kondisi aplikasi pada suatu waktu.

Redux

Implementasi Redux bisa digambarin pake diagram berikut:

Continue reading →

Import & Export Modul dalam ES6

Ekspor / impor modul ES6 memang sedikit bikin bingung. Soale cara ekspornya macem-macem, impornya juga macem-macem. Berikut ini catatan singkat tentang cara ekspor & impor.

Kalo mau nyoba kode2 di bawah, bisa pake Poi.

1. Anonymous default export

//file: src/vehicles/car.js
export default (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, ' drive');
    }
  }
)

Continue reading →