تاریخچه React و سایر فریمورک‌ها

مقدمه

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

دوران jQuery: ساده‌سازی دستکاری DOM

کتابخانه‌ای مانند jQuery که در سال ۲۰۰۶ معرفی شد، انقلابی در توسعه فرانت‌اند ایجاد کرد. jQuery با ارائه یک API ساده و یکپارچه، کارهای طاقت‌فرسایی مانند انتخاب عناصر DOM، مدیریت رویدادها و ارسال درخواست‌های AJAX را در مرورگرهای مختلف بسیار آسان‌تر کرد.

JAVASCRIPT (jQuery)

// Imperative approach: Manually changing the DOM
$('#myButton').on('click', function() {
    $('#myText').text('Button was clicked!');
    $(this).hide();
});

با این حال، رویکرد jQuery همچنان «دستوری» (imperative) بود. شما باید به صورت دقیق به مرورگر می‌گفتید که «چه کاری» و «چگونه» انجام دهد. با بزرگتر شدن اپلیکیشن‌ها، پیگیری تمام این تغییرات دستی و مدیریت وضعیت `UI` به یک چالش بزرگ تبدیل شد و منجر به کدهای پیچیده و مستعد خطا گردید که به «اسپاگتی کد» (spaghetti code) معروف شد.

ظهور فریم‌ورک‌های MVC و تولد React

برای حل مشکل پیچیدگی، فریم‌ورک‌هایی مانند AngularJS (که بعدها به Angular تبدیل شد)، Ember و Backbone با الهام از الگوی معماری Model-View-Controller (MVC) ظهور کردند. این فریم‌ورک‌ها با ارائه ساختارهای مشخص، تلاش کردند تا منطق، داده و نمایش را از هم جدا کنند.

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

نوآوری‌های کلیدی React

React با معرفی چند ایده کلیدی، مسیر توسعه وب را تغییر داد:

• Virtual DOM: به جای دستکاری مستقیم DOM پرهزینه، React یک نمایش مجازی و سبک از DOM را در حافظه نگه می‌دارد. با هر تغییر در state، React یک Virtual DOM جدید ساخته، آن را با نسخه قبلی مقایسه می‌کند (فرآیندی به نام "diffing")، و سپس تنها تغییرات لازم را به صورت دسته‌ای و بهینه بر روی DOM واقعی اعمال می‌کند. این کار عملکرد را به شکل چشمگیری بهبود می‌بخشد.
• معماری مبتنی بر کامپوننت: React ایده تقسیم UI به کامپوننت‌های مستقل و قابل استفاده مجدد را به صورت مرکزی در طراحی خود قرار داد. این رویکرد، توسعه و نگهداری اپلیکیشن‌های بزرگ را بسیار ساده‌تر کرد.
• جریان داده یک‌طرفه (One-Way Data Flow): در React، داده‌ها (از طریق props) همیشه از کامپوننت والد به فرزند جریان می‌یابند. این مدل، پیش‌بینی رفتار اپلیکیشن و دیباگ کردن آن را بسیار آسان‌تر از مدل‌های پیچیده two-way data binding که در فریم‌ورک‌های اولیه رایج بود، می‌کند.

اکوسیستم امروزی

امروزه، React به یکی از محبوب‌ترین و پرکاربردترین کتابخانه‌ها در اکوسیستم فرانت‌اند تبدیل شده است. موفقیت آن الهام‌بخش ابزارهای دیگری مانند Vue.js شد که بسیاری از ایده‌های خوب React (مانند Virtual DOM و کامپوننت‌ها) را با یک API متفاوت و رویکردی که برخی آن را ساده‌تر می‌دانند، ترکیب کرد. Angular نیز به صورت کامل بازنویسی شد و به یک فریم‌ورک قدرتمند و جامع تبدیل شد که رویکرد متفاوتی را دنبال می‌کند.

در این درس، با سفر از دنیای دستکاری مستقیم DOM با jQuery به عصر رابط‌های کاربری اعلانی با React، به درک بهتری از دلایل پیدایش و موفقیت React رسیدیم. دیدیم که چگونه مفاهیمی مانند Virtual DOM و معماری مبتنی بر کامپوننت، پاسخی به چالش‌های پیچیدگی و عملکرد در وب مدرن بودند. در درس بعدی، به «تفاوت React با فریم‌ورک‌هایی مثل Angular و Vue» خواهیم پرداخت و با مقایسه دقیق‌تر، جایگاه هر کدام را بهتر درک خواهیم کرد.