ReactJS : Server & Client Routing

Pada dasarnya, ada tiga macem Routing dalam aplikasi web: Server-side ,Client-side, & kombinasi keduanya. Dalam tutorial ini saya akan bahas tentang routing di sisi klien & server pake React Router.

Sedikit info buat yang belum tau routing .

Server-side Routing

Dalam Server-side Routing semua rekues dihandel server yang akan kirim HTML sebagai respon ke browser.

Jadi misalnya dari home page: www.tiket.com kita buka www.tiket.com/pesawat, rekues dikirim ke server yg kemudian kirim respon HTML yg berisi halaman /pesawat ke browser.

Jadi ini model konvensional. Rekues -> server -> browser refresh.

Ini routing untuk web page ya. Kalo routing untuk REST API, ya nggak perlu browser refresh.

Client-side Routing

Client-side Routing mulai populer dengan adanya dukungan browser utk History API dari spesifikasi HTML5 & munculnya Single-page Application (SPA). Jadi waktu kita buka /pesawat, nggak ada rekues yg dikirim ke server. Rekues dihandel oleh kode JavaScript yang kemudian menampilkan komponen Flight di browser. Kalo kita pindah ke /train , ya yang ditampilin adalah komponen Train.

Continue reading →

Git Flow 02 – Release

Lanjutan dari:
Git Flow 01 – Intro

Sebelum rilis, kita bikin dulu release-branch dari develop, pake perintah:

git flow release start (nama rilis/versi)

Contohnya begini:

$ git flow release start v1.0
Switched to a new branch 'release/v1.0'

Summary of actions:
- A new branch 'release/v1.0' was created, based on 'develop'
- You are now on branch 'release/v1.0'

Follow-up actions:
- Bump the version number now!
- Start committing last-minute fixes in preparing your release
- When done, run:

     git flow release finish 'v1.0'

Di branch release/v1.0 ini kita jalanin proses-proses yg perlu buat rilis, misalnya:

Continue reading →

Git Flow 01 – Intro

Ada beberapa metode branching Git yang bisa kita praktekin. Ada model Centralized, Environment Branching, dan lain-lain. Git Flow adalah salah satu yang populer.

Di dalam metode Git-Flow, ada dua long-lived branch (cabang yang ga pernah dihapus) yaitu:
master
develop

master berisi kode yang di-deploy ke production-server. Jadi hanya kode yang sudah dites, lolos QA & dirilis yang ada di sini.

develop, sesuai namanya, dipake untuk development. Untuk sinkronisasi kode antara satu developer dengan yang lain. Penambahan fitur baru atau perbaikan kode selalu berbasis branch ini.

Instalasi

Ini opsional, kita bisa pake metode Git Flow pake perintah-perintah standar Git, tanpa command-line tool tapi rawan error karena lupa, dll. Jadi mending instal CLI-nya.

Ada dua macam CLI yang populer, satu yang Git Flow yg asli/vanilla & yg satu fork-nya git-flow-avh. Versi AVH lebih baru daripada yg vanilla & ada beberapa perintah tambahan.

  • Windows: git-flow-avh udah termasuk di dalam paket Git for Windows. Kalo pake Chocolatey, choco install git.
  • Mac: brew install git-flow-avh
  • Linux: di sini.

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 →