در ابتدا به توضیح سه مفهوم 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