PWA مقابل React Native: نظرة مفصلة

على غرار PWA و Flutter ، تعد PWA و React Native من بين أفضل الأساليب الشائعة لتطوير التطبيقات عبر الأنظمة الأساسية في الوقت الحالي. وعند البحث في هذا الموضوع ، من المفهوم أن تشعر بالارتباك عند محاولة اتخاذ قرار بشأن مسار التطوير الصحيح لعملك. في هذه المقالة ، سوف ندخل في تفاصيل كل نهج تطوير - من ماهيتها ، وحالات استخدامها ، والتفاصيل حول كيف يمكن أن يكون كل نهج تطوير مفيدًا لعملك.

التفاصيل المختصرة

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

تطبيق الويب التقدمي (PWA)

تعريفات

يعد تطبيق الويب التقدمي (PWA) حلاً صاعدًا لتطوير التطبيقات المستندة إلى الويب . تعتمد تطبيقات الويب التقدمية (PWA) في جوهرها على العاملين في الخدمة وبيانات تطبيقات الويب لتقديم تجارب شبيهة بالتطبيقات ، والتي تتضمن ميزات كانت حصرية في السابق للتطبيقات مثل إشعارات الدفع ، والتوافر في وضع عدم الاتصال ، وقابلية التثبيت ، وما إلى ذلك.

حالات الاستخدام والأمثلة

نظرًا لطبيعتها المستندة إلى الويب ، فإن PWAs هي الأنسب لمواقع الويب التي يتمثل اهتمامها الرئيسي في توفير تجارب أكثر تفاعلاً واستقلالية عن الاتصال - أو ببساطة لمواقع الويب التي ترغب في الوصول إلى نطاق أوسع من الجمهور.

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

 يوصى بالقراءة: أفضل 12 نموذجًا لتطبيقات الويب التقدمية (PWAs) في عام 2021

رد الفعل الأصلي

تعريفات

React Native هو إطار عمل لتطوير تطبيقات أصلية حقيقية عبر الأنظمة الأساسية تعتمد على JavaScript. يمكن للتطبيقات التي تم إنشاؤها باستخدام React Native أن تتفاعل مع واجهات برمجة التطبيقات الأصلية عبر نموذج واجهة المستخدم التوضيحي لـ React وجافا سكريبت - وهذا يعني أنه يمكن استخدام قاعدة كود React واحدة للحفاظ على نظامين أساسيين (iOS و Android) ، كل ذلك دون المساس بتجارب المستخدمين.

حالات الاستخدام والأمثلة

من الصعب تحديد حالة استخدام محددة لـ React Native ، حيث يتم استخدامها لإنشاء أنواع مختلفة من التطبيقات مثل تطبيقات الوسائط الاجتماعية الشائعة (مثل Facebook و Instagram و Pinterest وما إلى ذلك) أو تطبيقات الاتصالات الرقمية (مثل Skype و Discord ، تينسنت ف ف ، إلخ). للحصول على قائمة بالتطبيقات التي تم إنشاؤها باستخدام React Native ، تحقق من عرض تطبيقات React Native.

الخوض في التفاصيل

في الجزء التالي ، سنتناول تفاصيل كل نهج تطوير ، بالإضافة إلى رؤى حول كيفية ملائمة كل نهج تطوير لخطة عملك.

لغة

تعتمد تطبيقات الويب التقدمية (PWA) على تقنيات الويب لتقديم تجارب شبيهة بالتطبيقات. لذلك لا تزال لغات الويب مثل HTML و CSS و JavaScript هي اللغات الأساسية التي تشكل PWA ، بينما تستخدم تطبيقات React Native React.js (مكتبة JavaScript) كلغة أساسية.

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

واجهة المستخدم

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

تطبيق React Native ، بدلاً من ذلك ، قادر على تقديم تجارب أصلية حقيقية ، وذلك بفضل استخدامه للمكونات الأصلية - وتشمل هذه المكونات الخاصة بالنظام الأساسي مثل <DatePickerIOS> و <ProgressViewIOS> لنظام iOS ، أو <ViewPagerAndroid> و <ToastAndroid> لأجهزة الأندرويد.

أداء

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

ومع ذلك ، فإن حقيقة أن PWAs تعيش في بيئة المتصفح لا تعني حقًا أنها تعمل مثل موقع الويب العادي الخاص بك. بفضل طريقة التخزين المؤقت المتقدمة المستخدمة في PWAs ، لم يعد هناك عوائق عرضية عند التحميل بين الصفحات كما هو موجود في متوسط ​​مواقع الويب / تطبيقات الويب ؛ إلى جانب حقيقة أن تطبيقات الويب التقدمية (PWA) هي تطبيقات محسّنة بشكل أساسي من صفحة واحدة ، فإن الأداء المتصور لـ PWAs أقرب إلى تجربة تطبيق أصلي حقيقية بقدر ما يمكنك الحصول عليها.

أحد الأمثلة على ذلك هو Temoorst ، العلامة التجارية التي تتخذ من الكويت مقراً لها في صناعة السلع التي تستخدم لمرة واحدة. مع SimiCart كمزود الحلول المفضل لديهم ، اختارت العلامة التجارية تطبيقًا محليًا و PWA للحصول على أفضل عائد استثمار ممكن ، ولا يزال جانب أداء PWA أمرًا لم تتوقعه العلامة التجارية. في الاختبار الأعمى ، ستتعرض لضغوط شديدة للعثور على الاختلافات في الأداء - والبصرية - بين PWA وتطبيق React Native الخاص بهم.

لاختبار اختلاف الأداء بين تطبيق React Native وتطبيق PWA ، نشجعك على تجربة تطبيقات Temoorst. التطبيقات نفسها هي شهادات لما قد يبدو عليه تطبيق React Native المحسن جيدًا أو تطبيق PWA عند دفعه إلى الحد الأقصى.

• تطبيق React Native : متجر Google Play | متجر تطبيقات آبل
• PWA : https://temoorst.com/

حماية

نظرًا للمستوى الأعلى من التكامل مع الجهاز المستخدم ، فإن تطبيق React Native يكون بطبيعة الحال أكثر أمانًا وأقل عرضة للثغرات الأمنية. لإضافة المزيد من طبقات الأمان إلى تطبيق React Native ، هناك طرق مختلفة لاستخدامها أثناء عملية التطوير ، مثل:

• تثبيت SSL: لتأمين اتصالات التطبيق بالخادم
• سلسلة المفاتيح / المعلومات الحساسة: توفير تخزين محلي آمن إلى جانب المصادقة البيومترية / الوجه
• Jscrambler: منع العبث بالكود عن طريق إضافة طبقة ذاتية الدفاع

نظرًا لأن PWAs تعيش في بيئة المتصفح وتستفيد من المتصفح لمعظم إمكانياته ، فإن معظم أعمال الأمان تتم بواسطة المستعرض نفسه. بالمقارنة مع موقع ويب عادي ، فإن PWA أكثر أمانًا حيث أن المكون الأساسي لـ PWA - عامل الخدمة - يعمل فقط عبر HTTPS مما يعني أن الاتصال بين جانب العميل وجانب الخادم يكون دائمًا مشفرًا.

يعمل عمال الخدمة عبر HTTPS فقط. نظرًا لأنه يمكن للعاملين في الخدمة اعتراض طلبات الشبكة وتعديل الاستجابات ، فقد تكون هجمات "man-in-the-middle" سيئة للغاية.

مقدمة لعامل الخدمة

الاكتشاف

هذا هو المكان الذي يلمع فيه PWAs. لا تتوفر تطبيقات الويب التقدمية على الويب وتتعرض لمحركات البحث فحسب ، بل إنها في الواقع قابلة للنشر في متاجر التطبيقات أيضًا. انضمت كل من Google و Microsoft وحتى Samsung إلى عربة الدفع للضغط من أجل المزيد من اعتماد PWAs من خلال تبني PWA المعاد تجميعها في متاجر التطبيقات الخاصة بهم. متجر Microsoft ، على سبيل المثال ، يخطو خطوة أخرى إلى الأمام ويخطط لإعادة ملء متجر التطبيقات الخاص به تلقائيًا باستخدام PWAs عالية الجودة مفهرسة بواسطة برامج زحف Bing الخاصة بهم:

سيقوم متجر Microsoft ، المدعوم من Bing crawler ، تلقائيًا بفهرسة تطبيق الويب التقدمي المحدد الجودة

الترحيب بتطبيقات الويب التقدمية في Microsoft Edge و Windows 10

اعتبارًا من الآن ، يعد Apple App Store هو سوق التطبيقات الشهير الوحيد الذي لا يمكن لـ PWA الوصول إليه. هذا لأن Apple أوضحت في إرشادات المراجعة الخاصة بها أنه من أجل الموافقة عليها ، يجب أن يكون التطبيق "بعيدًا عن موقع ويب معاد تجميعه" - وهذه مناقشة أخرى تمامًا في حد ذاتها ، حول كيفية تثبيط Apple بنشاط تطوير الويب خوفًا من الإضرار بنتائجهم النهائية.
مقارنةً بـ PWAs ، فإن قابلية اكتشاف التطبيقات التي تم إنشاؤها باستخدام React Native ليست مثيرة للإعجاب ، ولكن الطبيعة متعددة المنصات لإطار العمل تعني أنه باستخدام قاعدة بيانات واحدة ، لا يزال بإمكانك الحصول على تطبيقك قابلاً للاكتشاف على كل من Google Play Store و Apple App Store. وبالنظر إلى أن مستخدمي iOS هم الأغلبية في بعض البلدان (بما في ذلك الولايات المتحدة) - وأنه لا يمكن نشر PWAs في متجر تطبيقات Apple - يجب أن يكون هذا سببًا كافيًا لاختيار تطوير تطبيق React Native من أجل الخدمة في الأماكن غالبية المستخدمين لديك ..

إمكانية الوصول إلى الأجهزة

نظرًا لأن تطبيقات React Native هي تطبيقات أصلية حقيقية ، فإنها تتمتع بوصول أوسع إلى واجهات برمجة التطبيقات الأصلية. وهذا يعني أنه حتى الوصول منخفض المستوى إلى أجهزة الجهاز (على سبيل المثال ، الوصول إلى NFC (اتصال المجال القريب) وقائمة جهات الاتصال وما إلى ذلك) والوصول النظامي (على سبيل المثال ، الوصول إلى إعدادات النظام والسجلات وما إلى ذلك) ممكن ويمكن الاستفادة منه لتحسين تجربة المستخدم.
ونظرًا لأن PWA يعتمد على Web APIs لإمكانية الوصول إلى الأجهزة ، فإن PWA مقيد بشكل طبيعي في كيفية استخدامه لموارد النظام. في أفضل سيناريو - أي إذا كان المستعرض قيد الاستخدام يدعم أحدث واجهات برمجة التطبيقات للوصول إلى الأجهزة - يمكن لـ PWA الوصول إلى ميزات الأجهزة المختلفة التي كانت حصرية في السابق للتطبيقات الأصلية مثل تحديد الموقع الجغرافي والوصول إلى الكاميرا والميكروفون والواقع المعزز (باستخدام WebXR واجهة برمجة تطبيقات الجهاز).

 يوصى بالقراءة: تطبيق الويب التقدمي (PWA) والوصول إلى الأجهزة

تكاليف التطوير

من حيث تكاليف التطوير ، تميل مشاريع React Native إلى أن تكون باهظة الثمن بسبب المستوى العالي من التعقيد الذي تنطوي عليه. على سبيل المثال ، من الشائع أن يتكلف مشروع React Native الأساسي ما يزيد عن 15.000 دولار أمريكي ، بينما يجب أن يكلف مشروع PWA الأساسي حوالي 1000 دولار - 10.000 دولار فقط. ومع ذلك ، بالمقارنة مع أطر التطبيقات الأصلية الأخرى ، يظل React Native حلاً فعالاً من حيث التكلفة بفضل بنيته الحيادية للمنصة. باستخدام قاعدة كود React Native واحدة ، يمكنك نشر تطبيقك على كل من متجر Google Play ومتجر Apple App Store ، مما يقلل بشكل كبير من تكاليف التطوير الإجمالية دون الإضرار بتجارب المستخدم.

وعلى الرغم من أن تكلفة تطوير مشروع PWA عادةً ما تكون أرخص من مشاريع React Native ، إلا أنها يمكن أن تختلف اختلافًا كبيرًا بناءً على مسار التطوير الذي تختاره. على سبيل المثال ، إذا قررت استخدام بنية بدون رأس (وهو حل أكثر مرونة وقابلية للتوسع مقارنة بالبنية التقليدية) ، فيمكنك توقع زيادة تكاليف تطوير PWA بشكل كبير بسبب المستوى العالي من الخبرة الفنية المطلوبة في العملية .

استنتاج

نظرًا لأن هذين المسارين للتطوير لاحتياجات محددة للغاية ، فإن الاختيار بين React Native و PWA يمكن أن يكون قرارًا صعبًا. يعد PWA خفيف الوزن ، مع عمليات تحديث وتثبيت سهلة ، ويجب أن تكون الميزات والوظائف التي يوفرها PWA أكثر من كافية لمستخدم التطبيق العادي. ومع ذلك ، نظرًا للقيود الحالية التي تفرضها Apple على متاجر التطبيقات الخاصة بها ، فقد يكون من الجيد الاستثمار في تطبيق React Native جيد إذا كان غالبية مستخدمي هاتفك المحمول يستخدمون iPhone.

بالنسبة لتجار Magento الذين يتطلعون إلى إنشاء تطبيقات React Native عبر الأنظمة الأساسية أو تطبيقات PWA مقطوعة الرأس ، نقدم هنا في SimiCart حلولًا فعالة من حيث التكلفة لمساعدتك على اكتساب ميزة تنافسية على منافسيك.