RxSwift ง่ายๆ มั้ง Part 1 Introduction

Code ต่างๆใน Blog จะอยู่ใน Link ด้านล่างนี้ ซึ่งผมเขียน Concept ตามที่เข้าใจ และเขียน Code เป็น Playground ไว้ใน Projects/03-Simple/ สามารถ Pod Install แล้วลองดูได้เลย

  • หากรันไม่ได้ให้ลอง Build Project ก่อน 1 ครั้งครับ
  • ส่วนหน้าที่เป็น ViewController ให้เปิด Assistant Editor แล้วเลือก Timeline
  • สามารถ Fork ไปลองเล่นได้ที่ https://github.com/HelloCore/RXSwiftTutorialProject

RxSwift คือ Reactive Extension สำหรับภาษา Swift ซึ่งเป็น API สำหรับ Asynchronous Programming โดยใช้ Observable Streams

Concept พื้นฐานคือ RxSwift เนี่ยจะเปลี่ยนมุมมอง Async Events ต่างๆให้เป็น Observable Streams หรือก็คือท่อ ที่จะมีข้อมูลส่งมาเรื่อยๆ หรือไม่มีส่งมาเลยก็ได้

รูปจาก https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

ยกตัวอย่างเช่น UITextField จะมี Property Text ซึ่งจะเป็นค่าๆเดียวเมื่อเราเรียกใช้

แต่เมื่อเราใช้ RxSwift ตัว Text จะกลายเป็น Observable (ท่อของข้อมูล) ซึ่งจะมีค่าใหม่ (Text) ส่งมาใหม่ทุกครั้งที่ข้อมูลมีการเปลี่ยนแปลง ซึ่งค่านี้เราสามารถเอาไปใช้งานต่อได้


การเขียนโค้ดด้วย ReactiveX จะแตกต่างจากทั่วไปตรงที่ เมื่อเราเขียนโค้ดทั่วไป จะเป็นการสั่งให้ตัวโปรแกรมทำงานนั้นๆ ตามลำดับขั้นตอน แต่ ReactiveX จะเป็นการวางแผนไว้ว่า หากมี Event นี้เข้ามา เราจะทำอะไรบ้าง และจะทำอะไรต่อ

ยกตัวอย่างเช่น หากเรามีหน้า Login ที่มี TextField เป็น Username และ Password จากนั้นเราต้องการ Validate ว่าถ้า Username.length <4 และ Password.length < 4 ให้ทำการ Disable ปุ่ม Login

  • ถ้าเราเขียนแบบทั่วไปเราต้องสั่งงานหลายๆอย่าง เป็นลำดับขั้นตอนเช่น เมื่อ TextField มีการแก้ไข (Delegate) > เช็ค Username.length > เช็ค Password.length > แก้ LoginButton.isEnabled
  • เมื่อเราต้องการเพิ่ม Logic ว่า เมื่อ Login ไม่สำเร็จให้ Clear Username และ Password เราก็ต้องสั่งเพิ่มว่า Username.text = “” และ Password.text = “”

จากนั้นเราจะเจอ Bug ว่า เมื่อ Login ไม่สำเร็จ ปุ่ม Login จะไม่ถูก Disable ด้วย เราก็ต้องเพิ่มโค้ดเข้าไปเป็น

จากนั้นเราจะพบว่าเราจะมี Logic แบบนี้ซ้ำๆในหลายๆที่


ในทางกลับกัน เมื่อเราเขียนด้วย ReactiveX และมองทุกอย่างเป็น Observable คือ เมื่อมี Event (ค่าใหม่ของ TextField) มาในท่อ (Observable ของ TextField) เราจะทำอะไรต่อ แล้วผลลัพที่ต้องการคืออะไร

อธิบายคือ ทุกครั้งที่ Username หรือ Password เปลี่ยนแปลง เราจะทำการแปลง text เป็น Bool โดยใช้เงื่อนไข str.length > 4 จากนั้นเอาทั้งคู่มารวมกันเป็น Bool 1 ตัว แล้วเอาค่าไปใส่ใน loginBtn.rx.isEnabled

หมายความว่าทุกครั้งที่ Username หรือ Password เปลี่ยนแปลง จะมีการทำ Logic นี้ใหม่ทุกครั้ง


สรุป ข้อดี ของการใช้ RxSwift คือ

  • บัคน้อยลง เพราะเราต้องคิดวางแผนล่วงหน้าก่อนจะทำอะไร ซึ่งหากเราวางแผนดี จะไม่ค่อยเจอ Bug
  • Code สั้นลงมาก
  • กรณีที่ใช้ MVVM จะสามารถแยก ​Logic ระหว่าง View กับ ViewModel ได้ง่ายมาก
  • สามารถ Control Thread, Concurrency ได้ง่าย
  • เมื่อชำนาญแล้วสามารถย้ายไปเขียนภาษาอื่นที่มี ReactiveX รองรับได้ง่าย (ทดลองจากการลองไปเขียน Android)

ส่วน ข้อเสีย คือ

  • Learning Curve สูงมากกกกกก เนื่องจากเป็น Concept ที่ต่างจากการเขียนโปรแกรมทั่วไปโดยสิ้นเชิง
  • Debug ยากพอสมควร

Part ถัดๆไปจะเป็นการอธิบาย(?) พื้นฐาน RxSwift เช่นพวก Operator ต่างๆที่ใช้จัดการ Element (ค่า) ใน Observable Streams (ท่อ)

ปล. ข้างใน Playground จะมีเรื่องอื่นๆแทรกอยู่เล็กๆ น้อยๆ

ปล. 2 Part 2 ออกแล้วนะ ติดตามอ่านได้ที่นี่เลย

Show your support

Clapping shows how much you appreciated HelloCore’s story.