พลังไฮบริด: ข้อดีและประโยชน์ของการกระพือปีก

Flutter เป็นแพลตฟอร์มการพัฒนาแอปพลิเคชันมือถือไฮบริดจาก Google ที่เข้าถึง 1.0 ในปลายปี 2018 แม้ว่าจะเป็นผู้เข้ามาใหม่ในรายการเฟรมเวิร์กการพัฒนาแบบไฮบริด แต่แนวคิดที่ยอดเยี่ยมเบื้องหลังทำให้นักพัฒนาซอฟต์แวร์ได้รับความสนใจอย่างรวดเร็ว

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

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

• แอป Google Ads
• แอพ GrabMerchant ของ GrabFood
• แอพ Xianyu ของ Alibaba Group ซึ่งมีการดาวน์โหลดมากกว่า 50 ล้านครั้ง
• นู๋แบงค์
• แอพ eBay Motors

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

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

ข้อดีของ Flutter (จากมุมมองการพัฒนา)

ในฐานะนักพัฒนา นี่คือมุมมองที่ฉันคุ้นเคยมากที่สุดและสามารถแชร์ข้อมูลได้มากที่สุด

เส้นโค้งการเรียนรู้อย่างรวดเร็ว

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

การรวมตัวแก้ไขยอดนิยม

Flutter ยังมีการผสานรวมตัวแก้ไขที่ยอดเยี่ยมอีกด้วย ฉันใช้ Android Studio เป็นการส่วนตัว แต่มีคำแนะนำในการตั้งค่า IntelliJ, VSCode หรือ Emacs

กระบวนการพัฒนาที่สะอาด

เมื่อเทียบกับประสบการณ์ก่อนหน้าของฉันกับเฟรมเวิร์กแอปแบบไฮบริด กระบวนการพัฒนายังให้ความรู้สึก สะอาด กว่า ตัวอย่างเช่น เมื่อฉันใช้ WebViews เพื่อแสดงรายการที่มีองค์ประกอบหลายอย่าง (ประมาณ 100 หรือมากกว่านั้น) ฉันต้องจัดการกับการใช้งาน CPU ที่สูง โดยเฉพาะอย่างยิ่งเมื่อผู้ใช้เลื่อนดูรายการ ฉันแก้ไขสิ่งเหล่านั้นโดยใช้องค์ประกอบเฟรมเวิร์ก Ionic ที่สร้างขึ้นเพื่อสิ่งนี้โดยเฉพาะ ใน Flutter มีวิธีหนึ่งที่ยอมรับได้ในการแสดงรายการ ListView ซึ่งมีประสิทธิภาพที่น่าทึ่งตั้งแต่แกะกล่อง

รีโหลดสด

อีกสิ่งหนึ่งที่ทำให้ฉันประหลาดใจคือฟังก์ชันรีโหลดสด ในฐานะนักพัฒนาฟูลสแตก ฉันเคยชินกับเฟรมเวิร์กอย่าง BrowserWatch ที่ให้การรีโหลดแบบสดในเบราว์เซอร์

การพัฒนาแบบเนทีฟไม่มีสิ่งนั้น (แต่ฉันคิดว่า SwiftUI จาก Apple กำลังคืบหน้าในการพัฒนา iOS) โดยทั่วไปแล้วนักพัฒนา Android และ iOS จะต้องเขียนโค้ดแล้วรอให้คอมไพล์และโหลดบนอุปกรณ์หรือโปรแกรมจำลองก่อนที่จะเห็นการเปลี่ยนแปลง

Flutter ให้กลไกการรีโหลดแบบสด (a la React Native) โดยที่โค้ดของแอปจะถูกรีโหลดบนอุปกรณ์ทันทีที่นักพัฒนากด "บันทึก" สิ่งนี้ให้ข้อเสนอแนะในทันที ทำให้การพัฒนาเร็วขึ้นมาก

ผลงาน

ประสิทธิภาพของแอปพลิเคชันเป็นอีกหนึ่งตัวชี้วัดที่ Flutter ค่อยๆ ปรากฏขึ้นในฐานะผู้ชนะ

เนื่องจากเฟรมเวิร์ก Flutter อยู่ระหว่างการพัฒนา จึงมีสถานที่หลายแห่งที่สามารถเพิ่มประสิทธิภาพได้ ซึ่งเห็นได้ชัดใน Flutter 1.17 ซึ่งเพิ่มประสิทธิภาพการเรนเดอร์ได้ถึง 50% บนอุปกรณ์ iOS รุ่นใหม่กว่า และลดการใช้หน่วยความจำได้ถึง 70% สำหรับเวิร์กโหลดบางประเภท

ความสอดคล้องข้ามแพลตฟอร์ม

UI ที่สอดคล้องกันอย่างแท้จริงในแพลตฟอร์มมือถือทั้งสองเป็นคุณสมบัติที่โดดเด่นอีกอย่างของ Flutter เนื่องจาก Flutter ใช้เอ็นจิ้นการเรนเดอร์ของตัวเอง—มีมากกว่านั้นในภายหลัง— UI เหมือน กันทุกประการบน iOS และ Android นักพัฒนาไม่จำเป็นต้องต่อสู้กับปัญหาการออกแบบเฉพาะแพลตฟอร์มอีกต่อไป เพื่อให้ได้ทุกอย่างที่ดูเหมือนการออกแบบ: การรับประกันนั้นเป็นส่วนหนึ่งของเฟรมเวิร์ก

ภาษา เครื่องมือ และส่วนขยาย

ส่วนที่เล็กกว่าแต่ยังคงมีความสำคัญอีกสามประการที่ฉันรู้สึกว่าควรกล่าวถึงในที่นี้คือ:

• Dart ซึ่งเป็นภาษาที่โปรแกรม Flutter ถูกตั้งโปรแกรมไว้ นั้นง่ายต่อการเริ่มต้นใช้งาน แต่ยังเป็นภาษาที่ค่อนข้างทรงพลัง ซึ่งเดิมที Google ตั้งใจไว้เพื่อแทนที่ JavaScript หากนักพัฒนามีประสบการณ์กับ JavaScript หรือภาษา C-like อื่นๆ พวกเขาจะไม่มีปัญหาในการรับ Dart ภายในหนึ่งหรือสองวัน
• มีตัวจัดการปลั๊กอินที่มีประสิทธิภาพ (pub) รวมอยู่ในกลุ่มเครื่องมือเริ่มต้นและไลบรารีปลั๊กอินขนาดใหญ่ที่มีให้บริการผ่านที่เก็บปลั๊กอิน pub.dev
• การสร้างปลั๊กอินเพื่อใช้ประโยชน์จากความสามารถของแพลตฟอร์มดั้งเดิมนั้นค่อนข้างง่าย ดังนั้นหากนักพัฒนาจำเป็นต้องเข้าถึงคุณลักษณะของแพลตฟอร์มที่ไม่มีปลั๊กอินอยู่แล้ว การเขียนโค้ดก็ไม่ยากเกินไป

ข้อดีของ Flutter (จากมุมมองทางธุรกิจ)

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

Flutter อนุญาตให้นักพัฒนาสร้างส่วน ต่อประสานผู้ใช้ที่สวยงาม อย่างแท้จริง ดูความท้าทายล่าสุดจาก Google และ Lenovo เพื่อสร้าง UI หน้าปัดนาฬิกาที่สวยงามสำหรับ Lenovo Smart Clock ผู้ชนะคือ Particle Clock โดย Mickel Andersson ไม่เพียงแต่มีความสง่างามเท่านั้น แต่ยังแสดงให้เห็น ว่าแอนิเมชั่นใน Flutter เป็นอย่างไร

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

ข้อ จำกัด ที่ควรพิจารณาก่อนใช้ Flutter

พูดตามตรง Flutter นั้นใหม่กว่า ไม่ ได้ ผ่านการทดสอบการต่อสู้เหมือนเฟรมเวิร์กแอปพลิเคชันมือถือไฮบริดอื่น ๆ เช่น React Native อย่างไรก็ตาม การเข้าถึงของผู้ใช้ปลายทางของ React Native นั้นครอบคลุมแอพมือถือของ Facebook, Instagram, Skype และ Discord

คำตอบเริ่มต้นของ "ฉันควรใช้ Flutter หรือไม่" คือ สำหรับตอนนี้ ระมัดระวัง ใช่ เนื่องจากผู้จัดการโครงการยังคงต้องพิจารณาว่าจำเป็นต้องมีคุณลักษณะขั้นสูงใด หากมี และ ตรวจสอบให้แน่ใจว่าคุณลักษณะเหล่านั้นมีอยู่ใน Flutter ก่อนดำเนินการใช้งาน โดยเฉพาะอย่างยิ่ง คุณควรถามว่าไลบรารีและปลั๊กอินใดที่ทีมอาจต้องใช้เพื่อสร้างแอปพลิเคชันเฉพาะ ในฐานะที่เป็นรายการใหม่ในเฟรมเวิร์กแอพมือถือ Flutter ไม่มีขอบเขตของไลบรารีและปลั๊กอินที่ React Native มี

ตัวอย่างเช่น การรองรับกล้องใน Flutter ยังไม่เสร็จสมบูรณ์ โดยที่การซูมและการควบคุมแฟลชยังไม่ได้เป็นส่วนหนึ่งของปลั๊กอินกล้องอย่างเป็นทางการ สำหรับฉัน นั่นไม่ใช่ตัวทำลายข้อตกลง เนื่องจากฉันสามารถค้นหาปลั๊กอินของบริษัทอื่นได้เมื่อฉันต้องการรวมฟังก์ชันรูปภาพ/วิดีโอในแอปที่ฉันกำลังสร้าง

ปลั๊กอินหลักอีกตัวที่คุณอาจพลาดคือ Google Maps ไม่มีปลั๊กอิน Dart-native Google Maps และในขณะที่มีปลั๊กอินที่อนุญาตให้รวม Google Maps เข้ากับโค้ด Flutter ของคุณ มันใช้คุณสมบัติของ Flutter (มุมมองแพลตฟอร์ม) ที่ยังคงอยู่ในสถานะดูตัวอย่างของนักพัฒนา

อีกสิ่งหนึ่งที่จะไม่ส่งผลกระทบต่อหลายโครงการ แต่คุณควรตระหนักไว้คือ ขณะนี้ Flutter ยังไม่รองรับความสามารถ 3D ใดๆ ทีมงานกำลังโฟกัสไปที่ 2D เท่านั้นในตอนนี้ แต่แอปพลิเคชันส่วนใหญ่ไม่ได้ใช้ฟังก์ชัน 3D ใดๆ ดังนั้นสิ่งนี้จึงไม่ควรเป็นปัญหาสำหรับนักพัฒนาส่วนใหญ่

คำแนะนำจากประสบการณ์ของฉันกับ Flutter

หลังจากเปิดตัวแอพ Flutter สามแอพในช่วงสองปีที่ผ่านมา ฉันได้เรียนรู้หลายสิ่งหลายอย่างที่ฉันหวังว่าจะได้รับการบอกเล่าเมื่อเริ่มใช้งาน ฉันจะแสดงรายการไว้ที่นี่โดยหวังว่าพวกเขาจะช่วยเหลือคุณในการเดินทางพัฒนา Flutter ของคุณ

Flutter นั้นง่าย มาก ที่จะเริ่มต้น ฉันเริ่มต้นด้วยหลักสูตรที่ยอดเยี่ยมเกี่ยวกับ App Brewery อย่างไรก็ตาม หลังจากเสร็จสิ้นโมดูลสองสามโมดูลแรก ฉันคิดว่าฉันได้เรียนรู้เพียงพอและเริ่มสร้างแอปแรกที่ฉันเปิดตัว

เนื่องจากความไม่อดทนของฉัน ฉันจึงข้ามโมดูลจำนวนหนึ่งในหลักสูตรนั้นซึ่งกลายเป็นว่ามีความสำคัญ และฉันต้องเรียนรู้บทเรียนของโมดูลเหล่านั้นอย่างยากลำบากด้วยการทำผิดพลาด โดยเฉพาะอย่างยิ่ง ฉันจะทำงานได้ดีขึ้นมากในการใช้งาน Flutter ครั้งแรกสำหรับการพัฒนาแอพ หากฉันได้เรียนรู้แนวทางปฏิบัติที่ดีที่สุดของ Flutter สองสามข้อ:

• วิธีทำให้เป็นโมดูลและจัดโครงสร้างโค้ดแอปพลิเคชัน Flutter ของฉัน
• การจัดการของรัฐทำงานอย่างไร
• วิธีตรวจสอบผู้ใช้และติดตามสถานะการรับรองความถูกต้องในหน้าต่างๆ ของแอพ Flutter ของฉัน
• วิธีผสานรวมการแจ้งเตือนโดยใช้แพ็คเกจ Firebase Messaging

ฉันลงเอยด้วยการเรียนรู้สิ่งเหล่านี้ทั้งหมด แต่ต้องทำผิดพลาดมากมายก่อน ฉันเขียนส่วนสำคัญของแอปแรกที่ฉันสร้างใหม่ อย่างไรก็ตาม ด้วยแอป Flutter แอปที่สองของฉัน ฉันได้เรียนรู้จากข้อผิดพลาดและจบลงด้วยการทำงานที่ดีขึ้นและเร็วขึ้น

มีแหล่งข้อมูลมากมายที่คุณสามารถค้นหาได้โดยการค้นหา Google เพื่อเรียนรู้เกี่ยวกับแนวคิดที่ฉันระบุไว้ข้างต้น คุณสามารถเริ่มต้นได้โดยดูที่ลิงก์ในหน้าเรียนรู้เพิ่มเติมในไซต์ Flutter

อีกสิ่งหนึ่งที่ฉันพบคือเนื่องจาก Flutter ใหม่เป็นอย่างไร จึงไม่มีรูปแบบใดรูปแบบหนึ่งสำหรับจัดโครงสร้างแอปของคุณ มาจากอาชีพการพัฒนาบน Django ส่วนใหญ่ ฉันเคยรู้ว่า MVC เป็นรูปแบบที่ใช้ในแอพ Django ของฉัน iOS ยังมีผู้ชนะที่ชัดเจนในรูปแบบ MVVM ที่ตามมา Android มีชุดแนวทางในการสร้างแอปให้ดีที่สุด

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

โดยส่วนตัวแล้วฉันใช้แพ็คเกจ provider เป็นทั้งการฉีดการพึ่งพาและเฟรมเวิร์กการจัดการการเปลี่ยนแปลง แอพ My Flutter แบ่งออกเป็นสามบรรทัดโดยประมาณ:

1. Views ซึ่งเป็นวิดเจ็ตที่สร้างแอปพลิเคชัน รวมถึงหน้าจอ ฉันใส่บริการและรุ่นต่างๆ โดยใช้วิดเจ็ต Consumer จากแพ็คเกจ Provider ลงในมุมมองของฉัน เพื่อให้ฉันสามารถสร้าง UI ตามข้อมูลที่มีได้ วิดเจ็ต Consumer ยังสร้างมุมมองใหม่เมื่อสถานะเปลี่ยนแปลง ซึ่งเป็นวิธีที่แอปของฉันตอบสนองต่อการเปลี่ยนแปลงสถานะ
2. Models ซึ่งเป็นอ็อบเจ็กต์เก่าธรรมดาที่ฉันใช้เพื่อเก็บข้อมูลที่มีโครงสร้าง
3. บริการ/ตัวควบคุม ซึ่งตรรกะทางธุรกิจส่วนใหญ่ดำเนินไป อินเทอร์เฟซ API ยังถูกเข้ารหัสไว้ที่นี่ ซึ่งสามารถดึงและส่งข้อมูลไปยัง API ได้ อินเทอร์เฟซ API เหล่านี้จัดเตรียมและยอมรับโมเดลเพื่อส่งข้อมูล

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

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

หากคุณไม่ได้ใช้ BLoC หรือ provider คุณจะต้องหาวิธีจัดการสถานะในแอปพลิเคชันของคุณ โดยเฉพาะในส่วนที่เกี่ยวข้องกับการแจ้งเตือน

Flutter เปรียบเทียบกับ Hybrid Frameworks อื่นๆ อย่างไร

React Native

React Native เป็นเฟรมเวิร์กแอพพลิเคชั่นมือถือไฮบริดที่ได้รับความนิยมและประสบความสำเร็จมากที่สุดจนถึงปัจจุบัน และมีเหตุผลที่ดี มันใช้เฟรมเวิร์กเว็บฟรอนต์เอนด์ที่ได้รับความนิยมและสร้างมาอย่างดี React และอนุญาตให้นักพัฒนาฟรอนต์เอนด์หลายล้านคนเริ่มเขียนแอปพลิเคชันมือถือได้เช่นกัน ฉันมั่นใจว่าแอปมือถือดีๆ มากมายที่เรามีในปัจจุบันจะไม่มีทางเกิดขึ้นได้หากนักพัฒนาต้องหาเวลาและแรงจูงใจในการเรียนรู้ SDK สำหรับการพัฒนา iOS และ Android ดั้งเดิม

เมื่อเทียบกับฉากหลังนี้ ฉันมั่นใจว่าในที่สุด Flutter จะชนะในฐานะเฟรมเวิร์กแอปพลิเคชันมือถือแบบไฮบริดชั้นนำ มีเหตุผลสองสามประการ

คอมโพเนนต์ React Native มีการอธิบายไว้ในโค้ด JavaScript และแปลเป็นตัวควบคุมแบบเนทีฟ ซึ่งหมายความว่าผู้ใช้จะได้รับความรู้สึก UI ที่แตกต่างกันในแอปเวอร์ชัน iOS และ Android หากนักพัฒนาพยายามที่จะบรรลุประสบการณ์ดั้งเดิมสำหรับผู้ใช้ สิ่งนี้ยอดเยี่ยม

อย่างไรก็ตาม ยังหมายความว่าหากนักพัฒนาต้องการมี UI ที่ เหมือนกันและสม่ำเสมอ ในทั้งสองแพลตฟอร์มมือถือ พวกเขาต้องทำงานอย่างหนักเพื่อจัดรูปแบบองค์ประกอบดั้งเดิมให้มีลักษณะเหมือนกัน หรือใช้ส่วนประกอบที่แตกต่างกันซึ่งให้รูปลักษณ์และความรู้สึกเหมือนกันในทั้งสอง แพลตฟอร์ม

เปรียบเทียบสิ่งนี้กับ Flutter โดยที่เฟรมเวิร์กมีวิดเจ็ตของตัวเองบนแพลตฟอร์มที่รองรับทั้งหมด ไม่มีการแปลเกิดขึ้น เนื่องจาก Flutter ไม่ได้อาศัยการควบคุมแบบเนทีฟเพื่อลงสี UI แต่จะใช้ไลบรารีการควบคุมของตัวเองแทน ไลบรารีวิดเจ็ตของ Flutter มีวิดเจ็ตที่ดูเหมือนการควบคุมแบบเนทีฟ แต่เป็นทางเลือกทั้งหมด

แนวทางนี้มีข้อดีและข้อเสีย โปรที่ใหญ่ที่สุดคือตอนนี้คุณมีแอพเดียวกันในทั้งสองแพลตฟอร์ม แต่คุณยอมสละบางสิ่งเพื่อบรรลุเป้าหมายนั้น

เนื่องจาก Flutter ใช้วิดเจ็ตของตัวเองแทนการใช้วิดเจ็ตดั้งเดิม คุณจึงไม่สามารถใช้ไลบรารีที่มีอยู่มากมายซึ่งมีการควบคุมแบบกำหนดเองได้เช่นเดียวกับที่คุณทำกับ React Native เพียงเล็กน้อย ใน React Native การเขียน wrapper ขนาดเล็กรอบๆ การควบคุมเนทีฟที่มีอยู่นั้นค่อนข้างง่าย และทำให้มันใช้งานได้ นี่เป็นเหตุผลว่าทำไม Flutter จึงไม่มีการใช้งาน Google Maps ที่เสถียรในขณะนี้

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

ฟีเจอร์ Flutter เดียวกันนี้ โดยใช้ไลบรารีวิดเจ็ตของตัวเองแทนวิดเจ็ตดั้งเดิม ให้ประโยชน์มหาศาลเช่นกันเมื่อคุณต้องการสร้างส่วนประกอบใหม่ทั้งหมด ใน React Native คุณจะต้องสร้างส่วนประกอบที่เป็นแพลตฟอร์มและนำเข้าไปยังแอปพลิเคชันของคุณผ่านการผูก

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

และฉันคิดว่านี่เป็นหนึ่งในประโยชน์ที่ใหญ่ที่สุดของ Flutter คุณสามารถควบคุม UI ของคุณได้อย่างสมบูรณ์จากโค้ด Dart และไม่ต้องกังวลกับการเรียนรู้ SDK ดั้งเดิมของแพลตฟอร์มที่คุณกำลังพัฒนาอีกต่อไป

Apache Cordova

Apache Cordova ไม่ใช่เฟรมเวิร์กมากเท่ากับตัวห่อหุ้มเบราว์เซอร์ ด้วย Cordova คุณสร้างแอปพลิเคชันของคุณโดยใช้เทคโนโลยีเว็บ: HTML, CSS และ JavaScript Cordova มอบวิธีให้คุณเรียกใช้เว็บแอปพลิเคชันนี้บนแพลตฟอร์มมือถือและเปิดเผย API แพลตฟอร์มดั้งเดิมใน JavaScript เพื่อให้แอปพลิเคชันของคุณสามารถโต้ตอบกับแพลตฟอร์มได้

มีเฟรมเวิร์กต่างๆ มากมายที่สร้างขึ้นสำหรับคอร์โดวา สิ่งที่มีชื่อเสียงที่ฉันเคยใช้ในอดีตคือ Ionic framework มันมีชุดของส่วนประกอบ UI ที่มีลักษณะและทำหน้าที่คล้ายกับส่วนประกอบแพลตฟอร์มดั้งเดิม อย่างไรก็ตาม องค์ประกอบเหล่านี้ถูกนำมาใช้โดยใช้ HTML/CSS/JavaScript

ประสบการณ์การพัฒนากับ Cordova และ Ionic นั้นดีมาก และการเริ่มต้นใช้งานนั้นรวดเร็วมาก หากคุณเป็นนักพัฒนาเว็บอยู่แล้ว เนื่องจากคุณกำลังสร้างแอปพลิเคชันโดยใช้เทคโนโลยีเว็บ คุณจึงมีระบบนิเวศของเว็บทั้งหมดพร้อมให้คุณใช้งาน ลองนึกถึงส่วนประกอบและไลบรารีขนาดเล็กจำนวนหลายแสนรายการตาม HTML/CSS/JavaScript และคุณสามารถใช้สิ่งเหล่านั้นได้มากที่สุด (ถ้าไม่ใช่ทั้งหมด) ซึ่งหมายความว่า "วิดเจ็ต" ส่วนใหญ่ที่คุณต้องการมีให้คุณออนไลน์อยู่แล้ว

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

แม้ว่า Cordova เป็นวิธีที่ยอดเยี่ยมในการพัฒนา MVP หรือแม้แต่เวอร์ชันแรกๆ ของแอปของคุณ แอปแรกที่ฉันสร้างใน Flutter ก็คือพอร์ตของแอป Ionic การปรับปรุงประสิทธิภาพที่เราได้รับ โดยเฉพาะอย่างยิ่งในมุมมองที่มีเนื้อหาจำนวนมากให้เลื่อนดู สังเกตได้จากการโต้ตอบครั้งแรก

ซามาริน

ฉันไม่มีประสบการณ์ใด ๆ กับ Xamarian ดังนั้นฉันจึงไม่สามารถเปรียบเทียบทั้งสองได้ อย่างไรก็ตาม ในระหว่างการวิจัยของฉัน ฉันพบบทความที่ยอดเยี่ยมที่มีการเปรียบเทียบอย่างยุติธรรม

แม้ว่าบทความจะจบลงด้วยความเสมอภาคระหว่าง Flutter และ Xamarian ก็ตาม ฉันสามารถพูดได้อย่างมั่นใจว่าหากฉันอ่านและต้องเลือกระหว่างสองเฟรมเวิร์ก ฉันจะเลือก Flutter เพราะมันคือสิ่งที่โดดเด่น ที่ฉันมีค่ามากกว่า

ภาพรวมทางเทคนิคของ Flutter

Flutter: “Game Engine” ของ Hybrid App Frameworks

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

Flutter ใช้เอ็นจิ้นกราฟิก Skia ที่ประสิทธิภาพสูงและผ่านการทดสอบการต่อสู้เพื่อวาด ทุกอย่าง ในแอปพลิเคชันมือถือของคุณ การใช้ Skia ให้ประโยชน์หลักสองประการที่ฉันนึกออก แม้ว่าฉันจะแน่ใจว่าวิศวกรของ Google ที่อยู่เบื้องหลัง Flutter มีเป้าหมายมากกว่านี้:

1. แอปของคุณจะมีลักษณะเหมือนกันทุกประการบนทุกแพลตฟอร์มโดยไม่จำเป็นต้องปรับแต่งให้เหมาะกับแต่ละแพลตฟอร์ม
2. แอปของคุณจะได้รับประสิทธิภาพที่ยอดเยี่ยม คล้ายกับแอปพลิเคชันดั้งเดิม เนื่องจากไม่มีเลเยอร์กลางที่ต้องแปลโค้ดของคุณเป็นโค้ดแพลตฟอร์มดั้งเดิมเพื่อวาดวิดเจ็ต

ทุกอย่างคือวิดเจ็ต

เอกสาร Flutter พูดถึง Flutter ว่าเป็น "กรอบรูปแบบการตอบสนอง" สิ่งนี้ชัดเจนในวิธีที่แอปสร้างขึ้นโดยการเขียนวิดเจ็ตขนาดเล็ก ( ส่วนประกอบ ในคำศัพท์ของ React) เข้าด้วยกัน

อย่างไรก็ตาม Flutter นำ ทุกอย่างมาใช้เป็นแนวทางวิดเจ็ต หนึ่งขั้นที่ไกลกว่าเฟรมเวิร์กอื่น ๆ ที่ฉันเคยทำงานด้วย

ตัวอย่างง่ายๆคือการเติม สำหรับเฟรมเวิร์กส่วนใหญ่ การเติมเป็นแอตทริบิวต์ขององค์ประกอบ UI ใน Flutter Padding คือวิดเจ็ตที่สามารถรวมวิดเจ็ตอื่นๆ ไว้ในตัวมันเอง และเพิ่มการเติมรอบๆ วิดเจ็ตย่อย

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

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

ทุกอย่างนี้เป็นแนวทางที่วิดเจ็ต ต้องใช้เวลาทำความคุ้นเคย แต่เมื่อคุณคุ้นเคยกับมันแล้ว มันจะกลายเป็นวิธีที่มีประสิทธิภาพในการสร้างฟังก์ชันการทำงานในแอปพลิเคชันของคุณ

กระพือปีก โผบิน และขุดลึกลงไปในแหล่งกำเนิด

Flutter ผูกติดอยู่กับ Dart อย่างใกล้ชิด ในขณะที่เอ็นจิ้นการเรนเดอร์หลักสร้างขึ้นใน C/C++ นั่นเป็นเพียงส่วนเล็ก ๆ ของ Flutter

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

นี่เป็นข้อได้เปรียบที่ทรงพลังมากกว่าที่นักพัฒนาหลายคนตระหนัก ฉันแนะนำให้นักพัฒนาส่วนใหญ่พยายามหาคำตอบในโค้ดของเฟรมเวิร์ก/ไลบรารีของพวกเขา เพราะนั่นไม่เพียงช่วยให้พวกเขาเข้าใจว่าเกิดอะไรขึ้นภายใต้หน้าปก แต่ยังทำให้พวกเขาได้รับโค้ดคุณภาพสูงและได้รับการออกแบบมาอย่างดี ซึ่งเป็นวิธีที่แน่นอน เติบโตเป็นนักพัฒนา

การทำงานร่วมกันของแพลตฟอร์มดั้งเดิม

แม้ว่า Flutter จะมีเลเยอร์ UI และตรรกะทางธุรกิจก็จัดการได้อย่างง่ายดายผ่านแพ็คเกจ Dart แท้ ๆ เพื่อเข้าถึงความสามารถของแพลตฟอร์มดั้งเดิม เช่น ตำแหน่งทางภูมิศาสตร์และการควบคุมกล้อง การใช้แพ็คเกจบุคคลที่สามของ pub.dev นั้นเป็นกลยุทธ์ที่ง่ายที่สุด

อย่างไรก็ตาม หากมีฟังก์ชันบางอย่างที่คุณต้องการซึ่งไม่มีให้ในแพ็คเกจที่มีอยู่ การเขียนด้วยตัวเองก็ไม่ยากเกินไป ฉันไม่ได้สร้างแพ็คเกจดั้งเดิมของแพลตฟอร์ม แต่ฉันได้ดูซอร์สโค้ดด้วยความอยากรู้มากมาย

แม้ว่าฉันจะไม่ใช่นักพัฒนาแอปพลิเคชันดั้งเดิม แต่ฉันก็สามารถเข้าใจส่วนต่าง ๆ ดั้งเดิมของปลั๊กอินเหล่านั้นได้เป็นส่วนใหญ่ และดูว่าพวกเขาเชื่อมต่อกับ Dart Runtime ผ่านการส่งข้อความอย่างไร สำหรับนักพัฒนาแพลตฟอร์มเนทีฟที่มีประสบการณ์ การสร้างแพ็คเกจใหม่เพื่อใช้ประโยชน์จากความสามารถดั้งเดิมนั้นทำได้ง่ายมาก

คุณควรใช้ Flutter ในโครงการต่อไปของคุณหรือไม่?

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

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

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

• ความง่ายในการเริ่มต้นของ Flutter
• ความเร็วที่เพิ่มขึ้นได้จากการใช้เฟรมเวิร์กที่ออกแบบตั้งแต่พื้นฐานจนถึงโฟกัสที่ความเร็วของการพัฒนา
• ระบบนิเวศที่สมบูรณ์ของไลบรารี Dart ที่พร้อมใช้งานและแพ็คเกจของบุคคลที่สาม
• วิธีการพัฒนาแอปพลิเคชันที่แตกต่าง แต่มีประสิทธิผลอย่างมากของ Flutter โดยใช้ ทุกอย่างเป็นวิธีวิดเจ็ต

ผู้ให้บริการพัฒนาแอพมือถือควรให้ Flutter ดูจริงจังหากยังไม่ได้ทำ

ฉันจะปิดโดยสังเกตข้อดีของ Flutter สุดท้าย: มีเอกสารที่ดีที่สุดของไลบรารีหรือเฟรมเวิร์กใด ๆ ที่ฉันเคยทำงานด้วย หายากที่ฉัน google คำถาม Flutter และไม่ได้รับคำตอบจากหน้าจากเว็บไซต์ของ Flutter

ในฐานะ Google Cloud Partner ผู้เชี่ยวชาญที่ผ่านการรับรองจาก Google ของ Toptal พร้อมให้บริการสำหรับบริษัทต่างๆ ที่ต้องการสำหรับโครงการที่สำคัญที่สุดของพวกเขา