Ionic 2 مقابل Ionic 1: مكاسب الأداء ، وأدوات جديدة ، وخطوة كبيرة للأمام

يكتسب المشروع الأيوني شعبية سريعة. مع وجود أكثر من 27000 نجم على GitHub ، فقد ارتفع ليصبح أحد أفضل 50 مشروعًا مفتوح المصدر الأكثر شهرة في جميع أنحاء العالم.

ونظرًا للإعلان عن الإصدار الثابت من Ionic 2 مؤخرًا ، فقد حان الوقت للمهندسين لتحليل وفهم الاختلافات بين Ionic 2 و Ionic 1.

على مستوى عالٍ ، يعد Ionic 2 إعادة كتابة كاملة لمشروع Ionic 1 مع Angular> = 2.x. من خلال خبرتي التي تزيد عن عامين في استخدام 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 لتتبع تغييرات التطبيق (المتزامنة وغير المتزامنة).

اكتشاف التغيير في Angular> = 2.x يستحق الاستكشاف لفهم كيفية عمل الأشياء تحت الغطاء. في Angular> = 2.x ، يتم إجراء اكتشاف التغيير دائمًا من أعلى إلى أسفل. يعد استخدام إستراتيجية الكشف عن التغيير الصحيحة ( OnPush أو Default ) في المكونات الخاصة بك أمرًا ذا أهمية قصوى إذا كنت تريد التحكم في أداء التطبيق الخاص بك.

تستخدم جميع مكونات Ionic 2 إستراتيجية OnPush ، مما يعني أن اكتشاف التغيير لا يتم إجراؤه طوال الوقت ، ولكن بدلاً من ذلك ، فقط عندما تتغير المدخلات. تتجنب هذه الاستراتيجية أيضًا العرض غير الضروري للأشجار الفرعية للمكونات. تم تحسينه بالفعل من أجلك.

إذا كنت تريد معرفة المزيد حول كيفية الحصول على تطبيق Ionic1 عالي الأداء ، أقترح قراءة ورقة الغش في Ultimate AngularJS و Ionic Performance.

أداء DOM أسرع

لقد تطور التلاعب في نموذج كائن المستند الزاوي (DOM) كثيرًا. إذا كنت تريد واجهة مستخدم تفاعلية (UI) ، فمن المهم معالجة DOM وأداء JavaScript.

على سبيل المثال ، يستغرق إنشاء 1000 صف في جدول 126 مللي ثانية باستخدام Vanilla JavaScript ، و 110٪ أكثر (264 مللي ثانية) باستخدام Angular. 1.x ، وفقط 40٪ أكثر (177 مللي ثانية) مع Angular> = 2. كما ترى ، فإن أداء Angular> = 2.x أفضل من Angular 1.x ، وهو مشابه لأداء React.

مرة أخرى ، تستفيد Ionic 2 من ترقية الأداء هذه ، وتقوم بذلك "مجانًا".

واجهة برمجة تطبيقات الرسوم المتحركة الجديدة على الويب

لا يزال Ionic 1 و Ionic 2 يعتمدان على الرسوم المتحركة CSS للانتقالات الداخلية والرسوم المتحركة ، ولكن نظرًا لأن Ionic 2 يعتمد على Angular> = 2.x ، فإن المطورين لديهم إمكانية الوصول إلى Web Animations (W3C) API الجديدة عبر نظام الرسوم المتحركة Angular.

تعد Web Animations API إحدى واجهات برمجة تطبيقات JavaScript التي توفر للمطورين إمكانية الوصول إلى محرك الرسوم المتحركة في المتصفح. لم يتم دعمه في جميع المتصفحات حتى الآن ، ولكن مع polyfill يمكنك استخدامه الآن والاستمتاع بواحدة من أكثر الطرق أداءً واعدةً لتحريك الويب.

مصدر

تتيح لك واجهة برمجة تطبيقات الرسوم المتحركة Angular> = 2.x وصف الرسوم المتحركة المعقدة بسهولة (الدخول والخروج من حالات مختلفة أو رسوم متحركة جماعية) وتمنحك الوصول إلى دورة حياة الرسوم المتحركة عبر عمليات رد الاتصال.

 @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 بالاستماع إلى أحداث التمرير على WebViews المدعومة. التي تجعل
Pull to Refresh للتحديث أو List Reordering أو Infinite Scroll ممكن بدون محاكاة تلك الأحداث (تمرير جافا سكريبت).

حتى الآن ، كان التمرير عبر JavaScript ضروريًا ، ولكن تطورت Chromium (Android) و WKWebView (iOS) WebViews وتدعم الآن التمرير الأصلي. يتم تمكينه افتراضيًا فقط على Android مع Ionic 1 (منذ ديسمبر 2015) ويتم تمكينه على جميع الأنظمة الأساسية مع Ionic 2.

يوفر دعم التمرير الأصلي أداءً أفضل ويحسن تجربة المستخدم من خلال المساعدة في ضمان التمرير السلس بفضل الأحداث غير المتزامنة.

المكونات المحسنة API

يمنحك Ionic 2 الوصول إلى جميع المكونات التي جعلت Ionic 1 مشهورة ، ولكن تم تحسينها الآن وتعتمد على Angular> = 2.x. فيما يلي قائمة بالمكونات الأكثر شيوعًا:

• زر
• بطاقة
• أيقونة
• قائمة
• قائمة
• مشروط
• شريط الأدوات

تغيرت مكونات API قليلاً بين Ionic 1 و Ionic 2. على سبيل المثال ، تستخدم مكونات Ionic 1 ion-spinner سمة icon لنوع الدوار:

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

بينما يستخدم Ionic 2 سمة name :

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

كما ترى ، إذا كنت معتادًا على واجهة برمجة تطبيقات Ionic 1 ، فسوف تشعر بالراحة عند استخدام مكونات Ionic 2 أيضًا. ما عليك سوى أن تكون على دراية بهذه الاختلافات.

مع قائمة رائعة من المكونات ، كل ما يمكنك القيام به باستخدام Ionic 1 يمكن تنفيذه باستخدام Ionic 2 ، وأكثر من ذلك.

مقدمة لعمال الويب

يسمح عمال الويب للتطبيق الخاص بك بتشغيل البرامج النصية في سلاسل رسائل JavaScript في الخلفية. يمكن للعمال أداء مهام مملة وطلبات HTTP خارج سياق التطبيق الخاص بك (أي دون التدخل في واجهة المستخدم). اليوم ، يتم دعم Web Workers بواسطة جميع المتصفحات الرئيسية.

تقليديًا ، تم إنشاء جميع أطر العمل فوق كائنات window document والاعتماد عليها. ومع ذلك ، في العمال لا تتوفر. مع الهندسة Angular> = 2 الجديدة التي فصلت renderer ، أصبح تشغيل التطبيق داخل Web Workers (أو أي نظام أساسي آخر لهذه المسألة) أسهل.

بدأت Ionic 2 بتجربة استخدام Web Workers مع مكون ion-img الجديد. في الوقت الحالي ، لا يمكن استخدام ion-img إلا ضمن قائمة VirtualScroll. يقوم بتفويض استدعاء HTTP الخاص بالصورة إلى عمال الويب ، كما يدعم التحميل البطيء (على سبيل المثال ، استرداد الصور وعرضها فقط على منفذ العرض). يركز تطبيق الويب الخاص بك الآن فقط على واجهة المستخدم ويتيح للعمال القيام بالباقي.

فيما يلي مثال على كيفية استخدامه:

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

ضع في اعتبارك أن هذه ليست سوى البداية وأننا نتوقع رؤية المزيد من الاستخدام أو العاملين على الويب في المستقبل القريب.

مزايا TypeScript

إذا كنت تستخدم Ionic 2 ، فأنت تعلم بالفعل أنه يستخدم TypeScript. TypeScript هو مجموعة شاملة من 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 ) التي تصف شكل كائن الرئيس. من المثير للاهتمام أن يكون لديك واجهات تصف ما تقوم بمعالجته ، خاصة إذا كان هناك العديد من المطورين في المشروع. إذا ارتكبت خطأ ، على سبيل المثال ، استخدمت boolean لاسم الرئيس ، فسوف يخبرك IDE الخاص بك أن هناك خطأ ما حتى قبل حدوث التجميع.

في أي IDE تقريبًا تستخدمه (Visual Studio Code أو Atom أو WebStorm أو ما شابه) ، ستجد مكونات إضافية لتمكين الإكمال التلقائي وفحص النوع و linter.

تعد TypeScript ميزة حقيقية لـ Ionic 2 ، لأنها تجعل التعليمات البرمجية أكثر قابلية للفهم ، وتساعدك على تجنب أخطاء الكتابة ، وتساعدك على أن تكون أكثر إنتاجية (من خلال ميزات مثل الإكمال التلقائي ، والاستيراد التلقائي للوحدات النمطية ، وتعريفات تلميحات الأدوات عند التمرير ، و CTRL + Click to انتقل إلى التعريفات).

كل جديد CLI v2.0

يضيف 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 2 هي @ionic/app-scripts . بشكل افتراضي ، يستخدم Webpack ولكن يمكنك استخدام Rollup أيضًا.

باستخدام Ionic 2 و CLI v2 ، تعيش assets وملفات TypeScript في نفس مجلد src . يتم إنشاء www الآن أثناء كل بناء وبالتالي يجب إزالته من تتبع التحكم في الإصدار.

مقدمة عن أداة الإعلام عن الأخطاء

كما قدم CLI الجديد أداة رائعة للإبلاغ عن الأخطاء. للحصول عليه ، تحتاج إلى تثبيت الإصدار الأيوني> = 2.1:

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

الآن في كل مرة يكون لديك أخطاء ، سيظهر نموذج مع معلومات مفيدة حول هذا الموضوع. علي سبيل المثال:

يُعد إعلامك بأخطاء وقت التشغيل في أقرب وقت ممكن أثناء التطوير أمرًا ذا قيمة لا تصدق وقد قام Ionic 2 بعمل رائع في هذا الصدد.

فوائد التجميع المسبق للوقت (AoT)

قبل تجميع الوقت (AoT) هي ثورة صغيرة في النظام البيئي الزاوي. تم تقديمه مع Angular 2.x ، تسمح AoT للقوالب بأن يتم تجميعها مسبقًا في خطوة بناء ، بدلاً من أن يتم تجميعها سريعًا بواسطة المستعرض.

في حين أن هذا قد لا يبدو فرقًا كبيرًا ، إلا أنه كذلك في الواقع. مع AoT ، لا يتعين علينا شحن مترجم القالب مع التطبيق. هذا له ميزتان. أولاً ، ستكون الحزمة أصغر ، مما يؤثر بشكل مباشر على الشبكة وبالتالي يجعل تنزيل تطبيقك أسرع. ثانيًا ، سيتم تشغيل التطبيق بشكل أسرع لأن تجميع القوالب أثناء التنقل لم يعد ضروريًا.

يستفيد Ionic 2 بالكامل من Angular 2.x AoT لتحسين حجم ووقت تحميل تطبيقك مجانًا.

أيونيك 2 خطوة كبيرة للأمام

بشكل عام ، تعد Ionic 2 خطوة كبيرة إلى الأمام لصناعة الهواتف المحمولة الهجينة. على الرغم من أن مجموعة مكونات Ionic 2 تشبه مكونات Ionic 1 ، إلا أن Ionic 2 تقدم الكثير من الأدوات وتحسين الأداء.

في الواقع ، باستخدام أدوات مثل TypeScript ، ionic-app-scripts الأيونية ، و Ionic CLI ، يمكن لمطوري Ionic 2 أن يكونوا أكثر إنتاجية ، ويمكنهم إنتاج كود أكثر قابلية للصيانة ، ويتم تنبيههم لأخطاء وقت التشغيل بمجرد حدوثها.

يوفر Ionic 2 أيضًا تعزيزًا مجانيًا للأداء بالنسبة إلى Ionic 1 ، لا سيما عن طريق إزالة أو تقليل الاختناقات (المتعلقة باكتشاف التغيير والرسوم المتحركة ووقت التحميل وما إلى ذلك).

مع Ionic 2 ، ستبدو تطبيقاتك أصلية أكثر من أي وقت مضى. خذها للخارج لتدور. عليك أن تكون سعيدا فعلتم.