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 →

Bikin Project JavaScript (Webpack) dengan Poi

Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.

Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.

Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.

Instalasi

Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.

$ yarn global add poi
#atau
$ npm install -g poi

Continue reading →

Mengenal VueJS – 03

Salah satu fungsi data-binding yang banyak dipake adalah untuk ngerubah stylesheet, bisa yang inline atau pake class. Di bagian ke-3 seri tutorial pengenalan VueJS ini, saya mau bahas tentang CSS dinamis.

Style Binding

Kita pake v-bind:style untuk ngerubah nilai atribut style.

See the Pen VueJS – Dynamic CSS – style binding by Anggie Bratadinata (@masputih) on CodePen.

Ganti warna kotak pake text-input di bawahnya.

Continue reading →

Mengenal VueJS – 02

Ngelanjutin artikel VueJS sebelumnya, kali ini kita bahas sedikit tentang fitur Reactive Programming.

Apa itu Reactive Programming?

RP adalah metodologi pemrograman berbasis event. Ada event, ada reaksi. Jadi kalo Anda punya riwayat sebagai programer Flash/Flex, kayak saya, sebenernya Anda udah pernah nyerempet-nyerempet RP lewat event-based programming yang jadi makanan programer Flash sehari-hari. Bedanya, di RP antara koneksi antara event dispatcher & event listener dibuat abstrak / disembunyiin dibalik interface sederhana. Jadi ga perlu secara eksplisit jalanin addEventListener atau dispatchEvent dsb.

Continue reading →

Mengenal VueJS – 01

Dalam artikel ini saya mau kasih sedikit intro tentang library yang sedang naik daun, namanya Vue. Ini adalah library JavaScript untuk bikin UI. Kalo dikelompokin, mungkin bisa satu grup dengan ReactJS. Vue bisa dipake untuk macem-macem keperluan, mulai dari yang sederhana untuk bikin komponen UI, sampai SPA (Single Page Application). Popularitas Vue meroket antara lain karena jadi library default bawaan Laravel 5.

Progressive Framework. Begitu kata Vue Guide. Maksudnya, kita bisa pake Vue sedikit-sedikit. Ga perlu langsung satu website pake Vue semua. Bahkan untuk satu halaman, kita bisa pake Vue seperlunya dulu. Kalo mau migrasi website/aplikasi yang udah jadi dari framework lain ke Vue juga bisa pelan-pelan. Ga perlu gerudukan semua komponen UI langsung ganti.

Sebelum memulai silakan bikin file HTML yang isinya ada skrip ini. Atau nanti langsung edit aja contoh kode di bawah yang saya share di Codepen.

<script src="https://unpkg.com/vue/"></script>

Continue reading →