برنامه‌نویسی

React چیست و چه کاربردی دارد؟ با مشهورترین برنامه‌های تحت وب React آشنا شوید


۴ شهریور ۱۳۹۹
react js چیست و چه کاربردی دارد؟

React (ری‌اکت) یکی از محبوب‌ترین کتابخانه‌های JavaScript (جاوا اسکریپت) به‌شمار می‌رود. در حال حاضر، این کتابخانه آمار بیش از ۵ میلیون دانلود در هفته و همکاری هزاران توسعه‌دهنده و برنامه‌نویسی که در حوزه پیش‌برد اهداف متن‌باز فعالیت می‌کنند، را به خود اختصاص داده است. در واقع، React با توجه به ویژگی‌هایی که دارد، یک راهکار عالی برای طراحی و ساخت رابط کابری محسوب می‌شود. بنابراین جای تعجب ندارد که بزرگترین شرکت‌ها و فعالان دنیای برنامه‌نویسی، از آن برای توسعه برنامه‌های تحت وب ‌خود، بهره می‌گیرند.

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

React چیست؟

تاریخچه React از سال ۲۰۱۱ شروع می‌شود؛ زمانی‌که یکی از متخصصین فیسبوک به نام Jordan Walke که مسئولیت Facebook Ads را برعهده داشت، FaxJS را خلق کرد که نمونه اولیه این فریم‌ورک به‌شمار می‌رود. اما خلق فریم‌ورک React هدفمند بود. چرا که در آن زمان فیسبوک با مشکلات متعددی در زمینه مدیریت ابزار تبلیغاتی خود مواجه بود و به‌شدت به یک راه‌حل نیاز داشت تا این مسئله را حل کند. Jordan Walke در این رابطه می‌گوید:

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

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

سرانجام در سال ۲۰۱۲، فرایند توسعه فریم‌ورک React به‌پایان رسید و به‌صورت عمومی در ماه می سال ۲۰۱۳ در JS ConfUS، از آن به‌عنوان یک فریم‌ورک متن‌باز، رونمایی شد. در ابتدا React نتوانست جامعه IT را متقاعد کند و جدی گرفته نمی‌شد. بنابراین طراحان و سازندگان این فریم‌ورک تصمیم گرفتند آن را دستخوش تغییراتی کنند تا نیازهای جامعه IT‌ را به شکل بهتر و کارآمدتری رفع کرده و در دنیای برنامه‌نویسی، پذیرفته شود. به این ترتیب، در سال ۲۰۱۴ از فریم‌ورک متحول‌شده React رونمایی شد و از آن زمان تا کنون، این فریم‌ورک متن‌باز توسعه چشم‌گیری داشته و در گسترش کمپین دوست‌داران JavaScript، عملکرد بسیار موفقی داشته است!

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

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

مزایای فریم‌ورک React

کدام ویژگی React، این فریم‌ورک را محبوب می‌کند؟ بیایید مهم‌ترین مزایای این فریم‌ورک مبتنی‌بر کامپوننت را مرور کنیم.

قابلیت مقیاس‌پذیری و استفاده مجدد از کدها

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

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

صرفه‌جویی در زمان و هزینه

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

سادگی و یادگیری آسان

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

React از یک افزونه خاص به‌نام JSX بهره می‌برد که امکان ترکیب کدهای JavaScript و HTML را برای شما فراهم می‌کند. اگرچه استفاده از این روش ضرورتی ندارد و می‌توانید به‌تنهایی از JavaScript نیز در روند برنامه‌نویسی React استفاده کنید، اما استفاده از JSX نیز کارها را بسیار ساده‌تر خواهد کرد.

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

سهولت در تست

React امکان تست راحت و سریع کامپوننت‌ها را برای شما فراهم می‌کند. شما می‌توانید با استفاده از کتابخانه‌های (library) مخصوصی که برای تست React ایجاد شده‌اند، کاپوننت‌های موردنظر خود را تست و ارزیابی کنید.

عملکرد

React از طریق ایجاد یک ساختار داده درون‌حافظه‌ای پنهان، یک کپی از درخت DOM (Document Object Model) برای خودش ذخیره می‌کند که DOM مجازی (Virtual DOM) نامیده می‌شود.

زمانی‌که تغییری در این درخت اعمال می‌شود، React تغییرات موردنظر را از طریق درخت مجازی تشخیص داده و به نمونه واقعی منتقل می‌کند و پس از آن، ساب‌کامپوننت مناسب را به‌روزرسانی می‌کند.

پشتیبانی

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

کدام شرکت‌ها از React برای طراحی و ساخت برنامه‌های مبتنی‌بر وب خود استفاده می‌کنند؟

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

Facebook

در ابتدا، فیسبوک اولین و اصلی‌ترین دلیل برای خلق React بود. بنابراین جای تعجبی ندارد که خودش نیز از این فریم‌ورک برای توسعه برنامه تحت وب فیسبوک استفاده کند. فیسبوک در طراحی فرانت‌اند برنامه وب خود از React بهره برده که باعث می‌شود اعلانات فیسبوک به‌صورت real-time، برای کاربر نمایش داده شوند. به این ترتیب، هر زمان که در انتظار دریافت پیام، کامنت یا پستی بر روی News Feed حساب فیسبوک‌تان هستید، دیگر نیازی ندارید که صفحه را به‌صورت مجدد بارگیری کنید.

Instagram

زمانی‌که در سال ۲۰۱۲، اینستاگرام به مالکیت فیسبوک درآمد، این پلتفرم هنوز برنامه تحت وب، نداشت. از این رو، توسعه‌دهندگان فیسبوک به‌سرعت دست به کار شدند و پلتفرم وب instagram را ساختند. نسخه وب اینستاگرام کاملا مبتنی‌بر کتابخانه React طراحی شده است. درست مانند آن‌چه در پلتفرم فیسبوک شاهد آن هستیم، برای این‌که تصاویر در نقشه به‌صورت real-time یا به‌صورت مستقیم از موقعیت مکانی انتخاب‌شده، نمایش داده شوند، و همچنین برای پشتیبانی از شمارشگرهای هشتگ، به‌کارگیری فریم‌ورک React ضروری است. این قابلیت به‌ویژه برای فعالان بازار شبکه‌های اجتماعی، بسیار مفید و کارآمد است.

WhatsApp Web

واتساپ در چندین مورد، شباهت زیادی به اینستاگرام دارد. در حال حاضر مدتی است که واتساپ نیز مانند اینستاگرام، از محصولات شرکت فیسبوک محسوب می‌شود و تحت مالکیت این شرکت درآمده است. نسخه وب هر دو پلتفرم اینستاگرام و واتساپ، بر مبنای کتابخانه React، طراحی و توسعه پیدا کرده است. علاوه بر این، هر دو پلتفرم واتساپ و اینستاگرام برای نمایش پیام‌ها و محتویات آنلاین، به‌صورت real-time، خلق شده‌اند.

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

Netflix

شرکت آمریکایی Netflix، تحولی در حوزه streaming media و سرویس‌های استریمینگ به‌شمار می‌رود. سایت نتفلیکس در سال ۲۰۱۴ با ۱۲۵ میلیون دنبال‌کننده، با تکیه بر کتابخانه React، بازنویسی شد. این پلتفرم به بهبودهایی در زمینه سرعت راه‌اندازی و بارگیری، عملکرد، مقیاس‌پذیری و تجربه کاربری (UX) نیاز داشت که پس از بازنویسی سایت با استفاده از فریم‌ورک React، کیفیت و عملکرد سایت تا حد زیادی، ارتقا یافت.

Atlassian

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

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

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

Disney+

در واقع، دیزینی (Disney) را می‌توانیم به نیروگاهی تشبیه کنیم که سرویس جدید آن به‌نام دیزنی‌پلاس (Disney+)، سلاح آن در برابر جنگ پیشِ‌رو در بازار استریمینگ، به‌شمار می‌رود. برنامه تحت وب Disney+ بر مبنای فریم‌ورک React کدنویسی شده و از Redux برای کنترل state برنامه و ذخیره‌سازی اطلاعات فیلم‌ها و سریال‌های تلویزیونی دانلود شده، استفاده شده است.

Yahoo! Mail

بی‌شک، یاهو میل (Yahoo! Mail) مسیر طولانی برای ارائه راهکارهای خود طی کرده و زبان‌های برنامه‌نویسی گوناگونی را امتحان کرده است. در دهه ۹۰ میلادی که Yahoo! Mail برای اولین بار پا به عرصه گذاشت، بر مبنای زبان‌های C++ و HTML طراحی شده بود. سپس تا سال ۲۰۰۴، تیم توسعه یاهو میل، به‌ترتیب به زبان‌های Oddpost، Java، Python و JS روی آوردند. پس از آن نیز توسعه‌دهندگان این پروژه به‌ترتیب، از زبان‌های Classic PHP، JS و نسل جدید NodeJS، React و MicroJS، برای تکامل و توسعه یاهو میل، استفاده کردند. اما در نهایت، یاهو پس از گذراندن مسیر طولانی برای توسعه و بهبود و استفاده از زبان‌های مختلف، React را انتخاب کرد. علت این انتخاب یاهو، ویژگی‌ها و قابلیت‌های DOM مجازی، دیباگینگ آسان، کامپوننت‌های مستقل و بسیاری از موارد دیگری بود که پیوسته در افزایش محبوبیت و گسترش جامعه React، نقش داشته‌اند.

Battlefield 1

در بازی ویدئویی Battlefield 1، برای طراحی رابط کاربری از فریم‌ورک React استفاده شده است. این فریم‌ورک شما را قادر می‌سازد که رندرر‌های (renderer) مخصوص خودتان را بنویسید. بنابراین برای اجرای کد برنامه، دیگر به ایجاد HTML یا موارد دیگری، مانند ارائه اطلاعات آن‌چه بر روی نمایشگر نمایش داده می‌شود به موتور بازی کامپیوتر، نیاز نخواهد بود. چرا که این فریم‌ورک تمامی اطلاعات و عوامل موردنیاز را پوشش می‌دهد.

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

بسیاری از شرکت‌ها علاقه بسیاری به استفاده از فریم‌ورک React از خود نشان داده‌اند. برای مثال، شرکت‌های BBC، Dropbox، PayPal، IMDb، Imgur، American Express، Dailymotion، Uber، Lyft، New York Times، Reddit، Archive.org، Airbnb، Urban Dictionary، Coursea، Variety، The Economist، Buffer، HBO، Product Hunt، نمونه‌هایی از شرکت‌هایی هستند که از فریم‌ورک React در طراحی رابط کاربری برنامه‌های تحت وب خود، بهره برده‌‌اند.

منبع: https://tsh.io/blog/examples-of-react-framework-web-applications