Salah satu indicator dari clean code adalah setiap class, function, dan module memiliki tujuan dan cakupan yang jelas.
Di tulisan ini saya akan mencontohkan apa yang sudah kami lakukan di tim PPL kami.
<!--more-->
**Focused Class**
Tim kami menerapkan pattern satu higher order component untuk setiap halaman di frontend. Component ini bertanggung jawab untuk memanggil component dan module lain yang dibutuhkan di halaman itu.
**Focused Function**
Fungsi yang memiliki satu tujuan akan lebih mudah dibuat modular dibanding fungsi yang memiliki banyak side effect. Contohnya di kode kami adalah fungsi showToaster untuk menampilkan toaster dengan message dan intent tertentu. Fungsi ini bisa digunakan di dalam fungsi lain yang memerlukan toaster untuk ditampilkan dengan sangat mudah. Dengan begitu kita dapat menghindari menulis duplicate code
Fungsi showToaster
```
const showToaster = (messages, intent) => {
if (typeof messages === "string") messages = [messages];
CoolToaster.showDanger("Password can't be blank");
valid = false;
}
if (this.state.username.length === 0) {
CoolToaster.showDanger("Username can't be blank");
valid = false;
}
if (valid) {
this.setState({ loading: true });
this.props.login(
this.state.username,
this.state.password,
this.props.callback
);
}
}
```
**Focused Module**
Untuk berkomunikasi dengan backend, kami membuat sebuah module api yang bertanggung jawab untuk mengirimkan request dan menerima response dari backend. Contoh lainnya adalah module Auth yang digunakan untuk autentikasi client-side.
Contoh fungsi di module auth
```
static isLoggedIn() {
const user = JSON.parse(localStorage.getItem("loggedUser"));