Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
pplc7
blog
Commits
10a7888e
Commit
10a7888e
authored
May 02, 2019
by
Fata Nugraha
Browse files
Add blog for design pattern
parent
a2e22278
Pipeline
#16358
passed with stages
in 2 minutes and 22 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
_posts/2019-04-15-code-splitting.md
View file @
10a7888e
...
...
@@ -2,7 +2,7 @@
layout
:
post
title
:
Code Splitting
date
:
2019-04-15 02:38:27 +0700
author
:
F
ata
Nugraha
author
:
f
ata
---
Setelah menyadari aplikasi frontend kami yang dibuat menggunakan React tanpa
...
...
_posts/2019-05-02-design-patterns.md
0 → 100644
View file @
10a7888e
---
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.

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

## 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.

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).
assets/images/2019-05-02-design-patterns/visualisation.png
0 → 100644
View file @
10a7888e
181 KB
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment