هفتم سپتامبر (۱۰ روز دیگه) Bun نسخه ۱ خودش رو به صورت رسمی منتشر می‌کنه و گفتم بد نیست قبل از اون یه آشنایی باهاش داشته باشیم 🤓

🔍 اول از همه درباره این صحبت کنیم که Bun چیه؟
به طور خلاصه Bun یه محیط اجرا برای جاوااسکریپت هست و توسط Jarred Summer در حال توسعه هست.
برای پیاده‌سازی اون از انجین JavaScriptCore مرورگر Safari و زبان Zig استفاده شده. Bun یه رقیب سرسخت برای Node.js به حساب میاد و در واقع قصد داره به طور کامل جایگزین Node.js بشه.

🌟 حالا ببینیم ویژگی‌های Bun چیه:
🔹 سازگاری Bun با Node.js بالاست و اکثر ماژول‌ها و global variableهای نود داخل Bun هم قابل دسترس هستن
🔸 پرفورمنس اپ‌های توسعه داده شده با Bun بهتر از Node.js هست. سرعت بالای Bun برای serverless computing خیلی خوبه
🔹 به صورت پیش‌فرض از تایپ‌اسکریپت پشتیبانی می‌کنه
🔸 خودش یه پکیج منیجر هست و مثل npm پکیج‌ها رو داخل پوشه node_modules می‌ریزه اما سریع‌تره. بعد از اینکه یه پکیج رو دانلود کرد اون رو کش می‌کنه و برای دانلود بعدی فقط اون رو کپی می‌کنه (نسخه یکسان پکیج).
🔹 کار کردن با قابلیت پکیج منیجری اون به شکلی هست که کاربرهای yarn - npm - pnpm باهاش راحت باشن
🔸 در مورد تست‌نویسی، Bun سینتکسی شبیه Jest داره و شما می‌تونین تست‌های نوشته شده با ‌Jest رو با اسکریپت bun test بدون تغییر کد اون اجرا کنین. سرعت اجرای تست‌ها داخل Bun به گفته خودشون خیلی سریع‌تره.
🔹 همچنین Bun به طور پیش‌فرض می‌تونه عمل transpile هم انجام بده

به طور کلی Bun نوعی all-in-one حساب میشه چون هم می‌تونه اسکریپت ران کنه، هم پکیج دانلود کنه، هم تست ران کنه و عمل transpile رو انجام بده.

⏱ داخل سایت Bun مقایسه‌هایی از لحاظ سرعت با بقیه ابزارها انجام شده:
⚪ در مقایسه هندل کردن ریکوئست‌های HTTP، عملکرد Bun نسبت به Node.js تقریبا ۵ برابر و نسبت به Deno تقریبا ۲ برابر بهتر بوده
⚪ در مقایسه تعداد پیام ارسال شده از طریق WebSocket تو یه سرور چت،‌ Bun تونسته ۶ برابر نسبت به Node.js و ۲ برابر نسبت به Deno پیام بیشتری ارسال کنه
⚪ درایوری که Bun برای Sqlite ساخته پرفورمنس بالایی داره. در مقایسه کوئری‌های اجرا شده، ‌Bun تقریبا ۴ برابر نسبت به better-sqlite3 در Node.js و تقریبا ۲ برابر نسبت به x/sqlite3 در Deno عملکرد بهتری داشته
⚪ در مورد نصب پکیج‌ها Bun تونسته ۱۷ برابر نسبت به pnpm و ۲۹ برابر نسبت به npm و ۳۳ برابر نسبت به yarn سریع‌تر باشه
⚪ در ران کردن تست‌ها، Bun نسبت به Jest بین ۸ تا ۲۰ برابر سرعت بیشتری داشته

یه نکته‌ای که خوبه گفته بشه اینه که Bun هنوز به طور کامل با Node.js سازگاری نداره و هنوز تمام ماژول‌ها و global variableها داخلش پیاده‌سازی نشدن. همچنین Bun فعلا فقط روی لینوکس و مک و WSL قابل نصبه.

اگه Bun بتونه حرفش رو عملی کنه و شما بدون تغییر کد پروژه‌تون بتونین روی Bun هم اجراش کنین، شاید بشه گفت دوران Node.js به سر می‌رسه. البته از بین بردن ابزاری که به طور وسیع استفاده میشه به همین راحتی نیست و همه چی بستگی به عملکرد Bun داره.
اینم بگم برای برنامه‌نویسا فرقی نداره چون پروژه‌های Node.js بدون هیچ تغییری می‌تونن با پرفورمنس بهتر روی Bun هم اجرا بشن

@AlirezaJsTs

React Hooks Cheat Sheet

:)))))))))))))))))

اگر از tyoeof و instanceof برای کاندیشن‌هاتون استفاده میکنید حسابی مراقب باشید. مثلا وقتی از typeof استفاده میکنید، تایپ Array رو به عنوان Object میشناسه و عملا تو این حالت استفاده ازش کاربردی نداره.

@AlirezaJsTs

https://www.totaltypescript.com/

یه سایت خیلی خوب برای آموزش typescript که کلی آموزش رایگان داره. با تمرین و حل تمرین آنلاین بعد از هر ویدیو. طراحی سایتش هم جالب بود 👌
یک ایده جالب که داره اینه که مشکل رو به شما توضیح میده و بعد حل مشکل رو به شما میسپره. و توی همون محیط وب شما دیباگ میکنید و تست مینویسید. و در نهایت سولوشن رو در اختیارتون میذاره.
اکستنشن ejoy هم برای ترجمه خوب روی ویدیوهاش کار میکنه که جدیدن حالت دو تا subtitle رو هم به این سایت اضافه کرده.

@AlirezaJsTs

نسخه 8.3 PHP منتشر شد.

https://www.php.net/releases/8.3/en.php

@AlirezaJsTs

اگه تو NodeJS برای وب سرورتون Auth service نوشتین و با password درستیِ اطلاعات رو چک میکنین، احتمالا به این صورت مقایسه پسورد رو انجام میدین:

if (hashed_pass_from_db === hashed_pass_from_input) {
  // success
}

این تکه کد یک مشکل امنیتی خطرناک داره که به خاطر استفاده از "===" هست.
حالا این مشکل چیه و چطور رفعش کنیم.

به این باگ امنیتی میگن Timing attack.
اینطور کار میکنه که با استفاده brute force هربار یک پسورد رو سمت back-end ارسال میکنن و با استفاده از تایمینگِ response حدس میزنن که چند درصد این پسورد درسته و اینقدر این کار رو انجام میدن تا پسورد درست رو به دست بیارن.
استفاده از پکیج‌های bcrypt میتونه با یه روش امن براتون پسورد رو چک کنه. اما اگه از scrypt استفاده کنین شما باید از یک function کمکی در ماژول crypto استفاده کنین.

crypto.timingSafeEqual(Buffer.from("a"), Buffer.from("a"))

این فانکشن زمان مقایسه رو یک مقدار ثابت در نظر میگیره. یعنی زمان مقایسه پسورد اشتباه با پسورد درست همیشه یکی هست و اینطوری attacker نمیتونه حدس بزنه که تا چه حد درست پیش رفته.

@AlirezaJsTs

وقتی بهت گفتن کرم بریز در کنارش درست رو هم ادامه بده

چرا React اینقدر محبوب است ؟ و کاربردهای آن کدامند؟ چه پرفورمنسی را برای ما بالا میبرد؟

وقتی Js میره سراغ Dom اصلی و بخواد اون رو تغییری مثل عمل درج کردن و حذف کردن و .. بده زمان زیادی صرف میکنه و هزینه ی کار کردن با Dom اصلی ( real Dom ) خیلی بالاست ‌به همین دلیل ری اکت این مشکل رو حل میکنه.
ری اکت از روی Dom اصلی و نسخه اصلی یک کپی به اسم Virtual Dom میسازه و تغییراتی روکه میخواد روی نسخه ی کپی شده اِعمال میکنه و بعد از اتقاق افتادن تغییرات میاد اختلاف بین Dom اصلی و Virtual Dom رو بررسی میکنه و فقط اون تغییراتی که اتفاق افتاده رو دوباره سازی میکنه به همین خاطر هست که در پروژه های ری اکت کُدها وجود ندارن و در پشت پرده همه چی توسط Virtual Dom اتفاق میافته و فقط همون قسمتی رو که تغییر میدیم دوباره سازی و load میشه و اینطوریه ک performance به شدت بالا میره .

البته همینvirtual dom اگر دولوپر نا‌ آگاهی ازش استفاده کنه می‌تونه فاجعه پرفورمنسی خلق کنه مثلا keyها رو برای راحتی خودش که خطا نخوره بیاد با متدهای رندم تعریف کنه یا هر جا رسید ایندکس مپ‌ رو بذاره key و حتی در شرایطی که لزومی نداره رندر اضافی به سیستم تحمیل کنه!

نکته: کدهای دام مجازی ( VirtualDom ) درون inspect قابل مشاهده هستند .

@AlirezaJsTs

ولی خب همچنان بیشتر از ۷۰٪ وبسایت‌های جهان از jQuery استفاده میکنن 😂

یکم سم از سی‌شارپ ببینید

https://flickity.metafizzy.co

این سایت کلی اسلایدر با ویژگی‌های مشخص و بهینه داره که میتونید تو پروژه‌هاتون استفاده کنید. به نظرم جالب بود.

@AlirezaJsTs

«این متغیری که استفاده نشده رو پاک کنم»

💡سوال مصاحبه فرانت اند | برای راه اندازی پروژه React از CRA استفاده کنیم یا vite ؟

ابزار CRA یا Create React App از webpack به عنوان باندلر استفاده می‌کنه. webpack یک ابزار برای بسته‌بندی یا باندل کردن کد‌های برنامه است. وقتی شما یک برنامه React رو با CRA راه‌اندازی میکنین، webpack تمامی کدهای برنامه رو باید قبل از اجرا باندل کنه. این اتفاق باعث میشه زمان بیشتری برای development server صرف بشه و اِعمال تغییراتی که انجام می‌دید نیاز به زمان زیادتری برای به نمایش گذاشتن تغییراتتون داشته باشه! مخصوصا اگر پروژه بزرگ و پیچیده ای داشته باشین!

🔹پس CRA از webpack به عنوان باندر استفاده می کند اما VITE از esbuild bundler استفاده می کند!


💡چرا از vite به جای CRA باید استفاده کنیم؟

۱ - 🔸 اجرای سریع‌تر development server :
 ابزار Vite قبل از اجرا کل برنامه رو باندل نمیکنه!
پکیج ها و دپندنسی ها اغلب در طول مسیر دولوپمنت تغییر نمیکنن! (کتابخانه های بزرگ مانند mui)!

ابزار vite پکیج ها و دپندنسی ها رو با استفاده esbuild پیش بسته بندی(Pre-bundle ) می کنه، که 10-100 برابر سریعتر از باندلرهای مبتنی بر جاوا اسکریپت هستش!
استفاده از ماژول ها در vite توسط Native ESM انجام میشه! Native ESM (ماژول‌های EMACScript) چیه؟
این قابلیت جدیدا به جاوا اسکریپت اضافه شده که در مورد چگونگی بارگذاری ماژول‌ها در برنامه جاوااسکریپت بحث میکنه!
🔹چه مزیتی داره؟
عدم نیاز به باندلینگ: بر اساس درخواست مرورگر، Vite کدهای سورس کد رو باندل میکنه. اگر ماژولی برای برخی از صفحات لازم نباشد، باندل نمی‌شود. این باعث می‌شود فقط ماژول‌های لازم برای هر صفحه بارگذاری شود.به این ترتیب سرعت پردازش به مراتب بالاتر می رود


۲ -🔸 در Vite، وقتی که یک فایل ویرایش میشه، تغییرات در فایل‌های ویرایش شده به سرعت و بدون نیاز به بازسازی کل برنامه اعمال میشن!

علاوه بر این، Vite از کش‌گذاری HTTP استفاده میکنه تا بارگذاری کدها و فایل‌های مورد نیاز را سریع‌تر کنه. این به این معنیه که فقط فایل‌هایی که ویرایش شده‌اند، باید بروزرسانی بشن، در حالی که فایل‌های دیگه از کش استفاده میکنن تا بلافاصله از حافظه‌ای که ذخیره شده است بارگذاری بشن!


۳ - 🔸افزایش performance در زمان build

همون طور که گفتیم vite با استفاده از native ESM فقط ماژول‌های لازم برای یک صفحه خاص رو بارگذاری میکنه، در حالی که ماژول‌های دیگر تا زمانی که نیاز نیست بارگذاری نمی‌شوند
در مقابل، CRA برای ساخت برنامه از webpack و باندلینگ کامل کدها استفاده می‌کند که ممکن است زمان بیشتری برای بارگذاری و باندلینگ کل کدها صرف شود، به خصوص در برنامه‌های بزرگ.

۴- 🔸سرعت بالای تیم توسعه شرکت vite : تیم vite به سرعت در حال ساخت و بروزرسانی پکیج های مورد نیاز یک برنامه ری اکتی هستش! برای مثال ابزاری مثل vitest برای تست نویسی توسط توسعه دهندگان vite ساخته شده که در برنامه هایی که با vite ساخته شده، این ابزار نیاز به کانفیگ خاصی نداره و به مراتب سرعت بالاتری نسبت به ابزار های تست نویسی دیگه ای مثل jest دارد!