เนื้อหา
- PWA กับ Native Apps: อะไรคือความแตกต่าง?
- แอปพลิเคชันเว็บแบบก้าวหน้า: การสร้างเว็บ
- จุดแข็งของ PWA
- จุดอ่อนของ PWA
- ตอบสนองเนทีฟ
- จุดเด่นของ React Native
- จุดอ่อนของ React Native
- NativeScript
- จุดแข็งของ NativeScript
- จุดอ่อนของ NativeScript
คุณควรใช้แนวทางใดในการสร้างแอป คุณควรใช้เส้นทาง PWA / เทคโนโลยีเว็บหรือควรใช้เนทีฟและออกแบบสำหรับแพลตฟอร์มเฉพาะ? ตัวเลือกทั้งสองมีข้อดีข้อเสียและในบทความนี้เราจะเน้นไปที่ตัวเลือกยอดนิยมบางตัวที่ใช้ในการสร้างเว็บและแอปเนทีฟ
PWA (Progressive Web Apps) หรือที่เรียกว่าเว็บแอปสร้างขึ้นด้วยเทคโนโลยีเว็บยอดนิยม HTML, CSS และ JavaScript และทำงานในเว็บเบราว์เซอร์ (ตรวจสอบแท็ก HTML ที่จำเป็นเพื่อช่วยในการสร้างของคุณ) PWA เป็นเว็บไซต์บนอุปกรณ์เคลื่อนที่ที่มีประสิทธิภาพซึ่งออกแบบมาให้มีลักษณะเหมือนแอปและการใช้ API ของเว็บจะให้ฟังก์ชันการทำงานคล้ายกับแอปเนทีฟ
สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับการสร้างแอปโปรดดูโพสต์ของเราเกี่ยวกับวิธีสร้างแอปหรือหากเป็นไซต์ที่คุณต้องการสร้างโปรดดูผู้สร้างเว็บไซต์และบริการเว็บโฮสติ้งชั้นนำเหล่านี้
PWA กับ Native Apps: อะไรคือความแตกต่าง?
Progressive Web Apps มีข้อได้เปรียบในการติดตั้งและใช้งานได้บนอุปกรณ์โดยไม่ต้องใช้แอพสโตร์ และส่วนหนึ่งของกระบวนการนี้คือ Web App Manifest ซึ่งช่วยให้นักพัฒนาสามารถควบคุมลักษณะที่แอปปรากฏและวิธีการเปิดตัวแอปได้ นอกจากนี้นักออกแบบเว็บไซต์ / นักพัฒนาส่วนหน้าจะมีชุดทักษะที่จำเป็นสำหรับการเริ่มต้นสร้างทันที ไม่จำเป็นต้องเรียนรู้ภาษาใหม่ซึ่งแตกต่างจากแอปที่มาพร้อมเครื่อง
แอปเนทีฟถูกสร้างขึ้นโดยคำนึงถึงระบบปฏิบัติการเฉพาะนั่นคือ iOS และ Android - และใช้กรอบงานหรือภาษาเพื่อตอบสนองวัตถุประสงค์นั้น โดยทั่วไปแอปพลิเคชัน iOS จะใช้ Xcode หรือ Swift และแอป Android, JavaScript แต่สำหรับบทความนี้เรามุ่งเน้นไปที่เฟรมเวิร์กโอเพนซอร์สที่ใช้ JavaScript สองตัว ได้แก่ React Native และ NativeScript ซึ่งใช้ได้กับทั้งสองแพลตฟอร์ม
ข้อดีของแอปที่มาพร้อมเครื่องคือโดยทั่วไปแล้วจะมีฟังก์ชันการทำงานที่ดีขึ้นเนื่องจากใช้ประโยชน์จากฮาร์ดแวร์และซอฟต์แวร์ของอุปกรณ์ได้ดีขึ้นเร็วขึ้นและตอบสนองได้ดีขึ้นและคุณจะได้รับการประกันคุณภาพผ่านการให้คะแนนในร้านค้าแอป แต่หมายความว่าต้องเรียนรู้วิธีใช้กรอบงานหรือไลบรารีเฉพาะ
ที่นี่เราดูตัวเลือกที่แตกต่างกันสามตัวเลือกหนึ่งสำหรับเว็บ (PWA) และอีกสองตัวสำหรับเนทีฟ (React Native, NativeScript) - สำหรับการสร้างแอพ เราดำเนินการตามวิธีการทำงานสิ่งที่พวกเขาทำได้และดูจุดแข็งและจุดอ่อนของพวกเขาเพื่อช่วยคุณตัดสินใจว่าคุณควรเลือกตัวเลือกใดในการสร้างแอปของคุณ
แอปพลิเคชันเว็บแบบก้าวหน้า: การสร้างเว็บ
จุดแข็งของ PWA
- แอปยังทำงานในเบราว์เซอร์
- การกระจาย: เบราว์เซอร์องค์กรและร้านค้าแอป
- สามารถใช้ React, Angular, Vue, vanilla หรือ framework อื่น ๆ
จุดอ่อนของ PWA
- ไม่มีสิทธิ์เข้าถึง API ดั้งเดิมทุกตัว
- ความสามารถและการกระจายร้านค้าบน iOS และ iPadOS มี จำกัด
- มันอยู่ในวิวัฒนาการอย่างต่อเนื่อง
PWA เป็นรูปแบบการออกแบบในปัจจุบันเพื่อสร้างแอปที่มีประสิทธิภาพสูงออฟไลน์ติดตั้งได้โดยใช้เฉพาะเว็บสแต็ก: HTML, CSS, JavaScript และ API ของเบราว์เซอร์ ต้องขอบคุณพนักงานบริการและข้อกำหนดรายการเว็บแอปขณะนี้เราสามารถสร้างประสบการณ์การใช้งานแอประดับเฟิร์สคลาสได้หลังจากติดตั้งสำหรับ Android, iOS, iPadOS, Windows, macOS, Chrome OS และ Linux
ในการสร้าง PWA คุณสามารถใช้สถาปัตยกรรมใดก็ได้: จากฝั่งเซิร์ฟเวอร์, วานิลลา JavaScript, React, Vue, Angular หรือเฟรมเวิร์กฝั่งไคลเอ็นต์อื่น ๆ อาจเป็นแอปพลิเคชันหน้าเดียวหรือเว็บแอปพลิเคชันหลายหน้าและเรากำหนดวิธีที่เราจะสนับสนุนผู้ใช้ขณะออฟไลน์
ด้วยวิธีนี้เราไม่จำเป็นต้องจัดแพคเกจและลงนามทรัพยากรของแอปของเราเราเพียงแค่โฮสต์ไฟล์ในเว็บเซิร์ฟเวอร์และผู้ให้บริการจะต้องรับผิดชอบในการแคชไฟล์ในไคลเอนต์และให้บริการหลังการติดตั้ง นอกจากนี้ยังหมายความว่าหากแอปต้องการการอัปเดตคุณเพียงแค่เปลี่ยนไฟล์บนเซิร์ฟเวอร์และตรรกะของพนักงานบริการจะต้องรับผิดชอบในการอัปเดตบนอุปกรณ์ของผู้ใช้โดยไม่มีการแทรกแซงของผู้ใช้หรือร้านแอป
ในแง่ของการแจกจ่ายวิธีการที่พบมากที่สุดคือเบราว์เซอร์ ผู้ใช้ติดตั้งแอปจากเบราว์เซอร์โดยใช้รายการเมนูเพิ่มในหน้าจอหลักหรือติดตั้งโดยยอมรับคำเชิญให้ติดตั้งหรือโดยใช้อินเทอร์เฟซผู้ใช้เว็บแอปที่กำหนดเองบนแพลตฟอร์มที่เข้ากัน เป็นที่น่าสังเกตว่า Apple ปฏิเสธ PWA บริสุทธิ์ที่เผยแพร่ใน App Store และสนับสนุนให้นักพัฒนาเว็บเผยแพร่ผ่าน Safari
อินเทอร์เฟซผู้ใช้ได้รับการจัดการโดยรันไทม์ของเว็บซึ่งหมายความว่านักออกแบบเว็บไซต์มีหน้าที่ในการแสดงผลการควบคุมแต่ละรายการบนหน้าจอ หากคุณใช้เฟรมเวิร์ก UI เช่น Ionic หรือไลบรารีดีไซน์ Material HTML และ CSS จะเลียนแบบอินเทอร์เฟซเนทีฟบน Android หรือ iOS แต่ไม่บังคับเมื่อทำ PWA จำเป็นต้องใช้เทคนิคการทำงานของเว็บเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี
ในแง่ของความสามารถ PWA จะเข้าถึงได้เฉพาะ API ที่มีอยู่ในเบราว์เซอร์เอ็นจิ้นบนแพลตฟอร์มนั้นและไม่สามารถขยายได้ด้วยโค้ดเนทีฟยกเว้นการแจกแจง PWA ของ App Store ในเรื่องนี้ iOS และ iPadOS เป็นแพลตฟอร์มที่ จำกัด มากขึ้นสำหรับ PWA ในขณะที่ Chrome (สำหรับ Android และระบบปฏิบัติการเดสก์ท็อป) มีความพร้อมใช้งานมากกว่าและกำลังทำงานอย่างหนักเพื่อเพิ่มทุก API ที่เป็นไปได้ใน JavaScript ด้วยโครงการ Fugu
- ที่เก็บข้อมูลบนคลาวด์ที่ดีที่สุด: เลือกตัวเลือกที่เหมาะสมสำหรับคุณ
ตอบสนองเนทีฟ
จุดเด่นของ React Native
- รูปแบบเดียวกับ React.js
- API ของเว็บบางรายการถูกเปิดเผย
- การสนับสนุนทางเว็บและเดสก์ท็อป
จุดอ่อนของ React Native
- ไม่สามารถใช้ส่วนประกอบ UI ของเว็บซ้ำได้
- สะพานพื้นเมืองต้องการงานบางอย่าง
- จำเป็นต้องมีประสบการณ์ในการตอบสนอง
React Native เป็นเฟรมเวิร์กคอมโพเนนต์ที่ใช้ JavaScript แบบโอเพนซอร์สซึ่งสนับสนุนโดย Facebook ซึ่งใช้รูปแบบการออกแบบ React เช่นเดียวกับภาษา JavaScript เพื่อรวบรวมแอปเนทีฟสำหรับ iOS, iPadOS และ Android จากซอร์สโค้ดเดียว
แต่ไม่ยอมรับองค์ประกอบ HTML สำหรับการแสดงผล เฉพาะส่วนประกอบเนทีฟอื่น ๆ เท่านั้นที่ใช้ได้ ดังนั้นแทนที่จะแสดงไฟล์ div> กับ p> และก อินพุต> องค์ประกอบด้วย JSX คุณจะแสดงไฟล์ ดู> กับ ข้อความ> และก TextInput>. สำหรับองค์ประกอบการจัดแต่งทรงผมคุณยังคงใช้ CSS และเค้าโครงถูกกำหนดผ่าน Flexbox
อินเทอร์เฟซผู้ใช้จะไม่แสดงใน DOM ของเบราว์เซอร์ แต่ใช้ไลบรารีอินเทอร์เฟซผู้ใช้ดั้งเดิมบน Android และ iOS ดังนั้นก ปุ่ม> ใน ReactNative จะกลายเป็นอินสแตนซ์ของ UIButton บน iOS และไฟล์ android.widget ปุ่ม คลาสบน Android; ไม่มีรันไทม์ของเว็บที่เกี่ยวข้องกับ React Native
อย่างไรก็ตามโค้ด JavaScript ทั้งหมดจะถูกเรียกใช้ในเครื่องเสมือน JavaScript บนอุปกรณ์ดังนั้นจึงไม่มีการแปลง JavaScript เป็นโค้ดเนทีฟจริงเมื่อคอมไพล์แอป มีชุด API ที่รู้จักกันดีสำหรับนักพัฒนาเว็บเช่น Fetch API, WebSockets และตัวจับเวลาของเบราว์เซอร์: setInterval และ requestAnimationFrame ความสามารถอื่น ๆ จะปรับใช้ในแพลตฟอร์มผ่าน API ที่กำหนดเองเช่นภาพเคลื่อนไหว
คุณสามารถเริ่มโครงการ React Native ได้อย่างรวดเร็วด้วย CLI ฟรีสองรายการ: Expo หรือ ReactNative CLI ขั้นสูงและเป็นทางการ หากคุณใช้ CLI อย่างเป็นทางการคุณต้องใช้ Android Studio เพื่อรวบรวมและทดสอบแอป Android และ Xcode เพื่อทำสิ่งเดียวกันบน iOS และ iPadOS ดังนั้นคุณจะต้องมีคอมพิวเตอร์ macOS สำหรับแพลตฟอร์มนั้น
React Native รวบรวมแอปที่มาพร้อมเครื่องสำหรับ iOS และ Android ซึ่งหมายความว่าการเผยแพร่แอปของคุณจะเป็นไปตามกฎเดียวกันกับแอปเนทีฟอื่น ๆ : ร้านค้าแอปสำหรับแอปสาธารณะการเผยแพร่ขององค์กรและการทดสอบอัลฟา / เบต้า โดยทั่วไปคุณไม่สามารถเผยแพร่แอปผ่านเบราว์เซอร์ได้แม้ว่าแพลตฟอร์ม React Native for Web และ Microsoft's React Native for Windows จะช่วยได้
NativeScript
จุดแข็งของ NativeScript
- เครื่องมือที่ดีสำหรับการเข้ารหัสและการทดสอบ
- แกลเลอรีแอพมากมายที่พร้อมให้เล่น
- API ของ Android และ iOS ทั้งหมดจะแสดงใน JS
จุดอ่อนของ NativeScript
- ชุมชนเล็ก ๆ
- ไม่สามารถใช้ส่วนประกอบ UI ของเว็บซ้ำได้
- ไม่มีการสนับสนุนเว็บเดสก์ท็อปหรือตอบสนอง
NativeScript ไม่เป็นที่รู้จักกันดีในนาม React Native แต่แข่งขันในสาขาเดียวกัน: แอป iOS และ Android ดั้งเดิมจาก JavaScript และกรอบงานเว็บ ช่วยให้คุณใช้ JavaScript หรือ TypeScript และไฟล์อินเทอร์เฟซผู้ใช้ XML เพื่อสร้างแอปเนทีฟ นอกจากนี้ยังรองรับ Angular และ Vue ทันทีดังนั้นจึงเป็นโซลูชันที่ยอดเยี่ยมสำหรับนักพัฒนาที่ใช้กับเฟรมเวิร์กเหล่านี้
ข้อดีของ NativeScript นั้นชัดเจนกว่าเมื่อคุณใช้ Angular หรือ Vue สำหรับ Angular คุณสร้างส่วนประกอบเดียวกับที่คุณคุ้นเคย แต่ใช้ XML แทน HTML สำหรับเทมเพลตรวมถึงการเชื่อมโยงข้อมูลทั้งหมด ใน XML แทนที่จะเป็นไฟล์ div> กับ p> และ img>คุณจะวางไฟล์ StackLayout> กับ ฉลาก> และ รูปภาพ> ส่วนประกอบ.
CSS และ Sass ได้รับการสนับสนุนด้วยสไตล์ที่คล้ายกันกับ CSS ในเบราว์เซอร์ การจัดการเส้นทางและเครือข่ายทำได้โดยการใช้บริการ Angular มาตรฐาน สำหรับ Vue มันคล้าย ๆ กัน คุณเขียนเทมเพลตใน XML แทนที่จะใช้ HTML ในแบบเดียวกัน แม่แบบ> องค์ประกอบในไฟล์. vue ของคุณ
NativeScript ประกอบด้วยคอลเลกชันของคอมโพเนนต์ที่แมปกับการควบคุมเนทีฟของ Android หรือ iOS ดังนั้นเมื่อคุณแสดงรายการหรือตัวเลือกมันจะเป็นแอปเนทีฟโดยใช้แนวคิดเดียวกับใน React Native
โค้ด JavaScript หรือ TypeScript ของคุณ (Transpiled) ถูกเรียกใช้งานในเครื่องเสมือน JavaScript บนอุปกรณ์ที่มีการเชื่อมโยงไปยัง / จากสภาพแวดล้อมดั้งเดิม ในบริดจ์นั้น API ดั้งเดิมทั้งหมดจาก Android หรือ iOS / iPadOS จะถูกเปิดเผยดังนั้นแม้จะมีการเข้าถึง API ข้ามแพลตฟอร์ม แต่เราสามารถสร้างอินสแตนซ์หรือเรียกโค้ด Java หรือ Objective-C ใด ๆ จาก JavaScript / TypeScript และ NativeScript จะจัดประเภทข้อมูล
NativeScript มีการสนับสนุนที่ดีเยี่ยมสำหรับการใช้เครื่องมือซึ่งรวมถึงปลั๊กอิน VS code, CLI, ระบบทดสอบการโหลดซ้ำและแอป NativeScript Playground ดังนั้นคุณจึงไม่จำเป็นต้องติดตั้งการอ้างอิงทั้งหมดในขณะทดสอบรวมถึงบริการเพิ่มเติมอีกมากมายเช่นออนไลน์ สนามเด็กเล่น.
สุดท้าย NativeScript จะรวบรวมเฉพาะแอปสำหรับ Android และ iOS ที่สามารถติดตั้งได้จากช่องทางการจัดจำหน่ายอย่างเป็นทางการและร้านค้าแอปหากคุณปฏิบัติตามกฎการจัดจำหน่ายสำหรับองค์กรและการทดสอบอัลฟา / เบต้า โดยปกติแล้วจะไม่มีวิธีเผยแพร่แอปจากเบราว์เซอร์และไม่มีโซลูชันสำหรับแอปเดสก์ท็อปสำหรับแพลตฟอร์มนี้
บทความนี้เผยแพร่ครั้งแรกในปีพ. ศ ฉบับที่ 325 ของสุทธินิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์ ซื้อ ฉบับที่ 325 หรือ ติดตาม สุทธิ
เข้าร่วมกับเราในเดือนเมษายน 2020 กับกลุ่มผลิตภัณฑ์ซูเปอร์สตาร์ JavaScript ของเราที่ GenerateJS - การประชุมช่วยให้คุณสร้าง JavaScript ได้ดีขึ้น จองด่วนที่generateconf.com
