Cordova Frameworks: Ionic กับ Framework7

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

ตั้งแต่นั้นมา เทคโนโลยีก็มีขึ้น ๆ ลง ๆ แม้ว่าการพัฒนาจะง่าย แต่แอพเหล่านี้ค่อนข้างแตกต่างจากแอพทั่วไป Vanilla HTML และ JavaScript บนเบราว์เซอร์มีเป้าหมายที่เบราว์เซอร์ และไม่มีวิธีใดที่จะโยกย้ายไปยังฟิลด์ใหม่นี้ได้อย่างไม่มีที่ติ

จนถึงทุกวันนี้ประเด็นหลักยังคงเป็น:

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

เหตุใดจึงต้องใช้กรอบงานสำหรับแอพ Cordova

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

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

เกี่ยวกับ Ionic Framework

Ionic ได้รับการพัฒนาโดย Drifty Co. ในปี 2555 และอิงตาม Angular ตั้งแต่นั้นมาก็มีการพัฒนาอย่างต่อเนื่อง ได้รับการลงทุนจำนวนมาก และชุมชนนักพัฒนาที่แข็งแกร่ง เว็บไซต์อย่างเป็นทางการอ้างว่ามีการพัฒนาแอพนับล้านแอพ

ในขณะที่เขียนบทความนี้ เวอร์ชันล่าสุดคือ Ionic 3 ที่อิงจาก Angular 5 Ionic 4 ซึ่งมีเป้าหมายเพื่อความยืดหยุ่นและความเป็นอิสระจาก Angular อยู่ในช่วงเบต้าในช่วงต้น

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

Ionic CLI

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

Lab และ DevApp

Lab เป็นบริการขนาดเล็กที่มีประโยชน์อย่างยิ่งที่ช่วยให้คุณเลียนแบบการทำงานของแอปพลิเคชันบนแพลตฟอร์มต่างๆ ในเบราว์เซอร์ของนักพัฒนา Ionic DevApp ช่วยให้คุณปรับใช้แอปกับอุปกรณ์จริงได้อย่างรวดเร็ว

การบรรจุ การปรับใช้ และการตรวจสอบ

Ionic มาพร้อมกับชุดบริการเว็บที่ช่วยลดความยุ่งยากและเพิ่มความเร็วในการสร้าง แก้จุดบกพร่อง ทดสอบ และอัปเดตแอปพลิเคชันสำหรับผู้ทดสอบและผู้ใช้

แผนการของ Ionic เปลี่ยนแปลงบ่อยแม้ว่า บริการบางอย่างที่มีอยู่ก่อนหน้านี้ เช่น Auth, Push, Analytics และ View ถูกปิด ทำให้เกิดเสียงโห่ร้องจากสมาชิก

ผู้สร้าง

นี่คือตัวแก้ไขกราฟิกแบบลากและวางของ Ionic สำหรับการพัฒนาส่วนต่อประสานการทำงาน

เกี่ยวกับ Framework7

กรอบนี้ได้รับการพัฒนาในปี 2014 โดยสตูดิโอรัสเซีย iDangero ในท้ายที่สุด นักพัฒนาซอฟต์แวร์รายหนึ่งได้ทำงานในโครงการนี้ ไม่รวมผู้มีส่วนร่วมรายย่อยหลายรายในที่เก็บ GitHub

ในขั้นต้น Framework7 ประกอบด้วยชุดของส่วนประกอบ UI ในรูปแบบของ iOS 7 ที่เพิ่งเปิดตัว ซึ่งได้รับชื่อมา ต่อมา มีการเพิ่มธีม Android และทั้งสองธีมได้รับการอัปเดตสำหรับ iOS และ Material Design ล่าสุด

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

การสนับสนุนและตัวอย่างของ Framework7 โดยใช้ Vue.js มีมาตั้งแต่ v1 และ v3 ยังรองรับ React ด้วย นี่คือสิ่งที่อาจทำให้โครงการสามารถแข่งขันกับ Ionic ที่ได้รับความนิยมมากขึ้นซึ่งมีเฉพาะ Angular และ TypeScript เท่านั้น

การติดตั้งและการเปิดตัวครั้งแรก

อิออน

ในการเริ่มทำงานกับ Ionic ให้ติดตั้งด้วย NPM:

 npm install -g ionic

จากนั้นเลือกเทมเพลตสำหรับแอปพลิเคชันในอนาคต เว็บไซต์อย่างเป็นทางการของ Ionic มีเทมเพลตหลายแบบ หรือคุณสามารถเลือกเทมเพลตเปล่าเพื่อสร้างแอปพลิเคชันตั้งแต่ต้นด้วย ionic start myApp blank

มาเลือกการออกแบบที่เรียบง่ายกันเถอะ ดำเนินการคำสั่งต่อไปนี้:

 ionic start Todo tabs

ตอบ “ใช่” เมื่อโปรแกรมติดตั้งถามว่า “คุณต้องการรวมแอพใหม่ของคุณกับ Cordova เพื่อกำหนดเป้าหมาย iOS และ Android ดั้งเดิมหรือไม่” การดำเนินการนี้จะรวมแอปพลิเคชันกับ Cordova โดยอัตโนมัติและเตรียมพร้อมสำหรับการปรับใช้บนแพลตฟอร์มมือถือ

ในขั้นตอนต่อไป โปรแกรมติดตั้งจะเสนอให้เชื่อมต่อเรากับ Ionic Pro SDK ตอบ “ไม่” ในตอนนี้เพื่อให้ตัวอย่างง่าย ๆ

ติดตั้งแพ็คเกจ @ionic/lab เพิ่มเติมเพื่อรับ UI การดีบักที่สะดวก—เลียนแบบในเบราว์เซอร์ของอุปกรณ์ iOS, Android และ Windows:

 cd Todo npm i --save-dev @ionic/lab

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

 ionic lab

ด้วยเหตุนี้ คุณจะได้รับที่อยู่ที่มีประโยชน์หลายประการ:

บริการดีบัก Ionic Lab เปิดตัวบนพอร์ต 8200 แอปพลิเคชั่นทำงานบนพอร์ต 8100 และลิงก์ เปิดแบบเต็มหน้าจอ จาก Ionic Lab นำไปสู่ที่นั่น หน้าต่างเบราว์เซอร์ที่มี Ionic Lab ทำงานอยู่จะเปิดขึ้นโดยอัตโนมัติ

นอกจากนี้ Ionic ยังให้ที่อยู่แอปพลิเคชันใน เครือข่ายท้องถิ่น สิ่งนี้มีประโยชน์อย่างยิ่ง เนื่องจากช่วยให้คุณสามารถเปิดแอปพลิเคชันในเบราว์เซอร์ของอุปกรณ์มือถือ ตราบใดที่อุปกรณ์อยู่ในเครือข่ายท้องถิ่น (เช่น ผ่าน Wi-Fi) นอกจากนี้ คุณยังสามารถใช้ปุ่ม " เพิ่มในหน้าจอ หลัก" เพื่อเปิดแอปพลิเคชันอีกครั้งในโหมดเต็มหน้าจอได้ นี่เป็นวิธีที่เร็วที่สุดในการทดสอบแอปพลิเคชันของคุณบนอุปกรณ์

อีกวิธีหนึ่งคือแอปพลิเคชัน Ionic DevApp ซึ่งสามารถติดตั้งบนอุปกรณ์มือถือและให้การเข้าถึงแอปพลิเคชันผ่านเครือข่ายท้องถิ่น มันให้การสนับสนุนปลั๊กอิน (Ionic Native) สำหรับการเข้าถึงฟังก์ชั่นอุปกรณ์ดั้งเดิมและการแสดงบันทึก

Framework7

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

คล้ายกับเทมเพลต Tabs ใน Ionic F7 เสนอ Tabbed Views แต่เราจะใช้เทมเพลตที่ใช้งานได้ดีกว่าซึ่งรวม Framework7 เข้ากับ React เพิ่มการรองรับ React ใน v3. สำหรับสิ่งนั้น ให้โคลนที่เก็บเทมเพลต:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

สลับไปที่โฟลเดอร์โปรเจ็กต์ ดึงข้อมูลการพึ่งพา และเริ่มกระบวนการ:

 cd Todo npm install npm start

ผลการดำเนินการคล้ายกับ Ionic: คุณจะได้รับลิงค์ในเครื่องและลิงค์ภายในเครือข่ายของคุณเพื่อการเข้าถึงทันทีจากอุปกรณ์จริง:

ตอนนี้คุณสามารถเปิด http://localhost:3000/ ในเบราว์เซอร์ได้แล้ว Framework7 ไม่ได้รวมโปรแกรมจำลองอุปกรณ์ในตัว ลองใช้โหมดอุปกรณ์ของ Chrome DevTools เพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน:

อย่างที่คุณเห็น Framework7 นั้นคล้ายกับ Ionic โดยมี iOS และ Material Design เป็นสองธีมมาตรฐาน ธีมถูกเลือกตามแพลตฟอร์ม

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

การตั้งค่า Cordova

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

อิออน

ประสบการณ์แสดงให้เห็นว่าเพื่อแก้ปัญหา Ionic ส่วนใหญ่ได้สำเร็จ การดีบักบนเบราว์เซอร์ด้วยการทดสอบอุปกรณ์จริงเป็นครั้งคราวก็เพียงพอแล้ว

แม้ว่าคุณจะยอมรับการผสานรวมสำหรับ iOS และ Android และ Ionic กำลังเตรียมการตั้งค่าที่จำเป็นในไฟล์ config.xml และทรัพยากรในโฟลเดอร์ resources คุณยังต้องเชื่อมต่อทั้งสองแพลตฟอร์มกับแอปพลิเคชันด้วย Cordova:

 cordova platform add ios cordova platform add android

ตอนนี้คุณสามารถเริ่มแอพ Cordova ในอีมูเลเตอร์ "ของจริง" ติดตั้งบนอุปกรณ์มือถือ และส่งไปยัง App Store และ Google Play

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

 cordova run ios

เป็นไปได้มากว่า Xcode Command Line Tools จะแจ้งให้คุณทราบเกี่ยวกับความจำเป็นในการตั้งค่าใบรับรองสำหรับนักพัฒนา คุณจะต้องเปิดโครงการใน Xcode และดำเนินการตามที่จำเป็น ต้องทำเพียงครั้งเดียว จากนั้นคุณจะสามารถเรียกใช้แอปพลิเคชันด้วย Cordova CLI ได้

บางครั้ง iOS Simulator ไม่เปิดโดยอัตโนมัติ ในกรณีนี้ ให้เริ่มด้วยตนเอง เช่น ผ่าน Spotlight

สามารถเริ่มโปรแกรมจำลอง Android ได้ในลักษณะเดียวกัน:

 cordova run android 

โปรดทราบว่าคำสั่ง cordova run เริ่มต้นและติดตั้งแอปพลิเคชันที่ คอมไพล์แล้ว ซึ่งไม่ได้ใช้เซิร์ฟเวอร์ห้องปฏิบัติการ ionic serve / ionic lab ดังนั้น Live Reload จะไม่ทำงาน หากต้องการพัฒนาและแก้ปัญหาแอปพลิเคชันแบบสด ให้ใช้เบราว์เซอร์ในเครือข่ายท้องถิ่นหรือติดตั้งแอปพลิเคชัน Ionic DevApp

ประสบการณ์แสดงให้เห็นว่าเพื่อแก้ปัญหา Ionic ส่วนใหญ่ได้สำเร็จ การดีบักบนเบราว์เซอร์ด้วยการทดสอบอุปกรณ์จริงเป็นครั้งคราวก็เพียงพอแล้ว

Framework7

เทมเพลต “React” Framework7 ที่เลือกไว้ก่อนหน้านี้ไม่มีการตั้งค่าอัตโนมัติสำหรับ Cordova ดังนั้น คุณจะต้องเพิ่มแพลตฟอร์มด้วยตนเอง สร้างโครงการ Cordova ในโฟลเดอร์ย่อย cordova ของโฟลเดอร์โครงการของคุณ:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

เทมเพลตนี้ใช้แอป Create React ดังนั้นในการรันโปรเจ็กต์ที่คอมไพล์ในสภาพแวดล้อม Cordova คุณต้องเพิ่ม "homepage": "." การตั้งค่าเป็นไฟล์ . ./package.json ไฟล์นี้สามารถพบได้ที่ระดับรูทของโปรเจ็กต์:

รวบรวมโครงการ Framework7 และคัดลอกผลลัพธ์ไปยังโครงการ Cordova:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

ตอนนี้คุณสามารถเริ่มแอปพลิเคชันบนอุปกรณ์หรือโปรแกรมจำลอง:

 cd cordova/ cordova run ios 

คุณทำเสร็จแล้ว! ขอให้เราหวังว่า Framework7 จะเป็นไปตามมาตรฐานการพัฒนาของ Ionic และความสะดวกในการตั้งค่าเริ่มต้น

การสร้างรายการงาน

อิออน

มาเริ่มสร้างแอปพลิเคชันกัน! เนื่องจากเป็นแอปพลิเคชัน To Do หน้าหลัก (ไฟล์ src/pages/home/home.html ) จะมีรายการงานที่สามารถ "ทำเครื่องหมายว่าเสร็จสิ้น" และ "เพิ่มใหม่"

Ionic มีส่วนประกอบ <ion-list> และ <ion-item> สำหรับรายการ ขั้นแรก ให้ลบคุณสมบัติ padding ออกจากองค์ประกอบ <ion-content> เพื่อทำให้รายการกว้างขึ้น ในรายการ วางข้อความโดยใช้องค์ประกอบ <ion-label> และเพิ่มองค์ประกอบ <ion-toggle> เพื่อทำเครื่องหมายงานที่เสร็จสมบูรณ์

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

กลับไปที่แท็บเบราว์เซอร์โดยที่บริการ Ionic Lab ทำงานอยู่ แอปพลิเคชันได้รับการอัปเดตโดยอัตโนมัติ:

ยอดเยี่ยม! ตอนนี้ย้ายข้อมูลงานไปยังวัตถุ JS และตั้งค่าการนำเสนอ HTML ด้วย Angular ไปที่ไฟล์ src/pages/home/home.ts และสร้างคุณสมบัติงานของอินสแตนซ์คลาส HomePage :

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

ตอนนี้คุณสามารถอ้างถึงอาร์เรย์ tasks ในโค้ด HTML ใช้โครงสร้าง *ngFor Angular เพื่อสร้างองค์ประกอบรายการซ้ำ ๆ สำหรับแต่ละองค์ประกอบอาร์เรย์ รหัสมีขนาดเล็กลง:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

ที่เหลือก็แค่เพิ่มปุ่มเพื่อสร้างงานใหม่ไปที่ส่วนหัวของหน้า ในการดำเนินการนี้ ให้ใช้ส่วนประกอบ <ion-navbar> , <ion-buttons> , <button> และ <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

หมายเหตุ (click)="addTask()" การสร้างเชิงมุม อย่างที่คุณเดาได้ มันเพิ่มตัวจัดการการแตะไปที่ปุ่มและเรียก addTask() สำหรับคอมโพเนนต์ของเรา ลองใช้วิธีนี้เพื่อเปิดหน้าต่างโต้ตอบชื่องานเมื่อแตะปุ่ม

สำหรับสิ่งนี้ คุณต้องมีส่วนประกอบ AlertController Ionic หากต้องการใช้ส่วนประกอบนี้ ให้นำเข้าประเภท:

 import { AlertController } from 'ionic-angular';

และระบุในรายการพารามิเตอร์ตัวสร้างสำหรับหน้า:

 constructor(public alertCtrl: AlertController) { }

ตอนนี้คุณสามารถเรียกมันใน addTask() ตั้งค่าหลังคอนโทรลเลอร์ คุณสามารถสร้างและแสดงหน้าต่างโต้ตอบด้วยการโทรต่อไปนี้:

 this.alertCtrl .create(/* options */) .present();

ระบุส่วนหัวของข้อความ คำอธิบายของฟิลด์ และปุ่มสองปุ่มในอ็อบเจ็กต์ options ปุ่ม "ตกลง" จะเพิ่มงานใหม่ให้กับอาร์เรย์ tasks :

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

หลังจากที่คุณเพิ่มองค์ประกอบลงในอาร์เรย์ this.tasks แล้ว ส่วนประกอบจะถูกสร้างขึ้นใหม่โดยโต้ตอบและงานใหม่จะแสดงในรายการ

รหัสเต็มหน้ามีลักษณะดังนี้:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

ติดตั้งแอปพลิเคชันบนอุปกรณ์อีกครั้ง:

 cordova run ios

แค่นั้นแหละ! ไม่ยากขนาดนั้นใช่ไหม ตอนนี้ ลองทำเช่นเดียวกันกับ Framework7

Framework7

เทมเพลต Framework7 สร้างขึ้นเพื่อแสดงความสามารถของคอมโพเนนต์ทั้งหมด ดังนั้นคุณต้องปล่อยให้เฉพาะหน้า src/components/pages/HomePage.jsx ในไฟล์ src/components/App.jsx และ src/routes.js ล้างเนื้อหา และลบความคิดเห็นเกี่ยวกับโค้ดพิเศษ

ตอนนี้สร้างรายการงาน Framework7 จัดเตรียมคอมโพเนนต์ <List simple-list> และ <ListItem> สำหรับสิ่งนี้ ในการวางสวิตช์การทำงานให้เสร็จสิ้น ให้เพิ่มคอมโพเนนต์ <Toggle slot="after"/> อย่าลืมนำเข้าส่วนประกอบทั้งหมดเหล่านี้จากโมดูล framework7-react ตอนนี้โค้ดเพจมีลักษณะดังนี้:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

และตัวแอปพลิเคชันเองก็มีลักษณะดังนี้:

เริ่มต้นได้ดีทีเดียว ลองย้ายข้อมูลคงที่ออกจากโค้ด HTML อีกครั้ง สำหรับสิ่งนี้ ให้ใช้ส่วนประกอบอัจฉริยะแทนส่วนประกอบไร้สัญชาติที่เรามี นำเข้าคลาสนามธรรม Component จาก React:

 import React, { Component } from 'react';

และเขียนอาร์เรย์งานไปยังอินสแตนซ์ตัวแปร state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

แอปพลิเคชันจริงมีแนวโน้มที่จะใช้โฟลว์ข้อมูลที่เป็นนามธรรมมากขึ้น—เช่น Redux หรือ MobX—แต่สำหรับตัวอย่างเล็กๆ เราจะคงสถานะองค์ประกอบภายในไว้

ตอนนี้คุณสามารถใช้ไวยากรณ์ JSX เพื่อสร้างองค์ประกอบรายการซ้ำ ๆ สำหรับแต่ละงานในอาร์เรย์:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

ที่เหลือก็แค่เพิ่มส่วนหัวด้วยปุ่มเพื่อสร้างงานใหม่อีกครั้ง องค์ประกอบ <Navbar> มีอยู่แล้ว ดังนั้นให้เพิ่ม <Link iconOnly> ไปยังองค์ประกอบ <NavRight> :

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

ใน React คุณเพิ่มตัวจัดการการแตะโดยใช้คุณสมบัติ onClick และตั้งค่าตัวชี้การโทรกลับในนั้น ใช้ตัวจัดการเพื่อแสดงกล่องโต้ตอบชื่องาน

แต่ละองค์ประกอบใน Framework7 มีสิทธิ์เข้าถึงอินสแตนซ์ของแอปพลิเคชันผ่านคุณสมบัติ this.$f7 คุณสามารถใช้ dialog.prompt() วิธีการนี้ ก่อนปิดไดอะล็อก ให้เรียก setState() ของส่วนประกอบ React และส่งสำเนาของอาร์เรย์ก่อนหน้าด้วยองค์ประกอบใหม่ การดำเนินการนี้จะอัปเดตรายการในเชิงโต้ตอบ

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

นี่คือรหัสส่วนประกอบแบบเต็ม:

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

ตรวจสอบผลลัพธ์:

สิ่งที่เหลืออยู่คือการสร้างใหม่และปรับใช้กับอุปกรณ์:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

เสร็จแล้ว!

รหัสสุดท้ายสำหรับทั้งสองโครงการนี้มีอยู่ใน GitHub:

• ionic-todo-app
• framework7-react-todo-app

ผล

ตอนนี้คุณได้เห็นบทช่วยสอนแบบเต็มของเฟรมเวิร์ก Cordova แต่ละอันแล้ว Framework7 เทียบกับ Ionic ได้อย่างไร

ติดตั้งเบื้องต้น

Ionic นั้นติดตั้งง่ายกว่ามากด้วย CLI ในขณะที่ F7 ต้องใช้เวลามากขึ้นในการเลือกและตั้งค่าเทมเพลตหรือการติดตั้งทีละขั้นตอนตั้งแต่เริ่มต้น

ความหลากหลายขององค์ประกอบ

เฟรมเวิร์กทั้งสองมีชุดส่วนประกอบมาตรฐานที่สร้างขึ้นอย่างยอดเยี่ยมในสองธีม: iOS และดีไซน์ Material Ionic ยังมีส่วนประกอบเหล่านี้ในธีม Windows และตลาดธีมผู้ใช้ขนาดมหึมา

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

Framework7 ให้รายการเพิ่มเติมของส่วนประกอบที่ซับซ้อนและมีประโยชน์มากขึ้น เช่น Smart Select , เติมข้อความอัตโนมัติ , ปฏิทิน , รายชื่อผู้ติดต่อ , หน้าจอเข้าสู่ระบบ , ข้อความ และ เบราว์เซอร์รูปภาพ ในทางกลับกัน Ionic มีส่วนประกอบที่ผู้ใช้สร้างขึ้นให้เลือกมากมาย

ระบบนิเวศและชุมชน

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

Framework7 ดีกว่าที่เคย แต่ขาดการสนับสนุนจากชุมชนอย่างมาก

การพึ่งพาบุคคลที่สาม

Framework7 มีความยืดหยุ่นมากกว่าในแง่ของโซลูชันของบริษัทอื่น จุดแข็งที่ใหญ่ที่สุดคือความสามารถในการเลือกว่าคุณใช้ Vue หรือ React ในโครงการ เช่นเดียวกับ Webpack หรือ Browserify Ionic ขึ้นอยู่กับ Angular และต้องการความรู้ (และ TypeScript ด้วย)

อย่างไรก็ตาม เมื่อเร็ว ๆ นี้ นักพัฒนา Ionic ได้ประกาศเปิดตัว Ionic 4 beta ใหม่ โดยอ้างว่าเป็น UI-framework-agnostic อย่างสมบูรณ์ ไม่มีการพึ่งพาเชิงมุมอีกต่อไปหากคุณไม่ต้องการ

Cordova Frameworks: ยังคงเป็นวิธีที่มีประสิทธิภาพในการพัฒนาแอพมือถือข้ามแพลตฟอร์ม

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