Flutter Framework เครื่องมือที่ประสิทธิภาพในการสร้าง native app แบบหลาย platform

เมื่อเราต้องการจะสร้าง UI ที่มีคุณภาพดีในมือถือ เราจำป็นต้องเลือกเครื่องมือที่ตอบโจทย์เพื่อทำให้ process นั้นง่ายขึ้น ในทางตรงกันข้าม ถ้าเราเลือกผิดจะทำให้สถานการณ์แย่ลงและอาจกลายเป็นสาเหตุของความล้มเหลวได้เลย ผู้เขียนพนันได้เลยว่าไม่มีใครอยากเริ่มทำใหม่ตั้งแต่แรกอยู่แล้ว นี่จึงเป็นเหตุผลที่คุณควรใส่ใจกับ UI framework ที่มีความ advanced ในการพัฒนาแอพอย่าง Flutter

เรามาลองดูกันว่า ทำไม framework ตัวนี้ถึงมีความคุ้มค่าในการใช้พัฒนาแอพ และ ประสิทธิภาพของมันเป็นอย่างไร
Flutter คืออะไร?
เมื่อเปลายเดือนกุมภาพันธ์ ปี 2018  google เปิดตัว flutter framework แบบ beta เวอร์ชันแรก นี่เป็น เครื่องมือ การสร้าง native interface สำหรับ android และ iOS และในเดือนสิงหาคม ปี 2019 ก็ได้ออกเวอร์ชัน 1.7.8 เป็นเวอร์ชันล่าสุด ณ ตอนนี้

อะไรทำให้ Flutter เป็น Framework ที่วิเศษมากขนาดนั้น  เพราะว่า framework สามารถพัฒนา native app แบบ cross-platform ได้ การรวบรวมข้อมูล Native ให้ตัวประมวลผล ARM นั้น ช่วยให้การพัฒนาง่ายขึ้น มีการ render ที่ง่ายขึ้น พวกชุดเครื่องมือ, widgets, และ features ก็มีส่วนช่วยให้ process นั้นง่ายขึ้นเช่นกัน แล้วมีอะไรเพิ่มเติมอีกล่ะ นอกจากการเป็น Framework แบบ open source ก็อย่างที่บอกไปที่ว่ามันเป็นแบบ open source  Developer ที่ไหนก็สามารถ แก้ไขงานใน Frame work ที่ GitHub ได้แบบ real-time  ดังนั้น Developer จึงมีส่วนช่วยพัฒนาให้ Flutter นั้นดีขึ้น

ในด้านของ features นั้น หนึ่งใน feature ที่น่าสนใจทีสุดเลยก็คือ ปุ่ม Hot reload ถ้าคุณกดปุ่มนี้ การเปลี่ยนแปลงทั้งหมดที่เขียนภายใน code จะปรากฎขึ้นที่หน้าจอทันที เราจึงสามารถปรับแต่ง ตัว UI ได้อย่างง่ายดาย แต่มันก็มี surprise อย่างหนึ่งที่ไม่เหมือน framework อื่นๆของ google คือ framework ตัวนี้ใช้ Dart ในการพัฒนาแอพ
Flutter เวอร์ชันล่าสุดมีอะไรดีบ้าง?

DevTools เป็นเครื่องมือที่ใช้แก้ bug ได้ดีใน Flutter และ Dart  ผู้พัฒนาสามารถ วิเคราะห์ layout และ state ในแอพได้ สามารถแก้ปัญหาเกี่ยวกับความจำ ใน Flutter appได้ หรือว่าปัญหา command line ใน Dart  และแก้ไข bug อื่นๆอีกมากมาย
Widget ใหม่ google ให้ความสนใจกับ widget อย่างมาก เพื่อให้ผู้ใช้ ใช้งานได้อย่างมีประสิทธิภาพ Flutter เวอร์ชันล่าสุด ได้สร้าง Slider ตัวใหม่มา เพื่อสร้าง range ที่ดูดี ตัวอย่างเช่นเมื่อผู้ใช้ต้องการจะเปลี่ยนช่วงราคาในแอพ mCommerce พวกเขาจึงต้องใช้ widget ที่ดึงความสนใจได้
plugin ที่สามารถซื้อในแอพได้เลย ตอนนี้ มีการเพิ่ม plugin ใหม่ใน Flutter ที่สามารถใช้ซื้อสิ่งต่างๆได้ใน แอพ
รองรับ AndroidX google ได้มีการ support Android มากขึ้น โดยการนำ Android x เข้ามาใช้ ทำให้การสร้างแอพมีประสิทธิภาพมากขึ้น
รองรับ Android bundles ในเดือนสิงหาคม ปี 2019 แอพทั้งหมดที่สร้างสำหรับ Android pie ต้องรองรับในทั้งเวอร์ชัน 32-bit and 64-bit ใน Google play store
Fonts ใหม่ UI ในเวอร์ชั่นล่าสุดนั้น มีการออกแบบตัวพิมพ์ใหม่ทีเพิ่มตัวเลขและตัวอักษร ใหม่ๆหลาย style ขึ้นมา การ Interaction กับ fonts ใน iOS ก็ได้รับการพัฒนาเช่นกัน

ทำไมถึงต้องใช้ Flutter ถ้าคุณต้องการจะสร้างแอพแบบ cross-platform
Flutter สามารถจัดการไฟล์ที่ไม่เป็นระเบียบได้ในโหมด Development การรวบรวม Jit ช่วยให้การพัฒนาและการแก้ bug นั้นเร็วขึ้น นอกจากนั้น Framework ตัวนี้ยังรองรับ plugins หลายๆอย่างๆ เช่น Firebase หรือ SQLite   Pub.

ขั้นตอนวิธีสร้าง App โดยใช้ Flutter ( Flutter Tutorial Part 1 )

ใน tutorial นี้ เราจะมาสอนการสร้างแอพพลิเคชั่นโดยใช้ Flutter แบบ Step by step แอพที่สร้างขึ้นจะเป็นแบบ open source อยู่ที่ Aviacommerce platform, tutorial นี้โฟกัสไปที่ แอพพลิเคชั่นเพื่อที่จะนำเสนอ concepts ที่สำคัญของ flutter framework

Tutorial นี้เป็นแค่ส่วนแรกของ Tutorial ทั้งหมดเท่านั้น :-

วิธีการสร้าง App โดยใช้ Flutter
วิธีการทำ layout ใน App โดยใช้ Flutter (ยังไม่มา)
วิธีจัดการ data ใน flutter (ยังไม่มา)
วิธีการ listing ใน Flutter (ยังไม่มา)

Blog นี้จะอธิบายเกี่ยวกับวิธีการสร้าง layouts แนะนำแบบ step by step หากคุณต้องการดู code ทั้งหมดเลย โปรเจ็คทั้งหมดมี code อยู่ใน Github ถ้าอยากลองดูคุณก็สามารถไปดูก่อนได้เลย

ทีมของเรา (AviaCommerce) พยายามหาเกี่ยวกับ framework ที่สามารถพัฒนา software ในแบบใหม่ๆได้อยู่ตลอดเวลา เราได้ติดตามกิจกรรมหรือข่าวสารที่เกี่ยวกับ flutter ตั้งแต่ตัว Beta รุ่นแรกออก
ในที่สุด google ก็เปิดตัว Flutter 1.0, เป็นเครื่องมือ UI ตัวแรกที่มีความเสถียร เป็น Experiences ใหม่ๆในการใช้สร้างพวก native app สำหรับ iphone หรือว่า android จาก codebase เดียว
Flutter มีขั้นตอนการติดตั้งหลายขั้นตอนเพื่อให้เข้ากับสภาพคอมของเรา ให้ทำตาม คู่มือการติดตั้ง นี้ไปก่อน จากนั้นให้ดูต่อ

เมื่อติดตั้งเสร็จแล้ว ให้ลองสร้าง test project ผู้เขียนแนะนำให้ใช้ Android studio เพราะมันมี IDE ที่ครบเครื่องสำหรับ Flutter  Android studio จะต้องมี editor plugin ในการเขียน Dart ก่อน

เปิด Android studio ขึ้นมา คุณจะเห็น option ในการสร้างโปรเจค flutter ใหม่

ให้เลือก Flutter Application เมื่อหน้าต่าง configurations ขึ้นมา

ตั้งชื่อให้โปรเจคแรกของคุณ หรือจะตั้งชื่อว่า timer ตามผู้เขียนก็ได้

ขั้นตอนนี้ หน้าต่างจะขึ้นมาให้คุณใส่ชื่อ package

หลังจากนั้น Flutter SDK จะสร้าง Directory ทั้งหมดที่ต้องใช้ในแอพพลิเคชั่น สิ่งที่คุณทำทั้งหมดจะอยู่ใน Folder ที่ชื่อว่า lib และเราจะเริ่มเขียนในไฟล์ชื่อว่า main.

React native หรือ Flutter เราควรเลือกใช้ตัวไหนในการสร้าง Mobile app ดี?

ปัจจุบันการสร้างแอพพิเคชั่น แบบ Cross-platform กำลังเป็นที่นิยม ด้วย Framework ที่สามารถสร้าง Native app โดยไม่ต้องใช้ภาษา swift สำหรับ iOS หรือว่า Java สำหรับ Android เลย

React native และ Flutter เป็น Frameworkในการใช้สร้าง Appแบบ Cross-platform ที่ได้รับความนิยมอย่างมาก ปัจจุบันนี้ก็ได้ใช้สร้างแอพพลิเคชันเป็นหลายพันแอพเลยทีเดียว แต่ถ้าเราจำเป็นต้องเลือกระหว่าง Reactive หรือ Flutter เราควรจะเลือกใช้ตัวไหนดี?

ไม่มีคำตอบที่ถูกต้องเสมอไปสำหรับคำถามนี้ คำตอบนี้ขึ้นอยู่กับความต้องการทางธุรกิจและ การใช้งานของคุณ ทั้ง Reactive และ Flutter ถือว่าเป็นคู่แข่งที่ทรงพลังพร้อมทั้งมีข้อดีและข้อเสีย

ในฐานะที่ผู้เขียนนั้นเป็นผู้พัฒนา React native ผู้เขียนได้พยายามเขียนบทความนี้ขึ้นมาโดยไม่มีความลำเอียง

React Native และ Flutter มาพร้อมกับความคล้ายคลึงกันหลายๆ อย่างเช่น   การสร้างแอพแบบ Cross-platform โดยใช้ Code base เดียว มี Hot reloading   มี UI ที่ยอดเยี่ยมและ tooling ที่มีประสิทธิภาพ แต่อย่างไรก็ตาม Framework ทั้งสอง นี้ก็ยังมีข้อแตกต่างกันอยู่

เรามาลองเปรียบเทียบ React native และ Flutter ด้วยปัจจัยหลายๆอย่างกัน
Language (ภาษา)
React native

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

Flutter ถูกเขียนด้วยภาษาที่เรียกว่า Dart ถึงแม้ว่า Dart จะเป็น Choice ที่ง่ายต่อการเลือกใช้ และเป็นภาษาในการเขียนโปรแกรมที่ดี แต่มันก็ไม่ได้รับความนิยมเหมือนกับ JavaScript   Developer ที่เลือกใช้ Flutter จำเป็นต้องไปเรียนรู้ Dartก่อน โดยทั่วไปแล้ว Developers จาก C++ หรือ Java มักจะถนัด Dart มากกว่า Developer จาก JavaScript  ในความคิดของผู้เขียน, ด้วยประสบการณ์และช่วงเวลาของการเรียนรู้ Dart และเนื่องจากมันเป็นภาษาที่ค่อนข้างใหม่ ดังนั้น ผู้ชนะก็คือ React native

Winner: React native

 
Corporate Backing (บริษัทที่สนับสนุน)
React native

React native ถูกพัฒนาโดย Facebook และได้เปิดเผย Source code ในปี 2015   Facebook มีทีมวิศวกรคุณภาพที่ทำงานเกี่ยวกับ react native และได้พัฒนาให้ดีขึ้นอย่างต่อเนื่อง  เนื่องจากว่า Facebook ได้ลงทุนไปกับ react nativeอย่างมาก product ของ Facebook ส่วนมากจึงถูกเขียนขึ้นมาด้วย React native จึงทำให้React nativeได้รับความไว้วางใจและความนิยมอย่างมากในช่วงหลายปีที่ผ่านมา
Flutter

เมื่อเทียบกับReact native แล้ว flutter ถือว่าเป็น Framework ที่ยังใหม่อยู่ Flutter ถูกพัฒนาโดยบริษัทยักษ์ใหญ่อีกบริษัทคือ google นั่นเอง Flutter เป็น SDK open source ของ google สำหรับการสร้างแอพให้ Android หรือ IOS โดยใช้แค่ Codebase เดียว  google ได้ให้การสนับสนุน Flutter อย่างมาก เหมือนกับที่ Facebook ให้การสนับสนุน React native เรียกได้ว่า google ลงทุนทำให้ Flutter เป็นหนึ่งใน Solutions ที่ดีที่สุดในการสร้างแอพแบบ Cross-platform กันเลยทีเดียว

ในหัวข้อนี้ถือว่า React native และ Flutter เสมอกัน
What is Trending? (ตัวไหนกำลังเป็นที่นิยม)

ถ้าลองเราไปดูข้อมูทางสถิติที่ StackOverflow Survey of 2019 เราจะได้ข้อมูลว่า framework ตัวไหน ที่ Developers ส่วนใหญ่ชอบใช้กัน แบบสอบถามนี้ถามเกี่ยวกับว framework ที่ developers นั้นชอบมากที่สุด
Flutter อยู่ในอันดับสูงกว่าอยู่ที่ 75.4% และ React Native ก็ได้ทำสถิตไว้อยู่ที่  62.5% ในบรรดา framework ที่ได้รับความนิยมสูงสุด
สิ่งที่ควรคำนึงไว้เลยก็คือ React native นั้นมีมาหลายปีแล้วในขณะที่ Flutter นั้นพึ่งเปิดตัวมาได้ 1 ปี แล้วก็เริ่มได้รับความนิยมมากขึ้นเรื่อยๆ ดังนั้นเราจึงต้องทำการเปรียบเทียบแบบเดียวกันในปีหน้าเพื่อดูผลว่าเป็นอย่างไร

ดูจาก Trend ในปัจจุบัน จะได้ว่าผู้ชนะคือ Flutter นั่นเอง

Winner: Flutter

 
Performance (ประสิทธิภาพการทำงาน)
ตอนนี้มีความคิดทั่วไปที่ว่า Flutter ทำงานได้ดีกว่า React native อาจจะเป็นเพราะมันไม่มี JavaScript เป็นตัวเชื่อมในการติดต่อกับพวก Native component เหมือนกับ React native  Dart นั้นถูก compiled ไปที่ machine code เลย ทำให้ performance ของ Flutter นั้นดีกว่า React native ที่ต้องมี JavaScript เป็นตัวสะพานที่ใช้เชื่อม

Winner: Flutter

 
Adoption (การนำมาใช้)
React native
React native ถูกใช้นำอย่างกว้างขวาง ความนิยมบางส่วนของมันอาจจะมาจาก React พูดได้เลยว่า Developer ของ React แค่ก้าวเพียงก้าวเดียวก็สามารถมา develop แอพที่เขียนด้วย React native ได้อย่างง่ายดาย ทุกวันนี้ product อย่าง Facebook, Instagram, Uber Eats, Tesla, Bloomberg, และอีกมากมายใช้ React native ในการสร้างAppขึ้นมา
Flutter
เนื่องจาก google เป็นผู้พัฒนา Flutter ขึ้นมา ในปีนี้ตัว Flutter เองจึงได้รับความสนใจค่อนข้างมากเช่นกัน

Alibaba ซึ่งเป็นยักษ์ใหญ่ในการช้อปปิ้งออนไลน์ได้นำ Flutter มาใช้กับหนึ่งในแอพมือถือของพวกเขา Google ad และ Hamilton music ก็ได้รับการพัฒนาโดยใช้ Flutter แต่นอกเหนือจากนี้แล้ว ยังไม่ค่อยมีแอพในApp storeที่ถูกพัฒนาด้วย Flutter

นี่ก็เป็นอีกหัวข้อหนึ่งที่เราจำเป็นต้องดูในปีหน้าว่ามี Products จำนวนเท่าไรที่นำมาใช้ร่วมกับ Flutter

Winner: React native

 
Job Prospects (ความต้องการของตำแหน่งงาน)
ด้วยความที่ React native นั้นมีมาก่อนหน้านั้นนานแล้ว มีการใช้react และ JavaScript (เป็น 2 ตัวที่ได้ระความนิยมสูง) ในการเขียน ทำให้มีโอกาสความในการรับเข้าทำงานที่สูงกว่า

ดูจากข้อมูลทางสถิติที่ StackOverflow Survey of 2019 ระบุไว้ว่าเมื่อเปรียบเทียบกันแล้ว React native เป็นที่ต้องการมากกว่า สิ่งนี้สามารถบอกเราได้เลยว่า มีงานที่ใช้ React native มากว่า Flutter

เรายังไม่สามารถรีบด่วนสรุปออกมาได้ เนื่องจากตำแหน่งงานที่มีอยู่ทุกวันนี้ Flutter ยังคงใหม่อยู่ ไม่แน่ว่าในอีกหลายๆปีข้างหน้า อาจมีความต้องการ developers ของ Flutter เพิ่มมากขึ้น แต่ปัจจุบัน มีงานสำหรับ React native อยู่มากถ้าเทียบกับ Flutter นี่ก็เป็นเพราะว่า Developers ของ React native ก็คือ Developers ของ React ด้วยนั่นเอง
React Native นั้นมีอันดับที่สูงกว่าอยู่ที่ 13.1% และ Flutter อยู่ที่ 6.7% ในบรรดา Framework ที่มีความต้องการมากที่สุด
Winner: React native

 
Conclusion (สรุป)
เป็นช่วงเวลาที่น่าสนใจใน mobile development เรากำลังไปไกลจากการที่เป็นแค่การพัฒนาใน iOS หรือว่า Android และรวบรวมเทคโนโลยีใหม่ๆที่สร้าง mobile apps แบบ cross-platform อย่างไรก็ตาม ถึงแม้ว่าทุกวันนี้ React native จะมีฐานที่มั่นคง แต่ Flutter ซึ่งเป็นผู้แข่งขันที่เกิดขึ้นมาใหม่และผู้เขียนก็มั่นใจว่าในอนาคตหน้าจะมีคนมากมายเข้ามาใช้งาน Flutter อย่างแน่นอน

ในการเลือกเทคโนโลยีใหม่ๆมาศึกษาเรียนรู้ มันขึ้นอยู่กับการใช้งานของคุณ ถ้าคุณถนัดในการเขียน C++ หรือว่า Javaแล้ว คุณก็อาจจะชอบ Flutter ก็ได้ แต่ถ้าคุณชอบ JavaScript มากกว่า React native จะเป็น option ที่ดีกว่าสำหรับคุณ

บทความแปลจากเว็บไซต์: medium