เริ่มต้น Reactive Programming ด้วย Combine Part2: Marble Diagrams

บทความนี้ช่วยให้เรียนรู้ Reactive programming ได้รวดเร็วขึ้นด้วย marble diagrams

Marble diagram เป็น diagram ที่แสดงภาพเหตุการณ์ และพฤติกรรมการทำงานบน streams ที่ข้อมูลที่เกิดขึ้นแบบ asynchronous รวมไปถึงข้อมูลที่เปลี่ยนแปลงจาก operator

Marble diagram anatomy

ลองมาดู marble diagram anatomy กันว่าประกอบด้วยอะไรบ้าง

Marble diagram anatomy

1. แสดงเวลาที่ไหลจากซ้ายไปขวาเพื่อแสดงการดำเนินการของ stream
2. ค่าที่เกิดขึ้นบน stream ซึ่งเกิดขึ้น ณ เวลาใดก็ได้ เป็นแบบ asynchronous
3. เส้นแนวตั้งเป็นสัญลักษณ์เพื่อแสดงว่า stream ได้ทำงานเสร็จสมบูรณ์แล้ว หรือไม่มีการ subscribe ที่ตัว stream
4. กล่อง operator ที่ใช้ค่าจาก stream (ด้านบน) เพื่อสร้าง output stream (ด้านล่าง)ข้อความในกล่องแสดงพฤติกรรมของการเปลี่ยนแปลง
5. X นี้แสดงถึงจุดที่มี error ซึ่งบ่งบอกถึงการสิ้นสุดที่ผิดปกติและจะไม่เกิดเหตุแบบข้อ 3
6. Output stream เป็น steam ที่เกิดขึ้นจาก input steam ทำงานกับ operator

Example

ลองมาดู codeในตัวอย่างกันครับ ว่ามันสามารถใช้ marble diagram อธิบายได้อย่างไร

let streamA = PassthroughSubject<Int, Never>()
let streamB = streamA.map { $0 * 10}
let subscriber = Subscribers.Sink<Int, Never> { complate in
} receiveValue: { value in
 print(value)
}
streamB.receive(subscriber: subscriber)

// Test
streamA.send(1)
streamA.send(2)
streamA.send(3)

// Output
10
20
30

ตัวอย่าง Code ของเราเริ่มด้วยการสร้าง stream A หลังจากนั้นเอาไปผ่าน map operator โดยใช้ค่าจาก Stream A นำไป คูณด้วย 10ทำให้เกิดค่าใหม่ใน Stream B จากนั้นเราไป sink (subscribe) Stream B ไป แล้วก็ print ค่าออกมา

Marble diagram อธิบาย code ด้านบนได้ตามรู้นี้

เราสามารถเข้าไปเรียนรู้ operator ต่างใดจากเว็บด้านล่าง

‎RxMarbles

ถึงแม้ว่าจะเป็น Rx ซึ่งชื่อ operator ต่างกับ combine แต่ใช้ศึกษาได้เนื่องจาก combine เป็น Reactive programming เช่นด้วยกับ Rx

Summary

โดยสรุป Marble diagram มีส่วนช่วยในเรื่องปรับภาพความเข้าใจ และการสื่อสารที่มีประสิทธิภาพของแนวคิดการเขียนโปรแกรมแบบ reactive เป็นเครื่องมือที่ดีสำหรับการเรียนรู้และการทำงานกับระบบแบบ reactive และ asynchronous

Next part3: Reactive Programming ด้วย Combine Part3: Stream and Operation

https://medium.com/p/d55c95e3ece8

Referent

https://www.babelcoder.com/blog

https://www.kodeco.com/books/combine-asynchronous-programming-with-swift