Modern Frontend Execution: Vite & TypeScript

Membangun aplikasi web di tahun 2026 bukan lagi sekadar membuat tampilan yang berjalan. Kita berbicara tentang Developer Experience (DX), kecepatan Hot Module Replacement (HMR), dan keamanan tipe data yang absolut.

1. Paradigma Baru: Native ESM vs Bundling

Berbeda dengan Webpack yang melakukan bundling seluruh aplikasi sebelum server dijalankan, Vite melayani kode sumber melalui Native ESM. Ini berarti Vite hanya memproses modul yang benar-benar diminta oleh browser saat itu juga.

⚡ Cold Start: Instan karena tidak ada proses bundling di awal.
🔥 HMR: Kecepatan tetap konstan tidak peduli seberapa besar ukuran aplikasi.
🛠️ Rollup: Digunakan di sisi produksi untuk optimasi build yang sangat agresif.

2. Konfigurasi Jeroan (vite.config.ts)

File konfigurasi adalah otak dari alur kerja kita. Di sini kita mendefinisikan alias agar kode lebih bersih.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
})

3. Arsitektur Komponen Skala Enterprise

Kita menerapkan pola Feature-Based Architecture. Setiap fitur besar memiliki folder sendiri.

src/
├── features/
│   ├── auth/
│   └── dashboard/
├── shared/
└── main.tsx

Live Execution

LAB: Scaffolding & Core Setup

01 Inisialisasi Project via Terminal

Jalankan perintah ini di terminal kesayanganmu (pastikan Node.js v18+ sudah terinstal):

# Inisialisasi Vite dengan template TS
npm create vite@latest aether-pro-app -- --template react-ts

# Masuk ke folder & install deps
cd aether-pro-app
npm install

# Install Tailwind & Peer Deps
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

02 Implementasi Interface TypeScript

Mari kita buat komponen yang benar-benar aman (Type-Safe). Buat file baru di src/components/Card.tsx:

interface CardProps {
  title: string;
  description: string;
  variant: 'primary' | 'secondary';
  onExecute: () => void;
}

export const ActionCard = ({ title, description, variant, onExecute }: CardProps) => {
  return (
    <div className={`p-6 rounded-2xl border ${variant === 'primary' ? 'border-brand bg-brand/5' : 'border-zinc-800'}`}>
      <h4 className="text-xl font-bold mb-2">{title}</h4>
      <p className="text-zinc-400 text-sm mb-4">{description}</p>
      <button onClick={onExecute} className="px-4 py-2 bg-brand text-white rounded-lg font-bold">
        Eksekusi Sekarang
      </button>
    </div>
  );
};

03 Eksekusi Build Produksi

Saat kode siap dilepas ke dunia nyata, gunakan perintah build untuk optimasi rollup:

# Menghasilkan folder /dist yang sudah teroptimasi
npm run build

# Preview hasil build secara lokal
npm run preview

Kader Note:

Eksekusi bukan cuma soal "jalan", tapi soal skalabilitas. Dengan TypeScript, kamu menangkap bug sebelum *user* menemukannya.

Eksekusi Frontend Modern via Vite & TypeScript

"From Init to Production Ready"