จงอธิบาย Reactive Programming ให้เป็นภาษามนุษย์

Porawit Poboonma
Aug 24, 2017 · 1 min read

เชื่อมั้ยว่า หลังจากผมศึกษาเรื่อง Reactive Programming มา ผมพยายามหาวิธีที่จะอธิบายกับน้องๆในทีมแบบง่ายๆว่ามันคืออะไร แต่ผมไม่เคยทำมันสำเร็จเลย และผมเลิกคิดเรื่องจะเทรนเรื่องนี้ให้น้องๆในทีม แล้วปล่อยให้เป็นหน้าที่ของโชคชะตา ให้พวกมันไปตะเกียกตะกายกันเอาเอง ก๊ากกก 5555

แต่วันนี้ ผมว่า ผมพอจะนึกออกแล้วแหละ โดยครั้งนี้ ผมจะเปรียบเทียบ Reactive Programming กับเรื่องการส่งสาส์น หรือการสื่อสารนั้นเอง เดี๋ยวจะเล่าต่อว่ามันยังงัย

ก่อนอื่นผมอยากให้เข้าใจองค์ประกอบหลักและส่วนเสริมของ Reactive Programming หรือ Observable กันก่อน

หลักๆสำหรับผม Observable จะประกอบไปด้วย 3 สิ่ง คือ
1. Observer
2. Subscriber
3. Operator

การจะให้มันเป็น Observable ที่สมบูรณ์มันต้องมีอย่างน้อย 2 อย่างคือ Observer และ Subscriber … ส่วน Operator ผมถือว่ามันเป็นส่วนเสริม มีไม่มีก็ได้ แต่ถ้ามีมันจะสนุกขึ้นเยอะ เดี๋ยวจะขยายความอีกที

หมายเหตุ — บางครั้งผมก็ชอบเรียก Observer ว่า Producer และเรียก Subscriber ว่า Consumer ส่วนตัวผมว่า 2 คำนี้เข้าใจง่ายกว่า

Observer

ผมอยากให้เปรียบเทียบมันว่ามันเป็นผู้ส่งสาส์น … ซึ่งการที่คนคนนึงจะเป็นผู้ส่งสาส์นได้ คนคนนั้นต้องมีข้อมูลก่อน ถึงจะเอามันไปสื่อสารให้คนอื่นได้ … ซึ่งนั่นแหละ Observer นั้นก็เช่นกันเพราะ Observer จำเป็นจะต้องมี data อยู่กับตัวเองเสมอ ถึงจะส่งข้อมูลไปให้ subscriber ได้

ซึ่งข้อมูลที่จะนำไปสื่อนั้น เราจะใช้ next(data) ในการบอกว่ามีข้อมูลชุดใหม่มานะ … หรือ ถ้าหมดเรื่องที่จะบอกแล้ว ก็สามารถใช้ complete() เพื่อบอกคนอื่นว่า พอละ กูรู้แค่นี้แหละ กูไปล่ะ!! … โดยที่หาก complete() นั่น ถือว่าเป็นการจบด้วยดีนะ … ถ้าจบด้วยไม่ดีเช่น คนพูดเกิดช็อคสลบไปนั้น ก็จะทำให้การสื่อสารขัดข้อง ก็ต้องแจ้งคนอื่นว่า error() นะ (หมายถึง กูพังละ บาย555)

Subscriber

แน่นอนเมื่อ Observer เป็นผู้ส่งสาส์นที่มีข้อมูลอยู่ในมือ … Subscriber ก็จะเป็นอะไรไปไม่ได้ นอกจาก ผู้รับสาส์น หรือผู้ที่จะรับข้อมูลเพื่อที่จะเอาไปทำอะไรสักอย่าง

โดยที่ subscriber จะต้องทำการ subscribe() เพื่อจะนำข้อมูลไปใช้ … เปรียบเทียบในการสื่อสารมันก็คือ การรอฟังนั่นเอง … ปั๊ดโท่ว ถ้าไม่ฟังแล้วมันจะไปรู้ัเรื่องได้งัยใช่มะ 555 … นั้นแหละ จะรอฟังจะรับรู้อะไรจากใครเราก็ต้อง subscribe() มันซะ

สิ่งที่ได้จากการ subscribe() ก็จะเป็น subscription หรือความเป็นสมาชิกของผู้มีสิทธ์ในการใช้ข้อมูลนี้ ซึ่งถ้าคุณไม่อยากรับรู้อะไรจากไอ้นี่อีกแล้ว ก็ยกเลิกการเป็นสมาชิกไป นั่นแหละครับ จึงเป็นที่มาของ subscription.unsubscribe() คือไม่เอาไม่สนใจละ มันจะส่งข่าวอะไรมาอีกก็ไม่สนใจแล้ว หนักสมอง!! …

คำโบราณท่านว่า รู้มาก ทุกข์มาก … subscription ก็เช่นกัน … ไป subscribe หลายๆอย่างไปฟังมาหลายๆเรื่อง ปวดหัว เปลืองแรม!! ทางที่ดี เลิกสนใจสิ่งที่ไม่จำเป็นโดย unsubscribe() มันซะดีกว่า

Operator

อันนี้เด็ด ผมขอเปรียบเทียบให้มันเป็น คนกลาง ในการพูดคุย … เพราะว่าบางครั้ง การสื่อสารมันอาจจะไม่ได้จบที่ผู้รับ มันจะต้องมันการบอกต่อ ซึ่งการบอกต่อนี้ มันสามารถทำให้ ใจความสำคัญเปลี่ยนไป!! (พวกชอบใส่ไฟ ใส่ร้ายป้ายสี 555)

เพราะฉะนั้นระหว่างทาง กว่า data จาก Observer จะส่งไปถึง Subscriber นั้น เราสามารถเอาอะไรไปคั่นเพื่อกระทำการบางอย่างกับข้อมูลก่อน เช่น … ทำให้ข้อมูลให้มันอ่านง่ายขึ้น (ด้วยการ map) … หรือกรองข้อมูลบางอย่างก่อนที่จะส่งไปถึงผู้รับ (filter) … หรือแม้แต่การเปลี่ยนประเด็นไปเรื่องอื่นเลย (เช่น flatMap, switchMap)

มี operator ตัวนึงที่มีประโยชน์ในการ debug มาก นั่นก็คือ do() เพราะมันสามารถเอาข้อมูลที่มี ณ ขณะนั้นไป ปู้ยี่ปู้ยำ ได้โดยที่มันจะไม่เปลี่ยนแปลงข้อมูลใดๆใน stream หรือ observable (หลักๆก็คือเอาไป console.log() เพื่อดูค่าของมันนั่นแหละ)

Operator นี่คือความสนุกของ Reactive Programming เลย ผมขอบอก … ยิ่งรู้ operator เยอะ เราก็จะยิ่ง control ข้อมูลในสถานการณ์ต่างๆได้เยอะขึ้น

Conclusion

จริงๆแล้ว ให้เปรียบเทียบเป็นพวก สำนักหนังสือพิมพ์ ก็น่าจะเข้าท่านะ มีนักข่าว มีบรรณาธิการข่าว มีผู้เสพย์ข่าว

ผมว่าเรื่องนี้มันสามารถเอามาเปรียบเทียบกับ Reactive Programming ได้ทุกเคสเลยนะ โดยเฉพาะ Operator ที่แต่ละตัวทำหน้าที่ต่างสถานการณ์กันมาก … ซึ่งเราสมมติเหตุการณ์ของขั้นตอนการสื่อสารได้เกือบหมดเลย

ปล. เดี๋ยวมีเวลาจะมาเพิ่มโค้ดให้นะ น่าจะช่วยให้มองออก ได้ดีขึ้นอีก

)

Written by

Senior Frontend Developer at 7peakssoftware

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade