معرفی React Native: آسان ترین و بهترین راه برنامه نویسی موبایل و وب؟

الان حدود ۱۵ ساله که برنامه نویسی تحت وب می کنم. هرروز سری به Smashing Magazine و TechCrunch و سایت های دیگه از این دست می زنم و راجع به استارتاپ های جدید و کمپانی ها و اشخاص موفق مرتبط با IT تحقیق می کنم. با این مطالعات میشه خیلی زود فهمید که صنعت IT با سرعتی باورنکردنی در حال پیشرفت و تحوله. اگر می خوای در این صنعت بمونی باید هرروز مطالعه داشته باشی و مفاهیم جدید یاد بگیری. شاید یکی از علل علاقه بسیار من به این صنعت همینه. هیچوقت یکنواخت نمیشه!

تا اینجاش رو تقریبا همه می دونن. اما هنر یک فرد موفق در این صنعت چیه؟ خیلیا فکر می کنن «مطالعه و یادگیری بیشتر». اما این جواب اشتباهه. فرصت یادگیری همه محدوده و اگر به زندگی افراد موفق دقت کنید می بینید که اتفاقا وقت آزاد اونها برای مطالعه کمتره! پس چطور موفق میشن و موفق می مونن؟ جواب درست اینه که این افراد به درستی انتخاب می کنن که «راجع به چی» مطالعه کنن. هر چقدر از اهمیت این انتخاب بگم کمه! بعنوان یک برنامه نویس، موفقیت شما خیلی به زبان ها و فریم ورک هایی که برای یادگیری انتخاب می کنید بستگی داره.

یکی از آرزوهای برنامه نویسان اینه که بتونن با یک زبان برنامه نویسی برنامه هایی بنویسن که روی دستگاه های مختلف (کامپیوتر، موبایل، تبلت، تلویزیون هوشمند، ساعت مچی هوشمند، …) قابل اجرا باشه. اینطوری بجای اینکه بخوان وقتشون رو صرف یادگیری ۱۰ زبان کنن که هرکدوم هزارجور تکنیک مختص خودش رو داره، وقتشون صرف یادگیری یک زبان مادر می کنن که در همه دستگاه ها قابل اجراست.

تابحال خیلی تلاش ها در این زمینه شده (فلش و تا حدی جاوا در این زمینه ناموفق بودن). از فریم ورک های محبوبی که امروزه به شما امکان برنامه نویسی وب و موبایل اپلیکیشن رو میدن میشه اینها رو نام برد: PhoneGap، Ionic، Appcelerator Titanium، Xamarin

PhoneGap و Ionic خوبیشون اینه که توشون از زبان های وب (HTML، CSS، JS) استفاده می کنید. پس نیازی به یادگیری زبان جدید ندارید (مثل اینه که وب اپلیکیشنتون رو در مرورگر موبایل باز می کنن، اما Full-screen). بدیشون اما اینه که Performanceشون اصلا خوب نیست. اگر اپلیکیشنی که با اینها می سازید «خیلی ساده» نباشه، از سرعت پایین و پریدن های تصویر و انیمیشن های لَگ دار خیلی راحت میشه فهمید که اپلیکیشن Native نیست. به این اپلیکیشن ها Hybrid میگن، و به اپلیکیشن هایی که با زبان مخصوص سیستم عامل نوشته شده باشن Native میگن. (زبان مخصوص دستگاه های کمپانی اپل Objective-C و Swift هست و زبان مخصوص اندروید جاوا.)

Appcelerator Titanium و Xamarin می تونن Performance بهتری ایجاد کنن. بخاطر اینکه از یک زبان برنامه نویسی خاص (جاوااسکریپت و C#) المان های Native رو خروجی می گیرن. اما هردو پولی هستن. همین باعث میشه که طرفداران و منابعشون کم بشه.

حالا می رسیم به این جوجه کوچکی که موضوع این نوشته ست! این جوجه کوچک React Native نام داره.

بذارید یکم برم به عقب. فیس بوک ابتدای سال ۲۰۱۵ اولین نسخه stable یک کتابخانه جاوااسکریپت open-source رو منتشر کرد برای توسعه رابط کاربری (user interface) وب اپلیکیشن ها. اسم این کتابخانه React (یا ReactJS) بود. این کتابخانه با ساختار بسیار ساده و سرعت بسیار بالایی که داشت خیلی سریع مورد توجه قرار گرفت. طوری که با وجود اینکه مدت کوتاهی از اومدنش گذشته، بجز فیس بوک کمپانی هایی از قبیل یاهو، Airbnb و Netflix هم دارن ازش استفاده می کنن.

اواخر مارچ ۲۰۱۵ (دو و نیم ماه پیش) یک فریم ورک جدید از فیس بوک منتشر شد. یک فریم ورک که به شما اجازه میده با استفاده از زبان جاوااسکریپت (و تنها جاوااسکریپت!) و کتابخانه React اپلیکیشن موبایل بسازید! فعلا فقط برای iOS ولی بزودی برای iOS و Android. اسم این فریم ورک React Native ه!

همونطور که از اسمش پیداست، مزیت بزرگش اینه که خروجیش تشکیل شده از المان های Native سیستم عامله. در نتیجه Performance خوبی داره. سیستم کاریش خیلی شباهت ها به Appcelerator Titanium داره. من قبلا اون رو کمی یاد گرفتم. اما وقتی مطالعه درباره React و React Native رو شروع کردم مجذوب سادگی و نظمشون شدم! مجانی و open-source بودن و پشتیبانی شدن توسط فیسبوک رو هم که به اینها اضافه کنید می فهمید که چرا در این مدت کوتاه انقدر پرطرفدار شدن.

من یک اپلیکیشن ساده برای iOS با استفاده از React Native ظرف چند روز ساختم. همه چیز ساده و بی دردسر پیش رفت و Performance اپلیکیشن هیچ فرقی با Native نداشت. الان هم مشغول کار روی دو اپلیکیشن دیگه هستم که تا بحال خیلی خوب پیش رفته.

یکی از جالب ترین کاربرد های React اینه که با استفاده از Node میشه برای برنامه نویسی سمت سرور و نرم افزار تحت سیستم عامل کامپیوتر هم ازش استفاده کرد. یعنی اگر یک موبایل اپ و وب اپ با یک اپ سمت سرور می سازید، می تونید توی همش از زبان جاوااسکریپت استفاده کنید! اولش که این رو می شنوید شاید خیلی به نظرتون نیاد. اما بیشتر بهش فکر کنید مجذوب ایده ش میشید! همین باعث شده که خیلی ها پیش بینی کنن که جاوااسکریپت در آینده دنیای IT رو تسخیر می کنه (البته قبلا با دیدن Node هم همین رو می گفتن، اما حالا با ورود React و React Native به میدان احتمالش بیشتر شده).

خب حالا با وجود همه اینها، به نظر شما الان یادگیری چه زبان برنامه نویسی و فریم ورکی می تونه آینده خیلی خوبی داشته باشه؟

پاسخ من JavaScript و ReactJS و React Native هست. اما یک علامت سوال هم در انتهای تیتر این نوشته گذاشتم، چون هنوز یک رخداد بسیار مهم باقی مونده: انتشار React Native برای اندروید. من فکر می کنم اگر فیس بوک اون قدم رو هم درست برداره و مثل قبل به بروزرسانی مرتب این فریم ورک ادامه بده محبوبیت React Native به سرعت چند برابر میشه و ۳ سال آینده حداقل ‍۱۰ درصد اپلیکیشن های جدید موبایل با React Native ساخته میشن.

نظر شما چیه؟

منابع خوب برای یادگیری

• برای منابع جاوااسکریپت به این نوشته من مراجعه کنید: منابع یادگیری خوب برای طراحی و برنامه نویسی وب و رشته های مختلف دیگه
• سایت ReactJS
• سایت React Native
• ویدیوهای معرفی React Native در کنفرانس ReactJS (دیدنشون رو بسیار توصیه می کنم)
• اخبار (غیررسمی) React Native

مزایای React.js برای SEO

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

یکی از ویژگی های منحصر به فرد این تکنولوژی این است که هم در سمت سرور و هم در سمت کاربر به صورت هماهنگ و سازگار کار می کند.

تعریف Dom: وقتی یک صفحه وبی بارگذاری میشود مرورگر یک مدل شی گرا از المان های موجود در صفحه می سازد.این مدل Dom و یا Document Object Model نام دارد .این نمودار یک نمودار درختی از اشیا موجود در صفحه است .برنامه هایی مانند جاوااسکریپت با استفاده از مدل یک صفحه Html را به صورت پویا ایجاد می کنند.درتکنولوژی React.js از مفهومی به نام Virtual DOM استفاده می شود .این حالت زیر گروه های انتخابی را بر اساس شرایط ارائه می کند.این کار را به این صورت انجام می دهد که تا جای ممکن از دستکاری Dom جلوگیری می کند.

Virtual DOM به این صورت کارمیکند که برای هر شی Dom که ویژگی جدیدی قرار است برای آن ساخته شود نیازی نیست که آن شی دوباره ساخته شود تنها نیاز است که آن ویژگی مورد نظر را تغییر داد و یا افزود.

بعد از آشنایی کلی با React.js راجع به مزیت هایی که این روش در SEOبرای ما ایجاد می کند صحبت می کنیم .

مشکلی که جاوااسکریپت داشت این است که به طور کامل Search Engin Freindly نیست  .با وجود اینکه  Crawl و index های گوگل ، محتواهای Ajax را هم می فهمند ولی خیلی قابل اعتماد نیست .امتیاز React.js این است که شما می توانید آن را سمت سرور اجرا کنید و virtual DOM ها در سمت سرور Renden میشوند و بعد به سمت کلاینت ارسال می شوند

قصد داریم یک پروژه ساده به کمک React.js بنویسیم

ابتدا Visual Studio را باز کرده و یک پروژه asp.net MVC از نوع Empty باز می کنیم .سپس در Tools=>Install package Manager Consol دستور زیر را تایپ می کنیم

Install-Package react.js

 با این دستور کتابخانه React.js به پروژه ما اضافه می شود.در قسمت Solution Explorer در داخل فولدر Scripts یک فولدری به نام react ایجاد شده است که در داخل آن اسکریپت های جاوااسکریپت قرار دارد .بعد از این کار باید React.Web.Mvc4 را نصب کنیم .دوباره در کنسول مربوط به Nuget دستور زیر را وارد میکنیم

Install-Package React.Web.Mvc4

حال یک کنترلر خالی ایجاد کنید.کد زیر را به Actionمورد نظر اضافه کنید.
 

123456789

public ActionResult Index(){var employees = new[]{new  {id= "1", name= "ایمان ", department= "IT", phone= "555-1212"},new {id="2", name= "سجاد", department= "Sales", phone= "555-1213"},new  {id= "3", name= "رحمان", department= "HR", phone= "123-456"}};return View(employees);}

کامپوننت Grid:

یک فایل جاوااسکریپت به نام Grid.jsx در داخل فولدر Scripts ایجاد می کنیم و کد های زیر را به آن اضافه کنید .این کد برای نمایش دیتا است .

123456789101112131415161718192021222324252627282930

var Cell = React.createClass({   render: function () {var data = this.props.data;return <div className="cell">{this.props.data}</div>}}); var Row = React.createClass({render: function () {return (<div className="row"><Cell data={this.props.data.name} /><Cell data={this.props.data.department} /><Cell data={this.props.data.phone} /></div>);}});var Grid = React.createClass({render: function () {var headerRow = <div className="row"><Cell data="Name" /><Cell data="Department" /><Cell data="Phone" /></div>; var rows = this.props.data.map(function (rowData, index) {return <Row key={index} data={rowData}>Row</Row>;});return <div className="table">{headerRow}{rows}</div>;}});

Rendering سمت سرور

وارد مسیر App_Start\ReactConfig.cs شوید و کامپوننت Grid را رفرنس دهید.

12345678

public static class ReactConfig{public static void Configure(){ReactSiteConfiguration.Configuration = new ReactSiteConfiguration().AddScript("~/Scripts/Grid.jsx");}}

این کد به React.js می گوید که جاوااسکریپت سمت سرور را لود کند .

در مرحله بعد در داخل View مربوط به ایندکس کد های زیر را کپی کنید

12345678910

<h2>React Demo:</h2> @Html.React("Grid", new{data = Model}) <script src="~/Scripts/react/react-0.12.2.min.js"></script><script src="~/Scripts/Grid.jsx"></script>@Html.ReactInitJavaScript()

بعد از اجرا شکل زیر را خواهید دید

فایل های ضمیمه

•  4164_React.rar

React چیست ؟

استفاده از کتابخانه‌های تولید رابط کاربری بر پایه جاوااسکریپت در کار طراحی سایت رو به افزایش است. یکی از محبوب‌ترین این کتابخانه‌ها React یا ReactJS نام دارد. این کتابخانه توسط فیسبوک ایجاد شده است و با همکاری جمعی در حال بهبود و توسعه است.

JSX در React

یکی از امکانات مفید که در React موجود است، JSX یا JavaScript XML است. JSX شیوه‌ای جدید از نوشتن کدها است که هم می‌تواند شامل HTML و هم جاوااسکریپت باشد. با ترکیب این دو، کار توسعه رابط کاربری آسان‌تر می‌شود. فایل‌های JSX سپس توسط کامپایلر به فایل‌های جاوااسکریپت معمول تبدیل می‌شوند و در مرورگر به اجرا در می‌آیند.

استفاده از JSX الزامی نیست ولی اغلب توسعه‌دهندگان استفاده از آن را نسبت به نوشتن فایل‌های جاوااسکریپت و HTML به صورت جداگانه ترجیح می‌دهند.

یک نمونه کد JSX به صورت زیر است:

1234567

const name = ‘Ali’;const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById(‘root’));

کتابخانه رابط کاربری چیست ؟

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

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

نرم‌افزار هوشمند اینترنتی چیست ؟

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

یک نرم‌افزار هوشمند تحت وب، با یک بار بارگزاری، تمامی یا اغلب فعالیت‌های لازم را بدون تازه‌سازی( Refresh ) صفحه به انجام می‌رساند و اطلاعات ارسالی و دریافتی کاربر را همگی با استفاده از فناوری AJAX با سرور رد و بدل می‌کند.

نرم‌افزارهای هوشمند و سئو

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

در خصوص گوگل نیز، انجام پیش‌بینی‌های لازم در جهت تغییر نشانی صفحه به صورت پویا برای ایجاد تمایز بین محتواهای مختلف موجود در سایت، ضروری خواهد بود.

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

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

کتابخانه‌های مشابه

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

• Vue.js
• AngularJS
• Ember
• Knockout
• Polymer
• Riot