متقاعد شدم که React Native آینده است

بعد از نوشتن اولین اپلیکیشن React Native، متقاعد شدم React Native آینده برنامه‌نویسی موبایل است

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

React Native به همین زودی‌ها به کنار نخواهد رفت

یک شرط مهم میان توسعه دهندگان این است که اگر یک فناوری قرار است در آینده نزدیک بی استفاده شود، وقت خود را برای یادگیری آن سرمایه گذاری نکنند. با این که تجربه کمی در React Native دارم، اما پی بردم که ابزاری به شدت قدرتمند است. مطمئنم که در سال‌های آتی همچنان مورد استفاده خواهد بود. Facebook، Instagram و Airbnd آخرین نسخه‌های برنامه‌های موبایل خود را با استفاده از React Native ساختند.

چگونه React Native از دیگر ابزار میان پلتفرمی متفاوت است؟

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

من همیشه نسبت به ابزاری که خود را به عنوان «میان پلتفرمی برای موبایل» معرفی می‌کردند، شک داشتم. اکثر مواقع در هنگام استفاده از این ابزار، در نهایت با یک ظاهر و کارایی مواجه می‌‌شوید که آنچنان با پلتفرم بومی تطابق ندارد. React Native به مانند دیگر فریم‌وورک‌های توسعه برنامه موبایل مانند Ionic و Cordova نیست. این موارد داخل یک وب view، یک برنامه HTML5 یا یک برنامه دورگه (hybrid) اجرا می‌شوند. پس از کار با این پلتفرم‌ها، در نهایت برنامه‌ای می‌سازید که از موارد ساخته شده با استفاده از Swift، Objective-C یا Java قابل تشخیص نیست.

با توجه به این مسئله، درک پیچیدگی‌ها و تفاوت‌ها میان پلتفرم‌ها مهم است. تجربیات کاربری برای اندروید و iOS اساسا متفاوت هستند، و همچنان باید برنامه خود را به گونه‌ای بسازید که بر روی هر دو پلتفرم طبیعی به نظر برسد.

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

نحوه شروع کار

برای یادگیری نحوه شروع کار و برنامه‌نویسی با React Native، می‌توانید دوره مربوطه را در وبسایت راکت بگذرانید:

• آموزش پروژه محور React Native

استایل‌بندی در React Native

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

• آموزش کامل Flexbox

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

یک تفاوت کلیدی دیگر هم این است که نمی‌توانید از تگ‌های HTML در JavaScript‌ خود استفاده کنید. زیرا شما کدی می‌نویسید که می‌خواهید بر روی یک تلفن همراه اجرا شود، نه یک مرورگر. در عوض، کامپوننت‌ها با استفاده از مجموعه‌ای از کامپوننت‌های سطح پایه، فراهم شده توسط کتابخانه React Native ساخته شده‌اند. عادت به آن کمی زمان می‌برد، اما قبل از این که خودتان بفهمید، در برنامه وب بعدی خود به استفاده از تگ‌های <View></View> به جای <div></div> خواهید رسید.

برای داشتن یک درک بهتر از نحوه کار این موارد، نگاهی به این کد مربوط به کامپوننت دکمه ساده داشته باشید:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
const Button = (props) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity style={buttonStyle} onPress={props.onPress}>
      <Text style={textStyle}>
        {props.children}
      </Text>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  textStyle: {
    alignSelf: 'center',
    color: '#6B7794',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#6B7794',
    margin: 5,
    marginRight: 5
  }
});
export { Button };

جهت‌یابی

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

من به شخصه از React Native Router Flux برای پروژه خود استفاده کردم و به خوبی هم کار کرد. اما ممکن است هنگام کار بر روی پروژه‌های پیچیده‌تر، با آن به مشکل بر بخورید.

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

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

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

بخش‌ مورد علاقه من در استفاده از React Native، قابلیت بارگذاری در لحظه است. من در گذشته از Android Studio استفاده کرده‌ام، و معمولا مجبور بودم که با زمان‌های ساخت (Build Time) ۳۰ تا ۶۰ ثانیه‌ای دست و پنجه نرم کنم.

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

مایل به گشتن باشید

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

منبع