Fakultas Ilmu Komputer UI

Commit 10a7888e authored by Fata Nugraha's avatar Fata Nugraha
Browse files

Add blog for design pattern

parent a2e22278
Pipeline #16358 passed with stages
in 2 minutes and 22 seconds
......@@ -2,7 +2,7 @@
layout: post
title: Code Splitting
date: 2019-04-15 02:38:27 +0700
author: Fata Nugraha
author: fata
---
Setelah menyadari aplikasi frontend kami yang dibuat menggunakan React tanpa
......
---
layout: post
title: Design Patterns
date: 2019-05-02 04:00:00 +0700
author: fata
---
Pemilihan design pattern yang tepat membuat solusi dari permasalahan semakin elegan dan mudah.
Dalam post ini akan dibahas penggunaan pattern Observer dan Chain of Responsibility pada fitur
Realtime World Map dalam proyek kami.
<!--more-->
## Observer
Pattern ini digunakan dalam _system design_ kami untuk mempublikasikan apabila ada log yang
diterima oleh sistem ke semua client yang sedang membuka fitur realtime world map.
![observer pattern](https://sourcemaking.com/files/v2/content/patterns/State1.png)
Subject dalam pattern ini adalah service `aggregator` yang bertanggungjawab untuk menerima
log dan mendistribusikan log tersebut ke Observer yaitu client `frontend` yang sedang membuka
fitur ini.
Implementasi pattern ini dalam fitur ini bisa dibayangkan seperti bagaimana aplikasi _chatting_
bekerja, namun dalam kasus ini hanya ada satu pengguna yang hanya dapat memposting ke grup yang
bernama `world-map` (yaitu si subject) dan dimana anggota grup tersebut adalah user yang membuka
fitur ini (yaitu si observer).
Dalam mengimplementasikan design pattern ini kami menggunakan libary `Django Channels`
yang menggunakan Redis sebagai backend yang memiliki fungsi PubSub (Publish Subscribe).
Setiap client akan melakukan subscribe ke channel fitur, dan saat ada log baru masuk,
akan dilakukan publish ke channel tersebut sehingga setiap client akan menerima
log tersebut.
Observer cukup menunggu adanya perubahan yang diterima oleh subject dan menampilkan perubahan
sesuai log yang dikirimkan oleh subject. Untuk menampilkan visualisasi yang berbeda beda kami
menggunakan pattern selanjutnya yaitu Chain of Responsibility
![visualisation](/assets/images/2019-05-02-design-patterns/visualisation.png)
## Chain of Responsibility
Dalam fitur ini kita baru memiliki 5 jenis visualisasi. Yaitu satu peta dan 4 widget yang menampilkan
ranking dari metrik Unique Country Source, Unique IP Source, Unique IP Destination, dan Class Type.
![chain of responsibility](https://sourcemaking.com/files/v2/content/patterns/Chain_of_responsibility__.png)
Karena kita tidak bisa menggeneralisasi apa yang dilakukan untuk setiap visualisasi, kita dapat
menggunakan pattern ini untuk menyelesaikan permasalahan ini.
Pertama definisikan fungsi handler yang akan menerima jika ada perubahan dalam state (dalam konteks ini
adalah log).
```js
constructor() {
// ...snipped..
this.widgetRefs = [
this.countryWidgetRef,
this.srcIPWidgetRef,
this.dstIPWidgetRef,
this.classTypeWidgetRef,
this.mapWidgetRef
];
// ...snipped...
}
```
Kedua panggil setiap handler ketika ada perubahan di state.
```js
addToState = event => {
this.events.push(event);
this.widgetRefs.forEach(
widget => !this.unmounting && widget.current.addEvent(event, true)
);
};
removeFromState = event => {
this.widgetRefs.forEach(
widget => !this.unmounting && widget.current.removeEvent(event, false)
);
};
```
Dengan pattern ini, parent component tidak perlu mengetahui business logic dari komponen visualisasi dan
kode akan lebih elegan dan mudah di maintain (jika ada penambahan atau pengurangan widget).
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