ผมลองพัฒนาแอปเดียวกันด้วย Flutter, React Native และ Ionic

 (medium.com/@fmmagalhaes)
22 คะแนน โดย xguru 2024-05-20 | 6 ความคิดเห็น | แชร์ทาง WhatsApp
  • ระหว่างมองหาเฟรมเวิร์กพัฒนาแอปมือถือแบบครอสแพลตฟอร์มที่เหมาะที่สุด ก็สะดุดตากับ Flutter, React Native และ Ionic
  • ทั้งสามเฟรมเวิร์กล้วนสัญญาว่าจะให้ประสิทธิภาพที่ดีบนหลายแพลตฟอร์มด้วยโค้ดเบสเดียว
  • จึงลองสร้างแอปมือถือ 3 เวอร์ชันโดยใช้ API เพื่อแสดงข้อมูลพื้นฐานบนหน้าจอแล้วนำมาเปรียบเทียบกัน
    • ความต้องการของแอป: แสดงข้อมูลประเทศเมื่อโหลดหน้าจอ, มี loading spinner, มีปุ่มสำหรับดึงประเทศแบบสุ่มใหม่, และดึงรายการประเทศมาเพียงครั้งเดียว

Flutter

  • Flutter เป็นเฟรมเวิร์กโอเพนซอร์สที่ Google สร้างขึ้นในปี 2017 สำหรับสร้างแอปพลิเคชันเนทีฟหลายแพลตฟอร์มจากโค้ดเบสเดียว โดยใช้ภาษา Dart
  • เริ่มพัฒนาหลังจากใช้เวลาศึกษาเอกสารและบทสอนของ Flutter เป็นเวลา 1 ชั่วโมง
  • การตั้งค่าสภาพแวดล้อมพัฒนาและการรันอีมูเลเตอร์ทำได้อย่างราบรื่น
  • ใช้เวลา 4 ชั่วโมงในการสร้างแอปที่มีฟังก์ชันพื้นฐานเสร็จ
  • ฟีเจอร์คำแนะนำของ Android Studio ช่วยงานพัฒนาได้มาก
  • ฟีเจอร์ Hot Reload ช่วยให้เห็นการเปลี่ยนแปลงได้ทันที จึงช่วยลดเวลาในการพัฒนา
  • อย่างไรก็ตาม แนวคิดแบบ "ทุกอย่างคือ widget" ทำให้มีการซ้อนกันมาก และสไตล์กับองค์ประกอบปะปนกันจนไม่ค่อยเป็นธรรมชาติ

React Native

  • เป็นเฟรมเวิร์ก JavaScript แบบโอเพนซอร์สที่ Meta สร้างขึ้นในปี 2015 สามารถใช้สร้างแอปพลิเคชัน Android และ iOS แบบเนทีฟได้
  • เคยมีประสบการณ์ใช้ไลบรารี React มาก่อน และติดตั้ง VS Code ไว้เรียบร้อยแล้ว
  • ขั้นตอนการตั้งค่าสภาพแวดล้อมพัฒนาค่อนข้างซับซ้อนและชวนสับสน (ต้องเข้าใจความแตกต่างระหว่าง Expo Go กับ React Native CLI)
  • ทำแอปเสร็จภายใน 2.5 ชั่วโมง แต่มีปัญหาในการแก้เรื่องการแสดงรูปภาพ
  • ด้วยสถาปัตยกรรมแบบคอมโพเนนต์ของ React ทำให้โค้ดกระชับและแยกเป็นโมดูลได้ดี
  • ใช้ JSX จึงสามารถเขียน UI ของคอมโพเนนต์ด้วยโค้ดที่คล้าย HTML ได้

Ionic

  • Ionic เป็นชุดเครื่องมือ UI สำหรับมือถือแบบโอเพนซอร์สที่สร้างขึ้นในปี 2012 สำหรับพัฒนาแอปมือถือครอสแพลตฟอร์มสมัยใหม่คุณภาพสูงจากโค้ดเบสเดียว
  • สามารถพัฒนาได้ด้วย React, Vue และ Angular
  • มีคอมโพเนนต์ UI ที่หลากหลายและมอบส่วนติดต่อผู้ใช้ที่น่าสนใจ
  • เริ่มพัฒนาหลังจากเรียนรู้จากวิดีโอและคู่มือของ Ionic เป็นเวลา 30 นาที
  • พัฒนาแอปด้วยเวอร์ชัน Angular และสามารถทำงานได้รวดเร็วเพราะคุ้นเคยกับระบบนิเวศการพัฒนาอยู่แล้ว
  • ไฟล์ตั้งค่า JSON และ TypeScript จำนวนมากที่ถูกสร้างขึ้นในขั้นตอนเริ่มต้นทำให้รู้สึกหนักพอสมควร
  • ทำแอปเสร็จภายใน 2 ชั่วโมง
  • การทำ UI ทำได้ง่ายและเอกสารประกอบก็ดีมาก
  • สามารถแยก UI และ logic ออกจากกันได้ด้วย HTML template
  • คอมโพเนนต์ UI อย่าง Spinner และ Floating Action Button ช่วยให้การทำ UI ง่ายขึ้น

เปรียบเทียบ: Flutter, React Native, Ionic

  • สไตล์โค้ดและภาษา
    • เฟรมเวิร์กที่ใช้ JavaScript เป็นฐานได้เปรียบในด้านความอ่านง่ายและความเรียบง่ายของโค้ด
    • สไตล์โค้ดแบบซ้อนกันของ Flutter ค่อนข้างชวนสับสนและอ่านยาก
    • จะชอบ React หรือ Angular template มากกว่ากันก็ขึ้นอยู่กับรสนิยมส่วนบุคคล
  • ระบบนิเวศ
    • ณ เดือนเมษายน 2024 ในบรรดา 500 แอปยอดนิยมที่ติดตั้งในสหรัฐฯ 12.57% สร้างด้วย React Native, 5.24% สร้างด้วย Flutter และ 0.52% สร้างด้วย Ionic
    • React Native ให้อิสระค่อนข้างมาก แต่ก็อาจทำให้สับสนเรื่องการตั้งค่าและการใช้เครื่องมือได้
    • Flutter มีอัตราการนำไปใช้เพิ่มขึ้น และมีจำนวน public repository บน GitHub มาก
  • เครื่องมือ
    • Hot Reload
      • บนเบราว์เซอร์ ทั้งสามเฟรมเวิร์กรีโหลดแอปได้รวดเร็วเมื่อโค้ดมีการเปลี่ยนแปลง
      • บนอุปกรณ์ Android หรือซิมูเลเตอร์ Hot Reload ของ Flutter เร็วที่สุด
    • การดีบักระยะไกล
      • Flutter DevTools ใช้งานเข้าใจง่ายและมีฟีเจอร์หลากหลาย
      • Ionic ดีบักได้ง่ายด้วยอินเทอร์เฟซที่คล้าย Chrome Developer Tools
      • React Native มี React DevTools ให้ใช้ แต่ยังตามหลัง Flutter และ Ionic ในด้านการดีบักระยะไกล
  • ขนาดแอป
    • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
    • หลังติดตั้งแล้วจะใช้พื้นที่ตามลำดับคือ 9.61MB, 34.66MB และ 55.47MB
  • ประสบการณ์ผู้ใช้
    • Flutter และ Ionic มีคอมโพเนนต์ UI ที่เหมาะกับแต่ละแพลตฟอร์ม จึงช่วยให้ประสบการณ์ผู้ใช้สม่ำเสมอ
    • React Native ต้องพึ่งพาไลบรารีเพิ่มเติม
  • ประสิทธิภาพ
    • Flutter ถูกคอมไพล์เป็น native code จึงคาดว่าจะเร็วกว่า React Native
    • Ionic ทำงานบน WebView จึงอาจมีประสิทธิภาพช้ากว่าเล็กน้อย

บทสรุป

  • อยากศึกษาเรื่องสไตล์โค้ดของ Flutter ให้ลึกกว่านี้ และฟีเจอร์ Hot Reload ที่อาจเปลี่ยนเกมด้านการดีบักก็มีเสน่ห์มาก
  • ถึงอย่างนั้นก็ยังรู้สึกดึงดูดกับ Ionic มากกว่า เพราะสามารถนำความรู้ด้านเว็บเดิมอย่าง TypeScript, HTML และ CSS มาใช้กับการพัฒนาแอปมือถือได้
  • คิดว่าการพัฒนาทักษะด้าน Ionic จะช่วยยกระดับความสามารถในฐานะนักพัฒนามือถือและเว็บ
  • เมื่อโปรเจกต์พัฒนาไปมากขึ้น การจัดโครงสร้างโค้ด การแยกความรับผิดชอบ และการนำคอมโพเนนต์กลับมาใช้ซ้ำจะชัดเจนยิ่งขึ้น
  • แอปพลิเคชันที่ยอดเยี่ยมสามารถสร้างได้ด้วยทั้งสามเฟรมเวิร์ก
    • ตอนเลือกเฟรมเวิร์กไม่ควรมองข้ามความสนุกในการพัฒนา
    • ขอแนะนำให้ลองสำรวจเฟรมเวิร์กต่าง ๆ ผ่านการสร้างแอปทดลอง

บทความที่เกี่ยวข้อง

6 ความคิดเห็น

 
firea32 2024-05-27

เป็นไลบรารีข้ามแพลตฟอร์มเพียงตัวเดียวที่ใช้ native UI เลยทำใจเลิกใช้ได้ยากจริง ๆ…
ถึงขั้นว่า ถ้ามีทางเลือกก็อยากย้ายทันที แต่พอเห็นว่าแม้แต่ Flutter กับ Ionic ในบทความก็ไม่ได้เลือก native UI ก็ดูเหมือนว่าอนาคตคงไม่มีแล้ว
 
bus710 2024-05-21

ในกรณีของผม Flutter ดีตรงที่สามารถทำทุกอย่างด้วย Dart ได้โดยไม่จำเป็นต้องรู้ html/css
 
superwoou 2024-05-23

โดยทั่วไปคนที่เคยทำเว็บมาก่อนมักบอกว่า rn เหมาะมือกว่า ส่วนคนที่ไม่ได้มาทางนั้นก็มักบอกว่า flutter ใช้งานสะดวกกว่าครับ
 
optid77 2024-05-20

ดูเหมือนว่า cross-platform เองจะยังค่อนข้างเฉพาะทาง เลยทำให้การพัฒนาไลบรารีที่เกี่ยวข้องช้าหรือยังมีไม่เพียงพอ
React Native น่าจะมีจุดแข็งตรงที่สามารถใช้ ecosystem ของ React ร่วมกันได้บางส่วน

ผมจำได้ว่าตอนพัฒนา RN ช่วงหลัง เทียบกับตอนที่พัฒนาเมื่อ 2 ปีก่อน ผลิตภาพดีขึ้นเรื่อย ๆ เพราะสามารถใช้ไลบรารีที่มีการพัฒนาและใช้งานกันอย่างคึกคักในฝั่ง React ได้ เช่น tailwind, ReactQuery, TRPC เป็นต้น
 
kaistj 2024-05-20

จากประสบการณ์ส่วนตัว ส่วนสำคัญในการพัฒนาแอปคือการจัดการสถานะและส่วนของ UI

สำหรับ RN ผมใช้ Redux + Redux-saga สำหรับการจัดการแบบโกลบอล และใช้ React-query แยกตามแต่ละเพจ
ส่วน Flutter ผมใช้ Riverpod

โดยส่วนตัวแล้ว ผมรู้สึกว่าการจัดการสถานะฝั่ง React และการจัดลำดับของลอจิกเข้าใจได้ง่ายกว่าเล็กน้อย
และก็พัฒนาได้สะดวกกว่าด้วย เป็นแพลตฟอร์มที่อิงเว็บจึงทำให้พัฒนาง่ายขึ้นเล็กน้อย

สำหรับ Flutter ส่วนตัวผมรู้สึกว่าการทำความเข้าใจ Riverpod ไม่ใช่เรื่องง่ายนัก (อาจเป็นเพราะผมลงเวลาไปไม่มากด้วย)
การจัดการสถานะแบบง่าย ๆ ไม่ได้มีความยากมาก แต่เพราะต้องทำความเข้าใจแพลตฟอร์มด้วยหรือเปล่าไม่แน่ใจ
จึงรู้สึกว่ามีความซับซ้อนหรือความยากในการจัดการการเปลี่ยนสถานะ และในส่วนของการทำงานร่วมกันหลังเรียกใช้ server API

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

ประสบการณ์พัฒนา React เป็นเรื่องเมื่อ 2 ปีก่อน เลยเป็นประสบการณ์กับไลบรารีที่ค่อนข้างเก่า
ส่วน Flutter พัฒนาเมื่อไม่นานมานี้ แต่ก็ใช้เวลาลงทุนไปไม่มาก

ขอฝากประสบการณ์การพัฒนาของผมไว้ในคอมเมนต์ด้วยครับ~
ลองอ่านแบบประมาณว่า อ้อ มีมุมแบบนี้ด้วยนะ... ประมาณนั้นครับ~ ^^
 
xguru 2024-05-20

ขอบคุณครับ/ค่ะ! น่าจะเป็นประโยชน์กับท่านอื่นด้วยเหมือนกันครับ/ค่ะ