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

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

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

React چیست؟

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

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

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

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

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

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

مزایای کتابخانه React

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

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

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

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

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

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

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

هرکسی که در زمینه توسعه نرم‌افزار تجربه و دانش پایه‌ای داشته باشد می‌تواند به‌راحتی React را درک کرده و یاد بگیرد. همچنین با استفاده از JSX می‌توانید به‌سادگی کدهای HTML را با JavaScript ترکیب کنید.

سهولت در تست

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

عملکرد

React از طریق ایجاد DOM مجازی (Virtual DOM) توانسته امکان به‌روزرسانی کامپوننت‌ها را بدون نیاز به بارگیری مجدد صفحه‌ی وب فراهم آورد.

پشتیبانی

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

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

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

👥 Facebook

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

📸 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+) یکی دیگر از پیش‌روهای بازار استریمینگ به‌شمار می‌رود که برنامه‌ی تحت وب آن با استفاده از کتابخانه React توسعه پیدا کرده و از Redux برای کنترل state برنامه و ذخیره‌سازی اطلاعات فیلم‌ها و سریال‌های تلویزیونی دانلود شده استفاده شده می‌کند.

📧 Yahoo! Mail

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

🔫 Battlefield 1

در بازی ویدئویی Battlefield 1 برای طراحی رابط کاربری از کتابخانه React استفاده شده است. این کتابخانه شما را قادر می‌سازد که رندرر‌های (renderer) مخصوص خودتان را بنویسید.

دیگر شرکت‌ها …

اما لیست شرکت‌های بزرگ و فعالان مطرح دنیای فناوری که برای توسعه برنامه‌های تحت وب خود از 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