การเขียนโปรแกรมแบบมินิแอป

สิ่งที่ได้ผลดีสำหรับมินิแอป

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

คอมโพเนนต์

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

Model-view-viewmodel

รูปแบบสถาปัตยกรรม model–view–viewmodel (MVVM) ซึ่งช่วยให้แยกการพัฒนาอินเทอร์เฟซผู้ใช้แบบกราฟิก (มุมมอง) ผ่านภาษามาร์กอัปออกจากการพัฒนาตรรกะแบ็กเอนด์ (โมเดล) ได้ ซึ่งหมายความว่ามุมมองจะไม่ขึ้นอยู่กับแพลตฟอร์มโมเดลใดๆ โดยเฉพาะ แม้ว่าจะมีข้อเสียที่บันทึกไว้ของรูปแบบนี้ แต่โดยทั่วไปแล้วรูปแบบนี้ใช้ได้ผลดีมากสำหรับแอปพลิเคชันที่มีความซับซ้อนของมินิแอป ซึ่งจะมีประสิทธิภาพดีเมื่อใช้กับไลบรารีเทมเพลตแบบริชมีเดีย (ดูบทถัดไป)

การพิจารณาในแต่ละหน้า

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

กระบวนการบิลด์

มินิแอปไม่มีขั้นตอนการสร้างที่มองเห็นได้ บนเว็บ เครื่องมือสร้างสมัยใหม่อย่าง Snowpack ใช้ประโยชน์จากระบบโมดูล (หรือที่เรียกว่า ESM) ในตัวของ JavaScript เพื่อหลีกเลี่ยงการทำงานที่ไม่จำเป็นและทำงานได้อย่างรวดเร็วไม่ว่าโปรเจ็กต์จะขยายใหญ่ขึ้นเพียงใด แม้ว่าเทคโนโลยีอย่าง Web Bundle จะเพิ่งเริ่มเป็นที่รู้จัก แต่ก็สามารถเพิ่มลงในกระบวนการสร้างได้อย่างง่ายดาย

ความสามารถที่มีประสิทธิภาพ

แพลตฟอร์มเว็บมีความสามารถใหม่ๆ มากมายเมื่อเร็วๆ นี้ ตอนนี้คุณเข้าถึงอุปกรณ์ผ่าน บลูทูธ, USB, HID, ซีเรียล และ NFC ได้แล้ว เมื่อมินิแอปทำงานใน WebView และขึ้นอยู่กับ JavaScript Bridge บนเว็บ ความสามารถอันทรงพลังเหล่านี้จะพร้อมใช้งานโดยตรง คุณจึงไม่ต้องเขียนโปรแกรมกับ API ที่ JavaScript Bridge ให้มา แต่เขียนโปรแกรมกับ API ของเบราว์เซอร์โดยตรง

ขอขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu