Pelajaran Dari Membuat Starter Kit Web

Aktivitas yang terjadi setiap kali mengerjakan sebuah proyek:

  1. Membuat direktori nama project
  2. Merancang struktur folder (misal 3 - 10 menit)
  3. Menginstal perkakas (maks. 5 menit)
  4. Mengatur konfigurasi (misal 10 - 15 menit)
  5. Mulai mengerjakan proyek

Total waktu = 18 - 30 menit

Jika pola di atas dilakukan berulang di setiap proyek tentu ini tidak baik karena akan menyita waktu khususnya di bagian merancang struktur folder dan mengatur konfigurasi.

Bagaimana cara kita untuk memangkas waktu merancang struktur folder dan mengatur konfigurasi dan fokus pada mengerjakan proyek? Di sinilah kehadiran starter kit.

Dengan merancang starter kit, kita bisa memangkas waktu merancang struktur folder dan mengatur konfigurasi. Sehingga aktivitas yang terjadi adalah:

  1. Mengunduh starter kit.
  2. Menginstal perkakas (maks. 5 menit).
  3. Mulai mengerjakan proyek.

Jadi, hanya butuh waktu sekitar 5 menit berkat starter kit.

Apa itu Starter Kit? Satu set hal yang diperlukan untuk membuat sesuatu.

Manfaat Starter Kit?

  • Menghemat waktu merancang struktur folder dan mengatur konfigurasi,
  • Mempercepat langkah mengerjakan proyek,
  • Penyelamat Hackathon. Hackathon menuntut developer untuk menyelesaikan prototipe produk dalam waktu 24 jam.

Dari kondisi di atas pula saya merancang starter kit versi saya bernama KISS-KIT. KISS (Keep It Simple Stupid) kit berbasis aplikasi satu halaman (Single Page Application).

Perkakas yang digunakan:

  • Gulp (menjalankan beragam tugas),
  • Browsersync (memuat ulang halaman setiap kali ada perubahan di suatu file),
  • Tailwind (framework CSS),
  • Page.js (pustaka untuk mengatur navigasi SPA).

Kit ini mengandalkan HTML, CSS, JavaScript (ES6, DOM manipulation, ES modules, History API untuk routing) dan Gulp.

Untuk menggunakan Kiss-Kit, kita bisa menggunakan Degit, sebuah perancah proyek langsung. Degit lebih cepat dibandingkan git clone karena tidak mengunduh riwayat git. Syarat menggunakan Degit adalah memakai NodeJS >= 8 karena butuh async dan await. Instal degit dengan perintah: npm install -g degit.

Berikutnya buat proyek dengan KISS-Kit dan Degit: degit satyakresna/kiss-kit nama-proyek.

Proyek yang dibangun dengan KISS-Kit: bfwiki.satyakresna.io dan wasm-summit-clone.satyakresna.io.

Isu Single Page Application

Terdapat dua isu pada Single Page Application yakni refresh halaman dan akses halaman lain. Berikut video refresh halaman pada Single Page Application.

Di bawah ini adalah video mengakses halaman lain pada Single Page Application.

Penyebab dua isu ini terjadi:

  1. SPA dirender di sisi klien.
  2. SPA biasanya hanya menggunakan satu file indeks yang dapat diakses oleh browser web (umumnya index.html) dan navigasi ditangani menggunakan History API.

Hal di atas mengakibatkan server web akan mengembalikan pesan 404 (tidak ditemukan) kepada pengguna.

Solusi Isu Single Page Application

Pada mode development bisa menggunakan library connect-history-api-fallback. Library berperan sebagai jembatan menangani request yang masuk dan dialihkan ke file indeks yakni index.html. Library ini bisa digunakan pada browsersync atau express. Kriteria agar library ini berjalan:

  1. Request method GET yang menerima tipe text/html,
  2. Bukan permintaan file langsung, misalnya request yang diminta tidak boleh ada . (DOT) karakter dan tidak cocok dengan pola yang disediakan di options.rewrites.

Pada mode production, saya menggunakan Netlify. Buat file bernama netlify.toml di root direktori proyek dan tambahkan skrip di bawah sebagai pengalihan eksplisit.

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false

Dengan pengalihan eksplisit setiap kali ada request apapun akan selalu diarahkan ke file index.html. Jika tidak menggunakan pengalihan eksplisit, bot Netlify akan berasumsi pengguna meminta halaman yang terpisah dari /index.html dan karena halaman itu tidak benar-benar ada maka akan mengembalikan halaman error 404.

Gunakan ES Modules di Single Page Application

Dengan kehadiran ES Modules kita bisa membagi kode dalam suatu file menjadi beberapa file yang disebut dengan modul dan bisa digunakan berulang-ulang serta merampingkan kode dalam suatu file. ES Modules juga sudah mendukung browser Chrome, Firefox, dan Safari.

Gambar menggunakan es modules di SPA

Pada gambar di atas sebuah halaman yang terdiri dari filter form dan daftar unit yang mana setiap unit berwujud dalam kartu (card). Halaman ini dibuat pada file bernama units.js. Lalu, di units.js akan mengimpor filter form yang berada di file SearchForm.js dan kartu unit yang berada di file Card.js. Sehingga sintaksnya seperti di bawah.

// units.js
import UnitCard from "./Card.js";
import SearchForm from "./SearchForm.js";

Sekian artikel saya dan silakan dukung saya di Karya Karsa dan Trakteer.

Tentang Boilerplate

Kalian bisa membaca artikel What is boilerplate and why do we use it? Necessity of coding style guide dari Freecodecamp. Namun, dari artikel ini saya mengambil beberapa poin yang menurut saya penting.

Sebagian besar pengembang web profesional telah membuat kumpulan aset dan potongan kode yang mereka gunakan kembali pada proyek untuk mempercepat pengembangan. Ada beberapa pola universal atau hampir universal yang dimiliki oleh semua situs web. Daripada terus-menerus membuat dari awal, sebagian besar pengembang memulai dengan menyalin kode yang mereka gunakan untuk proyek serupa dan kemudian mulai memodifikasinya.

Starter kit atau perancah (scaffolding) merupakan jenis dari boilerplate dan target pengguna utama adalah pengembang pemula atau pengadopsi awal yang baru (new early adopter). Starter kit ini fokus pada prototyping cepat dengan membuat elemen-elemen yang diperlukan hanya untuk proyek-proyek baru.

Struktur kode starter kit tidak banyak diperluas dan tidak melibatkan melibatkan lapisan abstraksi yang lebih dalam karena pengguna hanya perlu membangun fitur inti.