‏انتقال ۲۸۷ هزار خط React به Foldkit تو سه روز

David Granzin، بنیان‌گذار Maple، تعریف می‌کنه که اکتبر امسال اپ وبشون رو از React جدا کردن: ۲۸۷ هزار خط کد تو ۱۳۱ مسیر. Claude خود انتقال رو تو سه روز انجام داد، ولی به گفته‌ی نویسنده نوشتن کد جدید بخش راحتش بود. بیشتر وقت تیم صرف ابزاری شد که دو اپ رو مقایسه کنه و بگه انتقال درسته یا نه.

دلیل رفتن از React این بود که تغییر دادنش گرون شده بود. داده‌ها از حدود ۵۲۰ فراخوانی atom hook تو ۲۰۸ فایل می‌اومد و برای فهمیدن رفتار صفحه باید ترتیب رندر همه‌ی کامپوننت‌ها رو درمیاوردی. یه بار هم صفحه‌ی خطاها با React error #301 تو production کرش کرد. Foldkit همون معماری Elm روی Effect هست: کل state تو یه Model هست، هر اتفاق یه Message با اسم زمان گذشته مثل ClickedRow می‌شه و فقط تابع update می‌تونه Model رو عوض کنه. کار با شبکه هم فقط از طریق Commandها انجام می‌شه.

یه مزیت جانبی هم داشت: Foldkit هر Command رو تو یه span از Effect اجرا می‌کنه، یعنی frontend خودش OpenTelemetry حرف می‌زنه و یه trace از کلیک تو مرورگر تا کوئری انبار داده کشیده می‌شه. هزینه‌اش اینه که Foldkit نمی‌تونه کد رو بر اساس route تکه کنه، پس bundle اولیه از 703 KB به حدود 1.43 تا 1.58 MB (gzip) می‌رسه.

ابزار مقایسه یه پکیج به اسم @maple/ui-parity هست که هر دو اپ رو build و با Playwright اجرا می‌کنه. هر دو به یه backend تستی وصلن که API واقعی رو پیاده کرده و کوئری‌ها رو با chDB (ClickHouse داخل پروسه) اجرا می‌کنه. برای اینکه نتیجه‌ها قابل مقایسه باشن زمان ثابت می‌شه، Math.random seed می‌گیره و انیمیشن‌ها می‌ایستن. هر جفت عکس از چهار جهت مقایسه می‌شه: پیکسل، ساختار و استایل‌های محاسبه‌شده، لاگ درخواست‌ها و snapshotهای ARIA. بیش از ۵۰ فایل سناریو هست که هر بار بیش از ۲۶۰۰ حالت رو تست می‌کنن.

خود انتقال با حدود ۴۰ agent انجام شد؛ هر بار تا چهارتاشون همزمان، هر کدوم تو git worktree خودش، و یه agent جدا هم مسئول merge بود. مهم‌ترین قانون این بود که agent هیچ‌وقت حق نداره baseline، سناریو یا tolerance رو عوض کنه تا یه diff رو بپوشونه. این ابزار جزئیاتی رو گرفت که هیچ reviewerی نمی‌دید، مثلاً یه toast که تو React سه text node بود و همین ۱۳ پیکسل جابه‌جاش می‌کرد. چندتا باگ قدیمی React هم رو شد، مثل کوئری با اسم workload خالی و دکمه‌ی Reconnect که کاری نمی‌کرد.

ولی ابزار همه‌چیز رو نگرفت. command palette اصلاً سناریو نداشت و تا شب دوم کسی نفهمید منتقل نشده. review اول حدود ۴۰ مشکل بین screenshotها پیدا کرد و review نهایی با شش agent حدود ۱۴۰ تای دیگه، که چهارتاش تو checkout و settings جدی بود. تو تست نهایی با backend واقعی، Foldkit 389 درخواست زد و React 393 تا.

نکات کلیدی:

• ۲۸۷ هزار خط React تو ۱۳۱ مسیر، تو سه روز با Claude به Foldkit منتقل شد و diff نهایی ۳۳۹۳ فایل بود.
• Foldkit معماری Elm روی Effect هست و هر Command رو داخل یه span از OpenTelemetry اجرا می‌کنه.
• bundle اولیه از 703 KB به حدود 1.43 تا 1.58 MB می‌رسه چون Foldkit code splitting بر اساس route نداره.
• ابزار @maple/ui-parity پیکسل، ساختار، درخواست‌ها و ARIA رو تو بیش از ۲۶۰۰ حالت مقایسه می‌کنه.
• حدود ۴۰ agent کار کردن و حق نداشتن baseline یا tolerance رو برای رد شدن از تست عوض کنن.
• با این حال reviewها حدود ۱۸۰ مشکل پیدا کردن که از چشم ابزار مقایسه افتاده بود.