InfoQ اخیراً گزارشی در مورد Ripple منتشر کرده است، یک فریمورک فرانتاند متن باز جدید که از ایدههای React، SolidJS و Svelte الهام گرفته شده است. این فریمورک با هدف ارائه یک زبان کامپایلشده مبتنی بر TypeScript، سازگار با رویکرد مؤلفه محور (component-oriented) و شبیه JSX توسعه یافته است. Ripple از واکنشپذیری دقیق (fine-grained reactivity) و CSS scoped پشتیبانی میکند.
نوآوری کلیدی در Ripple، سیستم واکنشپذیری آن است که ردیابی خودکار وابستگیها را ارائه میدهد و بهروزرسانیهای مستقیم DOM را بدون استفاده از یک DOM مجازی انجام میدهد. این ویژگی به همراه قابلیت دیباگینگ مبتنی بر هوش مصنوعی، تجربهی توسعهدهندگان را بهبود میبخشد.
نمونه کد زیر، برخی از ویژگیهای اصلی Ripple را نشان میدهد:
With Ripple, developers write components (e.g.,TodoList,Counter) that are functions that contain DOM expressions as statements in a language whose syntax is largely inspired from TypeScript and JSX. Those functions thus describe the markup (DOM), styles (CSS), and behavior of a portion of an application’s user interface.
در Ripple، توسعهدهندگان مؤلفهها را به صورت توابع مینویسند که شامل عبارات DOM به عنوان دستورالعملهایی در زبانی هستند که سینتکس آن تا حد زیادی از TypeScript و JSX الهام گرفته شده است. این توابع ساختار (DOM)، سبکها (CSS) و رفتار بخشی از رابط کاربری برنامه را توصیف میکنند.
نکتهی مهم اینجاست که در Ripple، Markup به طور مستقیم بهعنوان دستورالعمل با همبستگی طبیعی جریان کنترل (مانند if (todos.length > 0), for (const todo of todos)) و JSX ادغام میشود. سبکها در هر مؤلفه Scope شدهاند و رفتار از طریق هندلرهای رویداد که یک سیستم واکنشپذیری دقیق را به همراه دارند، مدیریت میشوند.
Ripple با استفاده از متغیرهای مستقل (@) و متغیرهای محاسبهشده (که وابستگی خود را به متغیرهای مستقل بیان میکنند)، اطمینان حاصل میکند که این متغیرها همگام باقی میمانند. همچنین، Ripple اطمینان میدهد که وضعیت عناصر DOM با وابستگیهایشان هماهنگ است؛ برای مثال، کلیک روی دکمه باعث افزایش شمارنده (count) میشود و در نتیجه محتوای هر دو پاراگراف بهروزرسانی خواهد شد.
سیستم واکنشپذیری Ripple نه تنها یک DOM مجازی نیست، بلکه از سیگنالها نیز استفاده نمیکند. این سیستم بر اساس ارزیابی تنبل (lazy evaluation) است و به جای محاسبهی مجدد کل مارکآپ مؤلفه در هر بار تغییر، بهطور دقیق و ظریف DOM واقعی را بهروزرسانی میکند.
Ripple از حالت سراسری (global state) پشتیبانی نمیکند؛ اما برای قطعاتی از وضعیت برنامه که باید در بین مؤلفهها به اشتراک گذاشته شوند، از context استفاده میکند. با این حال، context فقط میتواند توسط مؤلفههایی مورد استفاده قرار گیرد که آن را در closure خود داشته باشند و تنها میتوان آنها را در داخل یک Context Component تنظیم یا خواند (یعنی نمیتوان آنها را در داخل هندلر رویداد تنظیم کرد).
همچنین، با استفاده از کلمه کلیدی effect امکان اتصال اثرات به تغییرات حالت وجود دارد. Ripple قصد دارد مدل ذهنی سادهتری همراه با تجربهی کاربری بهتر برای توسعهدهندگان وب ارائه دهد (مثلاً نیازی به استفاده از Memo نیست، CSS بهطور پیشفرض Scope شده است و هیچ abstraction اضافهای بین مارکآپ و عناصر DOM وجود ندارد).
زبان Ripple طوری طراحی شده که با کامپایلر تعامل داشته باشد تا به خوبی انواع TypeScript و الگوهای reactive state را درک کند. این امر راه را برای تکمیل خودکار بهتر، بررسی خطا و پشتیبانی از ابزارها هموار میکند. تیم Ripple در حال بررسی ادغام مستقیم پشتیبانی از هوش مصنوعی در سرور توسعه (dev server) برای دیباگینگ فعال و ارائه پیشنهادات است.
Ripple توسط Dominic Gannaway که پیشتر روی React Hooks در Meta کار کرده، Lexical را ایجاد کرده، Inferno را نوشته و اخیراً بخشی از تیم هسته Svelte 5 بوده است، توسعه یافته. Ripple اگرچه چند سالی است که وجود دارد، اما اخیراً با مجوز MIT متن باز شده است. Ripple هنوز در مراحل اولیه توسعه قرار دارد و مشارکتها خوشآمدگویی میباشند.
📌 توجه: این مطلب از منابع بینالمللی ترجمه و بازنویسی شده است.