نوشته های سهیل جعفرنژاد

چرا ریکت رابط کاربری شما را به شکل درخت می‌بیند — و چرا این موضوع مهم است

سهیل جعفرنژاد — Sun, 08 Jun 2025 16:28:56 +0330

وقتی اپلیکیشن‌های ریکت می‌سازید، احتمالاً شنیده‌اید که ریکت رابط کاربری را به صورت یک "درخت" در نظر می‌گیرد. اما دقیقاً منظور از این حرف چیست؟ و چرا باید برایتان مهم باشد؟درک اینکه ریکت چگونه اپلیکیشن شما را به صورت یک درخت مدل‌سازی می‌کند، می‌تواند تأثیر زیادی روی شیوهٔ نوشتن کامپوننت‌ها، دیباگ کردن مشکلات رندر، و حتی بهینه‌سازی عملکرد داشته باشد. در این مقاله، به بررسی درخت رندر (Render Tree) و درخت وابستگی ماژول‌ها (Module Dependency Tree) در ریکت می‌پردازیم — و اینکه این ساختارها چطور روی اپلیکیشن شما تأثیر می‌گذارند.🌳 رابط کاربری به عنوان یک درخت: تصویر کلیدر توسعهٔ مدرن فرانت‌اند، فکر کردن به ساختارها به صورت "درخت" فقط یک استعاره نیست — بلکه یک اصل کلیدی است. بسیاری از کتابخانه‌های UI، از جمله ری‌اکت، رابط کاربری را به شکل درختی از کامپوننت‌ها مدل می‌کنند. این ساختار سلسله‌مراتبی به ما کمک می‌کند روابط بین بخش‌های مختلف رابط کاربری را بهتر بفهمیم.هر کامپوننت در اپلیکیشن شما به یک گره (Node) در درخت تبدیل می‌شود. وقتی کامپوننت‌ها داخل هم قرار می‌گیرند، رابطهٔ پدر-فرزندی ایجاد می‌شود. این روابط برای ری‌اکت هنگام رندر و محاسبهٔ تغییرات، کاملاً حیاتی هستند.این نوع مدل‌سازی فقط مختص ری‌اکت نیست. مرورگرها از درخت‌ها برای مدل‌سازی HTML (به‌صورت DOM) و CSS (به‌صورت CSSOM) استفاده می‌کنند. پلتفرم‌های موبایل هم سلسله‌مراتب ویوهای خود را با درخت‌ها نمایش می‌دهند.در درخت رندر:هر گره یک کامپوننت ریکتی است.هر شاخه یک دستور render است.گره ریشه معمولا فایلAppاست — همان فایلی که اپلیکیشن از آن شروع می‌شود.🧱 درخت رندر: عملکرد کامپوننت‌ها در عملزمانی که یک اپلیکیشن ریکت را رندر می‌کنید، ریکت یک درخت رندر (Render Tree) می‌سازد. این درخت فقط شامل کامپوننت‌های ریکت است — نه تگ‌های HTML و نه عناصر UI مربوط به پلتفرم مقصد.بیایید به یک اپلیکیشن ساده نگاه کنیم:import FancyText from './FancyText'; import InspirationGenerator from './InspirationGenerator'; import Copyright from './Copyright'; export default function App() { return ( <> ); } در اینجا ریکت یک درخت رندر می‌سازد که:App گره ریشه است، چون ریشهٔ ساختار کامپوننت‌های ماست.FancyTextوInspirationGeneratorفرزندان کامپوننت Appهستند و Copyrightیک فرزند از InspirationGeneratorاست.نکتهٔ مهم این است که این ساختار فقط شامل کامپوننت‌های ریکت است و کاری به عناصر HTML یا UIهای خاص پلتفرم ندارد، چون ریکت وابسته به پلتفرم خاصی نیست. چه به وب رندر شود، چه موبایل یا دسکتاپ، برای ریکت فرقی نمی‌کند.🔄 رندر شرطی و تغییرات درختدرخت رندر مربوط به یک بار رندر خاص است. یعنی ساختار کامپوننت‌ها در یک وضعیت خاص از اپلیکیشن را نشان می‌دهد.اما ریکت از رندر شرطی (Conditional Rendering) پشتیبانی می‌کند. یعنی بسته به مقدار props یا state، ممکن است کامپوننت‌ها فرزندان مختلفی رندر کنند. در نتیجه، درخت رندر ممکن است در هر بار رندر متفاوت باشد.برای مثال، اگر مقدار inspiration.type تعیین کند که یا رندر شود، درخت رندر در هر حالت متفاوت خواهد بود.import FancyText from './FancyText'; import Color from './Color'; export default function InspirationRenderer({ inspiration }) { if (inspiration.type === 'text') { return ; } else if (inspiration.type === 'color') { return ; } else { return null; } }با وجود این تغییرات، درخت‌های رندر بسیار مفیدند برای:شناسایی کامپوننت‌های سطح بالا (نزدیک به ریشه) که روی تمام کامپوننت‌های زیرین اثر دارند.پیدا کردن کامپوننت‌های برگ (leaf components) که فرزندی ندارند و معمولاً زیاد باز-رندر می‌شوند.شناسایی این دسته‌ها برای دیباگ عملکرد و درک جریان داده در اپلیکیشن مفید است.📦 درخت وابستگی ماژول: ساختار پشت‌پرده اپلیکیشنعلاوه بر ساختار کامپوننت‌ها، ساختار مهم دیگری هم وجود دارد: درخت وابستگی ماژول (Module Dependency Tree). با گسترش اپلیکیشن‌، کدها را در فایل‌های جداگانه می‌نویسیم — ماژول‌هایی که کامپوننت، تابع یا ثابت‌ها را صادر می‌کنند. هر بار که یک فایل از فایل دیگر چیزی import می‌کند، یک ارتباط جدید در این درخت ساخته می‌شود.در درخت وابستگی ماژول:هر گره یک فایل جاوااسکریپت (ماژول) است.هر شاخه یک دستور import است.گره ریشه فایل entrypoint اپلیکیشن است — همان فایلی که اپلیکیشن از آن شروع می‌شود.مقایسه با درخت رندر:https://gist.github.com/Soheiljafarnejad/514df521b87821d0ba83c58cfb0d80c5برای مثال، در درخت رندر، کامپوننت Copyright زیر InspirationGenerator قرار دارد چون به عنوان children به آن داده شده. اما در درخت وابستگی، فایل Copyright.js زیر App.js قرار دارد، چون از آنجا import شده است.🧰 اهمیت درخت وابستگی در زمان تولید (Production)در مرحلهٔ production، ابزارهای باندلینگ (مانند Webpack، Vite یا Parcel) از درخت وابستگی ماژول استفاده می‌کنند تا مشخص کنند کدام ماژول‌ها باید در باندل نهایی قرار بگیرند.با رشد اپلیکیشن، حجم باندل هم معمولاً زیاد می‌شود. باندل‌های بزرگ مشکلاتی به همراه دارند:زمان دانلود بیشترزمان تجزیه و اجرای بیشترتأخیر در اولین نمایش UIدرک ساختار درخت وابستگی به شما کمک می‌کند:ماژول‌های غیرضروری را شناسایی کنیدفرصت‌های کد اسپلینتینگ (Code Splitting) را پیدا کنیدعملکرد اپلیکیشن را بهبود دهید و تجربه کاربر را ارتقا دهید🧠 جمع‌بندی: درخت‌ها نقشهٔ ذهنی اپلیکیشن ریکت شما هستندبیایید مروری داشته باشیم:ریکت UI شما را به شکل درختی از کامپوننت‌ها مدل‌سازی می‌کند.درخت رندر ساختار تو در توی کامپوننت‌ها را در یک رندر خاص نمایش می‌دهد.با رندر شرطی، درخت رندر می‌تواند بین دفعات مختلف تغییر کند.شناخت کامپوننت‌های سطح بالا و کامپوننت‌های برگ برای دیباگ و بهینه‌سازی عملکرد مفید است.درخت وابستگی ماژول نشان می‌دهد که فایل‌های جاوااسکریپت شما چطور به هم وابسته هستند.ابزارهای باندلینگ از این درخت استفاده می‌کنند تا فقط کدهای مورد نیاز را در باندل قرار دهند.🙌 حرف آخردرک اینکه ریکت چطور از ساختارهای درختی برای مدل‌سازی رابط کاربری و ماژول‌ها استفاده می‌کند، فقط یک موضوع نظری نیست — بلکه کاملاً کاربردی است. چه بخواهید مشکل عملکردی را حل کنید، چه بخواهید کد را بهینه کنید، این درخت‌ها نقشهٔ ذهنی بسیار مفیدی برای شما خواهند بود.اگه این مقاله برات مفید بود، خوشحال میشم اونو به اشتراک بذاری یا نظرت رو بنویسی.

نگه‌داشتن کامپوننت‌ها به‌صورت Pure در React: چرا مهمه و چطور به‌درستی انجامش بدیم؟

سهیل جعفرنژاد — Mon, 02 Jun 2025 08:09:55 +0330

وقتی داری با React اپلیکیشن‌های مدرن وب می‌سازی، یکی از بهترین اصولی که باید رعایت کنی اینه که کامپوننت‌هات رو همیشه pure نگه داری. ولی این دقیقاً یعنی چی؟ و چرا این‌قدر مهمه؟تو این مقاله قراره بفهمیم کامپوننت pure تو React یعنی چی، چرا باید موقع رندر کردن از side effect دوری کنیم، و چطور با رعایت این قانون ساده می‌تونی کدی تمیزتر، قابل پیش‌بینی‌تر و راحت‌تر برای نگه‌داری بنویسی.کامپوننت Pure یعنی چی؟ 🧼تو دنیای React (و برنامه‌نویسی تابعی)، کامپوننت pure مثل یه فرمول ریاضی می‌مونه: اگه ورودی‌هاش یکی باشن، همیشه خروجیشم همون می‌شه. و هیچ کاری پشت پرده انجام نمی‌ده. دو تا قانون اصلی داره:بدون side effect: یعنی موقع رندر هیچ چیزی رو بیرون از خودش تغییر نده—نه یه متغیر بیرونی، نه DOM، نه هیچ تماس با API.ورودی که یکی باشه، خروجی هم باید یکی باشه: اگه props، state یا context یکسان باشن، کامپوننت باید دقیقاً همون JSX رو تحویل بده.همینه! ولی پایبند بودن به این قوانین یه سری نکته‌های ریز داره...چه چیزی pure بودن را از بین می‌بره؟بیایید یک مثال impure را ببینیم:let guest = 0; function Cup() { guest += 1; // ❌ Side effect! return

Tea cup for guest #{guest}

; }این کامپوننت یه متغیر بیرون از خودش رو تغییر می‌ده. یعنی داره یه side effect موقع رندر ایجاد می‌کنه—و این یعنی دیگه pure نیست. نتیجه‌ش این می‌شه که JSX به شکلی غیرقابل پیش‌بینی عوض می‌شه، ترتیب رندر اهمیت پیدا می‌کنه و خروجی ثبات نداره. حالا یه نگاه بنداز به نسخه‌ی pure که چطوریه:function Cup({ guest }) { return

Tea cup for guest #{guest}

; }اینجا، Cup فقط به props خودش وابسته‌ست. هیچ وابستگی بیرونی نداره، هیچ چیزی رو تغییر نمی‌ده. کامپوننت pure و قابل‌اعتماده.اما Mutation محلی اشکالی نداره!خوبه بدونید که تغییر دادن متغیرها یا آرایه‌هایی که توی رندر ساخته شدن، ایرادی نداره:function GuestList() { let cups = []; for (let i = 1; i <= 3; i++) { cups.push(); } return

{cups}

; }تو این حالت، آرایه‌ی cups تو همون رندر ساخته و تغییر داده شده. هیچ چیزی بیرون از اون تغییر نمی‌کنه. پس این امن و pure حساب می‌شه (هرچند بهتره ازش زیاد استفاده نشه).حالا راجع به useState و useEffect چی؟ ⚠️React خودش ابزارهایی داره که تغییرات رو مدیریت کنیم—مثل useState. وقتی تابع به‌روزرسانی state (مثلاً setCount) رو صدا می‌زنیم، مشکلی پیش نمیاد چون این کار توی بدنه‌ی رندر انجام نمی‌شه. ولی این نمونه impure هست:function Counter() { const [count, setCount] = useState(0); setCount(count + 1); // ❌ Bad: causes side effect during rendering! return

{count}

; } برای اینکه تغییرات واقعی مثل گرفتن دیتا، به‌روزرسانی صفحه یا لاگ گرفتن رو انجام بدی، باید از event handlerها استفاده کنی یا وقتی لازم شد از useEffect کمک بگیری.چرا React اینقدر به purity اهمیت می‌ده؟کامپوننت‌های pure کلی مزیت دارن:قابل پیش‌بینی بودن: تست و دیباگشون راحت‌تره.عملکرد بهتر: React می‌تونه وقتی ورودی‌ها تغییر نکردن، رندر رو رد کنه.ایمنی در ری‌استارت: React می‌تونه رندر رو متوقف یا دوباره اجرا کنه بدون مشکل.سازگاری با سرور: تو رندر سمت سرور خوب جواب می‌ده و می‌شه تو محیط‌های مختلف ازش استفاده کرد.وقتی منطق رندر کامپوننتت رو pure و بدون side effect نگه می‌داری، به React کمک می‌کنی درست و مؤثر کار کنه—بدون اینکه برات سورپرایز درست کنه!چند نکته برای اینکه کامپوننت‌هات pure بمونن:موقع رندر هیچ چیزی رو بیرون از کامپوننت تغییر نده.با props، state و context مثل داده‌های فقط‌خواندنی رفتار کن.از ایجاد side effect توی مرحله‌ی رندر خودداری کن.برای اعمال تغییرات از event handler یا useEffect استفاده کن.منطق خودت رو تو JSX مرتب کن—بذار رندر فقط یه محاسبه باشه، نه یه کار اجرایی.نتیجه‌گیریکامپوننت‌های React باید مثل تابع‌های pure رفتار کنن؛ یعنی فقط به ورودی‌هاشون وابسته باشن و هیچ کاری بیرون از خودشون نکنن. اگه کامپوننت‌هاتون چیزی رو خارج از خودشون دستکاری نکنن و برای ورودی‌های یکسان همیشه همون JSX رو پس بدن، در واقع دارین از قدرت واقعی مدل React استفاده می‌کنین.همین نظم ساده باعث می‌شه باگ‌ها کمتر بشن، اپ سریع‌تر کار کنه و کدتون هم تمیزتر و قابل‌فهم‌تر بشه.از این مقاله لذت بردید؟👋 اگه این مقاله برات مفید بود، خوشحال میشم اونو به اشتراک بذاری یا نظرت رو برام بنویسی! ریکت میتونه فوق‌العاده مؤثر باشه —اگر بدونیم واقعا چطور کار میکنه. با نوشتن کامپوننت‌های pure، به React کمک می‌کنید کارش را بهتر انجام بده، در حالی که کد خودتون هم تست‌ پذیرتر و قابل استفاده‌ مشه.

تفاوت Props و State در React — چه فرقی دارن و کی باید از هرکدوم استفاده کنیم؟

سهیل جعفرنژاد — Mon, 19 May 2025 18:49:37 +0330

سلام! 👋امیدوارم حالت خوب باشه و از مسیر یادگیری React لذت ببری. امروز میخوایم بریم سراغ یکی از مهمترین مفاهیمی که باید به عنوان یک توسعه دهنده React یاد بگیری: تفاوت بین props و state.اگه تا حالا با خودت فکر کردی "مگه اینا یکی نیستن؟ چرا دوتا چیز جدا داریم؟"، تنها نیستی! این دوتا در نگاه اول شبیه هم به نظر میرسن، ولی در واقع کارکردهای کاملاً متفاوتی دارن — و درک درست تفاوتشون میتونه مهارتت رو در React حسابی ارتقاء بده.پس یک نوشیدنی خوشمزه برای خودت آماده کن ☕ و بیا با هم بررسی کنیم که props و state چطور کار میکنن، چه فرقی با هم دارن، و کی باید از هر کدوم استفاده کنیم. چه تازه کار باشی و چه بخوای پایه هات رو قوی تر کنی، این راهنما میتونه کمکت کنه.بزن بریم! درک تفاوت بین Props و State در Reactاگه تازه با React آشنا شدی، احتمالاً با اصطلاحات props و state برخورد کردی. در نگاه اول ممکنه این دوتا شبیه هم به نظر برسن، اما در واقع عملکردها و رفتارهای متفاوتی دارن که برای ساختن اپلیکیشن های پویا و قابل نگهداری، دونستن تفاوتشون ضروریه.تو این مقاله، تفاوت بین props و state رو بررسی میکنیم، کی باید از هرکدوم استفاده کنیم، و چرا درک این دو مفهوم برای نوشتن کامپوننتهای تمیز در React حیاتی هست.منظور از Props چیه؟خب Props (مخفف “properties”) راهیه که کامپوننت های والد، داده رو به کامپوننت های فرزند منتقل میکنن. میتونی اونا رو شبیه پارامترهای تابع در نظر بگیری.در ریکت props فقط قابل خواندن هستن. یک کامپوننت فرزند نمیتونه props رو تغییر بده — فقط میتونه از اونها استفاده کنه.ویژگیهای اصلی props:غیرقابل تغییر (immutable)توسط کامپوننت والد کنترل میشنمناسب برای پیکربندی و سفارشیسازی کامپوننت های فرزندمثال:function Greeting({ name }) { return

Hello, {name}!

; } // Parent component منظور از State چیه؟اما State راهیه برای اینکه یک کامپوننت بتونه اطلاعات خودش رو ذخیره و مدیریت کنه. برخلاف props داخلی هست و میتونه در طول زمان تغییر کنه — معمولاً در پاسخ به ورودی کاربر یا رویدادهای دیگه. state همون چیزیه که باعث میشه کامپوننت های React تعاملی بشن.ویژگیهای اصلی state:قابل تغییر (mutable، با استفاده از setState یا useState)محلی و برای خود کامپوننت هستدر فانکشنال کامپوننت با useState تعریف میشهمثال:import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <>

{count}

); }استفاده همزمان از Props و Stateخیلی وقت ها، state در کامپوننت والد نگهداری میشه و بعضی از مقادیر اون به فرزندان از طریق props منتقل میشن.مثال:function Avatar({ person, size }) { return ( ); } function Profile() { const [size, setSize] = useState(100); return ( <> ); }در اینجا:مقدارsize توسط state در کامپوننت والد (Profile) مدیریت میشهو به صورت prop به کامپوننت فرزند (Avatar) فرستاده میشهاین الگوی رایجی در React هست: state به بالا برده میشه (Lifting State Up) و props به پایین داده میشن (Data Down).خلاصهاز props برای ارسال داده به داخل یک کامپوننت استفاده کن.از state برای نگهداری داده درون یک کامپوننت استفاده کن.نکتهای مهم اینه که props تغییرناپذیر و state تغییرپذیر.همچنین، state یک کامپوننت میتونه از طریق props به فرزندانش ارسال بشه.درک درست جریان داده (از بالا به پایین) کلید تسلط بر مدل کامپوننتی React هست.از این مقاله خوشت اومد؟ اگه این مقاله برات مفید بود، خوشحال میشم اونو به اشتراک بذاری یا نظرت رو بنویسی! ریکت ابزار قدرتمندیه — ولی فقط وقتی که بدونی چطور داده ها رو به درستی بین کامپوننت هات مدیریت کنی. فهم تفاوت بین props و state یکی از پایه های ساختن رابط کاربری هوشمند و مقیاس پذیر در React هست.

تاریخچه JavaScript — از تولد تا تبدیل شدن به غول دنیای وب

سهیل جعفرنژاد — Thu, 26 Sep 2024 22:54:24 +0330

سلام! 👋امیدوارم حالت عالی باشه و از یادگیری برنامه‌نویسی لذت ببری! امروز قراره با هم سفری جذاب به گذشته بزنیم و با داستان شکل‌گیری یکی از مهم‌ترین زبان‌های برنامه‌نویسی دنیا آشنا بشیم: JavaScript. ممکنه الان هر روز با JavaScript کار کنی، ولی تا حالا فکر کردی این زبان چطور به‌وجود اومد؟ چرا اسمش JavaScript شد؟ یا اصلاً چطور تونست در دنیای وب اینقدر مهم و محبوب بشه؟توی این مطلب، از روزهای اولیه وب و مرورگرهای ابتدایی شروع می‌کنیم، ماجرای تولد JavaScript رو مرور می‌کنیم، و به تحول‌های مهمی مثل ECMAScript و Ajax می‌رسیم که نقش بزرگی در رشد این زبان داشتن. پس یه نوشیدنی خوشمزه بردار ☕ و بیا با هم نگاهی بندازیم به داستان هیجان‌انگیز JavaScript؛ از تولد تا تبدیل شدن به پادشاه دنیای وب بزن بریم!دوران اولیه وب (World Wide Web) به اواخر دهه ۱۹۸۰ و اوایل دهه ۱۹۹۰ برمی‌گرده، زمانی که برنرزلی (Timothy John Berners-Lee)، دانشمند انگلیسی در CERN (سازمان اروپایی پژوهش‌های هسته‌ای)، در حال کار روی پروژه‌ای برای راحت‌تر کردن دسترسی به اطلاعات بود. در سال ۱۹۸۹، ایده‌ی وب رو مطرح کرد و در سال ۱۹۹۰، اولین مرورگر و سرور وب به اسم WorldWideWeb (که بعداً به Nexus تغییر نام داد) رو ساخت. تا اوایل دهه ۱۹۹۰، وب بیشتر محدود به جامعه علمی و دانشگاهی بود. اما با معرفی Mosaic، مرورگری که در سال ۱۹۹۳ توسط تیمی در NCSA (مرکز ملی کاربردهای ابررایانش) توسعه پیدا کرد، وب خیلی سریع رشد کرد. Mosaic اولین مرورگری بود که از تصاویر و رابط کاربری گرافیکی پشتیبانی می‌کرد و تجربه کاربری بهتری از وب‌گردی رو به افراد می‌داد. مارک آندرسن (Marc Andreessen)، یکی از توسعه‌دهندگان Mosaic، بعدها شرکت Netscape رو تأسیس کرد و مرورگر Netscape Navigator رو عرضه کرد که از اولین مرورگرهای تجاری موفق بود. در اون زمان، صفحات وب معمولاً استاتیک بودن و تعامل زیادی نداشتن، اما این مرورگرها قدم‌های بزرگی برای تعامل‌پذیرتر کردن وب برداشتن. نقطه عطف جاوااسکریپت: داستان شکل‌گیری یک زبانماجرا از شرکت Netscape شروع شد. این شرکت تو سال ۱۹۹۴ با مرورگر Netscape Navigator خیلی معروف بود. اما اواخر ۱۹۹۵، مایکروسافت با مرورگر Internet Explorer وارد شد و رقابت شدیدی با Netscape ایجاد کرد. برای اینکه بتونه در این رقابت بمونه، Netscape تصمیم گرفت یه زبان اسکریپتی برای تعامل بیشتر با DOM بسازه. مارک آندرسن، یکی از بنیان‌گذاران Netscape، اعتقاد داشت که وب باید داینامیک‌تر و تعاملی‌تر باشه. اون زمان وب خیلی محدود و کند بود، به همین خاطر Netscape نیاز به یه زبانی داشت که بتونه سمت کلاینت اعتبارسنجی اطلاعات رو انجام بده و ارتباط با سرور رو کمتر کنه. اون‌ها با شرکت Sun Microsystems که Java رو ساخته بود همکاری کردن تا Java رو به مرورگر اضافه کنن. اما خیلی زود فهمیدن Java برای وب مناسب نیست؛ چون برای طراحان وب پیچیده بود. در نتیجه، Netscape تصمیم گرفت یه زبان اسکریپتی ساده‌تر بسازه.تو آوریل ۱۹۹۵، برندان آیک (Brendan Eich - خالق جاوااسکریپت) به تیم اضافه شد و تونست تو ۱۰ روز یه نمونه اولیه از این زبان بسازه. این زبان اول Mocha نام داشت، بعداً به LiveScript تغییر کرد و در نهایت به JavaScript رسید. اون موقع Java خیلی معروف بود و همه جا اسمش شنیده می‌شد. Netscape هم دید که با استفاده از اسم جاوا می‌تونه سریع‌تر JavaScript رو تو بازار جا بندازه. برای همین اسمش رو گذاشتن JavaScript تا بیشتر به چشم بیاد. در اصل، این فقط یه حقه بازاریابی بود که JavaScript رو راحت‌تر به مردم معرفی کنن و بالاخره این زبان شیرین تو سپتامبر ۱۹۹۵ منتشر شد. استانداردسازی جاوااسکریپت: یک گام به سوی انسجامبعد از معرفی JavaScript، رقابت شدیدی بین سازنده‌های مرورگرها شکل گرفت. در سال ۱۹۹۶، مایکروسافت نسخه خودش از JavaScript به اسم JScript رو منتشر کرد. این موضوع باعث شد دو نسخه متفاوت از JavaScript ایجاد بشه و مشکلاتی برای توسعه‌دهندگان به وجود بیاد. برای حل این مشکلات، Netscape در سال ۱۹۹۷ با ECMA (یه کمیته استانداردسازی) همکاری کرد تا JavaScript استاندارد بشه. نتیجه این همکاری، استاندارد ECMAScript بود. ECMAScript در واقع نسخه استانداردشده جاوااسکریپته. ولی الان زبان‌هایی مثل JScript و ActionScript هم بر اساس همین استاندارد ECMAScript ساخته شده‌ان. یعنی می‌شه گفت مثل اینه که سه مدل ماشین مختلف از یه موتور استفاده کنن. تکنولوژی Ajax: تجربه وب بدون مرزدر سال ۲۰۰۵، جیسی جیمز گرت (Jesse James Garrett) مقاله‌ای نوشت و توش تکنولوژی Ajax رو معرفی کرد (Ajax: A New Approach to Web Applications). این تکنولوژی این امکان رو می‌داد که اطلاعات بدون نیاز به بارگذاری مجدد صفحه از سرور دریافت بشه. این کار تجربه کاربری رو به شدت بهتر کرد و باعث شد JavaScript به عنوان یه زبان حرفه‌ای بیشتر شناخته بشه. جاوااسکریپت امروز: پادشاه دنیای وبالان JavaScript یکی از پرکاربردترین زبان‌های برنامه‌نویسی دنیاست و همچنان داره پیشرفت می‌کنه. طبق آمار Statista توی سال ۲۰۲۴ اعلام کرده در رتبه اول با بیشترین استفاده در بین تمام برنامه نویسان جهان قرار داره. وب‌سایت‌های بزرگی مثل توییتر، فیسبوک و یوتیوب با کمک این زبان ساخته شدن. JavaScript هم تو برنامه‌نویسی فرانت‌اند و هم بک‌اند استفاده می‌شه و کلی فریمورک و کتابخونه داره که کار رو برای توسعه‌دهندگان راحت‌تر کرده. با این پیشرفت‌ها، آینده JavaScript خیلی روشنه و احتمالاً همچنان یکی از اصلی‌ترین زبان‌های وب باقی می‌مونه.خلاصهوب از اواخر دهه ۱۹۸۰ توسط Tim Berners-Lee شکل گرفت و با مرورگر Mosaic در اوایل دهه ۹۰ رشد کرد.رقابت بین Netscape و Microsoft باعث شد جاوااسکریپت به‌وجود بیاد تا صفحات وب تعاملی‌تر بشن.در ابتدا Brendan Eich در سال ۱۹۹۵ JavaScript رو در کمتر از ده روز ساخت.اسم JavaScript بیشتر یه ترفند بازاریابی بود تا مردم سریع‌تر باهاش ارتباط بگیرن.استاندارد ECMAScript در سال ۱۹۹۷ برای یکپارچه‌سازی نسخه‌های مختلف JavaScript معرفی شد.تکنولوژی Ajax در سال ۲۰۰۵ تجربه کاربری وب رو متحول کرد و جایگاه JavaScript رو قوی‌تر کرد.امروزه JavaScript پرکاربردترین زبان برنامه‌نویسی جهانه، هم در فرانت‌اند و هم بک‌اند، با آینده‌ای روشن و درخشان.از این مقاله خوشت اومد؟اگه برات جالب و مفید بود، خوشحال می‌شیم این مطلب رو با بقیه به اشتراک بذاری یا نظرت رو با ما درمیون بذاری! تاریخچه JavaScript فقط یه داستان فنی نیست—یه مسیر پرفراز و نشیبه از رقابت، خلاقیت و تحول توی دنیای وب.فهمیدن اینکه این زبان چطور شکل گرفت و چطور به جایگاه امروزش رسید، بهت کمک می‌کنه نگاه عمیق‌تری به ابزارهایی که هر روز استفاده می‌کنی داشته باشی.و این فقط شروع ماجراست... آینده JavaScript هنوز در حال نوشتنه!

ابزار امن برای مدیریت و همگام‌سازی فایل‌های .env در محیط‌های مختلف

سهیل جعفرنژاد — Fri, 13 Sep 2024 20:39:35 +0330

خیلی خوشحالم که اعلام کنم اولین پکیجم رو منتشر کردم! 🎉هدف از ساخت و توسعه این پکیج، ساده‌سازی و امن کردن فرآیند مدیریت و همگام‌سازی چندگانه متغیرهای محیطی ذخیره‌شده در فایل‌های .env بود.باید بگم که Gitoq یه ابزار چندکاره‌ست که بهتون کمک می‌کنه متغیرهای محیطی رو توی فایل‌های .env به‌صورت امن همگام‌سازی کنید. این ابزار بیشتر برای تیم‌های توسعه مناسبه که باید تنظیمات محیطی رو بین محیط‌های مختلف مدیریت کنند و مطمئن بشن که اطلاعات حساس به‌خوبی محافظت می‌شه.چندتا از ویژگی‌های کلیدی:همگام‌سازی امن: Gitoq مطمئن می‌شه که متغیرهای محیطی به‌صورت امن توی محیط‌های مختلف همگام‌سازی می‌شن، مثل کلیدهای API، اطلاعات دیتابیس و تنظیمات حساس دیگه.پشتیبانی از CLI و GUI: هم از طریق خط فرمان (CLI) و هم با یه رابط کاربری گرافیکی (GUI) در دسترسه، پس هم برای کاربران حرفه‌ای و هم برای افرادی که رابط کاربری بصری رو ترجیح می‌دن مناسبه.همکاری تیمی: به توسعه‌دهنده‌ها این امکان رو می‌ده که به‌راحتی متغیرهای محیطی رو به اشتراک بذارن و مدیریت کنن، مخصوصاً وقتی چندین نفر به تنظیمات یکسان نیاز دارن.مدیریت محیط‌ها: از چندین محیط مثل توسعه، تست، استیجینگ و پروداکشن پشتیبانی می‌کنه و این کمک می‌کنه که توی مراحل مختلف توسعه، تنظیمات ثابت بمونن.رمزگذاری: با استفاده از رمزگذاری، از متغیرهای محیطی محافظت می‌کنه و مطمئن می‌شه که اطلاعات حساس توی فرآیند همگام‌سازی لو نمی‌ره.با Gitoq، تیم‌های توسعه می‌تونن مدیریت متغیرهای محیطی رو ساده‌تر کنن، امنیت رو بهبود بدن و همکاری تیمی رو بهتر کنن.برای نصب سریع میتونیم از دستور زیر استفاده کنیم:npm i -g gitoqحالا به راحتی وارد حساب کاربری خودمون میشیم:gitoq loginخب تا اینجا خیلی خوب پیش رفتیم. الان میتونیم پروژه خودمونو متصل کنیم:gitoq connectهمه چی آمادست! حالا کافیه با دستور pull , push آخرین تغییراتمونو همگام‌سازی کنیم:gitoq pushgitoq pullبرای راهنمایی بیشتر حتما به داکیومنت مراجعه کنید.خیلی دوست دارم نظرتون رو درباره این پروژه بدونم و هر پیشنهادی هم برای بهبودش دارین، خوشحال می‌شم بشنوم.🫰❤️

یافتن دو عدد با مجموع مشخص در JavaScript — از روش ساده تا راه‌حل بهینه

سهیل جعفرنژاد — Thu, 12 Sep 2024 19:49:37 +0330

سلام 👋امروز می‌خوام یکی از چالش‌هایی که سر یک مصاحبه کاری باهاش روبه‌رو شدم رو باهاتون به اشتراک بذارم. سوال جالبی بود که ممکنه توی موقعیت‌های زیادی بهش بر بخوریم:"چطور می‌تونیم اندیس دو عدد از یک آرایه رو پیدا کنیم که مجموع‌شون برابر با یه عدد مشخص باشه؟"توی این مطلب اول با یه روش ساده شروع می‌کنیم (دو حلقه تو در تو)، بعد سراغ یه راه بهینه‌تر می‌ریم که با استفاده از دیکشنری و تنها یک حلقه این مشکل رو خیلی سریع‌تر حل می‌کنه. پس اگه دنبال بهینه‌سازی کدت هستی یا برای مصاحبه‌های کاری آماده می‌شی، این مطلب قطعاً به کارت میاد!فرض کن یه آرایه داریم مثل این:const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];حالا می‌خوایم ایندکس دوتا عددی که جمعشون ۱۰ می‌شه رو پیدا کنیم.روش اول: استفاده از دو حلقه تو در تویه روش ساده اینه که از دو تا حلقه استفاده کنیم و همه جفت‌ عددهای ممکن رو چک کنیم. اینجوری می‌تونیم ببینیم که آیا جمعشون ۱۰ می‌شه یا نه:const pairs = []; for (let i = 0; i < data.length; i++) { for (let j = i + 1; j < data.length; j++) { if (data[i] + data[j] === 10) pairs.push([i, j]); } } console.log(pairs);این کد درسته و جفت‌هایی که مجموعشون ۱۰ می‌شه رو پیدا می‌کنه. ولی مشکلی که داره اینه که از دو تا حلقه تو در تو استفاده می‌کنه، و پیچیدگی زمانی‌اش O(n²) می‌شه، که برای آرایه‌های بزرگ زیاد بهینه نیست.روش بهینه تر: استفاده از یک حلقه و دیکشنریبرای اینکه روش رو بهینه‌تر کنیم، می‌تونیم از یه دیکشنری استفاده کنیم و مسأله رو با یه حلقه حل کنیم. این روش پیچیدگی زمانی رو به O(n) کاهش می‌ده:const indexMap = {}; const pairs = []; for (let i = 0; i < data.length; i++) { const complement = 10 - data[i]; if (indexMap.hasOwnProperty(complement)){ pairs.push([indexMap[complement], i]); } indexMap[data[i]] = i; } console.log(pairs);اینجا، برای هر عدد، مکملش (یعنی عددی که باهاش جمع بشه و ۱۰ بده) رو حساب می‌کنیم. بعد چک می‌کنیم که آیا قبلاً این مکمل توی دیکشنری بوده یا نه. اگه بوده یعنی قبلاً یه عدد داشتیم که با عدد فعلی جمعش ۱۰ می‌شه و ایندکس اون دوتا رو ذخیره می‌کنیم. این روش خیلی سریع‌تر و بهینه‌تره.خلاصهبرای پیدا کردن جفت‌هایی که مجموعشون برابر یه عدد خاصه (مثلاً ۱۰)، می‌تونیم از دو حلقه تو در تو استفاده کنیم؛ ولی این روش O(n²) زمان می‌بره.برای بهینه‌سازی، می‌تونیم از یک دیکشنری و یک حلقه استفاده کنیم تا در زمان O(n) این کار انجام بشه.در روش بهینه، با محاسبه مکمل هر عدد و بررسی وجود اون در دیکشنری، جفت مناسب رو پیدا می‌کنیم.این تکنیک نه‌تنها سریع‌تره، بلکه برای مصاحبه‌های فنی هم یه مثال خیلی خوب از تفکر الگوریتمی و بهینه‌سازی محسوب می‌شه.از خوندن این مطلب لذت بردی؟اگه این چالش برات مفید یا جالب بود، خوشحال می‌شم با دوستات به اشتراک بذاری یا توی کامنت‌ها نظرت رو بگی! یاد گرفتن روش‌های مختلف برای حل یه مسئله نه‌تنها مهارتت رو توی کدنویسی بالا می‌بره، بلکه توی مصاحبه‌ها هم می‌تونه برگ برنده‌ت باشه. یادت نره که همیشه دنبال روش‌های سریع‌تر و بهینه‌تر باشی—اونجاست که یه برنامه‌نویس معمولی، به یه برنامه‌نویس حرفه‌ای تبدیل می‌شه!