My first try on Mimic Flux/React architect into iOS app development — Functional View

I just try to mimic the React/Reflux architect into iOS Application development. I want to note and share what I try to do and any comment are gladly welcome.

What I try to do is separate logic of view state change into a single store for each view. So when the view controller try to change state of its own view, they must always call store.

For example, instead of writing this on view-controller:

self.lblTitle.text = @"Hello world";

We writing this instead:

AddFeelStore.changeTitle(@"Hello world");

Benefit of this is we can ensure that all the view change happen in the store. If there are any weird view-changing logic, we can find them in store and only store. Nowhere else it will be.

Also, the delegates must call store before changing the viewcontroller, that’s make things a lot less messy. We have single control of view-state change in the store.

iOS view and React component has a very different nature. iOS view is not functional. So the best I can do is think of it as functional view that must change the input (via store) before.

But still, I think for the bigger app it may be lot easier if my store contain the state tree and then, if we can unit test all the state tree state to make sure it is one-to-one function between view and state tree. That’s when we got a functional view on iOS. In this project I am not going to go as far as that, but it is just an idea if I do this on a bigger project.


วันนี้ผมได้ลองพยายามจะเลียนแบบ Flux,React architect เข้ามาใช้กับการพัฒนา iOS Application เลยอยากจะแชร์สิ่งที่ผมพยายามจะทำและถ้ามี Comment จาก iOS dev เก่งๆ นี่ผมจะยินดีมาก

ตอนนี้ในทุกๆ View controller ผมจะสร้าง Store ขึ้นมา เป็นจุดรวมในการเปลี่ยนแปลง View ทั้งหมด ดังนั้น พอใช้สถาปัตยกรรมแบบนี้ ViewController จะไม่ทำอะไรที่เปลี่ยนแปลงตัวเองเด็ดขาด แต่จะเปลี่ยนแปลงสถานะการแสดง (state) ของตัวเองผ่าน Store เท่านั้น

เช่น จากเดิมเราอาจจะเขียนโค้ดแบบนี้ใน view-controller:

self.lblTitle.text = @"Hello world";

เราก็จะเขียนแบบนี้แทน

AddFeelStore.changeTitle(@"Hello world");

แล้วหลังจากนั้น AddFeelStore ในที่นี้จะไปเปลี่ยนแปลงข้อมูลใน View ให้ เช่น โค้ดจริงที่ผมทำในการเปลี่ยน Image ของ View จาก Store จะเป็นแบบนี้

-(void) addImage:(UIImage *)image {
   [self.images addObject:image];
   [_viewController.imageCollectionView reloadData];
}
  1. เก็บ images ไว้ใน State tree ของตัวเอง
  2. Update view

ข้อดีของการทำแบบนี้คือ เรามั่นใจว่าทุกๆ การเปลี่ยนแปลง View นั้นเกิดที่ Store เสมอ ไม่ว่าจะเกิดจาก Event หรือแม้แต่เกิดจาก Delegate บางอย่าง (เช่น รอ Web request)

ทำให้เวลาที่แอพแสดงผลแปลกๆ จะลดปัญหาเรื่องการ “งง หาไม่เจอว่าทำไมมันแปลกยังงี้ โค้ดตรงไหนทำแบบนี้วะ” เรามั่นใจเลยว่าทุกๆ การเปลี่ยนแปลง View นั้นต้องเกิดที่ Store เสมอ ต้องใช้ความมีระเบียบในการเขียนโค้ดหน่อยนะเพื่อไม่รีบเอาไปใส่ที่อื่น

(ซึ่งข้อดีแบบนี้ผมเห็นตอนเริ่มเขียน React เลยพยายามเลียนแบบมาใช้ตอนเขียนแอพ)

แต่เนื่องจาก iOS View กับ React component มันไม่เหมือนกัน iOS view ไม่ได้เป็น Pure function ดังนั้นการทำ Store จึงไม่ได้ง่ายขนาดแค่ส่ง Property แล้วจะมั่นใจได้ว่า View จะแสดงผลถูก

ดังนั้นดีที่สุดเท่าที่นึกออกคือ คิดซะว่ามันเป็น Function แล้วไปรวมทุกอย่างใน Store logic ทีนี้หลังจากนี้ถ้าพัฒนาได้ถึงขั้นที่ว่า Store เก็บ State tree เอาไว้ แล้วทำ Unit test กับทุกเคสที่ State tree กับ View เปลี่ยน จนมั่นใจได้ว่ามันเป็น Function เราก็จะได้ React-Flux Architect บนแอพ iOS

ซึ่งในโปรเจ๊กต์นี้ยังไม่ได้ทำถึงขั้นเก็บ State tree แต่เป็นไอเดียในการพัฒนาต่อถ้ามีโอกาสได้ทำแอพที่ใหญ่กว่านี้ครับ

ดังนั้นสรุปสั้นๆ ว่าจะเลียนแบบ React functional view มาได้ยังไง

  1. บังคับตัวเองไม่ให้เขียนโค้ดเปลี่ยน View ใน View-Controller สร้าง Store ขึ้นมาเสมอ
  2. Store จะทำการเปลี่ยน View และเก็บ State ของ View ไว้ใน State tree
  3. ทำ Unit test ให้ครบจนมั่นใจว่า State tree ของ Store กับ View มีความสัมพันธ์เป็น Function

ในโปรเจ๊กต์ที่ผมทำเล่นๆ นี้ยังไม่ได้ Implement ข้อ 2 และ 3 แต่เป็นไอเดียที่ดี ในการลอกแบบ Functional view ของ React มาใช้กับการเขียนแอพมือถือ

อยากแชร์สถาปัตยกรรมที่คิดขึ้นมาระหว่างทำโปรเจ๊กต์เล่นๆ ให้เพื่อนๆ โปรแกรมเมอร์ด้วยกัน ติชมหรือแนะนำได้ครับ

Like what you read? Give Chris a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.