گزارش ایونت فرانتچپتر 2024
همایش امسال فرانتچپتر، ۹ و ۱۰ اسفند ماه در آمل و بابلسر مازندران برگزار شد. روز همایش با سخنرانی امیر کبیری درمورد چالشها و راه حلهای تیم فرانتاند دیجیکالا آغاز شد. پس از اون پوریا باباعلی در مورد بدهی فنی صحبت کرد همراه با کلی میم بامزه که حسابی لذت بردیم. محمدرضا ایرانمنش از تیم دیوار کل طول ایران رو از هرمزگان تا مازندارن سفر کرده بود تا برای بچههای فرانتچپتر درمورد فرایندهای حین توسعه و نگهداری بگه. حل مسئله مثل یه مهندس نرمافزار موضوع ارائهی حسین موسوی از علی بابا بود، «دس خوش!» حسین جان. پس از صرف نهار و استراحتی کوتاه نوبت حسام موسوی بود تا با روایتی شیوا، بگه که چطور یک برنامهنویس میتونه بیزینسمن خوبی هم باشه و ایدهها رو به محصول تبدیل کنه. نفر بعد بهنیا آزاد، ارائهای بینظیر درمورد چالشهای مهاجرت از جاوااسکریپت به تایپاسکریپت داشت و البته به شرکتکنندهها قول داد دورهی رایگان تایپاسکریپت مثل یک حرفهای رو از فرانتچپتر منتشر کنه! سمانه یعقوبی در مورد معماری فرانتاند مقیاسپذیر و چالشهای میکروفرانتاند صحبت کرد. ارائه دهندهی آخر، محمود صاحبی، از مسیر انتخاب استک با کمی چاشنی هوش مصنوعی (و اینکه بالاخره هوش مصنوعی جای ما رو میگیره یا نه) گفت. در طول این ارائه یک اشکال در سیستم صوتی باعث شد برای چند ثانیه صدایی در حد بمب صوتی تو سالن بپیچه و شایعاتی مبنی بر این هست که این صدای مهیب هماهنگ شده و جزئی از ارائهی محمود بوده (نه خداییش نبود)!
پنل گفتوگو بعد ارائهها که قرار بود با حضور آرمان علیقنبری، سمانه یعقوبی و اشکان رحمانی عزیز برگزار بشه متاسفانه به خاطر مشکلات فنی از برنامه حذف شد ولی از بچهها قول گرفتیم اون پنل رو آنلاین برگزار کنیم.
برای مراسم اختتامیه، برندگان مسابقهی من قهرمانم! معرفی شدن و از طرف لیارا به برندهها جوایزی داده شد (دم لیارا حسابی گرم). پس از اون از سخنرانها و تیم اجرایی تجلیل شد که همگی واقعا درجه یک و سرپنجه بودن. در آخر یک عکس دست جمعی، ثبت خاطرهی ما شد از بودن کنار هم به عنوان یک جامعه پر از حمایت و تخصص و عشق.
از React 19 چه خبر؟
ریاکت 19 که هنوز در مرحله بتاست تغییرات خوبی داشته و کامیونیتی هم ازش کلی استقبال کرده. پله بعدی بلوغ ریاکت دو اتفاق مهمه، یک پایدار و فراگیر شدن React Server Component و دو React Compiler که جدا از کور اصلی ریاکت در حال توسعست.
- نسخه پایدار Server Component بعد سالها
- یک API جدید که نسخه بهتر Server-Actions با پشتیبانی از کلاینتساید و سرورساید برای کار با فرمهاست به اسم Actions
- اسِت لودینگ در پسزمینه
- کامپوننت داخلی جدید <DocumentHead> که جایگزین React Helmet میشه
- پشتیبانی و هماهنگی بهتر از Web Component ها
- هوکهای جدید use، useOptimistic، useFormStatus، useFormState
- کانتکست API ساده شده
با اعلام ارشیا غفوری، Winter is Coming !
یک رانتایم جدید جاوااسکریپت اومده که بهار امسالو زمستون کنه، سربالا و سینهکفتری. WinterJS اسم رانتایم جدیدیه که مدعیه از Bun هم سریعتره و از همین حالا React Server Component رو تو Next.js به صورت کامل ساپورت میکنه (تا جایی که مطلعیم فعلا فقط نود توانایی اجرای RSC رو داره)
- توسعه داده شده با Rust و انجین جاوااسکریپتی فایرفاکس به نام SpiderMonkey
- سازگاری تقریبا کامل با WinterCG که یک استاندارد جامع برای رانتایمهای جاوااسکریپتیه
- قابلیت اجرا روی Edge با استفاده از Web Assembly
- سرعت بسیار بالا، این ادعا مطرحه که از Bun هم سریعتره
- سازگاری با Cloudflare API
- پشتیبانی از فریمورکهای مطرح مثل Next.js، Hono، Astro، SvelteKit، Nuxt.js و…
- اجرای بدون مشکل React Server Component
ارشیا غفوری لید دولوپر این پروژست که از طرف فرانتچپتر یه دس مریزاد اساسی بهش میگیم 🥕🧡
انتشار نسخه بتای عمومی Million Lint
کامپایلر Million.js برای React مدعیه که میتونه تا 70% پرفورمنس بهتری برای اپهای ریاکتی داشته باشه، حالا همین تیم یک اکستنشن VSCode معرفی کرده به نام Million Lint که پیشنهاداتی برای بهبود پرفورمنس میده
- استفاده از استاتیک و رانتایم آنالیز برای نتیجه بهتر
- اندازهگیری پرفورمنس اپ در رانتایم
- ارائه پیشنهاد برای بهبود پرفورمنس
- هوش مصنوعی پولی Lint++ برای توصیههای بهتر پرفورمنسی در کنار اکستنشن رایگان VSCode
تبدیل اسکرینشات و ویدئو به کد با Screenshot to Code
یه لایبرری خوب و ترتمیز برای تبدیل اسکرینشات و اسکرینریکوردینگ به کد فرانتاند به وسیله AI با حدود 48k استار در گیتهاب!
- تبدیل اسکرینشات، موکاپ و دیزاین فیگما به کد واقعی
- پشتیبانی از React، ٰVue، HTML، SVG و Tailwind
- پشتیبانی از ویدئو و اسکرین ریکوردینگ به عنوان دیتای نمونه برای تبدیل (علاوه بر اسکرینشات)!
انتشار Storybook 8
- ویژوال تستینگ داخلی
- پشتیبانی از React Server Component
- کنترلهای ارتقا یافته برای React و Vue
- پشتیبانی عمیقتر و بازنویسی شده از Vite و Vitest و پشتیبانی از Vite 5
- دو تا چهار برابر بیلد تستی سریعتر
- دسکتاپ و موبایل UI جدید
- حذف وابستگی به ریاکت در پروژههای غیر ریاکتی
لینکها
پشتیبانی فرست کلس Remix از Vite، پروژههای جدید Remix به صورت پیشفرض از Vite استفاده میکنن
یک مقاله جالب و انتقادی در مورد Next.js و RSC
تست کامپوننتها و کاستوم هوکها با Vitest
ساخت رابط کاربری در فضای سه بعدی با React و Three.js
اضافه کردن اتوماتیک کامنت و داکیومنتیشن به کد با AI
معرفی Vercel AI SDK 3.0، استفاده از Server Component ها برای تولید پاسخها
اپیزود ۱۸۱ از پادکست خوب Frontend First در مورد ورژن بعدی ریاکت و React Compiler
لایبرری deep-chat، پیادهسازی راحت چت AI در وبسایت
افزایش قابل ملاحظه سرعت TypeScript با استفاده از Interface به جای Type
یک تکست ادیتور با کلی امکانات برای وب و iOS از فیسبوک به نام Lexical با 17k استار
انتشار نسخه 1.0 وب فریمورک ElysiaJS
اینم از Puter که خودش رو Internet OS معرفی میکنه، یه سیستم عامل کامل توی مرورگر
تست آنلاین وبهوک و دیدن ریکوئستها با webhook.site
استفاده از useOptimistic برای تغییر سریع search params در RSC
جلوگیری از ارور Hydration Mismatch با هوک useSyncExternalStore
چطور با Next.js Server Actions در فرمها یک UX خوب بسازیم
یک مقاله عالی در مورد عناصر تشکیل دهنده Solid.js که به درد دولوپرهای ریاکت هم میخوره
اضافه کردن Dynamic Sitemap به Next.js
یه راهنمای عالی و اینترکتیو برای سلکتور :has در CSS
تغییرات جدید در کروم 122 – Perf DevTools, Storage Buckets, Async Clipboard
یه کامپایلر جدید برای ریاکت به اسم React Unforget برای Memoize و Optimize کردن کد ریاکتی
دیپندنسی اینجکشن با package.json!
پکیج رسمی Next.js برای مدیریت لایبرریهای Third-Party
ساخت یک روتر تایپسیف React با 500 خط کد
ساخت گرادینتهای زیبا با کانواس
نسخه جدید Shadcn/ui با کامپوننتهای جدید شامل Breadcrumb، One-Time-Password Input
شناسایی ریرندرهای React با گوز که البته میتونه خیلی کاربردی باشه!
یوتیوب گردی
- Ryan Toronto – Asset loading in React 19
- Jack Herrington – React Hook Form & React 19 Form Actions, The Right Way
- Fireship – They made React great again? (React Labs)
- Fireship – This UI component library is mind-blowing (Aceternity Components)
- Theo – New JS Framework Just Dropped (TanStack Start)
- Jack Herrington – Forms Management with Next.js App Router
- Daniel Kanem – Understanding the Steps of Migrating Your Remix App to Vite.js
- Brooks Lybrand – Deploying Remix to GitHub Pages
- Theo Browne – Million Lint
- UI Engineering – Goodbye, forwardRef
- Jack Herrington – Pigment-CSS: Material-UI Fixed on NextJS and React 19
دیدگاهتان را بنویسید