أطر كوردوفا: الأيونية مقابل الإطار 7

في هذه الأيام ، يحكم مطورو الويب العالم. يتم استخدام JavaScript في كل مكان يمكن للمرء أن يبرمج فيه. من بين هذه المجالات ، كان تطوير تطبيقات الأجهزة المحمولة أحد الطرق الأولى للتوسع: منذ حوالي عشر سنوات ، سمح PhoneGap بتثبيت تطبيق HTML و JavaScript لنظامي التشغيل iOS و Android.

منذ ذلك الحين ، شهدت التكنولوجيا صعودًا وهبوطًا: على الرغم من سهولة التطوير ، من الواضح أن هذه التطبيقات كانت مختلفة تمامًا عن التطبيقات المحلية. تم استهداف Vanilla HTML وجافا سكريبت المستندة إلى المستعرض في المتصفحات ، ولم يكن هناك طريقة لهم للانتقال دون عيب إلى هذا الحقل الجديد.

حتى يومنا هذا ، لا تزال القضايا الرئيسية هي:

• صعوبات في الالتزام بالتصميم الأصلي والرسوم المتحركة
• تأثيرات انتقال الشاشة المعقدة
• لمس معالجة الأحداث
• الأداء في القوائم الكبيرة
• تحديد مواقع العناصر الثابتة
• التكيف مع أحجام الشاشات المختلفة
• مواقع عناصر التحكم الأصلية (على سبيل المثال ، شريط حالة iOS)
• التكيف مع متصفحات الجوال المختلفة

لماذا نستخدم إطار عمل لتطبيقات كوردوفا؟

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

لنلقِ نظرة على بعض أمثلة التطبيقات المختلطة. لقد تم إنشاؤها باستخدام أكثر إطارين نجاحًا حاليًا - إلى جانب Onsen UI - والتي تم إعدادها لتسهيل توسيع مطوري الويب في العالم الحديث: Framework7 و Ionic.

حول الإطار الأيوني

تم تطوير Ionic بواسطة Drifty Co. في عام 2012 وهو يعتمد على Angular. منذ ذلك الحين ، كان في طور التطوير النشط ، واستقبل استثمارات كبيرة ومجتمع مطور قوي. يزعم الموقع الرسمي أنه تم تطوير ملايين التطبيقات بناءً عليه.

في وقت كتابة هذا المقال ، أحدث إصدار هو Ionic 3 استنادًا إلى Angular 5. Ionic 4 ، الذي يهدف إلى المرونة والاستقلال عن Angular ، في مرحلة تجريبية مبكرة.

بصرف النظر عن محرك واجهة المستخدم ومكتبة مكونات رائعة وواجهة للوصول إلى وظائف الجهاز الأصلية ، تقدم Ionic إمكانيات وخدمات وأدوات مساعدة إضافية متعددة.

أيوني CLI

تُستخدم واجهة سطر أوامر Ionic لتهيئة المشروع التفاعلي (أي معالج) ، وإنشاء صفحات ومكونات ، وتشغيل خادم تطوير يسمح لك بإنشاء تطبيقات أثناء التنقل وإعادة تحميلها مباشرةً. كما يوفر التكامل مع الخدمات السحابية الأيونية.

مختبر و DevApp

Lab هي خدمة مصغرة مفيدة للغاية تسمح لك بتقليد عمل التطبيق على منصات مختلفة في متصفح مطور Ionic. يساعدك DevApp على نشر أحد التطبيقات بسرعة على جهاز حقيقي.

التعبئة والتغليف والنشر والمراقبة

يأتي Ionic مع مجموعة من خدمات الويب التي تبسط وتسريع بناء التطبيقات وتصحيحها واختبارها وتحديثها للمختبرين والمستخدمين.

مع ذلك ، تتغير خطط أيونيك كثيرًا. تم إغلاق بعض الخدمات الموجودة سابقًا - مثل المصادقة والدفع والتحليلات والعرض - ، مما تسبب في احتجاج من قبل المشتركين.

المنشئ

هذا هو محرر رسومات السحب والإفلات الخاص بـ Ionic لتطوير واجهات وظيفية.

حول Framework7

تم تطوير هذا الإطار في عام 2014 بواسطة استوديو iDangero الروسي. في النهاية ، كان أحد المطورين يعمل في المشروع ، ولا يشمل العديد من المساهمين الصغار في مستودع GitHub.

في الأصل ، يتكون Framework7 من مجموعة مكونات واجهة المستخدم بأسلوب iOS 7 الذي تم إصداره مؤخرًا ، والذي حصل منه على اسمه. في وقت لاحق ، تمت إضافة سمة Android ، وتم تحديث كلا الموضوعين لأحدث iOS وتصميم المواد.

في الآونة الأخيرة ، تسارعت وتيرة تطوير المشروع ، وتوسع من مجموعة من المكونات إلى إطار عمل كامل لتطبيقات الهاتف المحمول ، ودمج التقنيات والأدوات الشائعة.

يوجد دعم Framework7 وأمثلة باستخدام Vue.js منذ الإصدار 1 ، ويدعم الإصدار 3 أيضًا React. هذا ما قد يسمح للمشروع بالتنافس بجدية مع Ionic الأكثر شهرة ، والذي يقدم فقط Angular و TypeScript.

التثبيت والتشغيل الأول

أيوني

لبدء العمل مع Ionic ، قم بتثبيته باستخدام NPM:

 npm install -g ionic

ثم حدد القالب الخاص بالتطبيق المستقبلي. يقدم موقع Ionic الرسمي قوالب متعددة ، أو يمكنك تحديد قالب فارغ لإنشاء التطبيق من الألف إلى الياء مع ionic start myApp blank .

دعنا نختار تصميمًا بسيطًا. نفّذ الأمر التالي:

 ionic start Todo tabs

أجب بـ "نعم" عندما يسألك المثبت "هل ترغب في دمج تطبيقك الجديد مع كوردوفا لاستهداف نظامي التشغيل iOS و Android الأصليين؟" سيؤدي هذا تلقائيًا إلى دمج التطبيق مع كوردوفا وإعداده للنشر على منصات الهاتف المحمول.

في الخطوة التالية ، سيعرض المثبت توصيلنا بـ Ionic Pro SDK. أجب بـ "لا" في الوقت الحالي لتبسيط المثال.

قم بتثبيت حزمة @ionic/lab الإضافية للحصول على واجهة مستخدم تصحيح الأخطاء الملائمة — تقليد أجهزة 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) للوصول إلى وظائف الجهاز الأصلية وعرض السجلات.

الإطار 7

أدوات تطوير F7 أقل تقدمًا من Ionic ، ولا يتم توثيق تهيئة CLI التلقائية. ومع ذلك ، يوفر الموقع الرسمي العديد من مستودعات GitHub مع مشاريع القوالب التي ستساعدك على البدء في التطوير.

على غرار نموذج Tabs في Ionic ، يقدم F7 طرق عرض مبوبة ، لكننا سنستخدم قالبًا وظيفيًا أكثر يدمج Framework7 مع React. تمت إضافة دعم React في الإصدار 3. لذلك ، قم باستنساخ مستودع القوالب:

 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 وتصميم المواد كموضوعين قياسيين. يتم تحديد الموضوع على أساس النظام الأساسي.

للأسف ، على عكس قالب مشابه مع دعم Vue.js في قوالب React الرسمية ، لم يتم تنفيذ Webpack بعد وهذا يمنعنا من استخدام Hot Module Replacement لتحديث التطبيقات بسرعة دون إعادة تحميل الصفحة. ومع ذلك ، يمكنك استخدام ميزة إعادة التحميل المباشر الافتراضية ، والتي تعيد تحميل الصفحة كلما قمت بتغيير كود المصدر.

إنشاء كوردوفا

لتثبيت التطبيقات على الأجهزة والمحاكيات باستخدام كوردوفا ، تحتاج إلى تنزيل وإعداد أدوات التطوير لنظامي التشغيل iOS و Android ، بالإضافة إلى Cordova CLI. يمكنك قراءة المزيد حول هذا الموضوع في مقالتنا السابقة وعلى موقع Cordova الرسمي في دليل النظام الأساسي iOS وأقسام دليل نظام Android.

أيوني

تُظهر التجربة أنه لحل معظم المشكلات الأيونية بنجاح ، يكفي تصحيح الأخطاء المستند إلى المتصفح مع الاختبارات العرضية على الأجهزة الحقيقية.

على الرغم من موافقتك على التكامل لنظامي التشغيل iOS و Android ، وتقوم Ionic بإعداد الإعدادات المطلوبة في ملف config.xml والموارد في مجلد resources ، ما زلت بحاجة إلى توصيل كلا النظامين الأساسيين بالتطبيق باستخدام كوردوفا:

 cordova platform add ios cordova platform add android

يمكنك الآن بدء تشغيل تطبيق كوردوفا في برامج محاكاة "حقيقية" ، وتثبيته على الجهاز المحمول ، وحتى إرساله إلى 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.

تُظهر التجربة أنه لحل معظم المشكلات الأيونية بنجاح ، يكفي تصحيح الأخطاء المستند إلى المتصفح مع الاختبارات العرضية على الأجهزة الحقيقية.

الإطار 7

لا يوفر نموذج "React" Framework7 الذي تم اختياره مسبقًا أتمتة الإعداد لـ Cordova ، لذلك ستحتاج إلى إضافة أنظمة أساسية يدويًا. أنشئ مشروع كوردوفا في مجلد cordova الفرعي لمجلد مشروعك:

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

يعتمد النموذج على تطبيق Create React ، لذلك لتشغيل المشروع المترجم في بيئة كوردوفا ، تحتاج إلى إضافة "homepage": "." الإعداد إلى ملف ./package.json . يمكن العثور على هذا الملف على مستوى جذر المشروع:

قم بتجميع مشروع Framework7 وانسخ النتيجة إلى مشروع كوردوفا:

 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.

الإطار 7

تم تصميم قوالب Framework7 لإظهار جميع إمكانيات المكونات ، لذلك تحتاج فقط إلى ترك صفحة src / element 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() إلى نسخة المصفوفة السابقة مع عنصر جديد. سيؤدي هذا إلى تحديث القائمة بشكل تفاعلي.

 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:

• أيوني تودو التطبيق
• framework7-response-todo-app

نتائج

لقد شاهدت الآن البرنامج التعليمي الكامل مع كل إطار عمل من كوردوفا. كيف تتراكم Framework7 ضد Ionic؟

الإعداد الأولي

يعد تثبيت Ionic أسهل بكثير بفضل CLI الخاص به ، بينما يتطلب F7 مزيدًا من الوقت لاختيار وإعداد قالب أو التثبيت خطوة بخطوة من الألف إلى الياء.

تنوع المكون

يحتوي كلا الإطارين على مجموعة كاملة من المكونات القياسية الرائعة في موضوعين: iOS وتصميم المواد. يوفر Ionic أيضًا هذه المكونات في سمة Windows وسوقًا ضخمًا لموضوعات المستخدم.

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

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

النظام البيئي والمجتمع

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

Framework7 أفضل من أي وقت مضى ، لكنه يفتقر بشدة إلى دعم المجتمع.

تبعيات الطرف الثالث

يعتبر Framework7 أكثر مرونة فيما يتعلق بحلول الجهات الخارجية. ربما تكون أكبر نقاط قوتها هي القدرة على اختيار ما إذا كنت تستخدم Vue أو React في المشروع ، بالإضافة إلى Webpack أو Browserify. تعتمد Ionic على Angular وتتطلب معرفة بها (وبالتالي TypeScript أيضًا.)

ومع ذلك ، أعلن مطورو Ionic مؤخرًا عن إصدار تجريبي جديد من Ionic 4 ، بدعوى أنه إطار عمل UI بالكامل - لا مزيد من التبعيات الزاويّة إذا كنت لا تريدها.

أطر عمل كوردوفا: لا تزال طريقة قوية لتطوير تطبيقات الهاتف المحمول عبر الأنظمة الأساسية

يعتمد استخدام كوردوفا على المشروع المحدد. في الواقع ، تعد سرعة تطوير تطبيقات الأجهزة المحمولة الهجينة ودعمها لمنصات متعددة من مزاياها الرئيسية. لكنها دائمًا مقايضة ، وأحيانًا قد تواجه بعض العيوب التي لا توجد مع النهج المحلي. تقوم هذه الأطر الرائعة ومجتمعاتها بعمل رائع لتقليل تلك العيوب وجعل حياتنا أسهل. لذا ، لماذا لا تجربهم؟