لماذا تركت رد الفعل الأصلي تجاه الرفرفة: الجزء 1

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



وكنت قد شهدت فرص هذا النوع من ردود الفعل حول رد فعل الأصلية وكيف يمكن للشركات و يتحرك بعيدا عن ذلك. سوف أشارك رأيي الشخصي من مطور واحد وليس شركة.

هذا المقال لمن:

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

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

لماذا اخترت React Native

جئت إلى React Native من تطوير الويب باستخدام React.js في عام 2017. احتاجت الشركة إلى مطور React / React Native.



الأسباب:

• نفس اللغة جافا سكريبت.
• نفس القواعد لبناء واجهة مستخدم ونظام مكون.
• عبر منصة.

لماذا تركت لرفرفة

يعد React Native جيدًا حتى تبدأ في فعل شيء ثقيل ، مع الكثير من الشاشات والمنطق التدريجي ، ويصبح التطبيق أكثر صعوبة وأصعب. لقد جربت طرقًا مختلفة لتحسين الأداء: shouldComponentUpdate ، و PureComponent ، واستخدام المفتاح ، والحفظ ، وتحسين الحلقة ، وما إلى ذلك ، وبدأت التفكير في استبدال JSCore (لم يكن Hermes موجودًا بعد). نتيجة لذلك ، صادفت نصيحة لمحاولة Flutter.



يحتوي Flutter على أدوات أكثر ثراءً وأداءً أفضل ولا توجد مشكلات في React Native. بالطبع ، أنا لا أنكر أن كود ال RN الخاص بي قد لا يكون الأكثر مثالية.

إيجابيات React Native التي جعلتني أبدأ بها

1. تستخدم React Native بنية مكونات React.js الملائمة.



React.js:

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Image
                    logo={logo}
                />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <AppLink>
                    Learn React
                </AppLink>
            </header>
        </div>
    );
}
function Image({logo}) {
    return <img src={logo} className="App-logo" alt="logo" />
}
function AppLink({children}) {
    return (
        <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
        >
            {children}
        </a>
    );
}

export default App;

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

function App() {
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}
            >
            <Header />
            </ScrollView>
            </SafeAreaView>
        </>
    );
}

function Header() {
    return (
        <View>
            <Text>head</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    scrollView: {
        backgroundColor: Colors.lighter,
    },
});

export default App;

2. لا يوجد WebView و HTML - يتم استخدام أدوات النظام الأساسي الأصلية (OEM). يحدث الاتصال بين JS والجزء الأصلي من خلال جسر .



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



3. CodePush . يسمح للمستخدمين بتغيير رمز التطبيق على الفور تقريبًا دون تحديث الإصدار من المتجر.



4. خلال فترة وجودها ، ظهر الكثير من المكتبات لـ React Native.

إحدى مجموعات المكتبات .



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

إيجابيات الرفرفة

1. الإصدار.



نسخة مستقرة وموثوقة. تضمن الإصدارات المتزامنة لـ Dart و Flutter أن الإصدار الجديد من Flutter يستخدم أحدث إصدارات Dart. نظرًا لأنه تم تطويرها بواسطة نفس الشركة - Google.



2. أداء واجهة المستخدم.



يتم تقديم واجهة المستخدم على محرك Skia الخاص بها . يحتوي Flutter على مجموعته الخاصة من عناصر واجهة المستخدم Material و Cupertino ، وهي نسخة من مكونات OEM الخاصة بالمنصة. هذا يسمح باستخدامها في وقت واحد على كلا النظامين الأساسيين. لمزيد من المعلومات حول كيفية عمل الأدوات ، راجع مقالة Flutter Under the Hood .



مثال على تشغيل أداة iOS على كلا النظامين الأساسيين:







لا توجد مكونات OEM ولا تكاليف تفاعل. على الرغم من أنها ميزة لـ React Native على التقنيات التي تستخدم WebView ، إلا أنها أقل مرونة من أدوات Flutter وأداءها. عملت مؤخرًا على تطبيق يستخدم معظم عناصر واجهة المستخدم المادية لنظامي التشغيل Android و iOS ، ولكنه يعتمد على النظام الأساسي DatePicker.



نموذج لواجهة المستخدم على كلا النظامين الأساسيين :







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



4. تجميع الرفرفة.



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



مقارنة بين Native و Flutter و React Native performance .



5. يعزل.



في عملية Flutter and React Native 1 مع مؤشر ترابط واحد غير متزامن ومهام ثقيلة ستحظر واجهة المستخدم.



مخرج:

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

يحتوي Flutter Dev Podcast على إصدار رائع على العزلات والمكتبات للعمل معها.



6. كل شيء هو القطعة.



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



مثال: زر يحتوي على AppBar بعنوان Switch.

RaisedButton(
  padding: const EdgeInsets.all(10),
  child: AppBar(
    title: Row(
      children: <Widget>[
        Switch(
          value: false,
        ),
        Text('text'),
      ],
    ),
  ),
),

يمكنك كتابة القطعة الخاصة بك:

• مزيج من الحاجيات.
• استخدام Canvas لهندسة أكثر تعقيدًا.
• استخدام طبقة تجسيد عند الحاجة إلى سلوك معين.

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



مقال حول تصيير الطبقات.

سلبيات React Native

1. لا يزال 1.0.0.



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



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



أنشئ مشروع React Native في الإصدار 0.61.5 (قبل الأخير في الوقت الحالي).

رد فعل أصلي init test_version - الإصدار 0.61



تشغيل:







كل شيء على ما يرام.



نقوم بتهيئة المستودع ، نظرًا لأن الترقية تعمل أعلى Git وبدونها سيكون هناك خطأ:







تشغيل ترقية تفاعلية npx الأصلية: يتسبب







مشروع نظيف في حدوث خطأ عند الترقية.



دعنا نتبع الرابط المعروض في التريمينال. قائمة الملفات التي سيتم تحديثها يدويًا:

• package.json
• .gitattributes
• .flowconfig
• App.js
• app.js / android / app / build.gradle
• android / app / src / debug / java / com / rndiffapp / ReactNativeFlipper.java
• android / app / src / main / AndroidManifest.xml
• android / app / src / main / java / com / rndiffapp / MainApplication.java
• android / build.gradle
• android / gradle.properties
• android / gradle / المجمع / gradle-wrapper.properties
• android / gradlew
• ios / Podfile
• ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp-tvOS.xcscheme
• ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp.xcscheme
• ios/RnDiffApp/AppDelegate.m

بعد تحديث الملفات ، أقوم بتشغيل الترقية: قم







بتشغيل تثبيت npm. منجز. تم تحديث المشروع.



المعيار الرئيسي هو الوقت. يتم إنفاقه على تحديث وإصلاح المشكلات أو إعادة بناء المشروع من الصفر. على Flutter ، اكتب "flutter Upgrade" في وحدة التحكم وتكون بذلك قد انتهيت. سيتم تحديث Flutter لجميع المشاريع مرة واحدة. قد تكون هناك تغييرات عاجلة ، ولكن عادةً ما يكون هناك اثنان منهم للمشروع بأكمله ومن السهل جدًا إصلاحهما.



2. الأداء.



ذلك لم يكن كافيا. لا يزال ليس بالسرعة التي نود. كان المختبرين يتنقلون باستمرار في الأداء المنخفض "غير الأصلي". التحسينات لم تساعد دائما. مع نمو التطبيق ، يتم إجراء تسلسل لمزيد من البيانات للجسر وأقل استجابة.



3. نظرًا لاستخدام المكونات الأصلية ، فإنها تبدو مختلفة على Android و iOS.

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



نفس واجهة المستخدم. IOS على اليسار ، Android على اليمين.

بالإضافة إلى

جافا سكريبت كور

يحتوي React Native على JS Core القديم لنظام Android لفترة طويلة. مع ظهور Hermes ، تحسن الوضع ، ولكن وفقًا لمراجعات المطورين والاختبارات المألوفة ، فإن كل شيء ليس بهذه البساطة.



مقارنة محركات JS .

اكسبو

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

سلبيات Flutter

سيكون من الظلم عدم ذكرهم. ومع ذلك ، هذه ليست رصاصة فضية.



1. عدد أقل من المتخصصين والوظائف الشاغرة.

عدد أقل من المطورين والشركات التي تعتمد على Flutter مقارنةً بـ React Native. عندما كنت أبحث عن وظيفة على Flutter في مايو 2019 ، صادفت 3 شركات فقط.



2. عدد المكتبات أقل من React Native.

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



3. غير مناسب لـ:

• ألعاب.
• تطبيقات مرتبطة بالعمل بالحديد.
• تطبيقات الواقع المعزز. نظرًا لأنك تحتاج إلى تنفيذ المنطق بشكل منفصل لكل منصة.

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

توثيق

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

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

عتبة الدخول

في كلتا الحالتين ، يكون حد الدخول منخفضًا جدًا.

• React Native - تحتاج إلى معرفة JS و React ويمكنك البدء.
  
  
• Flutter — JS / Java / Kotlin / Swift / C ( JS — ), Dart .
  
  React Native, Flutter .

React Native

• .
• .
• .
• .
• .

Flutter

• , . .
• , .
• .
• .
• .

لا يهتم المستخدم بما تستخدمه لطلبات الشبكة Http أو Dio.

هل كنت تبحث عن مطور JS اليوم أو مطور Flutter لهذا الشهر. الشيء الرئيسي هو أن التطبيق يؤدي المهام المطلوبة وهو منتج. يتيح لك Flutter تلبية هذه المتطلبات بكفاءة أكبر.



سيكون تحليل حل نفس المشكلات باستخدام Flutter و React Native في الجزء الثاني من المقالة.