در ابتدا به توضیح سه مفهوم react native ، boilerplate و starter kit میپردازیم.
به طور خلاصه react native یک قالب برنامه نویسی open-source برای موبایل است که به ما امکان توسعه application های موبایل را برای سیستم عامل های android و ios فراهم میکند.
در برنامه نویسی کد boilerplate به قطعهای از کد اشاره دارد که به دفعات در برنامه مورد استفاده واقع شده است. در react native نیز boilerplate هایی آماده وجود دارند که برای راحتی و افزایش سرعت توسعه برنامه استفاده میشوند.
boilerplate ها به نوعی زیرمجموعه starter kit ها هستند. تفاوت دیگری نیز در امکان تغییر و دسترسی ساختار کلی برنامه هم وجود دارد که محدودیتهایی را ایجاد کردهاند. starter kit ها در پروژههای بزرگتر استفاده شده و شامل مجموعهای از component های آماده با معماری و طراحی دقیق و مناسب برای application های آتی و بزرگتر هستند. به طور کلی افزایش سرعت در توسعه application و کارامدی آن به علت معماری مناسب و آماده از مزایای اصلی استفاده از starter kit ها هستند.
در حال حاضر starter kit های زیادی برای react native وجود دارد که در اینجا به معرفی پنج مورد از آنها میپردازیم.
React Native Starter
معماری این starter kit برای ساخت application های قابل ارتقاع و مقیاسپذیر طراحی شده است. این kit با استفاده از کتابخانه Redux، Babel، React، Flow (یک ابزار type checking که مانع یک به وجود آمدن یک سری از bug ها میگردد) و ECMAScript ساخته شده است که یک امتیاز ویژه به شمار میرود. از Component ها و مولفههای آمادهای که برای UI ارایه شدهاند میتوان به این موارد اشاره کرد: سه نوع grid، صفحه خرید، جدولها، گالری با استایل اینستاگرام، پروفایل کاربری، صفحه login و … .
این starter kit برای application های E-Commerce (application های حاوی خرید الکترونیکی) بسیار مناسب است و دارای بهروزرسانی و پشتیبانی همیشگی میباشد.
طراحی تمییز، مدرن و چشمنواز و همچنین استفاده از trend هایی مانند color gradients و simple curves از مزایای دیگر این kit به شمار میرود.

Ignite
boilerplate پیش فرض آن در چند ثانیه نصب میگردد. در حقیقت ignite برای react native بیشتر شبیه یک generator است. این starter kit حاوی تعداد زیادی plugin است.
یک community بزرگ از برنامه نویسان بر روی آن کار میکنند که این مساله کار توسعه را برای افراد استفاده کننده از این kit سهولت میبخشد. Ignite بر روی انواع سیستم عاملهای Mac، windows و linux به خوبی کار میکند.
همچنین Ignite حاوی برخی صفحات مرسوم مانند login و component های کاربردی مانند map میباشد.
Pepperoni
دارای تعداد زیادی از block های آماده است. از مزایای pepperoni میتوان به push notification، cloud-ready backend و group messaging اشاره کرد. این starter kit از کتابخانه redux برای مدیریت دادهها و Auth0 برای مدیریت کاربران، login و authentication استفاده میکند.
این starter kit قابلیت customize کردن مطابق نیاز application را دارا است.
React Native Ting App
تمام المانهای UI ضروری را داشته و قابلیت customize کردن دارند. حاوی 9 صفحه آماده مانند login، sign up، چت و پروفایل کاربری است.
از مزایای Ting App میتوان به document روان، استفاده از Flow، React Navigation و Native Base اشاره کرد.
این starter kit برای application های hospitality (application های مناسب سفر و هتل) بسیار مناسب است.
از مزایای دیگر آن میتوان به طراحی Flat (عدم استفاده از gradient و shadow در UI) و smooth اشاره کرد.

React Native Starter by Ueno
توسط توسعهدهندگان حرفهای ساخته شده است. امکان ساخت application های SOLID (application های اجتماعی غیر متمرکز بر مبنای دادههای به هم متصل) را میدهد.
به طور کلی صفحات و component های آماده ندارد. این starter kit از react navigation 4 استفاده کرده است.
جدول مقایسه starter kit ها
Ready-to-use screen | Fork | Star | React native and react native navigation versions | State management | design | |
React native starter | صفحه خرید، جدول، گالری با استایل اینستاگرام، پروفایل کاربری، صفحه login و … | 318 | 1.2 k | React native 0.61.5 react navigation 3.3.2 | redux | Color gradients Simple curves مدرن چشم نواز |
Ignite | ✗ | 862 | 11.1 k | در Andross Boilerplate: React native 0.59.9 React navigation 3.11.0 | mobx-state-tree | ✗ |
Pepperoni | صفحه login و sign up | 720 | 4.6 k | React native 0.49.3 React navigation 1.0.0-beta.11 | Redux ImmutableJS | ✗ |
React native Ting app | صفحه login، sign up، چت و پروفایل کاربری | ✗ | ✗ | native-base 2.12.1 react navigation 3.11.0 | ✗ | Flat and smooth |
React native starter by Ueno | ✗ | 81 | 539 | react navigation 4 react native 0.62.0 | mobx-state-tree | ✗ |
نتیجه گیری
به طور کلی هر یک از starter kit ها به منظور خاصی مورد استفاده قرار میگیرند. استفاده از آنها برای کسانی که به تازگی کار با react native را شروع کردهاند بسیار مناسب است زیرا دارای معماری آماده و گاها برخی component ها و صفحات آماده هستند که شروع ساخت application را سهولت میبخشد و توسعهدهنده زمان بیشتری را برای قسمتها و ویژگیهای اختصاصی application خود صرف میکند. برخی از آنها open source هستند. صرفه جویی در هزینهها نیز از دیگر مزایای استفاده از آنها میباشد. البته در سطوح بالاتر برنامه نویسی استفاده کردن از این starter kit ها به صلاحدید توسعه دهنده میباشد. بعضی از starter kit ها مانند ignite بیشتر به جنبه معماری قوی کار پرداخته و خیلی بر روی UI تمرکز نکرده است. برخی هم مانند react native Tin App و react native starter بیشتر به UI پرداختهاند. با توجه به scale برنامه و مهمترین مساله ای که application بر روی آن تاکید دارد، انتخاب starter kit میتواند حائز اهمیت باشد.
منابع
https://flatlogic.com/blog/top-5-react-native-starter-kits
https://github.com/flatlogic/react-native-starter
https://github.com/infinitered/ignite-andross
https://github.com/futurice/pepperoni-app-kit
https://market.nativebase.io/view/react-native-ting-app
https://github.com/ueno-llc/react-native-starter
Demo application of react native starter