Pernah nggak ngalamin, mau nambah satu fitur di aplikasi, eh tiba-tiba bagian lain ikut error? 😅 Rasanya kayak narik satu kabel di meja, terus semua kabel lain ikut ketarik.
Semakin gede proyeknya, biasanya makin rawan efek domino begini. Ujung-ujungnya, kerjaan nambah fitur malah jadi kerjaan padamkan kebakaran.
Nah, salah satu “jurus” biar kode nggak gampang berantakan adalah pakai SOLID Principles. Berikut contoh nya untuk project React + Vite:
1. S — Single Responsibility
Satu file, satu tugas.
// services/userService.js
export const fetchUsers = async () => fetch("/api/users").then(r => r.json());
// pages/Dashboard.jsx
import { fetchUsers } from "../services/userService";
import UserList from "../components/UserList";
2. O — Open/Closed
Bisa nambah fitur tanpa bongkar yang lama.
export default function Button({ type="primary", children }) {
const styles = { primary: "bg-blue-500", secondary: "bg-gray-200" };
return <button className={styles[type]}>{children}</button>;
}
3. L — Liskov Substitution
Komponen turunan harus bisa gantiin induknya.
function BarChart(props) { return <BaseChart {...props} />;}
4. I — Interface Segregation
Props sesuai kebutuhan, jangan kebanyakan fungsi yang nggak dipakai.
5. D — Dependency Inversion
Bergantung ke service, bukan langsung ke API.
// services/productService.js
export const getProducts = async () => fetch("/api/products").then(r => r.json());
Kalau prinsip ini dipakai, kode jadi lebih rapi, gampang dikembangin, dan nggak gampang bikin pusing kepala. Proyek pun bisa tumbuh tanpa bikin programmernya stres. Dan yang paling penting… kita masih bisa ngopi santai sambil lihat build sukses tanpa drama. ☕🚀
SOLID versi politik 🤭
Top comments (1)
reserved()