React Native در مقابل اپلیکیشن‌های Native

اگر در زمینه توسعه برنامه موبایل فعالیت دارید، نام React Native نباید برای شما جدید باشد. مدتی می‌شود که این اصطلاح در دنیای فناوری در حال گردش است. از آنجایی که Facebook رسما آن را به عنوان یک پلتفرم اوپن سورس راه‌اندازی کرد، بسیاری از کسب و کار‌ها آن را در پروژه‌های خود پیاده‌سازی کرده‌اند.

درست به مانند هر منشا دیگری، React Native هم نکات مثبت و منفی خود را دارد. جدا از این که توسعه دهندگان وب حرفه‌ای هنوز هم کار با ابزار بومی را ترجیح می‌دهند، تعداد زیادی توسعه دهندگان هم هستند که React Native را برای پروژه‌های خود در نظر دارند.

هدف این پست، برجسته‌سازی ابعاد نظری و عملی استفاده از React Native در مقایسه با Swift است. برای انجام این مقایسه، دو برنامه تقربیا یکسان بر روی هر دو فریم‌وورک داریم که می‌توانید بر روی گیت‌هاب مشاهده کنید:

https://github.com/weblab-technology/swift-honors-app

https://github.com/weblab-technology/react-native-honors-app

هدف من این بود که هر دو برنامه را در حد ممکن ساده نگه دارم، تا بتوانیم مقایسه عادلانه‌تری میان ابعاد هر دو پلتفرم انجام دهیم. در اینجا، تجزیه و تحلیل‌های جزئیات پردازی شده‌ای از توسعه برنامه‌ها در Swift و React Native، در زمینه‌های CPU، GPU و اشغال حافظه خواهید دید.

Swift علیه React Native

این برنامه شامل ورود فیس‌بوک، (Facebook Login) بازیابی پروفایل فیس‌بوک، بازیابی دیتابیس، و کنترلر Tab Bar است. من برنامه مشابهی را در Swift و همچنین در React کدنویسی کرده‌ام، و از یک تلفن همراه واقعی برای ارزیابی کارایی این برنامه‌ها استفاده خواهم کرد. هدف من، قرار دادن آن‌ها علیه یکدیگر است، تا بتوانیم ببینیم که کدام پلتفرم کارایی بهتری دارد.

Swift

برخلاف زبان‌های دیگر، کار با Swift آسان‌تر است؛ به خصوص اگر آن را با کارهایی که قبلا در Objective C انجام می‌دادیم مقایسه کنید. XCode یک برنامه هنرمندانه واقعی است و وقتی که با Swift ترکیب می‌شود، توسعه دهی را به مقدار زیادی آسان‌تر می‌کند.

(ورود فیس‌بوک در Swift)

(لیست یادداشت‌ها در Swift)

(Maps در Swift)

React Native

وقتی که درباره React Native صحبت می‌کنیم، یادگیری JavaScript در مقایسه با یادگیری Swift آسان‌تر است. بهترین نکته آن این است که بر خلاف iOS که باید همه چیز را خودتان تنظیم کنید، React Native برای کاربرانش پرکاربرد خواهد بود. من برنامه را در اندازه‌های صفحه iPhone مختلف اجرا کردم، و برنامه در همه جا بی نقص به نظر می‌رسید.

(ورود فیس‌بوک در React Native)

لیست یادداشت‌ها در React Native)

(Maps در React Native)

(نمایشگر CPU در صفحه Maps)

( نمایشگر CPU در صفحه یادداشت‌ها)

مقایسه کارایی

حال نوبت به این می‌رسد که این برنامه‌ها را علیه یکدیگر قرار دهیم، تا ببینیم کدام یک گزینه بهتری است. همانطور که پیش‌تر اشاره شد، از یک دستگاه واقعی به همراه XCode برای آزمایش این برنامه‌ها استفاده خواهم کرد. سه دسته‌ای که بر رویشان تمرکز خواهم کرد، CPU، GPU و اشغال حافظه هستند.

وقتی که من Maps را تغییر اندازه داده یا می‌کشیدم، برنامه‌های React Native بیش‌تر از Swift لگ داشتند.

طبق Energy Usage Log، برنامه Swift در مجموعه انرژی کمتری نسبت به React Native مصرف می‌کرد.

به کلی، ۴ تب در برنامه من وجود دارند: ورود فیس‌بوک، لیست یادداشت‌ها، Page view controller و Maps.

اندازه‌گیری‌های CPU

Swift علیه React Native - مصرف CPU

بیایید هر دسته را به صورت جداگانه بررسی کنیم...

1. پروفایل فیس‌بوک

با تفاوت ۱.۲۱ درصدی در اندازه‌گیری CPU، React Native در این زمینه کمی موثرتر از Swift است.

2. لیست یادداشت‌ها

برای تب دوم، React Native با تاثیر ۰.۶۶ درصدی، باز هم پیروز می‌شود. وقتی که این کار انجام می‌شد، بالا و پایین رفتن‌ها در مصرف CPU دقیقا در زمانی که من یک آیتم را به لیست اضافه یا حذف می‌کردم، ضبط می‌شدند.

3. Page view

با تاثیر 5.۵۵ درصدی، Swift در این بخش پیروز می‌شود. وقتی که این کار را انجام می‌شد، بالا و پایین رفتن‌ها در مصرف CPU دقیقا در زمانی که به یک صفحه دیگر در Page view منتقل می‌شدم، ضبط می‌شدند.

4. Maps

با تاثیر ۹.۷ درصدی، باز هم Swift در این بخش پیروز می‌شود. باز هم بالا و پایین رفتن‌ها در مصرف CPU دقیقا در زمانی که بر روی دکمه Maps کلیک می‌کردم، ضبط می‌شدند.

پس در اینجا، یک نتیجه 50 - 50 برای Swift و React Native داریم. در کل، Swift کمی در زمینه مصرف CPU در React Native‌ موثرتر بود. نکته جالب این است که در هنگام جا به جایی میان تب‌ها، CPU اصلا مصرف نمی‌شد.

مصرف GPU

تجزیه و تحیلی بعدی، اندازه‌گیری GPU خواهد بود. برای هر نمودار، یک فعالیت به اضای هر دکمه انجام خواهم داد و نتایج را یادداشت خواهم کرد. محور عمودی تا ۶۰ فریم / ثانیه هم خواهد رفت و من از ابزار «Cool Animation» برای ارزیابی نتایج استفاده خواهم کرد.

بیایید برای بررسی نتایج، هر دسته را بررسی کنیم.

1. پروفایل فیس‌بوک

با تفاوت ۱.۰۸ فریم / ثانیه، Swift به صورت حاشیه‌ای در این بخش پیروز می‌شود. نتایج دقیقا در زمانی که بر روی دکمه «Log in with Facebook» کلیک می‌کردم، بررسی می‌شدند.

2. لیست یادداشت‌ها

React Native این تب را به سختی و با اجرا با سرعت ۶ فریم بیشتر از Swift، پیروز می‌شود. نتایج دقیقا در لحظه  اضافه کردن / حذف کردن آیتم‌ها از لیست اندازه گیری می‌شدند.

3. Page view

Swift با سرعت ۱.۳۷ بیشتر از از React Native، در زمینه Page view پیروز می‌شود. وقتی که اندازه‌گیری‌ها را انجام داده و یادداشت می‌کردم، متوجه شدم که وقتی می‌خواستم به سرعت در میان صفحات منتقل شوم، فریم‌ها تا ۵۰ نیز می‌رسیدند.

4. Maps

در اینجا Swift با داشتن سرعت ۳.۶ فریم بالاتر از React Native، پیروز می‌شود. نتایج دقیقا در لحظه کلیک بر روی دکمه «Maps» اندازه گیری می‌شدند.

در اینجا با نتیجه ۳ به ۱، Swift پیروز می‌شود.

مصرف حافظه (رم)

حال نوبت به این می‌رسد که Swift و React Native را در زمینه مصرف حافظه مقایسه کنیم. من به اضای هر تب، یک فعالیت را انجام داده‌ام و نمودار را به همراه حافظه، (بر حسب MiB) بر روی محور y کشیده‌ام. نمونه وقفه برای مصرف CPU، یک میلی ثانیه است.

1. پروفایل فیس‌بوک

Swift با اشغال حافظه کمتر به میزان 7.07 MiB، در این بخش پیروز می‌شود. بالا و پایین رفتن میزان اشغال حافظه در هنگام کلیک بر روی دکمه «Log in to Facebook» اندازه گیری شده‌اند.

2. لیست یادداشت‌ها

در این بخش React Native با اشغال حافظه کمتر به میزان ۰.۳۵ درصد، پیروز می‌شود. بالا و پایین رفتن میزان اشغال حافظه در هنگام اضافه یا حذف کردن آیتم به لیست اندازه گیری شده‌اند. وقتی که یک آیتم را حذف می‌کردم، مقدار کاهش در مصرف حافظه دیده می‌شد.

3. Page view

باری دیگر، React Native با اشغال حافظه کمتر به میزان 0.07 MiB، پیروز می‌شود. در هنگام جا به جایی میان صفحات، هیچ تغییری در مصرف حافظه دیده نمی‌شد.

4. Maps

در این دسته نیز React Native به میزان ۳۶.۰۲، Swift را شکست می‌دهد.

با این که Swift مصرف حافظه بالاتری دارد، با رشد برنامه می‌توان مصرف حافظه را بهتر مدیریت کرد.

پلتفرم پیشنهادی من

برنامه‌هایی که من برای React Native و Swift توسعه دادم، به ظاهر تقریبا یکی هستند. به علاوه، واضح است که هر دوی این برنامه‌ها به نوعی مشابه کار می‌کنند. می‌توان از این آزمایش نتیجه برداری کرد که با این که React Native در دسته حافظه بهتر عمل کرد، Swift به طور موثرتری از CPU و GPU استفاده می‌کند. در نتیجه، می‌توان گفت که React Native بسیار نزدیک به Swift است، که این مسئله خوبی است. Siwft با نسبت برد ۲ به ۱، به همراه ظرفیت بالا برای حافظه، برنده قطعی این مقایسه است.

چه چیزی باعث می‌شود که React Native اینقدر معروف شود؟

معروفیت این فریم‌وورک با توجه به این که قول یک برنامه برای پلتفرم‌های مختلف به صورت همزمان را می‌دهد، اصلا شگفت‌آور نیست. از آنجایی که React Native صرفا به JavaScript بستگی دارد، نیازی نیست که زبان‌های دیگری را برای ساخت iOS و اندروید به صورت جداگانه یاد بگیرید. اما سوال در اینجاست که آیا این فریم‌وورک موبایل برای هر نوع پروژه‌ای مناسب است؟ خب، البته که نه. قبل از گرفتن تصمیم نهایی، موارد زیادی وجود دارند که باید در نظر بگیرید. مهارت کدنویسی فعلی شما، محدوده برنامه شما و مدت زمان پروژه شما، سوال‌هایی هستند که باید قبل از گرفتن تصمیم نهایی پرسیده شوند.

React Native - نکات مثبت و منفی

نکات مثبت:

برتری‌های هسته‌ای اشتراک‌گذاری شده

وقتی که درباره وب‌اپلیکیشن‌ها صحبت می‌کنیم، React می‌تواند یک الگو را نیز همراه با بارگذاری مجدد DOM مرورگر، راه‌اندازی کند. گرچه، وقتی به برنامه‌های موبایل می‌رسیم، همه چیز هنگام مدیریت تعداد زیادی از مدل‌ها بر روی پلتفرم‌های متنوع، نیازمند قدرت بیشتری هستند. اگر همینطور مسئولیت‌های بیشتری را بر روی شانه‌های React بگذارید، نمی‌توانید انتظار چیزی به جز یک فاجعه را داشته باشید.

پلتفرم همه‌جانبه

اگر نگاهی نزدیک‌تر به تعریف رسمی React داشته باشیم، اساسا یک کتابخانه JavaScript برای ساخت رابط‌های کاربری است. پس برای ساخت رابط‌های کاربری عالی است؛ اما در همین حین،‌ چیز دیگری را شامل نمی‌شود.

آیا تا به حال به این فکر کرده‌اید که یک دستور پخت کامل را به داشتن تنها یک جزء انجام دهید؟ به همین صورت، ساخت یک برنامه کامل فقط با React کافی نیست. قطعا به Webpack برای طراحی کد، CSS برای استایل‌بندی‌ها، یک Firebase برای نگهداری داده‌ها و بسیاری موارد دیگر نیاز خواهید داشت.

اگر محدوده توسعه شما به توسعه وب محدود شده است، React می‌تواند برای هدف شما کافی باشد. گرچه، اگر با طراحی موبایل نیز سر و کار دارید، اضافه کردن چند ابزار bundle کردن، ناچیز به نظر می‌رسد. به همین علت است که React یک کتابخانه بوده، و React Native یک فریم‌وورک است.

React Native چه چیزی را فراهم می‌کند؟

• React جدید
• بخش‌هایی برای اندروید و iOS
• Flexbox برای استایل‌بندی رابط کاربری
• ویجت‌ها و انیمیشن‌های مختلف
• و...

import React, { Component } from 'react';
import propTypes from 'prop-types';
import { View, Text } from 'react-native';
import { infoMessageStyles } from './styles';

export default class InfoMessage extends Component {
  static propTypes = {
    text: propTypes.string.isRequired,
  }

  render() {
    return (
      <View style={infoMessageStyles.wrapper}>
        <Text
          allowFontScaling={false}
          style={infoMessageStyles.text}
        >
          {this.props.text}
        </Text>
      </View>
    );
  }
}

از این رو، از آنجایی که React Native‌ هر چیزی که برای ساخت یک برنامه کامل نیاز دارید را شامل است، یک پلتفرم جامع است. در حالیکه React اصلی فقط به رابط کاربری وب رسیدگی می‌کند و باید بخش‌های دیگری را خودتان برای ساخت یک وب‌اپلیکیشن‌ کامل اضافه کنید.

رابط کاربری Native

آیا تا به حال به این فکر کرده‌اید که چرا React Native را «Native» (بومی) می‌نامند؟ علت آن این است که رابط کاربری ساخته شده با React Native شامل ویجت‌های بومی می‌شوند که نه تنها بی نقص کار می‌کنند، بلکه استوار به نظر می‌رسند.

مواردی مانند تسریع scroll، انیمیشن‌ها و رفتار کیبورد، به قدری به تجربه کاربری اضافه می‌کنند، که نمی‌توانید جلوی استفاده از آن‌ها را بگیرید. در اینجاست که React Native از برنامه‌های بومی بهتر است؛ زیرا شما را قادر می‌سازد تا برنامه‌های بومی‌ای بسازید که از الگوی React در JavaScript پشتیبانی می‌کنند.

کامپوننت‌های مجمع

React Native تعدادی کامپوننت‌های مجمع فراهم می‌کند که توسعه دهندگان را قادر می‌سازند تا عملیات‌های اساسی را سریع و موثر انجام دهند. برخی از آن‌ها:

Text: برای نمایش متن استفاده می‌شود.

import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';

export default class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: 'Nest',
      bodyText: 'This looks like a birds nest.',
    };
  }
  
  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={this.onPressTitle}>
          {this.state.titleText}{'\n'}{'\n'}
        </Text>
        <Text numberOfLines={5}>
          {this.state.bodyText}
        </Text>
      </Text>
    );
  }
}
const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

View: برای طراحی رابط کاربری استفاده می‌شود.

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 300, padding: 300}}>
        <View style={{backgroundColor: 'green', flex: 0.3}} />
        <View style={{backgroundColor: 'blue', flex: 0.5}} />
        <Text>Greetings !</Text>
      </View>
    );
  }
}

Text Input: کاربران را قادر می‌سازد تا متن وارد کنند.

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 43}}>
          {this.state.text.split(' ').map((word) => word && '?').join(' ')}
        </Text>
      </View>
    );
  }
}

Button

برای مثال، می‌توانید با استفاده از این کد، یک دکمه پایه برای برنامه بسازید:

<Button
  onPress={onPressLearnMore}
  title='A Basic Button'
  color='#841589'
  accessabilitylevel='A beautiful button'
/>

نکات منفی:

محدودیت API

با این که React Native تنوع عظیمی از APIها را پشتیبانی می‌کند، هنوز هم نیاز به استفاده از دیگر APIها در ماژول‌های بومی دارید. این ماژول‌ها اساسا بخش‌هایی از کد هستند که به زبان بومی نوشته شده‌اند و سپس در کد موجود قرار داده شده‌اند. بدون شک این راه خوبی برای بر طرف کردن مشکلات است؛ اما نیازمند مهارت کافی درباره زبان بومی و ابزارهای آن است.

طراحی پیچیده

اندروید و iOS از دستورالعمل‌های طراحی مختلفی استفاده می‌کنند، که ظاهرا یعنی با استفاده از React Native، تعداد زیادی بیانیه if را به همراه کدنویسی‌های جداگانه اضافه کرده‌اید، تا در مقابل عناصر گرافیکی به کار بگیرید. به علاوه، ساخت رابط‌های کاربری سفارشی هم در الگوی React خسته‌کننده است و من مجبور به نوشتن و اضافه کردن کتابخانه‌های Swift در هنگام توسعه این برنامه بودم.

کارایی کندتر

به نظر من این مهم‌ترین مسئله است. اگر می‌خواهید یک برنامه پیچیده مانند ویرایشگر عکس / فیلم بسازید، React Native گزینه خوبی برای شما نیست. گرچه، اگر پروژه شما نسبتا کوچک است، می‌توانید با به اشتراک گذاری کد خود از هدر رفتن زمان جلوگیری کنید.

Native - نکات مثبت و منفی

نکات مثبت:

بدون محدودیت API

چیزی که Native را عملکردی می‌کند، این است که می‌توانید از طریق محیط آن به تمام APIها دسترسی داشته باشید. شما به یک لایه mapping اضافه که باید بروزرسانی شود هم نیاز ندارید.

تنوع منابع قابل انتخاب

توسعه‌دهی در محیط Native فرصتی به شما می‌دهد تا به بسیاری از کتابخانه‌ها دسترسی داشته باشید. با انجام این کار، می‌توانید برنامه‌های بهتری با تجربه توسعه بهتر بسازید.

منفعت‌های طولانی مدت

وقتی که با الگوی React کار می‌کنید، فاکتور عدم قطعیت همیشه در میان است. در سمت دیگر Native، در مدت زمان‌های طولانی، امن‌ترین انتخاب برای توسعه دهندگان است.

نکات منفی:

لزوم توسعه دو برنامه جدا

اختصاصی بودن این پلفترم، قطعا بزرگ‌ترین نقطه ضعف پلتفرم Native‌ است. شما مجبورید که برای اندروید و iOS کد مختلفی توسعه دهید، و هیچ کدی نمی‌تواند میان آن‌ها به اشتراک گذاشته شود.

مقایسه React Native با برنامه‌های native

چگونه یک برنامه React Native بسازیم؟

اگر چه برای اندروید و چه برای iOS برنامه می‌نویسید، باید سه چیز مهم را داشته باشید:

• زبان برنامه‌نویسی‌ای که ترجیح می‌دهید
• ابزار مناسب
• رابط برنامه‌نویسی برنامه (Application Programming Interface = API)

تا جایی که بحث زبان برنامه‌نویسی برای React Native در میان است، شما به JavaScript و یا بخش کوچکی از آن به نام JSX نیاز دارید. خوشبختانه، نیازی به هیچ مجموعه خاصی از ابزار نیست و Chrome Debugger برای ساخت و آزمایش برنامه‌ها کافی است. گرچه بخش API کمی چالش برانگیز است. البته نمی‌توانید یک روش React Native برای هر چیزی داشته باشید.

با این که می‌توانید بدون قرار گرفتن در معرض وب شروع کنید، اما اگر می‌خواهید برنامه‌های خوبی در React Native بسازید، نیاز به مقداری دانش در زمینه توسعه وب دارید.

ساخت یک برنامه اندروید / IOS به صورت Native

Objective-C و Swift، زبان‌هایی هستند که برای ساخت یک برنامه بومی در iOS نیاز دارید. گرچه برای اندروید، باید در زمینه Java مهارت کسب کنید. در زمینه ابزار، نیاز به استفاده از IDE پلتفرم، و یادگیری نحوه کار آن دارید.

گرچه توسعه وب یک اساس برای React Native تشکیل می‌دهد، هیچ مرجع مشخصی در توسعه اندروید و iOS وجود ندارد. فراموش نکنید که این‌ها پلتفرم‌های بومی و اصیل هستند، و باید دانشی در زمینه پیش‌نیازهای هر پلتفرم داشته باشید.

در سمت دیگر، فریم‌وورک‌ها هم متفاوت نیستند. باید با نحوه کار همه چیز از نظر برنامه‌نویسی نیز آشنا شوید. به طور خلاصه، باید یک دیوانه برنامه نویسی باشید تا بتوانید با محیط‌های بومی برای ساخت برنامه‌ها کار کنید.

یادگیری کدام یک آسان‌تر است؟

بدون شک یادگیری JavaScript بسیار آسان‌تر از Swift، Objective-C و Java است. اما به یاد داشته باشید، این آسانی بهای خود را دارد. از آنجایی که JavaScript به نوعی یک زبان آزار دهنده است، همیشه ریسک بروز خطا در کد خود را باید بپذیرید.

در سمت دیگر، تمام زبان‌های دیگر با مفهمومی به نام تجزیه و تحلیل هنگام کمپایل می‌آیند که بسیاری از خطاهای احتمالی را از بین می‌برد.

Swift قطعا کاملا مدرن است، اما هر دو زبان دیگر هم همینطور پیشرفته‌تر می‌شوند و در واقع در زمینه کارایی و عملکردی نقصی ندارند. گرچه، JavaScript نقص‌های متنوعی دارد که می‌توانند علت بی ثباتی و بی نقص نبودن باشند.

از این رو، یادگیری React Native‌ می‌تواند آسان‌تر باشد، اما مشکلات JavaScript را به همراه دارد. به علاوه، درست به مانند هر الگوی میان پلتفرمی دیگری، باید با پارادوکس «یک بار بنویسید، در هر جایی اعزام کنید» مقابله کنید.

نتیجه گیری

حال برخی نکات مهم را بررسی کرده‌ایم. انتخاب React Native به جای Swift بستگی به ترجیح و نیازمندی‌های شخصی خودتان دارد. به نظر من اگر برنامه‌تان پیچیده نیست و نیازی به شامل شدن امکانات جدیدی مانند انیمیشن‌های پیچیده یا iMessage ندارد، بهتر است از اول React Native را انتخاب کنید.

و حتی اگر نیازمندی‌های شما پیچیده هستند، اما شما یک متخصص iOS یا اندروید هستید و همچنین مقداری تجربه در توسعه وب دارید، React Native می‌تواند انتخاب خوبی باشد؛ زیرا شما احتمالا هر مشکلی را حل خواهید کرد.

گرچه اگر شما در ورودی دنیای توسعه هستید، پیشنهاد می‌کنم که با یک پلتفرم تکی شروع کنید و در ابتدا زبان بومی آن را یاد بگیرید. نحوه کار آن را ببینید، و سپس به پلتفرم‌های دیگر وارد شوید.

منبع