PWA vs Flutter: การเปรียบเทียบโดยละเอียด

ด้วยความซับซ้อนทั้งหมดที่เกิดขึ้นระหว่างเทคโนโลยีเหล่านี้ เป็นที่เข้าใจได้ว่าในตอนแรกคุณอาจรู้สึกสับสนเล็กน้อยเมื่อพยายามเรียนรู้ความแตกต่างระหว่างสองเทคโนโลยี—Progressive Web App และ Flutter ท้ายที่สุด ฟังดูคล้ายกันมากในทางทฤษฎี เนื่องจากสามารถใช้ทั้งสองเพื่อมอบประสบการณ์ที่น่าดึงดูดใจในอุปกรณ์ต่างๆ โดยใช้ฐานรหัสเดียว

ในความพยายามที่จะแยกแยะทั้งสองสิ่งนี้ออกจากกัน วันนี้เราจะเจาะลึกถึงเทคโนโลยีทั้งสองนี้ ตั้งแต่วิธีการทำงานไปจนถึงการใช้งานจริง มาเริ่มกันเลย:

ภาพรวมโดยย่อ

กปภ. คืออะไร?

พูดง่ายๆ คือ Progressive Web Apps คือเว็บไซต์ที่มีลักษณะและความรู้สึกเหมือนแอป เทคโนโลยีนี้เป็นการผสมผสานระหว่างคุณลักษณะที่ดีที่สุดจากทั้งเว็บและแอปพลิเคชันแบบเนทีฟ ซึ่งหมายความว่าผู้ใช้ที่ใช้ PWA จะได้รับประโยชน์จากคุณลักษณะทั้งหมดที่ก่อนหน้านี้มีเฉพาะในแอปแบบเนทีฟ เช่น การแจ้งเตือนแบบพุช ตำแหน่งทางภูมิศาสตร์ ฯลฯ ทั้งหมดในขณะที่ยังคงรักษาไว้ คุณสมบัติที่ดีที่สุดจากเว็บ

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

Flutter คืออะไร?

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

สิ่งนี้อาจดูคล้ายกับ Progressive Web App มาก แต่เราสามารถรับรองกับคุณได้ว่ากลไกพื้นฐานที่ทำให้ประสบการณ์แอพเนทีฟเหล่านี้เป็นไปได้แตกต่างกันมาก

ลงรายละเอียด

ภาษา

Progressive Web App ตามที่ระบุไว้ก่อนหน้านี้นั้นเหมือนกับมาตรฐานใหม่ของเว็บมากกว่า และไม่มีกฎเกณฑ์ที่เข้มงวดว่าจะต้องเขียนโค้ดในภาษาโปรแกรมใด อย่างไรก็ตาม เนื่องจากยังคงเป็นเทคโนโลยีพื้นฐานจากเว็บ เว็บ ภาษาพื้นฐานเช่น JavaScript ยังคงเป็นพื้นฐานในการพัฒนา กปภ.

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

ความซับซ้อน

เนื่องจาก PWA นั้นใช้ JavaScript ซึ่งเป็นภาษาที่เก่ากว่าและมีความเป็นผู้ใหญ่มากกว่า คุณจึงคาดว่าช่วงการเรียนรู้จะให้อภัยมากขึ้น เนื่องจากมีเฟรมเวิร์กและไลบรารี JavaScript มากมายให้คุณเลือก Flutter—เป็นภาษาที่ใหม่กว่ามาก—อาจดูซับซ้อนขึ้นเล็กน้อยตั้งแต่แรกเห็น เนื่องจากทุกสิ่งตั้งแต่ UI ไปจนถึงรหัสตรรกะ สามารถปรากฏรวมกันมากหรือน้อยใน Flutter และเนื่องจาก ทุกอย่างเป็นวิดเจ็ตใน Flutter คุณสามารถพบว่าตัวเองอยู่ในสถานการณ์ที่คุณจบลงด้วย 'แผนผังวิดเจ็ต' ที่ใหญ่ผิดปกติ ลึก และซับซ้อน

ประสิทธิภาพ

เมื่อพูดถึงการแสดง สองคนนี้เป็นคู่หูต่อตากันและไม่ใช่การแข่งขันแบบฝ่ายเดียวอย่างที่คาดไว้ เมื่อเปรียบเทียบกับแอป Flutter แล้ว PWA ทั่วไปควรมีประสิทธิภาพเพียงเล็กน้อยเมื่อพยายาม 'พูดคุย' กับโค้ดเนทีฟโดยตรง เนื่องจากบ่อยครั้ง PWA ยังคงต้องใช้สะพาน JavaScript เพื่อเข้าถึงคุณลักษณะพื้นฐานของอุปกรณ์ , เช่น GPS, กล้อง ฯลฯ

อย่างไรก็ตาม เมื่อดูการวัดประสิทธิภาพ จะเห็นได้ชัดเจนว่าเฟรมเวิร์ก JavaScript เช่น NodeJS สามารถทำงานได้เทียบเท่า หากไม่ดีกว่า Dart (แกนหลักของแอป Flutter) ในหลายโอกาส

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

คุณสมบัติ

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

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

นี่เป็นเพราะความจริงที่ว่า Flutter แสดงส่วนประกอบ UI ของตัวเอง ซึ่งแตกต่างจากเฟรมเวิร์กอื่นๆ ส่วนใหญ่ที่ใช้ส่วนประกอบแพลตฟอร์มดั้งเดิม ด้วยวิธีนี้ แอป Flutter จะมีความสอดคล้องกันมากขึ้นในอุปกรณ์ต่างๆ แต่ด้วยเหตุนี้ ขนาดแอป Flutter ทั่วไปจึงใหญ่กว่า PWA ทั่วไปอย่างมาก ง่าย ๆ "สวัสดีชาวโลก!" ตัวอย่างเช่น แอป Flutter อาจมีขนาดไม่เกิน 7MB ในขณะที่ PWA ที่มีเนื้อหาเดียวกัน จะไม่ ทำลายเครื่องหมาย 1MB

กรณีการใช้งาน

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

โดยปกติ PWA จะใช้เทคโนโลยีเว็บซึ่งเป็นสาเหตุที่ทำให้สามารถเข้าถึงผู้ชมได้หลากหลายขึ้น และสามารถหาซื้อได้ใน Microsoft Store ซึ่งทำให้ขยายการเข้าถึงของคุณไปยังฐานการติดตั้ง Windows 10 ทั้งหมดที่มีผู้ใช้เกือบ 700 ล้านคนต่อเดือนอย่างมีประสิทธิภาพ

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

ตัวอย่าง

จากแอพ PWAs และ Flutter ที่เราได้รวบรวมไว้ สิ่งเหล่านี้คือแอพที่โดดเด่นกว่าที่เราคิดว่าสามารถแสดงถึงความสามารถของพวกเขาได้ดีที่สุด:

กระพือปีก—เดอะนิวยอร์กไทมส์

Flutter เริ่มบทใหม่เมื่อไม่นานมานี้ในกลางปี ​​2019 เนื่องจากศักยภาพของมันได้รับการตรวจสอบด้วย Flutter Web เวอร์ชันใหม่ของเกม KENKEN ของ New York Times

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

กปภ—Twitter Lite

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

และความแตกต่างหลักของ PWA ที่ทำงานได้ดีที่สุด เมื่อเปรียบเทียบกับแอป Flutter ที่มีประสิทธิภาพเท่ากันคือ ขนาดรวมของ PWA ของคุณไม่ควรเกิน 2MB บนอุปกรณ์ของคุณ

หลังจากแปลงเว็บไซต์เป็น PWA แล้ว Twitter ก็เห็นผลลัพธ์ที่น่าประทับใจ ตัวเลขพูดเพื่อตัวเอง:

• อัตราตีกลับลดลง 20%
• จำนวนหน้าเพิ่มขึ้น 65% ต่อเซสชัน
• ส่งทวีตเพิ่มขึ้น 75%

 บทความที่เกี่ยวข้อง: 12 ตัวอย่างเว็บแอปแบบก้าวหน้าสำหรับแรงบันดาลใจของคุณ

Flutter PWA เป็นไปได้หรือไม่?

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

ยังมีความยุ่งยากบางอย่างที่ทำให้ทั้งหมดนี้ยากขึ้นเล็กน้อยที่จะบรรลุ แต่ดังที่สังเกตได้จากเกม KENKEN ของ New York Times ด้านบน เป็นไปได้ ที่จะใช้งานเว็บแอพ Flutter อย่างเหมาะสม และ Flutter PWA ก็น่าจะเกิดขึ้นเร็วๆ นี้

บทสรุป

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

ที่ SimiCart เราเป็นหน่วยงานพัฒนา PWA ที่ได้รับการยอมรับจาก Google พร้อมที่จะนำประสบการณ์การช็อปปิ้งยุคใหม่มาสู่ร้าน Magento ของคุณ

อ่านเพิ่มเติม:
PWA vs Electron: การดำน้ำลึก

กปภ. คืออะไร? สิ่งที่คุณต้องรู้เกี่ยวกับ Progressive Web App

Magento PWA Studio vs Vue Storefront: อันไหนที่เหมาะกับคุณ?