ทำความรู้จักกับ Flutter เครื่องมือที่จะช่วยสร้าง Mobile App ทั้งบน iOS และ Android

ต้อนรับบทความแรกของ TakeMeTour Engineering โดยเราจะพยายามรวบรวมเรื่องราวต่าง ๆ ที่ได้ศึกษามา เพื่อมาแชร์กับคนอื่น ๆ ที่สนใจได้เรียนรู้ไปด้วยกันครับ

และช่วงนี้กระแส hybrid-native mobile app กำลังมาแรง โดยเริ่มจาก React Native และตามมาด้วย NativeScript เนื่องด้วยข้อดีก็คือสามารถเขียนทีเดียว แต่ทำงานได้ทั้งบน iOS และ Android โดยที่ยังให้ประสิทธิภาพใกล้เคียงกับ app ที่เขียนแบบ native

ส่วนตัวได้ลองเขียน app มาแล้วทั้งแบบ native, hybrid และ hybrid-native ขอตัดชอยส์ app แบบ hybrid ที่ใช้ WebView ไปเลย เพราะว่า performance และ look and feel นั้นห่างชั้น app แบบ native แบบรู้สึกได้ สำหรับ tool ที่เป็นแบบ hybrid ที่ใช้ WebView ก็ได้แก่ตระกูล Cordova, Phonegap, ionic ทั้งหลาย

หวยเลยมาตกอยู่ที่ hybrid-native ที่พยายามเอาข้อดีของ hybrid และ native มารวมกัน ก็คือเขียนครั้งเดียวสามารถใช้งานได้ทั้งบน iOS และ Android ในขณะที่ยังคงประสิทธิภาพใกล้เคียง native app

ซึ่ง Flutter ก็เป็นอีกหนึ่ง framework ที่อยู่ในหมวด hybrid-native แต่หลักการการทำงานจะค่อนข้างต่างกับ React Native อยู่พอสมควร

ขอเกริ่นการทำงานของ React Native ก่อนเพื่อให้สามารถเปรียบเทียบกับ Flutter ได้ คือตัว React Native เนี่ย เราประกาศโครงสร้างหน้าตาของ App เราแบบ Tree เช่น

<View>
  <Text>Hello</Text>
</View>

ตัว React Native ก็จะแปลง Element เหล่านี้เป็น Element พื้นฐานของแต่ละ Platform ตัวอย่างเช่น Component <View /> ในกรณีที่เป็น iOS ก็จะเป็น UIView ส่วน Android ก็จะเป็น android.view เป็นต้น

แต่สำหรับ Flutter แล้วนั้น โยน element ทั้งหมดทิ้งไปได้เลย เพราะว่า Flutter จะวาดหน้าจอเองทั้งหมดโดยใช้ GPU เพื่อเพิ่มประสิทธิภาพของการ render หน้าจอ

โดย Flutter จะมี Component พื้นฐานให้ (ในภาษา Flutter เรียกว่า Widget) เพื่อที่เราจะไม่ต้องทำเอง และเพื่อจะได้ใกล้เคียงกับ design guideline ให้มากที่สุด สำหรับ iOS นั้น Flutter เองก็มี Widget พื้นฐานเหมือนกัน ชื่อว่า Cupertino โดยทีมงาน Flutter จะคอย update เป็นระยะ เพื่อให้ใกล้เคียงกับ Native element มากที่สุด

ภาษาที่ใช้ใน Flutter นั้นก็คือภาษา Dart นั่นเอง ซึ่ง Syntax มันจะหน้าตาประมาณนี้

แน่นอนว่า approach แบบนี้มีทั้งข้อดีและข้อเสียเมื่อเทียบกับ React Native

ข้อดี

• มั่นใจได้อย่างแน่นอนว่าหน้าตาของ app ของเราจะเหมือนกัน ไม่ว่าจะเป็น device ไหน หรือ OS version ไหนก็ตาม แต่ก็ไม่ได้บังคับให้เหมือนกัน 100% ซะทีเดียว เราก็สามารถทำ design แยกแต่ละ Platform โดยดูจากตัวแปร Platform ได้เช่นเดียวกัน
• ประสิทธิภาพดีกว่าเนื่องจากตัวภาษา Dart นั้น compile เป็น machine code เลย ไม่ต้องรันบน JS Engine แบบ React Native

ข้อเสีย

• ใช้ภาษา Dart ซึ่งคนส่วนมากไม่คุ้นเคย และ syntax ที่ใช้ ส่วนตัวคิดว่าค่อนข้าง verbose เมื่อเทียบกับ JSX
• เนื่องจากไม่ได้ใช้ Component พื้นฐานของ OS ทำให้เวลามีการเปลี่ยนแปลงในเชิง UI ตัว app จะไม่ได้รับการ update ในทันที
• ยังมี community ที่ค่อนข้างเล็ก

นับว่าเป็นอีกหนึ่ง Approach ที่น่าสนใจในการทำ hybrid-native application ซึ่งในระยะยาวต้องคอยดูว่าจะสามารถต่อกรกับ React Native ได้หรือไม่