Flutter: แชร์แนวทางจัดการโค้ดในโปรเจค ทั้งแบบ Redux และ Bloc

Flutter ใช้แนวคิดที่เรียบง่ายในการสร้างวิธีการพัฒนาแอพพลิเคชั่นของตัวเอง ทำให้นักพัฒนาที่นำมาใช้เข้าใจได้เร็ว (คล้ายๆ กับ React)

แต่เนื่องจากความเรียบง่ายนี้เอง กลายเป็นคำถามปลายเปิดสำหรับทุกคนว่า

ตกลง เราจะเขียนโปรเจคเก็บไฟล์แต่ละงานไว้ในไหนดี?

เลยมีแนวทางยกตัวอย่างมาให้พิจารณากัน อาจดี หรือไม่ดี ก็ติชมได้นะครับ เพราะเทคนิคพวกนี้ แลกเปลี่ยนกันเยอะๆ เป็นผลดีกับทุกคนครับ

แบบใช้ Redux

สำหรับพวกเราที่เรียนรู้การใช้งาน React, Redux, หรือ React Native มาแล้ว อาจจะติดใจการใช้ Redux ในการทำแอพพลิเคชั่น

ในที่นี้พลก็มีตัวอย่างของโปรเจคที่ใช้ในการสอน ในคอร์สอบรม Flutter มาเป็นตัวอย่างกันครับ

จะเห็นว่าแยกออกเป็น directory ย่อยๆ ตามลำดับ ดังนี้

• components: เป็นส่วนของ Widget ที่ใช้ซ้ำในส่วนต่างๆ ของแอพพลิเคชั่น
• models: เก็บไฟล์ตัวแทนของข้อมูลต่างๆ เช่น User, Product, Cart
• pages: สำหรับเก็บหน้า page ต่างๆ ในแอพ เช่น หน้าลงทะเบียน, หน้ารายละเอียดสินค้า, หน้า home, หน้า Setting
• redux: ตามชื่อเลย พวก action, reducer หรือ store ของ redux จะเก็บไว้ในนี้ครับ
• services: เก็บพวก Data Provider พวกที่ต่อกับข้อมูลภายนอก เช่น โค้ดส่วนแสกน QR Code, ติดต่อ Web API, หรือฐานข้อมูล SQLite
• themes: แยกโค้ด theme ของแอพออกมา จะได้ไม่ต้องไปปนในไฟล์ main.dart

แบบของ Corner: Bloc

พอดีคุณโมแชร์โพสของคุณ​ Conner Aldrich นี้มาในเฟสพอดี เลยขอเอามาเป็นตัวอย่างอีกเคสของคนใช้ Bloc แล้วกันครับ

โดยคุณ​ Corner อธิบายไว้ดังนี้

• blocs และ blocprovs: เก็บไฟล์ต่างๆ ที่เกี่ยวกับการใช้ Bloc และ Bloc Provider
• components: component ที่แยกออกมาจาก Screen ต่างหาก
• models: เก็บ Custom class และ object ที่ใช้ในแอพพลิเคชั่น
• screens: เก็บโฟลเดอร์ย่อยๆ ของหน้าแอพต่างๆ เอาไว้
• services: เก็บพวก Web API และ Native Code
• theme: เก็บไฟล์ theme แยกออกมาต่างหาก

เอ้า ของพวกเราแบ่งกันยังไงบ้าง แชร์กันใน Facebook page ได้นะครับ

อ้างอิง – Medium