PWA مقابل Flutter: مقارنة مفصلة

نشرت: 2020-07-10

جدول المحتويات

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

في محاولة للتمييز بين هاتين التقنيتين ، سنقوم اليوم بغوص عميق في هاتين التقنيتين - من طريقة عملهما إلى استخدامهما في الحياة الواقعية. دعنا ندخله مباشرة:

لمحة موجزة

تطبيق الويب التقدمي مقابل Flutter: نظرة عامة

ما هو PWA؟

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

إنها تقنية جديدة واعدة. وبالاقتران مع التبني الجماعي من جميع اللاعبين الكبار بما في ذلك Microsoft مع دفعهم الأخير لـ PWA إلى Windows ، يمكنك التأكد من أنك ستشاهد المزيد من PWA فقط من الآن فصاعدًا.

ما هو Flutter؟

تشتهر Flutter بقدرتها المثالية على البكسل في التطوير ، وهي أحدث SDK (مجموعة تطوير البرامج) مفتوحة المصدر من Google لإنجاز المهمة إذا كنت ترغب في إنشاء تطبيقات جوال لها مظهر ومظهر تطبيق أصلي بينما لا تزال متاح عبر النظام الأساسي. هذا يعني أن تطبيقات Flutter مبنية مع وضع قاعدة رمز واحدة في الاعتبار ، وبالتالي تقليل تكاليف التطوير بشكل كبير.

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

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

لغة

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

من ناحية أخرى ، يستخدم Flutter لغة البرمجة Dart . Dart هي لغة برمجة موجهة بالكامل ، ولأنها تحتوي على أسلوب بناء جملة قائم على لغة C ، فمن السهل تعلمها والتقاطها إذا كنت معتادًا على أسلوب بناء الجملة المماثل. علاوة على ذلك ، يمكن تجميع Dart إلى كود ARM و x86 ، ومع الإصدار الأحدث من Flutter ، يمكنك حتى أن تتوقع أن تكون قادرًا على تحويلها إلى JavaScript حتى يمكن تشغيل شفرة Dart الخاصة بك بشكل فعال على الويب.

تعقيد

نظرًا لأن PWA يعتمد على JavaScript وهي لغة أقدم وأكثر نضجًا ، يمكنك توقع أن يكون منحنى التعلم أكثر تسامحًا نظرًا لوجود العديد من أطر عمل ومكتبات JavaScript المتاحة لتختار من بينها. يمكن أن تبدو Flutter - كونها لغة أحدث كثيرًا - أكثر تعقيدًا قليلاً للوهلة الأولى ، حيث يمكن أن يظهر كل شيء ، من واجهة المستخدم إلى الشفرة المنطقية ، بشكل أو بآخر مختلطًا معًا في Flutter. ونظرًا لأن كل شيء عبارة عن عنصر واجهة مستخدم في Flutter ، يمكنك أن تجد نفسك في مواقف تنتهي فيها بـ "شجرة عناصر واجهة مستخدم" كبيرة وعميقة ومعقدة بشكل غير عادي.

أداء

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

ومع ذلك ، عند النظر إلى المعايير ، من الواضح أن أطر عمل JavaScript ، على سبيل المثال ، NodeJS ، يمكن أن تعمل على قدم المساواة ، إن لم تكن أفضل من Dart (العمود الفقري لتطبيقات Flutter) في عدة مناسبات.

معيار nodejs مقابل dart
NodeJS - إطار عمل PWA شائع - يؤدي بشكل أفضل من Dart في أحمال العمل متعددة مؤشرات الترابط [المصدر]

يرجع هذا إلى حقيقة أن JavaScript يمكنها الاستفادة بشكل أفضل من الطبيعة متعددة النواة لوحدات المعالجة المركزية الحديثة وتوزيع أحمال العمل بشكل متساوٍ ، على الرغم من أن اللغة نفسها ذات طبيعة أحادية الترابط. من خلال وحدة worker_threads الحديثة التي قدمتها NodeJS والتي تتيح استخدام سلاسل عمليات التنفيذ المتوازية لعملية JavaScript ، يمكن لـ JavaScript الآن التعامل بشكل أفضل مع أعباء العمل كثيفة استخدام وحدة المعالجة المركزية ويمكنها بالفعل التغلب على لغات مثل Dart.

مخطط مؤشر ترابط العامل - NodeJS
المصدر: Nodesource

سمات

مما لا شك فيه أن Flutter - وهي حزمة SDK مصممة خصيصًا لتطوير تطبيقات الأجهزة المحمولة عبر الأنظمة الأساسية - هي ميزة أكثر بكثير من PWA المبنية على تقنيات الويب. تتمتع تطبيقات Flutter بتكامل أعمق مع النظام وبالتالي فهي قادرة على الاستفادة من المزيد من الميزات الأصلية للجهاز.

علاوة على ذلك ، عندما يتعلق الأمر بتجربة المستخدم الإجمالية ، فإن Flutter لها اليد العليا هنا لأنها تتبنى فلسفة مثالية للبكسل يمكن من خلالها للمستخدمين من كل من نظامي iOS و Android تجربة نفس التجربة السلسة.

هذا يرجع إلى حقيقة أن Flutter يعرض مكونات واجهة المستخدم الخاصة به ، على عكس معظم الأطر الأخرى التي تستخدم مكونات النظام الأساسي الأصلية. بهذه الطريقة ، تكون تطبيقات Flutter أكثر اتساقًا عبر الأجهزة ، ولكن ، بالتالي ، يكون حجم تطبيق Flutter النموذجي أكبر بكثير من تطبيق PWA النموذجي. كلمة بسيطة "أهلاً بالعالم!" على سبيل المثال ، يمكن أن يزيد حجم تطبيق Flutter عن 7 ميجا بايت ، بينما لا يكسر تطبيق PWA الذي يحتوي على نفس المحتوى علامة 1 ميجا بايت.

استخدم حالات

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

بطبيعة الحال ، تعتمد PWA على تقنية الويب وهذا هو السبب في أنها يمكن أن تصل إلى نطاق أوسع من الجمهور ويمكن حتى أن تكون متاحة في متجر Microsoft ، مما يوسع بشكل فعال وصولك إلى كل قاعدة تثبيت Windows 10 بأكملها لما يقرب من 700 مليون مستخدم شهري نشط.

من ناحية أخرى ، يمكن لتطبيق Flutter ، وبفلسفته المثالية للبكسل ، أن يجعل التجربة داخل التطبيق أكثر جاذبية مع استمرار كونه حلاً فعالاً من حيث التكلفة للشركات نظرًا لأن قاعدة رمز واحدة فقط مطلوبة لكل من Android و منصات iOS.

أمثلة

من بين تطبيقات PWA و Flutter التي قمنا بجمعها ، هذه هي أبرز التطبيقات التي نعتقد أنها يمكن أن تمثل قدراتها بشكل أفضل:

رفرفة ، نيويورك تايمز

بدأ Flutter فصله الجديد مؤخرًا في منتصف عام 2019 ، حيث تم التحقق من إمكاناته من خلال إصدار Flutter Web الجديد من لعبة KENKEN في نيويورك تايمز.

تطبيق كينكن فلاتر للويب
المصدر: Flutter is All the Things

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

PWA — Twitter Lite

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

والتمييز الأساسي لأفضل PWA أداءً ، عند مقارنته بتطبيقات Flutter التي لها نفس الأداء ، هو أن الحجم الإجمالي لـ PWA يجب ألا يستغرق أكثر من 2 ميجابايت على جهازك.

تويتر لايت PWA
تطبيق الويب التقدمي Twitter

بعد تحويل موقع الويب الخاص بهم إلى PWA ، شهد Twitter نتائج رائعة. الأرقام تتحدث عن ذاتها:

  • 20٪ انخفاض في معدل الارتداد ،
  • 65٪ زيادة في عدد الصفحات في الجلسة ،
  • 75٪ ارتفاع في التغريدات المرسلة.
 مقالة ذات صلة: 12 أمثلة على تطبيقات الويب التقدمية لإلهامك

A Flutter PWA ، هل هو ممكن؟

دعم الويب لـ Flutter هو بالفعل مناقشة جارية وفي مرحلته التجريبية. يمكن أن تكون عملية إتاحة Flutter الخاصة بك على الويب بسيطة مثل تجميع Dart إلى JavaScript ، بدلاً من تجميعها في رمز آلة ARM المستخدم لتطبيقات الأجهزة المحمولة.

لا تزال هناك بعض التعقيدات التي تجعل تحقيق كل هذا أصعب قليلاً ؛ ولكن كما لوحظ في لعبة KENKEN المذكورة أعلاه في New York Times ، من الممكن تنفيذ تطبيق ويب لائق لتطبيقات Flutter ، ومن المحتمل أن يكون Flutter PWA شيئًا في وقت ما قريبًا.

استنتاج

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

في SimiCart ، نحن وكالة تطوير PWA معترف بها من Google ، وعلى استعداد لتقديم تجربة التسوق من الجيل التالي إلى متجر Magento الخاص بك.

استكشف simicart PWA

اقرأ أكثر:
PWA vs Electron: A Deep Dive

ما هو PWA؟ كل ما تحتاج لمعرفته حول تطبيق الويب التقدمي

Magento PWA Studio vs Vue Storefront: أيهما يناسبك؟