มือถือ

9 ข้อผิดพลาดที่พบบ่อยที่สุดที่นักพัฒนาไอออนิกทำ

บทนำ

ไอออนิก ได้รับประมาณสองปีแล้ว เป็นชุดเครื่องมือที่ยอดเยี่ยมสำหรับการพัฒนาแอปพลิเคชันแบบไฮบริดโดยใช้ AngularJS . Ionic เป็นที่นิยมอย่างมากในขณะนี้โดยมีแอปพลิเคชันมากกว่าหนึ่งล้านแอปพลิเคชันที่สร้างขึ้นและมีชุมชนที่เติบโตขึ้นเรื่อย ๆ นักพัฒนา .

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

เมื่ออ่านข้อผิดพลาดทั่วไปต่อไปนี้คุณจะมีกุญแจสำคัญในการหลีกเลี่ยงปัญหาพื้นฐานและสร้างแอปพลิเคชันที่มีประสิทธิภาพและปรับขนาดได้ด้วย Ionic

ข้อผิดพลาดทั่วไป # 1: การลืมเปิดใช้งานการเลื่อนแบบเนทีฟ

การเลื่อนแบบดั้งเดิม อนุญาตให้ Ionic ฟังเหตุการณ์การเลื่อนบน Webview ที่รองรับ มันทำ ดึงเพื่อรีเฟรช , การเรียงลำดับรายการ และ เลื่อนไม่มีที่สิ้นสุด เป็นไปได้โดยไม่ต้องเลื่อน JavaScript ซึ่งสร้างขึ้นในช่วงเวลาที่เบราว์เซอร์ไม่มีเหตุการณ์การเลื่อนที่เหมาะสม

Native Scrolling จะเปิดใช้งานโดยค่าเริ่มต้นบน Android ตั้งแต่ Ionic 1.2 (ธันวาคม 2015) เป็นการปรับปรุงประสิทธิภาพและประสบการณ์ของผู้ใช้อย่างมากเนื่องจากช่วยให้การเลื่อนราบรื่นเนื่องจากเหตุการณ์แบบอะซิงโครนัส

ขออภัยเนื่องจากไม่มีเหตุการณ์ที่เหมาะสมบน iOS จึงยังไม่ได้เปิดใช้งานการเลื่อนแบบเนทีฟสำหรับแพลตฟอร์มนั้น

หากคุณใช้เวอร์ชันก่อนหน้า 1.2 คุณสามารถเปิดใช้งาน Native Scrolling สำหรับ Android โดยใช้ $ionicConfigProvider:

// Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

คุณยังสามารถเปิดหรือปิดใช้งาน Native Scrolling บนเพจใดก็ได้โดยใช้ overflow-scroll คำสั่งใด ๆ ion-content:

ionic platform add ios

โปรดทราบว่าขออภัย คอลเลกชันซ้ำ ซึ่งช่วยให้แอปพลิเคชันของคุณแสดงรายการจำนวนมากไม่สามารถครอบคลุมได้โดยการเลื่อนแบบเนทีฟ

ข้อผิดพลาดทั่วไป # 2: ไม่ใช้ Ionic CLI เพื่อติดตั้งแพลตฟอร์มและปลั๊กอิน

ไอออนิก CLI เพิ่มคุณสมบัติให้กับไฟล์ คอร์โดวา CLI . การคงอยู่ของแพลตฟอร์มและปลั๊กอินเป็นคุณสมบัติที่ยอดเยี่ยมที่ Ionic CLI เพิ่มเข้ามา

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

เมื่อใช้ Ionic CLI เพื่อติดตั้งแพลตฟอร์ม ionic plugin add camera และปลั๊กอิน package.json, cordovaPlatforms ไฟล์ได้รับการแก้ไขอย่างเหมาะสม

แพลตฟอร์มและปลั๊กอินจะถูกเก็บไว้ใน cordovaPlugins และ 'cordovaPlugins': [ ' [email protected] ', ' [email protected] ', ' [email protected] ' ], 'cordovaPlatforms': [ 'android', 'ios' ] คุณสมบัติ:

ionic state restore

ตอนนี้นักพัฒนาคนอื่น ๆ สามารถซิงค์ได้ง่ายเมื่อดึงรหัสใหม่เพียงแค่เรียกใช้ $watch เมื่อจำเป็น (เพิ่มเติมลบหรืออัปเดตเวอร์ชัน)

ข้อผิดพลาดทั่วไป # 3: ประสิทธิภาพการคิดมาจากนอกกรอบ

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

ตัวอย่างที่สมบูรณ์แบบคือ แอป Sworkit ที่สร้างขึ้นด้วย Ionic มีฐานผู้ใช้ 9 ล้านคนดาวน์โหลด 7 ล้านครั้งและมีค่าเฉลี่ย 4.5 ดาวบน Google Play

หากคุณต้องการใช้ AngularJS ให้ได้ประโยชน์สูงสุดนี่คือบางสิ่งที่คุณควรเรียนรู้ก่อนเริ่มโครงการของคุณ

$ ชม

ผู้ชมใช้เพื่อฟังการเปลี่ยนแปลงขอบเขตใน AngularJS โดยทั่วไปมีสี่ประเภทคือ $watch (normal): $watch (deep), $watchCollection, $watchGroup และ $watch.

แต่ละคนมีความแตกต่างกันและการเลือกสิ่งที่เหมาะสมสามารถสร้างความแตกต่างอย่างมากในแง่ของประสิทธิภาพ

$ watch (ปกติ)

โดยใช้ปกติ $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); จะตรวจสอบคุณสมบัติของวัตถุหรือรายการอาร์เรย์ที่มีอยู่เท่านั้น การเปลี่ยนแปลงตื้น ๆ เช่นการเพิ่มคุณสมบัติ Object หรือพุชรายการใหม่ลงใน Array จะไม่ได้รับการดูแล

$watch

$ ชม (ลึก)

ลึก $watch ดูแลการเปลี่ยนแปลงตื้น ๆ และการเปลี่ยนแปลงในระดับลึกเช่นคุณสมบัติ Nested Object ด้วยสิ่งนี้ $watch คุณจะไม่พลาดการปรับเปลี่ยนใด ๆ อย่างไรก็ตามการใช้ deep $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true); มีผลกระทบด้านประสิทธิภาพ ฉันขอแนะนำให้ใช้ด้วยความระมัดระวัง

$watchCollection

$ watchCollection

$watch สามารถพิจารณาได้ระหว่างปกติ $watch และลึก $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); . นอกจากนี้ยังทำงานเปรียบเทียบการอ้างอิงวัตถุ แต่มีข้อดีคือการดูคุณสมบัติของวัตถุของคุณแบบตื้น ๆ โดยการเพิ่มคุณสมบัติ Object หรือผลักดันรายการใหม่ลงใน Array

html5 index.html หลังจาก deviceread 'ไม่ได้กำหนดอุปกรณ์ผิดพลาด'

$watchGroup

$ watchGroup

แนะนำใน AngularJS 1.3, $watchGroup ช่วยให้ดูหลาย ๆ นิพจน์พร้อมกัน

ในขณะที่ $watch อาจไม่ช่วยปรับปรุงประสิทธิภาพแอปพลิเคชันของคุณเมื่อเทียบกับ $scope.$watchGroup([ 'watchExpression', 'watchExpression2', 'watchExpression3' ], function(newVals, oldVals) { if (newVals[0]) { // watchExpression has changed. } if (newVals[1]) { // watchExpression2 has changed. } if (newVals[2]) { // watchExpression3 has changed. } }); แบบปกติ แต่ก็มีข้อได้เปรียบที่จะสังเคราะห์มากขึ้นเมื่อดูนิพจน์ขอบเขตต่างๆ

track by

ติดตามโดย

ng-repeat ใช้เพื่อหลีกเลี่ยงการจัดการ DOM ที่ไร้ประโยชน์เมื่อใช้ ng-repeat หากรอบการสรุปข้อมูลพบว่ามีการเปลี่ยนแปลงอย่างน้อยหนึ่งองค์ประกอบในคอลเล็กชันของคุณ track by จะแสดงองค์ประกอบทั้งหมดอีกครั้ง การจัดการ DOM มีผลต่อประสิทธิภาพของแอปพลิเคชันเสมอดังนั้นยิ่งคุณมีน้อยก็ยิ่งดี

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

track by

เพียงหลีกเลี่ยงการใช้ collection-repeat บน ::.

การผูกครั้งเดียว

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

โดยทั่วไปใช้การผูกครั้งเดียว $watchers ในนิพจน์จะลบออกจาก

{{::user.firstName}}

รายการเมื่อเติมข้อมูล หมายความว่านิพจน์จะไม่สามารถอัปเดตได้แม้ว่าข้อมูลจะเปลี่ยนไปก็ตาม

::

คำแนะนำของเราคือการดูทุกมุมมองของแอปพลิเคชันของคุณและคิดว่าอะไรสามารถอัปเดตได้หรือไม่ได้และใช้การผูกครั้งเดียว collection-repeat ตามนั้น มันจะช่วยบรรเทาวงจรการย่อยได้มาก

โปรดทราบว่าน่าเสียดายที่ไม่สามารถใช้การผูกครั้งเดียวใน View Cache ได้เนื่องจากรายการที่แสดงบนหน้าจอจะเปลี่ยนไปในการเลื่อน

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเคล็ดลับและเทคนิคประสิทธิภาพ AngularJS และ Ionic ฉันขอแนะนำให้อ่านไฟล์ แผ่นโกงประสิทธิภาพ Ultimate AngularJS และ Ionic .

ข้อผิดพลาดทั่วไป # 4: มีความสับสนกับ `// Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);` ตรรกะ

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

ด้วย Ionic จะมีการแคช 10 เพจโดยค่าเริ่มต้นและสามารถเปลี่ยนแปลงได้ทั่วโลกหรือต่อแพลตฟอร์ม

$scope.$on('$ionicView.loaded', function(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', function(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', function(){}); $scope.$on('$ionicView.afterLeave', function(){});

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

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

สร้างภาษาโปรแกรมของคุณเอง

ในเงื่อนไขเหล่านี้คุณควรอัปเดตข้อมูลบนหน้าอย่างไร?

ขอแนะนำ Controller Life Cycle Events

เมื่อเทียบกับ AngularJS Ionic มีเหตุการณ์วงจรชีวิตมากมาย:

$ionicView.loaded

เหตุการณ์เหล่านี้จำเป็นหากคุณต้องการควบคุมแคชมุมมอง

$viewContentLoaded ตัวอย่างเช่นเหตุการณ์ถูกทริกเกอร์ในครั้งแรกที่โหลดมุมมอง เหตุการณ์นี้จะไม่ถูกทริกเกอร์อีกต่อไปในขณะที่มุมมองนี้ถูกแคชแม้ว่าผู้ใช้จะกลับมาที่มุมมองนั้น โดยทั่วไปเป็นเหตุการณ์ที่คุณจะใช้เพื่อเริ่มต้นตัวแปรแบบเดียวกับที่คุณทำกับ $ionicView.enter เหตุการณ์ใน AngularJS

หากคุณต้องการดึงข้อมูลทุกครั้งที่คุณเข้าสู่มุมมองแคชหรือไม่คุณสามารถใช้ ionic plugin add cordova-plugin-crosswalk-webview เหตุการณ์.

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

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

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

ข้อผิดพลาดทั่วไป # 5: ไม่รู้เกี่ยวกับ Crosswalk สำหรับ Android

Android ทุกเวอร์ชันใช้ WebView ที่แตกต่างกัน (เบราว์เซอร์ที่เรียกใช้แอปพลิเคชันของคุณ) ประสิทธิภาพแตกต่างกันไปในอุปกรณ์ต่างๆและอาจไม่ดีในอุปกรณ์ Android รุ่นเก่า เพื่อให้ได้รับประสบการณ์เดียวกันกับความลื่นไหลและการตอบสนองบนอุปกรณ์ Android ทุกเครื่องคุณสามารถติดตั้ง ทางม้าลาย . โดยพื้นฐานแล้วจะฝังเบราว์เซอร์ Chromium ล่าสุดลงในแอปพลิเคชันของคุณและเพิ่มประมาณ 20Mb ต่อ APK ทั้ง ARM และ X86

สามารถติดตั้ง Crosswalk ได้โดยใช้ Ionic CLI หรือ Cordova CLI:

ionic platform add ios android

ข้อผิดพลาดทั่วไป # 6: พยายามเรียกใช้ปลั๊กอิน Cordova ภายในเบราว์เซอร์

นักพัฒนาส่วนใหญ่ที่ใช้ Ionic ต้องการให้แอปทำงานบน iOS และ Android หลังจากเพิ่มแพลตฟอร์ม ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts และปลั๊กอินบางตัว adb devices ข้อผิดพลาดมือใหม่คือคิดว่าคุณสามารถทดสอบได้ในเบราว์เซอร์ คุณทำได้ แต่หลังจากที่คุณติดตั้งแพลตฟอร์มเบราว์เซอร์ที่เหมาะสมเท่านั้น โปรดทราบว่ามันใช้ไม่ได้กับปลั๊กอินทั้งหมด

ปลั๊กอินของ Cordova มีไว้เพื่อโต้ตอบกับ API ของอุปกรณ์ดั้งเดิมผ่าน JavaScript ปลั๊กอินผู้ติดต่อหรือปลั๊กอินการวางแนวอุปกรณ์จะทำงานบนอุปกรณ์เท่านั้น

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

Remote Debug บน Android

เสียบอุปกรณ์ของคุณและตรวจสอบให้แน่ใจว่าคอมพิวเตอร์ของคุณตรวจพบอย่างถูกต้องโดยเรียกใช้ ionic run android (ต้องใช้ Android SDK)

สร้างแอปของคุณและติดตั้งบนอุปกรณ์ของคุณโดยเรียกใช้ chrome://inspect/#devices เมื่อเปิดแอปของคุณบนอุปกรณ์แล้วให้เปิดคอนโซลผ่านเครื่องมือ Chrome dev (บนคอมพิวเตอร์ของคุณ) ionic run ios --device และตรวจสอบอุปกรณ์ของคุณ

รูปภาพ: Chrome Dev Tools

Remote Debug บน iOS

เสียบอุปกรณ์ของคุณและตรวจสอบให้แน่ใจว่าคอมพิวเตอร์ของคุณตรวจพบอย่างถูกต้อง สร้างแอปของคุณและติดตั้งบนอุปกรณ์ของคุณโดยเรียกใช้ Develop > Your iPhone > Your app

เมื่อเปิดแอปของคุณบนอุปกรณ์แล้วให้เปิดเครื่องมือ Safari dev (บนคอมพิวเตอร์ของคุณ) โดยคลิกที่ cordova platform add browser :

รูปภาพ: Safari Dev Tools

เรียกใช้ Cordova Plugins ภายในเบราว์เซอร์

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

ด้วยแพลตฟอร์ม Cordova Browser อิเล็กตรอน และเฉพาะเทคโนโลยีเว็บ (JavaScript, HTML และ CSS) ตอนนี้เราสามารถสร้างแอปพลิเคชัน Ionic สำหรับเบราว์เซอร์และเดสก์ท็อป (Windows, Linux และ OSX)

มีชุดสตาร์ทให้บน Github .

แพลตฟอร์ม Cordova Browser

ด้วยแพลตฟอร์มเบราว์เซอร์คุณสามารถสร้างแอปพลิเคชัน Cordova สำหรับเบราว์เซอร์ได้ หมายความว่าคุณสามารถใช้ปลั๊กอินของ Cordova บนเบราว์เซอร์ได้เช่นกัน

สามารถติดตั้งได้แบบเดียวกับที่คุณติดตั้งแพลตฟอร์ม iOS หรือ Android:

cordova run browser

แอปพลิเคชันของคุณต้องได้รับการรวบรวมก่อนการใช้งานเหมือนกับ iOS หรือ Android:

// listen for Online event $rootScope.$on('$cordovaNetwork:online', (event, connectionType) => { this.isOnline = true; }); // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', (event, connectionType) => { this.isOnline = false; });

คำสั่งนี้จะรวบรวมแอปของคุณและเปิดเบราว์เซอร์เริ่มต้นของคุณ

ปลั๊กอินข้ามแพลตฟอร์ม

ปลั๊กอินจำนวนมาก เช่นเครือข่ายกล้องถ่ายรูปและ Facebook รองรับ iOS, Android และแพลตฟอร์มเบราว์เซอร์ในเวลาเดียวกัน - ทั้งหมดนี้ใช้ API เดียวกัน

เพื่อแสดงให้เห็นว่ามีวิธีที่จะทราบได้ว่าอุปกรณ์ของคุณออนไลน์หรือออฟไลน์บนทุกแพลตฟอร์ม (iOS, Android, เบราว์เซอร์และเดสก์ท็อป) โดยใช้ โดย Cordova ไฟ:

ionic start myapp

ด้วยเหตุนี้คุณจึงสามารถจินตนาการถึงการสร้างผลิตภัณฑ์ที่สามารถทำงานได้ทุกที่ด้วยฐานรหัสเดียว

ข้อผิดพลาดทั่วไป # 7: การติดตามสถาปัตยกรรมชุดเริ่มต้นสำหรับการใช้งานขนาดใหญ่

เมื่อใช้ www/ js/ app.js controllers/ aaa.js bbb.js ccc.js services/ xxx.js yyy.js zzz.js templates/ aaa.html bbb.html ccc.html คำสั่งโครงการเริ่มต้นถูกสร้างขึ้นด้วยโครงสร้างโฟลเดอร์ต่อไปนี้:

myNewFeature/ index.js (AngularJS module) config.js service.js controller.js index.html style.scss

สิ่งนี้เรียกว่าโครงสร้าง Folder-by-Type โดยที่ไฟล์ JavaScript, CSS และ HTML จะถูกจัดกลุ่มตามประเภท เนื่องจากอาจดูเป็นเรื่องง่ายสำหรับผู้เริ่มต้นสถาปัตยกรรมประเภทนี้จึงหมดไปอย่างรวดเร็ว มันไม่ได้ปรับขนาด

นี่คือเหตุผลบางประการที่จะไม่ใช้โครงสร้าง Folder-by-Type:

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

ฉันขอแนะนำให้ใช้โครงสร้าง Folders-by-Feature โดยที่ไฟล์ JavaScript, CSS และ HTML ถูกจัดกลุ่มตามฟีเจอร์หรือโมดูล AngularJS:

onscroll

เหตุผลในการใช้โครงสร้าง Folders-by-Feature:

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

โปรดทราบว่าสถาปัตยกรรมนี้ใกล้เคียงกับโครงสร้าง Folders-by-Component ซึ่งปัจจุบันเป็นค่าเริ่มต้นในแอปพลิเคชัน Angular2 / Ionic2

แอนิเมชั่น Flipbook Ionic

ข้อผิดพลาดทั่วไป # 8: การผูกเหตุการณ์กับ `requestAnimationFrame` และการลืม `// …`

ข้อผิดพลาดเดียวนี้มักเป็นความผิดพลาดของผู้เริ่มต้น แต่อาจส่งผลกระทบที่เลวร้ายที่สุดต่อประสิทธิภาพ พิจารณาสิ่งนี้:

$scope.getScrollPosition = function () { // heavy processing, like manipulating DOM // or anything that triggers a $digest() // will be called every ~80ms, // and will impact UX }

requestAnimationFrame

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

เป้าหมายหลายประการที่นักพัฒนาพยายามบรรลุโดยการเชื่อมโยงกับเหตุการณ์การเลื่อนและโดยเฉพาะอย่างยิ่งภาพเคลื่อนไหวสามารถทำได้โดยใช้วิธีการอื่น ดูเถิด var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame(); .

element.getBoundingClientRect()

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

คุณอาจต้องการดู

|_+_|

ซึ่งให้ข้อมูลเกี่ยวกับขนาดและตำแหน่งของโหนด HTML

ข้อผิดพลาดทั่วไป # 9: การสร้างต้นแบบแอปพลิเคชั่นไอออนิกด้วยตนเอง

ไอออนิกมีการออกแบบเฉพาะเกือบจะเป็นภาษาภาพ โดยเฉพาะอย่างยิ่งกับผลิตภัณฑ์ต้นแบบและผลิตภัณฑ์ระยะเริ่มต้นสามารถประหยัดเวลาและค่าใช้จ่ายได้มากโดยใช้ส่วนประกอบและรูปแบบที่มีอยู่ จริงๆแล้วค่อนข้างน้อยและมีความสวยงาม

การนำเสนอ Wireframes และ Mockups พร้อมฟังก์ชันพื้นฐานได้กลายเป็นมาตรฐานอุตสาหกรรม หากต้องการดูรูปภาพและดูแอปจริงที่มีส่วนประกอบแบบไดนามิกบนอุปกรณ์เคลื่อนที่นั้นมีถ้วยชาสองถ้วยที่แตกต่างกันมาก นักออกแบบหลายคนและนักพัฒนา UX ใช้เครื่องมือเช่น Axure หรือ Balsamiq ซึ่งช่วยให้สามารถสร้างโครงลวดได้อย่างรวดเร็วโดยมีฟังก์ชันการทำงานน้อยที่สุด

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

corp c vs corp s

ภาพ: ผู้สร้างไอออนิก

สรุป

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

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

โพสต์นี้จะเกิดขึ้นไม่ได้หากปราศจากความคิดสร้างสรรค์ของชุมชน Ionic ที่น่าทึ่ง MichałMikołajczyk , ไมค์ฮาร์ทิงตัน (Ionic Core team) และ Katie Ginder-Vogel (ผู้จัดการฝ่ายการตลาดและการสื่อสาร Ionic) ขอบคุณทุกท่านมากครับ.