بونسای؛ کتابخونهٔ رابط کاربری جیناستریت با OCaml
فرانتاند
تستخلاصهٔ کاملتر
بونسای (Bonsai) کتابخونهٔ ساخت رابط کاربری وبه که جیناستریت با زبان OCaml نوشته و تو مخزن گیتهابش معرفیش کرده. تو معرفی پروژه اومده که تقریباً همهٔ اپلیکیشنهای وب داخلی این شرکت — از دفترچهتلفن سازمانی گرفته تا ابزارهایی که سیستمهای معاملاتی رو پایش میکنن — با بونسای ساخته شدن. ایدهش تا حدی از Elm الهام گرفته: کامپوننتها ماشینهای حالت کاملاً تابعیان که راحت با هم ترکیب میشن.
حرف اصلی پروژه اینه که فریمورکهای دیگه حالت، محاسبهٔ افزایشی و رندر رو تو یه انتزاع واحد به اسم کامپوننت قاطی میکنن، ولی بونسای اینها رو جدا و بهصورت انتخابی در اختیارت میذاره. به گفتهٔ سازندههاش، همون ابزاری که جلوی رندر دوبارهٔ کل صفحه رو موقع تعامل کاربر میگیره، برای افزایشیکردن یه محاسبهٔ سنگین بیزینسی روی دادهٔ زنده هم به کار میره. اگه با ریاکت کار کردی، تصور کن همهچی شبیه hook باشه و حالت بیرون از سلسلهمراتب کامپوننتها مدیریت بشه.
چون حالت به کامپوننت مشخصی گره نخورده، یه API مفصل برای مدیریت چرخهٔ عمر و اسکوپ حالت داره؛ مثلاً وقتی مجموعهای از کامپوننتهای حالتدار رو داخل یه رابط تبدار جا میدی، خودش حالتشون رو مدیریت میکنه و لازم نیست دستی به بالاترین سطح اپ منتقلش کنی. نویسندهها میگن مزیت بزرگ دیگهش اینه که با OCaml همون زبان و همون تایپها رو هم تو بکاند و هم تو فرانتاند داری. یه کامپوننت ساده این شکلیه؛ حالت با Bonsai.state ساخته میشه و با let%arr به ویو وصل میشه.
let faces = [ "⚀"; "⚁"; "⚂"; "⚃"; "⚄"; "⚅" ]
let component (graph @ local) =
let face, set_face = Bonsai.state (List.hd_exn faces) graph in
let%arr face and set_face inتست هم یکی از بخشهاییه که پروژه روش تأکید داره: با Handle.create و Handle.show خروجی DOM رو میبینی، با Handle.input_text روی المنتها ورودی میدی و بعد Handle.show_diff فقط تفاوتها رو نشون میده، حتی تغییر اتریبیوتها و کلاسها. تستها میتونن فراخوانی سرور رو هم شبیهسازی کنن، پس به گفتهٔ نویسندهها کل یه کامپوننت رو بدون باز کردن مرورگر میشه نوشت.
نکات کلیدی:
- کتابخونهٔ UI جیناستریت با OCaml، الهامگرفته از Elm، پایهٔ تقریباً همهٔ اپهای داخلی شرکت
- حالت، محاسبهٔ افزایشی و رندر جدا از همان، نه قاطیشده تو یه انتزاع کامپوننت
- حالت بیرون از درخت کامپوننتها مدیریت میشه و API مفصلی برای اسکوپ و چرخهٔ عمرش داره
- یه زبان و یه سیستم تایپ برای بکاند و فرانتاند
- تستهای واقعی با دیدن DOM و دیف تغییرات، بدون باز کردن مرورگر
- خانوادهٔ کتابخونهها: هستهٔ عمومی، bonsai_web برای وب و bonsai_term برای ترمینال
