Fakultas Ilmu Komputer UI

Commit a74d3a1f authored by Tirta Abimanyu Purnomo's avatar Tirta Abimanyu Purnomo
Browse files

Add post about focused code

parent 6a25b357
---
layout: post
title: Focused Code
date: 2019-04-02 08.51.23 +0700
author: abi
---
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];
messages.forEach(message => {
CoolToaster.DefaultToaster.show({ message, intent, timeout: 3000 });
});
};
```
Contoh penggunaannya di fungsi lain
```
handleSubmit(event) {
event.preventDefault();
let valid = true;
if (this.state.password.length === 0) {
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"));
if (user && user.role !== "guest") {
return true;
}
return false;
}
```
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment