Add blog for design pattern

_posts/2019-04-15-code-splitting.md

@@ -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

_posts/2019-05-02-design-patterns.md

+---
+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).