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

บทนำ

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

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

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

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

Native Scrolling ช่วยให้ Ionic สามารถฟังเหตุการณ์การเลื่อนบนเว็บวิวที่รองรับได้ ทำให้ Pull to Refresh , List Reordering และ Infinite Scroll เป็นไปได้โดยไม่ต้องเลื่อน 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 :

 <!-- Disable Native Scrolling on this page only --> <ion-content overflow-scroll=”false”>

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

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

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

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

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

แพลตฟอร์มและปลั๊กอินถูกเก็บไว้ในคุณสมบัติ cordovaPlatforms และ cordovaPlugins :

 "cordovaPlugins": [ "[email protected]", "[email protected]", "[email protected]" ], "cordovaPlatforms": [ "android", "ios" ]

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

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

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

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

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

$watch

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

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

$watch (ปกติ)

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

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$ดู (ลึก)

Deep $watch ดูแลการเปลี่ยนแปลงที่ตื้นและการเปลี่ยนแปลงในเชิงลึก เช่น คุณสมบัติ Nested Object ด้วย $watch นี้ คุณจะไม่พลาดการดัดแปลงใดๆ อย่างไรก็ตาม การใช้ deep $watch มีผลกับประสิทธิภาพ ฉันจะแนะนำให้ใช้ด้วยความระมัดระวัง

 $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. } });

$watchGroup

เปิดตัวใน AngularJS 1.3 $watchGroup อนุญาตให้ดูนิพจน์หลายรายการพร้อมกัน

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

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

 <!-- if items have a unique id --> <div ng-repeat="item in items track by item.id"></div> <!-- if not, you can use the $index that ng-repeat adds to every of its items --> <div ng-repeat="user in users track by $index"></div>

เพียงหลีกเลี่ยงการใช้ track by on collection-repeat

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

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

โดยทั่วไป การใช้การรวมครั้งเดียว :: บนนิพจน์จะเป็นการลบออกจากรายการ $watchers เมื่อเติมข้อมูล หมายความว่านิพจน์จะไม่สามารถอัปเดตได้แม้ว่าข้อมูลจะเปลี่ยนไป

 <p>{{::user.firstName}}</p>

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

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

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

ข้อผิดพลาดทั่วไป #4: มีความสับสนกับลอจิก View Cache

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

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

 // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);

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

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

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

ขอแนะนำเหตุการณ์วงจรชีวิตของคอนโทรลเลอร์

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

 $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(){});

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

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

หากคุณต้องการดึงข้อมูลทุกครั้งที่คุณเข้าสู่ข้อมูลพร็อพเพอร์ตี้ ไม่ว่าจะแคชหรือไม่ก็ตาม คุณสามารถใช้เหตุการณ์ $ionicView.enter

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

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

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

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

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

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

 ionic plugin add cordova-plugin-crosswalk-webview

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

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

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

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

ดีบักระยะไกลบน Android

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

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

ดีบักระยะไกลบน iOS

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

เมื่อแอปของคุณเปิดตัวบนอุปกรณ์แล้ว ให้เปิดเครื่องมือ Safari dev (บนคอมพิวเตอร์ของคุณ) โดยคลิกที่ Develop > Your iPhone > Your app :

เรียกใช้ปลั๊กอิน Cordova ภายในเบราว์เซอร์

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

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

ชุดเริ่มต้นมีอยู่ใน Github

แพลตฟอร์มเบราว์เซอร์ Cordova

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

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

 cordova platform add browser

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

 cordova run browser

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

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

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

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

 // 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; });

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

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

เมื่อใช้คำสั่ง ionic start myapp โครงการสตาร์ทเตอร์จะถูกสร้างขึ้นด้วยโครงสร้างโฟลเดอร์ต่อไปนี้:

 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

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

ต่อไปนี้คือสาเหตุบางประการที่จะไม่ใช้โครงสร้างแบบแบ่งตามประเภท:

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

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

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

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

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

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

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

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

 <ion-content on-scroll="getScrollPosition()"> // … </ion-content>

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

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

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

 var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();

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

คุณอาจต้องการดู element.getBoundingClientRect() ซึ่งให้ข้อมูลเกี่ยวกับขนาดและตำแหน่งของโหนด HTML

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

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

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

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

บทสรุป

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

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

โพสต์นี้จะเป็นไปไม่ได้หากไม่มีความคิดสร้างสรรค์ของชุมชน Ionic ที่น่าทึ่ง Michal Mikolajczyk, Mike Hartington (ทีม Ionic Core) และ Katie Ginder-Vogel (ผู้จัดการฝ่ายการตลาดและการสื่อสารของ Ionic) ขอบคุณทุกท่านมากๆครับ.