by Anggie Bratadinata

JS : Pemrograman Asinkron

Mayoritas kode JavaScript yang pernah kita tulis bersifat synchronous, artinya setiap baris kode dieksekusi secara berurutan setelah baris sebelumnya selesai. Tapi nggak jarang juga kita nulis kode yang bersifat asynchronous, yaitu function yang nggak langsung selesai & selama function ini belum selesai, JavaScript engine bisa jalanin kode kita yang lain. Salah satu contoh kode asinkron yang paling sering kita tulis adalah network request, baik pake XMLHTTPRequest atau, kalo pake JQuery, ya $.ajax().

Contoh paling sederhananya begini,

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Kode di atas semuanya bersifat sinkron, satu baris dijalanin sesudah baris sebelumnya selesai. Outputnya begini,

1
2
3
4
5

Kode yang asinkron contohnya seperti di bawah ini,

console.log(1);
console.log(2);

setTimeout(()=>{
  console.log(3, 'asinkron'); // asinkron
},500);

console.log(4);
console.log(5);

Outputnya begini, keliatan bedanya kan? Kode yang asinkron baru selesai setelah baris terakhir dijalanin.

1
2
4
5
3 'asinkron'

Continue reading →

by Anggie Bratadinata

End-to-end Testing dengan The Intern

Apa itu end-to-end testing ?

Sebagai programer, tentu kita semua udah kenal yang namanya testing. Ada macam-macam test yang bisa kita pake untuk meningkatkan kualitas kode dan/atau aplikasi yang kita buat. Yang paling umum dan wajib adalah unit-test untuk memvalidasi alur/logika program dalam unit yang paling kecil yaitu function.

End-to-end testing, sering disingkat E2E, adalah untuk memvalidasi cara kerja aplikasi atau website dari sudut pandang seorang user. Jadi dalam E2E testing kita tulis skrip untuk mensimulasikan behavior atau tindakan-tindakan seorang user — mirip bikin bot.

Dalam artikel ini, saya akan bahas tentang E2E testing pake sebuah framework yang bernama The Intern. Ada beberapa framework yang bisa kita pake selain The Intern, antara lain: Cypress, Nightwatch, TestCafe, dan yang paling tua, Selenium. Berdasarkan pengalaman saya, The Intern adalah yang paling seimbang antara fitur & tingkat kerumitannya.

Continue reading →

by Anggie Bratadinata

E-Book Gratis: Webpack 4 untuk Pemula

Pernah dengar Webpack tapi bingung cara pakenya? Atau mungkin malah belum pernah dengar sama sekali. Dalam buku tipis ini dibahas apa itu Webpack, instalasi, dan konfigurasinya.

Webpack adalah salah satu bundler yang populer. Tapi buat pemula yang belum pernah pake Webpack, instalasi dan konfigurasinya relatif bikin bingung. Ada banyak variasi contoh konfigurasi yang bisa dicari di Google atau Stack Overflow, yang mungkin malah bikin bingung.

Continue reading →
by Anggie Bratadinata

Cara Mudah Pakai Environment Variable dengan Webpack

Misalnya kita punya project web dengan konfigurasi environment yang beda antara dev & production (seperti normalnya projek web) kayak gini:

DEV PRODUCTION
DB 192.168.0.99 192.168.0.100
Assets dev.assets.com live.assets.com
API server1.api.com server2.api.com

Ada beberapa cara untuk pake variabel-variabel itu di aplikasi kita antara lain:

  1. Pake HtmlWebpackPlugin untuk injeksi file dev.env.js atau prod.env.js ke file HTML dalam bentuk tag <script>
  2. Bikin satu file env.js yang isinya bisa dev atau production vars tergantung di direktori mana dia dibuat. File ini nanti dimuat oleh aplikasi pake <script>.
  3. Ada juga yang pake JSON.

Untuk projek yang pake ES6 & Webpack, ada cara yang menurut saya lebih sip. Intinya environment vars kita bikin sebagai modul ES6, jadi bisa diimpor kayak modul ES6 biasa.

Kita bikin dua file, satu untuk masing-masing env:

//file: dev.env.js
export default {
    type:'dev',
    db:'192.168.0.99',
    assets:'dev.assets.com',
    api:'server1.api.com'
}

Satu lagi untuk production:

//file: production.env.js
export default {
    type:'production',
    db:'192.168.0.100',
    assets:'live.assets.com',
    api:'server2.api.com'
}

Di file index.js & semua file yang butuh baca environment vars:

//file: index.js

//import pake nama alias, jadi modul ini (index)
//nggak perlu tau itu file dev.env.js atau prod.env.js.
import CONFIG from 'env-config';

console.log('CONFIG',CONFIG);

Gimana caranya supaya skrip *.env.js bisa dipake sebagai modul kayak di atas?

Continue reading →

by Anggie Bratadinata

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 →