Ionic 2 vs. Ionic 1: ประสิทธิภาพที่เพิ่มขึ้น เครื่องมือใหม่ และการก้าวไปข้างหน้าครั้งใหญ่

โครงการ Ionic กำลังได้รับความนิยมอย่างรวดเร็ว ด้วยจำนวนดาวมากกว่า 27,000 ดวงบน GitHub มันจึงกลายเป็นหนึ่งใน 50 โครงการโอเพ่นซอร์สที่ได้รับความนิยมสูงสุดทั่วโลก

และตั้งแต่มีการประกาศเปิดตัว Ionic 2 เวอร์ชันเสถียร เป็นเวลาที่เหมาะสมที่สุดสำหรับวิศวกรในการวิเคราะห์และทำความเข้าใจความแตกต่างระหว่าง Ionic 2 และ Ionic 1

ในระดับสูง Ionic 2 คือการเขียนซ้ำของโปรเจ็กต์ Ionic 1 ด้วย Angular >= 2.x จากประสบการณ์ 2 ปีขึ้นไปของฉันในการใช้ Ionic 1 นี่คือสิ่งที่จะมีความหมายในทางปฏิบัติ

เพิ่มประสิทธิภาพการตรวจจับการเปลี่ยนแปลง

Ionic 1 ขึ้นอยู่กับ Angular 1.x และ Ionic 2 ขึ้นอยู่กับ Angular >= 2.x การเพิ่มประสิทธิภาพที่คุณได้รับเพียงแค่ใช้ Angular >= 2.x เพียงอย่างเดียวนั้นสำคัญ

ด้วย Angular 1.x ในการรับแอปพลิเคชันที่มีประสิทธิภาพจำเป็นต้องมีความรู้เกี่ยวกับเฟรมเวิร์กอย่างลึกซึ้ง (เช่น $watch , การเชื่อมโยงครั้งเดียว และอื่นๆ) ด้วย Angular >= 2. แอปพลิเคชัน x นั้นค่อนข้างมีประสิทธิภาพเมื่อใช้งานนอกกรอบ

Angular เวอร์ชันใหม่ทิ้งวงจรไดเจสต์ที่มีชื่อเสียงและถูกประณาม (ติดตามและทดสอบทุกตัวแปรของแอปในทุกการเปลี่ยนแปลง) แทน Angular >= 2.x อาศัย Zone.js เพื่อติดตามการเปลี่ยนแปลงแอปพลิเคชัน (ทั้งแบบซิงโครนัสและแบบอะซิงโครนัส)

การตรวจจับการเปลี่ยนแปลงในเชิงมุม >= 2.x นั้นควรค่าแก่การสำรวจเพื่อทำความเข้าใจว่าสิ่งต่าง ๆ ทำงานอย่างไรภายใต้ประทุน ใน Angular >= 2.x การตรวจจับการเปลี่ยนแปลงจะดำเนินการจากบนลงล่างเสมอ การใช้กลยุทธ์การตรวจจับการเปลี่ยนแปลงที่ถูกต้อง ( OnPush หรือ Default ) ในส่วนประกอบของคุณเองมีความสำคัญอย่างยิ่ง หากคุณต้องการควบคุมประสิทธิภาพของแอปพลิเคชันของคุณ

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

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

ประสิทธิภาพ DOM ที่เร็วขึ้น

การจัดการ Angular Document Object Model (DOM) มีวิวัฒนาการไปมาก หากคุณต้องการอินเทอร์เฟซผู้ใช้แบบโต้ตอบ (UI) การจัดการ DOM และประสิทธิภาพของ JavaScript เป็นสิ่งสำคัญ

ตัวอย่างเช่น การสร้าง 1,000 แถวในตารางจะใช้เวลา 126 มิลลิวินาทีกับ vanilla JavaScript, เพิ่มขึ้น 110% (264ms) ด้วย Angular 1.x และเพิ่มขึ้นเพียง 40% (177ms) กับ Angular >= 2 อย่างที่คุณเห็น ประสิทธิภาพของ Angular >= 2.x ดีกว่า Angular 1.x และคล้ายกับประสิทธิภาพ React

Ionic 2 ได้ประโยชน์จากการอัปเกรดประสิทธิภาพอีกครั้ง และทำได้ "ฟรี"

API แอนิเมชั่นเว็บใหม่

Ionic 1 และ Ionic 2 ยังคงใช้แอนิเมชั่น CSS สำหรับการเปลี่ยนภาพภายในและแอนิเมชั่น แต่เนื่องจาก Ionic 2 นั้นใช้ Angular >= 2.x นักพัฒนาจึงสามารถเข้าถึง Web Animations (W3C) API ใหม่ได้ผ่านระบบแอนิเมชั่นเชิงมุม

Web Animations API คือ JavaScript API ที่ให้นักพัฒนาสามารถเข้าถึงเอ็นจิ้นแอนิเมชั่นของเบราว์เซอร์ได้ ยังไม่รองรับในเบราว์เซอร์ทั้งหมด แต่ด้วย polyfill คุณสามารถใช้มันได้ในขณะนี้ และเพลิดเพลินไปกับวิธีที่มีประสิทธิภาพและมีแนวโน้มมากที่สุดในการสร้างภาพเคลื่อนไหวบนเว็บ

แหล่งที่มา

Angular >= 2.x แอนิเมชั่น API ช่วยให้คุณอธิบายแอนิเมชั่นที่ซับซ้อนได้อย่างง่ายดาย (การเข้าและออกจากสถานะต่างๆ หรือแอนิเมชั่นกลุ่ม) และให้คุณเข้าถึงวงจรชีวิตของแอนิเมชั่นผ่านการเรียกกลับ

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

การเลื่อนแบบเนทีฟในตัว

การเลื่อนแบบเนทีฟช่วยให้ Ionic 2 ฟังเหตุการณ์การเลื่อนบน WebView ที่รองรับได้ มันทำ
Pull to Refresh จัด List Reordering ใหม่ หรือ Infinite Scroll ที่เป็นไปได้โดยไม่ต้องจำลองเหตุการณ์เหล่านั้น (การเลื่อน JavaScript)

จนถึงขณะนี้ การเลื่อน JavaScript เป็นสิ่งที่จำเป็น แต่ WebView ของ Chromium (Android) และ WKWebView (iOS) มีการพัฒนาและตอนนี้รองรับการเลื่อนแบบเนทีฟแล้ว เปิดใช้งานโดยค่าเริ่มต้นบน Android ที่มี Ionic 1 เท่านั้น (ตั้งแต่เดือนธันวาคม 2015) และเปิดใช้งานบนทุกแพลตฟอร์มที่มี Ionic 2

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

ปรับปรุงส่วนประกอบ API

Ionic 2 ให้คุณเข้าถึงส่วนประกอบทั้งหมดที่ทำให้ Ionic 1 โด่งดัง แต่ตอนนี้ได้รับการปรับปรุงและอิงตาม Angular >= 2.x นี่คือรายการส่วนประกอบที่พบบ่อยที่สุด:

• ปุ่ม
• การ์ด
• ไอคอน
• รายการ
• เมนู
• โมดอล
• แถบเครื่องมือ

API ส่วนประกอบเปลี่ยนเล็กน้อยระหว่าง Ionic 1 และ Ionic 2 ตัวอย่างเช่น ส่วนประกอบ Ionic 1 ion-spinner ใช้แอตทริบิวต์ icon สำหรับประเภท spinner:

 <ion-spinner icon="bubbles"></ion-spinner>

ในขณะที่ Ionic 2 ใช้แอตทริบิวต์ name :

 <ion-spinner name="bubbles"></ion-spinner>

อย่างที่คุณเห็น หากคุณคุ้นเคยกับ Ionic 1 component API คุณจะรู้สึกสะดวกสบายในการใช้ส่วนประกอบ Ionic 2 เช่นกัน คุณเพียงแค่ต้องตระหนักถึงความแตกต่างเหล่านี้

ด้วยรายการส่วนประกอบที่น่าประทับใจ ทุกสิ่งที่คุณทำได้ด้วย Ionic 1 สามารถทำได้ด้วย Ionic 2 และอื่นๆ อีกมากมาย

แนะนำ Web Workers

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

ตามเนื้อผ้า กรอบงานทั้งหมดถูกสร้างขึ้นบนและอาศัยวัตถุ window และ document อย่างไรก็ตามในคนงานไม่สามารถใช้ได้ ด้วยสถาปัตยกรรม Angular >=2 ใหม่ที่แยกการ renderer นเดอร์ออก การรันแอปพลิเคชันภายใน Web Workers (หรือแพลตฟอร์มอื่นๆ สำหรับเรื่องนั้น) นั้นทำได้ง่ายขึ้น

Ionic 2 กำลังเริ่มทดลองการใช้งาน Web Workers ด้วยองค์ประกอบ ion-img ใหม่ สำหรับตอนนี้ ion-img สามารถใช้ได้เฉพาะในรายการ VirtualScroll มันมอบหมายการเรียก HTTP รูปภาพไปยัง Web Workers และยังรองรับการโหลดแบบ Lazy Loading (เช่น ดึงและแสดงภาพบนวิวพอร์ตเท่านั้น) เว็บแอปพลิเคชันของคุณตอนนี้เน้นที่ UI เท่านั้น และให้พนักงานจัดการส่วนที่เหลือ

นี่คือตัวอย่างการใช้งาน:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

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

ข้อดีของ TypeScript

หากคุณเคยใช้ Ionic 2 อยู่แล้ว คุณรู้อยู่แล้วว่ากำลังใช้ TypeScript TypeScript เป็น superset ของ JavaScript ES2015 ที่คอมไพล์เป็น JavaScript ธรรมดา ด้วย TypeScript คุณจะสามารถเข้าถึงคุณลักษณะเฉพาะทั้งหมด (เช่น อินเทอร์เฟซ มิกซ์อิน และอื่นๆ) และคุณลักษณะ ES2015 (เช่น ฟังก์ชันลูกศร ตัวสร้าง สตริงหลายบรรทัด และอื่นๆ)

มาดูตัวอย่างขององค์ประกอบ Angular >= 2.x ที่แสดงชื่อประธานาธิบดีของสหรัฐอเมริกา:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

เราใช้อินเทอร์เฟซ ( IPresident ) ที่อธิบายรูปร่างของประธาน Object เป็นเรื่องที่น่าสนใจที่จะมีอินเทอร์เฟซที่อธิบายสิ่งที่คุณกำลังจัดการ โดยเฉพาะอย่างยิ่งหากมีนักพัฒนาหลายคนในโปรเจ็กต์ หากคุณทำผิดพลาด ตัวอย่างเช่น ใช้ boolean เป็นชื่อประธาน IDE ของคุณจะบอกคุณว่ามีบางอย่างผิดปกติก่อนที่การคอมไพล์จะเกิดขึ้น

ใน IDE แทบใดๆ ที่คุณใช้ (Visual Studio Code, Atom, WebStorm หรืออื่นๆ ที่คล้ายกัน) คุณจะพบปลั๊กอินเพื่อเปิดใช้งานการเติมข้อความอัตโนมัติ การตรวจสอบประเภท และ linter

TypeScript เป็นข้อได้เปรียบที่แท้จริงสำหรับ Ionic 2 เนื่องจากทำให้โค้ดของคุณเข้าใจได้ง่ายขึ้น ช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดในการพิมพ์ และช่วยให้คุณทำงานได้อย่างมีประสิทธิภาพมากขึ้น (ผ่านคุณลักษณะต่างๆ เช่น การเติมข้อความอัตโนมัติ การนำเข้าโมดูลอัตโนมัติ คำจำกัดความของคำแนะนำเครื่องมือเมื่อวางเมาส์เหนือ และ CTRL + Click เพื่อ ไปที่คำจำกัดความ)

CLI v2 . ใหม่ทั้งหมด

Ionic CLI v2 เพิ่มวิธีการสร้างเพจ ส่วนประกอบ ไปป์ และคำสั่งโดยตรงผ่านบรรทัดคำสั่ง

ตัวอย่างเช่น หากคุณต้องการสร้างเพจใหม่ที่ชื่อ MyPage นี่คือคำสั่งที่คุณสามารถเรียกใช้ได้:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

คำสั่งจะทำตามข้อตกลงและสร้างไฟล์สามไฟล์ให้คุณ:

ไฟล์ HTML สำหรับเทมเพลตของคุณ ไฟล์ SASS สำหรับสไตล์องค์ประกอบของคุณ ไฟล์ TypeScript สำหรับตรรกะส่วนประกอบของคุณ

นี่คือลักษณะของไฟล์ my-page.ts ที่สร้างขึ้น:

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

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

ปรับปรุงบรรจุภัณฑ์

Ionic 1 อาศัยระบบนิเวศ Gulp เพื่อรวมกลุ่มแอปพลิเคชัน ในขณะที่ Ionic 2 ให้คุณเลือกเครื่องมือที่คุณชื่นชอบ Ionic 2 มีชุดเครื่องมือของตัวเองเป็นโปรเจ็กต์ที่แยกจากกัน: ionic-app-scripts

ionic-app-scripts มีพื้นฐานมาจากแนวคิดที่ว่านักพัฒนาไม่ควรกังวลเกี่ยวกับการกำหนดค่าบรรจุภัณฑ์เลย การพึ่งพาที่เกี่ยวข้องกับบรรจุภัณฑ์เพียงอย่างเดียวที่โปรเจ็กต์ของคุณจะมีกับ Ionic 2 คือ @ionic/app-scripts โดยค่าเริ่มต้น จะใช้ Webpack แต่คุณสามารถใช้ Rollup ได้เช่นกัน

ด้วย Ionic 2 และ CLI v2 assets รวมถึงไฟล์ TypeScript จะอยู่ในโฟลเดอร์ src เดียวกัน ขณะนี้ www ถูกสร้างขึ้นในทุกบิลด์ ดังนั้นควรลบออกจากการติดตามการควบคุมเวอร์ชัน

บทนำของเครื่องมือรายงานข้อผิดพลาด

CLI ใหม่ยังแนะนำเครื่องมือการรายงานข้อผิดพลาดที่ยอดเยี่ยมอีกด้วย ในการรับมัน คุณต้องติดตั้งเวอร์ชัน Ionic >= 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

ทุกครั้งที่คุณมีข้อผิดพลาด โมดอลจะปรากฏขึ้นพร้อมข้อมูลที่มีความหมายเกี่ยวกับมัน ตัวอย่างเช่น:

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

ประโยชน์ของการรวบรวมล่วงหน้า (ทอท.)

การรวบรวมล่วงหน้า (AoT) เป็นการปฏิวัติเล็กน้อยในระบบนิเวศเชิงมุม AoT ที่นำมาใช้กับ Angular 2.x ช่วยให้สามารถคอมไพล์เทมเพลตล่วงหน้าในขั้นตอนการสร้าง แทนที่จะคอมไพล์ทันทีโดยเบราว์เซอร์

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

Ionic 2 ใช้ประโยชน์จาก Angular 2.x AoT อย่างเต็มที่เพื่อเพิ่มประสิทธิภาพขนาดและเวลาในการโหลดแอปพลิเคชันของคุณได้ฟรี

Ionic 2 เป็นก้าวที่ยิ่งใหญ่

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

ด้วยเครื่องมือต่างๆ เช่น TypeScript, ionic-app-scripts และ Ionic CLI นักพัฒนา Ionic 2 สามารถทำงานได้อย่างมีประสิทธิภาพมากขึ้น สามารถผลิตโค้ดที่ดูแลรักษาได้มากขึ้น และได้รับการแจ้งเตือนถึงข้อผิดพลาดรันไทม์ทันทีที่เกิดขึ้น

Ionic 2 ยังให้การเพิ่มประสิทธิภาพฟรีเมื่อเทียบกับ Ionic 1 โดยเฉพาะอย่างยิ่งโดยการกำจัดหรือลดปัญหาคอขวด (ที่เกี่ยวข้องกับการตรวจจับการเปลี่ยนแปลง ภาพเคลื่อนไหว เวลาในการโหลด และอื่นๆ)

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