เมื่อเขียน Native Mobile ft. Flutter

Flutter เป็นการพัฒนาแอปแบบ Cross Platform ที่เขียนโค้ดแค่ครั้งเดียว ก็สามารถนำไปใช้กับทั้ง iOS และ Android ได้ ทั้งนี้ผมเคยเจอคนหลายคนที่เขียน Native บอกว่าไม่เห็นมีความจำเป็นที่จะต้องใช้ Flutter หรือต้องมาเรียนรู้เลย เพราะพอไม่ใช่ Native เราไม่รู้ว่าจะไปได้ไกลแค่ไหนในอนาคต จึงเป็นเหตุผลอันดับ 1 ที่ทำให้ Flutter ไม่น่าสนใจ ผมเองก็เคยเป็น 1 คนที่มองว่า Cross Platform นั้นไม่มีจุดยืนหรอก เพราะผมเขียน iOS ได้อยู่แล้ว ทำไมต้องไปใช้เวลากับ Flutter ด้วย แต่หลังจากที่ได้ถูกมอบหมายงานที่ต้องใช้ Flutter มาและลองเขียนเอง กลับเปลี่ยนมุมมองของผม กลายมาเป็นแฟนคลับ Flutter เพราะเราสามารถควบคุมคุณภาพของ iOS และ Android ให้ออกมาได้เหมือนกัน Business Logic ที่มาจากที่เดียวกัน ไม่มีความเพี้ยนของการ Implement ที่ไม่ถูกของแต่ละแพลตฟอร์ม ช่วยให้ทีมเล็กๆ สามารถสร้าง Product ขนาดใหญ่ได้ Flutter นั้นมีความน่าสนใจทั้งเรื่อง Performance ของแอปและภาษาที่ใช้ จากที่ผมเคยใช้ พบว่าได้ Performance ถึง 85–90 % ของ Native เลย อย่างไรก็ตามผมยังชอบ iOS และ Swift อยู่นะครับ ทั้งการใช้ Enum และ Protocol Extension แม้ว่าจะมาเขียน Flutter ก็ตาม

เหตุผลที่เล่าทั้งหมดนี้คืออยากให้มาลอง Flutter กัน เป็นการเปิดความรู้ใหม่ๆ ของภาษาใหม่ๆ และสามารถนำแนวคิดใหม่ๆ จาก Flutter ไปใช้กับ Native ได้ด้วย

แต่พูดมาขนาดนี้แล้ว ก็ยังมีคนทำ Native Mobile บอกกับผมอีกว่างานเค้าเขียนแอปมา ดูแลมาเป็นปีๆ จะให้มาลอง Flutter ไม่ได้หรอก จะมาเขียนใหม่ก็ใช่เรื่อง พร้อมกับทิ้งท้ายว่า…

ไว้โปรเจคหน้านะ เดี๋ยวลอง

แต่เดี๋ยวก่อน ไม่ต้องโปรเจคหน้าหรอก โปรเจคนี้เลยครับ ที่เป็น Native เนี่ยแหละ เพราะ Flutter มีฟีเจอร์สุดเจ๋งอันนึงที่เรียกว่า Add to App มี Tutorial ให้ที่ด้านล่างนี้

Add Flutter to existing app

พูดง่ายๆ คือสามารถเขียน Flutter แล้วใส่เป็น Module เข้าไปใน Native App ได้เลย ไม่ต้องรอครั้งหน้า คุณสามารถได้เขียนทั้ง Flutter และ Native ไปพร้อมๆ กัน

โดยปกติแล้ววิธีเขียน Flutter คู่กับ Native มีอยู่ด้วยกัน 2 แบบ

1. ทุกคนต้องลง Flutter ในเครื่องตัวเอง เพื่อทำการ Compile แอป ข้อดีของการทำแบบนี้คือคุณจะได้ฟีเจอร์ Hot Reload เข้ามาอยู่ในโปรเจคด้วย สามารถแก้ไขแอปได้ทันที ไม่ต้องรอ Compile ใหม่ ฟังแล้วดูดีมาก แต่วิธีนี้เหมาะกับทีมเล็กๆ มากกว่าเพราะทุกคนต้องเขียน Flutter เป็น
2. ทุกคนไม่ต้องลง Flutter เพียงแค่ Import เข้ามาผ่าน Gradle หรือ CocoaPods เหมือนกับการที่เราไปเอา Libs ด้านนอกมาใช้เลยครับ สำหรับวิธีนี้ เฉพาะคนที่จะทำงานกับ Flutter เท่านั้นจะลง Flutter ทำให้เราสามารถแบ่งทีมได้เป็นทีม Native กับ Flutter งานหลักๆ ของทีม Flutter จะโฟกัสที่การทำ Business Logic ให้กับทีม Native เหมาะกับทีมใหญ่ๆ ที่สามารถแบ่งทีมออกเป็นสัดส่วนได้

โดยที่ Native และ Flutter สามารถส่งข้อมูลกลับไปกลับมาได้ง่ายๆ ด้วย Flutter Method Channel นั่นเอง วิธีการทำง่ายนิดเดียว คล้ายกับการเรียกใช้ Class นึงที่มีฟังก์ชั่นหนึง ใช้เวลาไม่เกิน 15 นาทีก็สามารถทำได้แล้วครับ

https://flutter.dev/docs/development/platform-integration/platform-channels

วิธีเชื่อมต่อระหว่าง Flutter กับ Native ตามลิงก์ด้านล่างนี้ครับ

Writing custom platform-specific code

คุณสามารถทำตาม Demo จาก Flutter Team แบบนี้ได้ ใช้เวลาไม่เกิน 30 นาทีในการ Setup ครั้งแรกสำหรับ iOS/Android

flutter/samples

ผมขอนำตัวอย่างของ iOS มาให้ดูครับ ใส่ตามนี้ใน AppDelegate.swift ง่ายนิดเดียวประมาณ 3 บรรทัด

จากนั้นนำไปใส่ ViewController.swift ตามนี้ เปลี่ยนตาม View ที่ต้องการจะใส่

ซึ่งพอกดปุ่ม ก็จะเปิด FlutterViewController ที่ถูกเขียนด้วย Flutter ขึ้นมา หลังจากติตตั้งเสร็จเรียบร้อยแล้ว ก็สามารถเริ่ม Part ใหม่ๆ ด้วย Flutter ได้เลยครับ 😽

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech