📩 🔁 👈🏾 React Native: معلم جديد في Shopify Mobile Development 🛴 🏓 👰🏻

أو لماذا يتحول Shopify إلى React Native.

بعد سنوات عديدة من تطوير الهاتف المحمول الأصلي ، قررنا التحرك بقوة نحو تطوير تطبيقات الهاتف المحمول على React Native. سيكون من الواضح أدناه أن هذا القرار لم يكن سهلاً بالنسبة لنا.

في نهاية كل ربع سنة ، نرى نفس الصورة: يقوم معظم عملائنا بإجراء عمليات شراء عبر الأجهزة المحمولة (في الربع الثالث من العام الماضي كانت حصتهم 71٪). الجمعة السوداء والاثنين الإلكتروني هو أكثر الأوقات سخونة بالنسبة للبائعين ، ونشاط العملاء هذه الأيام خارج المخططات. في هذا العام ، خلال فترة الخصم ، سجل شركاء Shopify زيادة بنسبة 3 بالمائة في الطلبات من الأجهزة المحمولة ، وبلغ متوسط حصة هذه المشتريات 69٪ من إجمالي عدد المعاملات .

فلماذا قررنا التحول إلى React Native؟ ولماذا الآن؟ ماذا سيحدث لتطوير الهواتف المحمولة لدينا الآن؟ لن تتمكن من الإجابة على هذه الأسئلة بسرعة وباختصار. لنبدأ بالخلفية.

Shopify Mobile Development - 2019

لقد طورنا ممارسة خاصة في Shopify - للاعتماد على التقنيات الحديثة نسبيًا التي هي في مرحلة مبكرة من التطوير ، أو تكتسب شعبية فقط. يساعدنا على النمو بشكل أسرع.

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

نحن نشكل خبرة فريدة في مجموعة صغيرة من التقنيات (وكثيراً ما نقدم مساهمة كبيرة أو حتى كبيرة في تطويرها) ؛
كل حل تكنولوجي له اختناقاته ، وخفاياه ، ونتعمق فيه ؛
, , ;.
.

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

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

, ?
, , ?
, () ?

كان روبي أون ريلز في المرحلة الأولى من التطوير ولم يتشكل بعد كإطار كامل ، عندما أصبح توبي (الرئيس التنفيذي لدينا) في عام 2004 المشارك الرئيسي في مشروع المصدر المفتوح. لسنوات عديدة ، اعتبر روبي أون ريلز حلاً تافهًا وغير فعال . لكن اختيار ودراسة هذه التكنولوجيا في مثل هذه المرحلة المبكرة من التطور أعطى Shopify ميزة تنافسية ، على الرغم من أنها كانت خيارًا لا يحظى بشعبية. باستخدام Ruby on Rails ، تمكن الفريق من إنشاء منتجات وجذب الموارد بسرعة. بعد كل شيء ، كانت تقنية حديثة ، مع مستوى تجريد أعلى من لغات وأطر البرمجة التقليدية التي كانت موجودة في ذلك الوقت. وبالمثل ، أخبر بول جراهام ذات مرةحول كيف قرر استخدام Lisp لإنشاء Viaweb. تستخدم 6 من أغلى 10 شركات Y Combinator اليوم Ruby on Rails (على الرغم من أن الإطار لا يزال غير شائع جدًا). من ناحية أخرى ، لا تستخدم أي من أغلى 10 شركات Y Combinator جافا ، والذي يعتبر حلاً مؤسسيًا موثوقًا به إلى حد ما.

وبالمثل ، قبل عامين قررت Shopify التبديل إلى Google Cloud.. مرة أخرى ، هذا مشروع محفوف بالمخاطر إلى حد ما لثاني أكبر خدمة تجارة إلكترونية في الولايات المتحدة (اعتبارًا من عام 2019) - لإجراء ترحيل سحابي خارج مراكز البيانات الخاصة به من أجل منتج جديد إلى حد ما ، Google Kubernetes Engine. رأينا أن منحنى القيمة المضافة دفعنا إلى التركيز على ما نحن جيدون فيه (وهذا يساعد الأعمال التجارية) ، مما يسمح للآخرين (في هذه الحالة Google Cloud) بالاضطلاع بالعمل الشاق المتمثل في الحفاظ على تشغيل المعدات الحالة ، مع ضمان السعة ، والأمان ، وتحديث نظام التشغيل ، وما إلى ذلك.

رد فعل المواطن - ما هو؟

في عام 2015 ، أعلن Facebook وأصدر إطار عمل React Native مفتوح المصدر . سابقا ، كان يستخدم بالفعل داخليا لتطوير تطبيقاته النقالة. React Native هو إطار عمل للتطوير عبر الأنظمة الأساسية لتطبيقات الهاتف المحمول المعروضة أصلاً باستخدام مكتبة React js . وبالتالي ، فإنه يجعل من الممكن استخدام مكتبة js العليا لإنشاء واجهة مستخدم لتطبيقات الهاتف المحمول الأصلية.

في Shopify ، كانت هذه الفكرة (في ذلك الوقت ، إلى حد ما أيضًا) متشككة ، لكن العديد اعتبرها واعدة. لذا فإن حدث Shopify Hackdays التاليتم تخصيصه بالكامل لرد فعل السكان الأصليين. على الرغم من أن الفريق قدّر بعد ذلك فوائد الإطار ، قررنا أنه في عام 2015 لم نتمكن من تنفيذ تطبيق React Native ، والذي قد نفخر به لاحقًا. كان هذا بشكل أساسي بسبب مشاكل في الأداء ونقص الدعم الكامل لنظام التشغيل Android. ولكننا أدركنا بوضوح أننا أحببنا نموذج البرمجة التفاعلية و GraphQL . بالإضافة إلى ذلك ، بعد الاجتماع مع React Native ، قمنا بتطوير وعرض جهاز عرض لنظام iOS. في عام 2015 ، قمنا بتطبيق هذه التقنيات على مجموعتنا ، لكننا لم نستخدم React Native في التطوير الشامل للهواتف المحمولة. تجاربنا الأولى مكتوبة بالتفصيل هنا .

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

نحن نستخدم قوة جافا سكريبت وتقنيات الويب الأخرى في تطوير الأجهزة المحمولة ؛
إدخال نموذج البرمجة التفاعلية في تطوير تطبيقات العميل ؛
سنقوم بدمج التطوير لنظامي iOS و Android على React Native في حزمة تكنولوجية واحدة.

كيف يعمل React Native؟

يتيح لك React Native إنشاء تطبيقات جوال معروضة أصلاً عبر الأنظمة الأساسية باستخدام JavaScript. يتفاعل React Native مع React: فنحن ننشئ أيضًا واجهة مستخدم في JS بشجرة من عناصر واجهة المستخدم ، أو باستخدام DOM افتراضي (VDOM) ، من حيث ReactJS. إذا قام ReactJS بعرض عناصر الواجهة في المستعرض ، فإن React Native يحول كائنات VDOM إلى عناصر مرئية خاصة بالنظام الأساسي الأصلي للعرض على الأجهزة المحمولة باستخدام المجلدات: يتم تضمين المكونات الأصلية في React. نحن مهتمون فقط بمنصات Android و iOS ، ولكن هناك المتحمسين الذين يرغبون في تطوير React Native لنظام التشغيل Windows و macOS و Apple tvOS.

يتفاعل ReactJS مع المتصفح ، ويتفاعل React Native مع واجهات برمجة تطبيقات الجوال.

متى لا نستخدم React Native؟

هناك حالات لا يستخدم فيها فريق Shopify React Native لتطوير تطبيقات الهاتف المحمول. على وجه الخصوص ، إذا طلب منا القيام بما يلي:

إطلاق التطبيق على الأجهزة القديمة (CPU <1.5 GHz) ؛
معالجة معقدة
أداء فائق
العديد من الخيوط تعمل في الخلفية.

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

لماذا ننتقل إلى React Native الآن؟

لدينا 3 أسباب رئيسية:

بعد الحصول على سوق Tictail (تم تطوير الخدمة على React Native ، وفقًا لمبدأ الجوال أولاً) في عام 2018 ، رأينا ما حصل عليه React Native من التطوير وفي عام 2019 استثمرنا في ثلاثة مشاريع أخرى.
يستخدم Shopify بنشاط React في تطوير الويب ، والآن حان الوقت لتطبيق خبرتنا في تطوير تطبيقات الهاتف المحمول.
لاحظنا أن منحنى الأداء زحف إلى الأعلى (على سبيل المثال ، ما كان يمكن أن يفعله من قبل ، والآن ما يمكن أن يفعله محرّر مستندات Google مقارنة بمكتب Microsoft Office) وراهن على React Native على المدى الطويل - تمامًا كما اعتقدنا ذات مرة في Ruby on القضبان و Kubernetes و Rich Media.

تطوير الهاتف المحمول في Shopify في 2019

في Shopify ، يمكن للبائعين والمشترين التفاعل بعدة طرق: عبر الويب وتطبيقات الهاتف المحمول. طوال العام الماضي ، كانت فرقنا الثلاثة تجري تجارب مع React Native ، ونتيجة لذلك ، طوروا ثلاثة تطبيقات للجوّال: الوصول ، ونقطة البيع ، والبوصلة.

بعد تجاربنا ، توصلنا إلى الاستنتاجات التالية:

عند نسخ تطبيق الوصول إلى React Native ، وجد الفريق أن الإنتاجية قد تضاعفت مقارنة بالتطور الأصلي ، حتى إذا كنت تكتب لمنصة واحدة فقط ؛
باختبار إصدار Android من تطبيق Point of Sale بقدرة منخفضة ، وجدنا أن التطبيق يعمل بتردد أقل لوحدة المعالجة المركزية: 1.5 جيجاهرتز (مكتوب في React Native) مقابل 2GHz (تطوير أصلي) ؛
قدرنا مبدئيًا أن نسبة الكود المستقل عن المنصة ستكون ~ 80٪ ؛ وقد فوجئنا عندما تبين أنها في الواقع أعلى من ذلك بكثير: 95٪ في الوصول و 99٪ في البوصلة.

لكن الأمر يستحق الحجز: على الرغم من أننا قررنا كتابة تطبيقات جديدة على React Native ، فإن هذا لا يعني أننا سنعيد كتابة جميع تطبيقاتنا القديمة.

يصل

في نهاية عام 2018 ، قررنا إعادة كتابة أحد تطبيقات العميل الأكثر شيوعًا الخاصة بنا إلى React Native ، Arrive . إنه تطبيق iOS عالي الأداء وعالي التصنيف مع ملايين التنزيلات. لقد اخترنا Arrive لأنه لم يكن لدينا إصدار Android الخاص به. لذلك ذهبنا لمقابلة مستخدمي أجهزة Android. الآن تمت كتابة كل من إصدارات iOS و Android بلغة React Native بنسبة 95٪ من إجمالي الرمز عبر الأنظمة الأساسية.

في عملية إعادة الكتابة ، حققنا النتائج التالية:

عند تشغيل الإصدار عبر الأنظمة الأساسية لنظام iOS ، تحدث أعطال أقل من الإصدار الأصلي ؛
أطلقنا الإصدار لنظام التشغيل Android.
تمكن كل من مطوري الهواتف المحمولة وغير المتنقلة من العمل في المشروع.

بالإضافة إلى ذلك ، تمكن الفريق من تجربة طريقة ممتازة للتنفيذ السريع لطلبات السحب "العمل الجاري". ما عليك سوى مسح رمز الاستجابة السريعة من تعليق Github باستخدام هاتفك ، ويتم تحديث حزمة JS لتطبيقك. وبالتالي ، في كل مرة يمكنك تحديث التطبيق على الفور واستخدام نسخته الحالية. وصفت محطة الخدمة لدينا هذه العملية مؤخرًا على Twitter .

نقطة البيع

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

من أجل تلبية متطلبات بائعي التجزئة لدينا في نفس الوقت وفهم أفضل لتطوير React Native لأجهزة POS ، قررنا إنشاء تطبيق جديد للأجهزة المحمولة لنظام iOS ، وكتابة إصدار لنظام التشغيل Android على React Native.

لقد خصصنا فريقين منفصلين لهذه المهام ، وإليك السبب:

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

أعلنا عن POS المعاد كتابتها في Unite 2019 . كلا الإصدارين ، iOS و Android على React Native ، سيكون متاحًا في عام 2020.

بوصلة

لدى Spotify فريق Start يساعد العملاء في بدء أعمالهم الخاصة. قبل أن تتخذ الشركة قرارًا أساسيًا لتطوير تطبيقات الهاتف المحمول على React Native ، درس هذا الفريق Flutter و React Native بالتفصيل . وقع الاختيار على React Native ، والآن لديهم إصدارات بيتا من iOS - وتطبيقات Compass Android . علاوة على ذلك ، 99٪ تقريبًا من الرمز المشترك لديهم.

سيتم إصدار الإصدارات الأولى في غضون ثلاثة أشهر.

تطوير المحمول في Shopify 2020 ++

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

التعاون والمصدر المفتوح

نحن نعتقد أن تطوير البرمجيات هو لعبة جماعية. نحن منخرطون في تطوير الويب المفتوح والمصدر المفتوح والمعايير المفتوحة الأخرى.

نحن نساهم في تمويل Software Mansion ومشاريع Krzysztof Magera (المؤسس المشارك لـ React Native for Android) ذات الصلة بـ React Native.
نحن نتعاون مع William Candillon (بقيادة Can It Be Done in React Native على قناة YouTube) في الهندسة المعمارية وتحسين الأداء.

نحن نخطط للعمل بشكل وثيق مع فريق React Native من Facebook على الأتمتة وإنشاء مكتبات تابعة لجهات خارجية والإشراف على بعض الوحدات في مشروع Lean Core.

نعمل جنبًا إلى جنب مع Discord بنشاط لإعداد نسخة مفتوحة المصدر بسرعة من مكتبة FastList for React Native (تسمح لك بعرض عناصر القائمة الموجودة في المنطقة المرئية فقط) وتحسينها لنظام التشغيل Android.

أوامر الأدوات والأسس الخاصة بنا من أجل رد فعل السكان الأصليين

عندما تعتمد على التكنولوجيا وتتعمق فيها ، فأنت تريد الحصول على أقصى تأثير منها. من أجل تحديد الأهداف بسرعة وتحقيق هذا الهدف ، أنشأنا نوعين من الفرق التي تساعد موظفي Shopify الآخرين على أن يكونوا منتجين. النوع الأول هو فريق الأدوات ، الذي يساعد في التكوين والتكامل والنشر. النوع الثاني هو فريق المؤسسة الذي يتعامل مع SDK وإعادة استخدام التعليمات البرمجية والمصدر المفتوح. في عام 2020 ، بدأ كلا الفريقين في التطور نحو React Native.

تطبيق Shopify Ping الشهير لدينا ، والذي يسمح لك بالدردشة مع مئات الآلاف من العملاء ، متاح حاليًا فقط في إصدار iOS. في عام 2020 ، سنعمل على إصدار لنظام التشغيل Android باستخدام React Native في فرعنا في سان فرانسيسكو ، حيث نوظف موظفين.

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

React Native: معلم جديد في Shopify Mobile Development