تفاوت‌های اصلی میان ReactJS و React-Native چه هستند؟

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

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

راه‌اندازی و bundle کردن

React Native یک فریم‌وورک بوده، و React JS یک کتابخانه JavaScript است که می‌توانید برای وبسایت خود استفاده کنید. وقتی که یک پروژه جدید را با ReactJS شروع می‌کنید، احتمالا یک bundler مانند Webpack را انتخاب می‌کنید، و سعی می‌کنید ببینید که کدام ماژول‌های bundle کردن را برای پروژه خود نیاز دارید. React Native هر چیزی که نیاز دارید را به همراه دارد و احتمالا نیازی به چیزی بیشتر از آن نخواهید داشت. وقتی که یک پروژه جدید را شروع می‌کنید، به آسانی آن پی می‌برید. React Native بسیار سریع است و برای شروع فقط نیازمند یک خط دستوری در ترمینال است.

برای اجرای برنامه خود، باید Xcode (برای iOS یا Mac) یا Android Studio (برای اندروید) را بر روی کامپیوتر خود داشته باشید. هم می‌توانید آن را بر روی یک شبیه‌ساز پلتفرم مورد نظر اجرا کنید، و هم می‌توانید مستقیما بر روی دستگاه خود آن را اجرا کنید.

DOM و استایل‌بندی

React Native از HTML برای رندر کردن برنامه استفاده نمی‌کند، اما کامپوننت‌های جایگزینی که به همان روش کار می‌کنند را فراهم می‌کند. آن کامپوننت‌های React Native، کامپوننت‌های رابط کاربری iOS یا اندروید بومی که بر روی برنامه رندر می‌شوند را map می‌کنند.

اکثر کامپوننت‌های فراهم شده می‌توانند به چیزی مشابه به HTML ترجمه شوند، جایی که مثلا یک کامپوننت View مشابه به یک تگ div است، و یک کامپوننت Text مشابه به تگ p است.

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>Hello world!</Text>
      </View>
    );
  }
}

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

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

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	content: {
		backgroundColor: '#fff',
		padding: 30,
	},
	button: {
		alignSelf: 'center',
		marginTop: 20,
		width: 100,
	},
});

شما را نمی‌دانم، اما با این که Flexbox مدتی می‌شود که بر روی صحنه قرار دارد، من هرگز نتوانستم در استفاده از آن غوطه ور شوم؛ احتمالا علت این مسئله این بود که پروژه‌هایی که من بر رویشان کار می‌کردم، نیازمند سازگاری با مرورگرهای قدیمی بودند. با React Native، هیچ راه بهتری برای ساخت برنامه‌های پاسخگو نسبت به Flexbox ندارید. ممکن است در ابتدا پیچیده باشد، و همیشه به مانند CSS رفتار نخواهد کرد، اما پس از این که درک پایه‌ای از آن به دست آوردید، سریعا در آن حرفه‌ای خواهید شد.

انیمیشن و Gestureها

با انیمیشن‌های CSS خداحافظی کنید. با React Native، باید راه کاملا جدیدی برای پویانمایی کامپوننت‌های مختلف برنامه خود با JavaScript یاد بگیرید. یک راه پیشنهادی برای پویانمایی یک کامپوننت، استفاده از اِی‌پی‌آی Animated، فراهم شده توسط React Native است. می‌توانید آن را با کتابخانه معروف JavaScript، یعنی Velocity.js مقایسه کنید. این کتابخانه شما را قادر می‌سازد تا انواع مختلف انیمیشن‌ را بسازید، که بر حسب سرعت یک Gesture کار می‌کنند. به طور کلی، می‌توانید تقریبا هر نوعی از انیمیشن که بر روی وب می‌توانید انجام دهید را پیاده‌سازی کنید. React Native همچنین LayoutAnimation را فراهم می‌کند، که استفاده از آن برای transitionها کاملا ساده است، اما در حال حاضر فقط برای iOS کار می‌کند، و اندروید به خوبی پشتیبانی نشده است.

برای تعامل با حرکات کاربر، React Native چیزی مشابه به اِی‌پی‌آی رویدادهای لمس JavaScript، به نام PanResponder را فراهم کرده است. راه‌اندازی و اجرای آن می‌تواند دلسرد کننده باشد، اما در نهایت خواهید دید که آنچنان پیچیده نیست. PanResponder باید به یک view (یا متن یا عکس) کامپوننت شما اعمال شود، تا مدیریت touch این view را فعال کند. سپس، PanResponder لیستی از توابع را فراهم می‌کند، که می‌توانید از طریق آن‌ها رویدادهای لمس مختلف مانند onPanResponderGrant، onPanResponderMove یا onPanResponderRelease را دریافت کنید. این توابع به شما دسترسی به رویدادهای بومی، و state حرکات به همراه اطلاعاتی مانند تمام لمس‌ها، موقعیت آن‌ها، فاصله کشیده شدن، سرعت و منشا لمس را خواهند داد.

به نظر من، سخت‌ترین مسئله در PanResponder زمانی به وجود می‌آید که شما viewها / کامپوننت‌های تو در تویی دارید، که هر کدام PanResponder خود را دارند، و شما باید تصمیم بگیرید که کدام یک می‌توانند کنترل حرکت را داشته باشند.

جهت‌یابی

وقتی که ساخت اولین برنامه موبایل خود با React Native را شروع کردم، تعجب می‌کردم که چگونه می‌توان بین دو سکانس منتقل شد. اولین کاری که انجام دادم، گشتن به دنبال جایگزینی برای react-router بود؛ کتابخانه معروفی که اکثر برنامه‌های وب React برای transition بین صفحات استفاده می‌کردند. من چند کتابخانه پیدا کردم که کار مشابهی را انجام می‌دهند، اما همیشه یک مسئله وجود داشت که درباره آن‌ها دوست نداشتم: یا استفاده از آن‌ها بسیار پیچیده بود، یا از انیمیشن‌ها راضی نبودم، یا به طوری که می‌خواستم سفارشی ‌سازی نشده بودند، یا این که به درستی بر روی دستگاه‌های اندروید و iOS رفتار نمی‌کردند. سپس نحوه کار جهت‌یابی‌ها برایم سوال شد، تا این که کامپوننت Navigator فراهم شده توسط React Native را پیدا کردم. بهتر بود که از اول از همانجا شروع می‌کردم.

اکثر برنامه‌های موبایل، صفحات زیادی ندارند که به جهت‌های مختلف بروند. شاید کامپوننت Navigator در ابتدا کمی سخت و پیچیده به نظر برسد، اما هر چه که برای مدیریت transition بین صفحات نیاز دارید را به همراه دارد. به نظر من بهتر است در Navigator بمانید؛ مگر این که در حال ساخت یک برنامه موبایل خیلی بزرگ هستید که نیازمند تعداد زیادی صفحه است و می‌ترسید که نهایتا در جایی گم شوید.

کد به خصوص پلتفرم

طراحی یک برنامه برای چندین پلتفرم با مجموعه کد مشابه، گاهی می‌تواند کمی گیج کننده باشد و به زودی کد شما ظاهر بدی به خود خواهد گرفت. مطمئنم که شما هم هنگام کدنویسی برای مرورگرهای مدرن و نیاز به فراهم کردن ظاهری بهتر برای مرورگرهای قدیمی، در مشکلات مشابهی گیر کرده‌اید، و در نهایت برخی کدهای اضافی در جاهای مختلف CSS یا حتی JavaScript خود اضافه کرده‌اید.

وقتی که یک برنامه بومی می‌سازید، دانستن این که رابط کاربری و تجربه کاربری برای iOS و اندروید ممکن است کمی سخت باشد، مهم است.

بر فرض این که شما کنترل کاملی بر روی ظاهر و رفتار برنامه خود دارید، شما دو انتخاب دارید:

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

اگر مورد دوم را انتخاب کنید، React Native‌ می‌تواند تشخیص دهد که شما از کدام پلتفرم برنامه خود را اجرا می‌کنید و کد مناسب برای آن پلتفرم را بارگذاری کند. من پیشنهاد می‌کنم که منطق اصلی برای کامپوننت‌های خود را در فایلی به نام index.js داشته باشید، و کامپوننت‌های نمایشی را در فایل‌های به خصوص خود داشته باشید. برای iOS و اندروید، فایل‌های index.ios.js و index.android.js ا به صورت جداگانه خواهید داشت.

/src
  /components
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js     
        /Content
          /index.android.js
          /index.ios.js
      /index.js

اگر حس می‌کنید که داشتن ۲ فایل مختلف برای تغییرات کوچک چیز زیادی است، می‌توانید از ماژول Platform با یک بیانیه شرطی استفاده کنید.

ابزار توسعه دهنده

وقتی که یک پروژه جدید را شروع می‌کنید، چند ابزار توسعه دهنده را مستقیما از React، و بدون نیاز به نصب چیزی دریافت می‌کنید؛ که به نظر من بسیار عالی است. بارگذاری لحظه‌ای در دسترس است و وقتی که می‌خواهید تغییرات کوچکی به استایل برنامه خود اعمال کنید، عالی است. برای تغییرات بزرگ‌تری که منطق برنامه را تحت تاثیر قرار می‌دهند، من معمولا استفاده از Live Reload را ترجیح می‌دهم، که همزمان به اعمال تغییرات به کد خود، برنامه را مجددا بارگذاری می‌کند.

زیبایی دیگر استفاده از React Native، قابلیت استفاده از اکثر ابزار توسعه دهنده‌ای است که در ReactJS استفاده می‌کنید. Chrome Dev Tools برای بازرسی درخواست‌های شبکه، نمایش لاگ‌های کنسول، و توقف کد بر روی بیانیه debugger به خوبی کار می‌کند. حتی می‌توانید از Redux Dev Tools برای بازرسی state مخزن Redux‌ خود استفاده کنید. یک ویژگی که شدیدا جای خالی‌اش را حس می‌کنم، بازرسی DOM به مانند وب است.

انتشار

اگر می‌خواهید برنامه‌ای را برای iOS و اندروید توسعه دهید، باید نحوه کار Xcode و Android Studio را یاد بگیرید، تا مطمئن شوید که همه چیز به درستی راه‌اندازی شده است.

اگر دلتان برای قابلیت نوشتن یک دستور ساده برای انتشار یک بروزرسانی برای برنامه خود تنگ شده است، می‌توانید از Code Push استفاده کنید. دقت کنید که Code Push برای اعمال تغییرات کوچک و برطرف کردن باگ‌ها عالی است، اما برای اضافه کردن ویژگی‌های جدید خوب نیست.

جمع بندی

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

منبع