https://virgool.ir/feed/@am1rrezaa(Frontend Developer (React JS - TypeScriptfa2026-11-12 09:29:51https://files.virgool.ir/upload/users/2788955/avatar/PQoA7S.jpghttps://virgool.ir/@am1rrezaahttps://virgool.ir/@am1rrezaa/بهترین-کتاب-های-حوزه-ی-فرانت-اند-bm9a0cfnhytkدر این مقاله قصد دارم که چند مورد از کتاب های خوب حوزه‌ی فرانت اند رو بهتون معرفی کنم. این کتاب ها رو بر اساس اونهایی که تعریفشون رو خیلی شنیدم و اونهایی که خودم خوندمشون، معرفی می‌کنم. اگه اهل کتاب خوندن هستید این کتاب ها خیلی بدردتون می‌خوره.Clean Codeکتاب اول استثنائا مربوط به فرانت اند نیست. بلکه یک کتاب مرجع در زمینه‌ی کد تمیز نوشتن هست که به احتمال زیاد باهاش آشنا هستین. فرقی نمی‌کنه که توی کدوم حوزه از برنامه نویسی در حال فعالیت هستید، بنظرم این کتاب رو باید بخونیدش. متن روان و ساده‌ای هم داره. همونطور که از اسمش پیداست، راجب نحوه‌ی کدنویسی تمیز و درست هست. از توابع گرفته تا نام گذاری متغیر ها و نوشتن کامنت ها، همگی رو به تفصیل توضیح میده.HTML & CSS: Design and Build Websitesاین کتاب اغلب برای مبتدیان توصیه می‌شود و یک کتاب بصری جذاب با مثال ها و توضیحات فراوان در زمینه‌ی ورود به دنیای HTML و CSS می‌باشد. به طور کلی، نویسنده در این کتاب تمام مبانی HTML و CSS را پوشش می‌دهد.Responsive Web Design with HTML5 and CSSسطح این کتاب ،نسبت به کتاب قبلی، کمی پیشرفته تر است و به شما آموزش می‌دهد که چگونه یک UI را با استفاده از HTML و CSS طوری طراحی کنیم که روی تمام دستگاه ها (موبایل، تبلت و کامپیوتر) به خوبی کار کند.Eloquent JavaScriptیکی از معروف ترین کتاب های فرانت اند و زبان جاوااسکریپت. یک کتاب سطح متوسط برای جاوااسکریپت که تا حد خیلی خوبی مفاهیم این زبان را پوشش می‌دهد. در پایان هر فصل، تعدادی تمرین برای درک و فهم بهتر و در سرتاسر کتاب تعداد زیادی نمونه کد و مثال وجود دارد. اگه از قبل یک آشنایی سطحی و مبتدی با این زبان دارید، این کتاب می‌تونه خیلی براتون مفید باشه.You Don't Know JSیک مجموعه کتاب 6 جلدی فوق العاده برای زبان جاوااسکریپت. این کتاب برای کسایی توصیه میشه که لول متوسط رو به بالایی از جاوااسکریپت دارن و میخوان فهم خودشون رو از ساز و کار این زبان بیشتر کنن. این 6 جلد، تمام بخش های قلق دار جاوااسکریپت رو به خوبی پوشش میده. به طور مثال :this KeywordObject PrototypesScope & ClosuresAsynchronous ProgrammingThe Road To Reactیک کتاب عالی و محبوب برای یادگیری کتابخانه‌ی ریکت. کتابی که به شما کمک می‌کنه که درک کاملی از این کتابخانه داشته باشید. تمرکز کتاب روی مبانی ریکت است و قدم به قدم شما را در روند ساخت یک اپلیکیشین ریکتی راهنمایی می‌کند.Learning Reactکتابی سطح متوسط برای یادگیری و پیشرفت در ریکت که به شما ساز و کار ریکت را در پشت صحنه نشان می‌دهد. اگر به دنبال یک کتاب برای ارتقای سطح خود در ریکت هستید، این کتاب می‌تواند یکی از گزینه های خوب شما باشد.جمع بندیامیدوارم که این مقاله براتون مفید و کابردی بوده باشه. البته کتاب های خوب دیگری هم در حوزه‌ی فرانت اند وجود داره که من در این مقاله معرفیشون نکردم و میتونید با چند تا سرچ ساده به همشون دسترسی داشته باشید. اگر هم PDF این کتاب هایی که معرفی کردم رو لازم داشتید، میتونید تو قسمت کامنت ها بنویسید که از طریق ایمیل براتون ارسال کنم.امیررضا موسوی فردامیررضا موسوی فردSun, 20 Aug 2023 16:25:30 +0330https://virgool.ir/@am1rrezaa/کاستوم-هوک-ها-در-react-wctmegbyptjgهوک ها(Hooks) از بخش های بسیار مهم کتابخانه‌ی ریکت(React) هستند. یکی از زیر مجموعه های هوک ها، کاستوم هوک ها(Custom Hooks) هستند که در این مقاله می‌خواهم که به وسیله‌ی 2 مثال آنها را بررسی کنم.منبع من برای این مقاله، کتاب The Road to React و داکیومنت سایت ریکت می‌باشد.کاستوم هوک ها چی هستند؟کتابخانه‌ی ریکت به طور پیشفرض دارای تعدادی هوک مانند useState، useEffect و useContext است. اما گاهی اوقات با خودمون فکر می‌کنیم که کاش هوک هایی برای کار های جزیی تر وجود داشت. مثلا برای گرفتن دیتا از سمت سرور(data fetching) و یا چک کردن وضعیت اینترنت کاربر.اینجاست که کاستوم هوک ها وارد عمل می‌شوند. یعنی ما می‌تونیم هوک های مخصوص خودمون رو بسازیم.مثال اولفرض کنید که در حال نوشتن برنامه‌ای هستید که وابسته به آنلاین بودن کاربر می‌باشد. در این برنامه باید هنگامی که اینترنت کاربر به طور تصادفی قطع می‌شود، به او هشدار دهیم. چطوری این کارو انجام بدیم؟ به نظر میرسه که به 2 چیز در کامپوننت خود نیاز داریم :یک استیت(State) که وضعیت اینترنت را درون خودش ذخیره کند.یک هوک useEffect که با تغییر وضعیت اینترنت، مقدار استیت را آپدیت کند.حالا تصور کنید که همین کد را در کامپوننت دیگه‌ای هم لازم داشته باشیم. به طور مثال یک کامپوننت دکمه(Button) که وقتی اینترنت کاربر قطع می‌شود، دکمه غیر فعال شود :این کامپوننت ها هر دو به خوبی کار می‌کنند اما این تکرار کد کار درستی نیست.(مثلا اگه همین تیکه کد توی 5 تا کامپوننت دیگه هم لازم شد، درست نیست که دوباره همین رو توی همشون کپی کنیم)مشخصه که راه حل این مشکل، استفاده از کاستوم هوک هاست. باید این قسمت از کدی که در حال تکرار است را به هوک مخصوص خودمون انتقال بدیم (مثلا اسمش رو میزاریم useOnlineStatus) : فقط نکته‌ای که وجود دارد این است که باید در انتهای کاستوم هوک خودمون، مقدار خروجی(Return) را برابر با استیت isOnline قرار دهیم.پس از ساختن این کاستوم هوک، حالا کد ما به شکل زیر در می‌آید :این کار 2 تا مزیت مهم برای ما ایجاد می‌کند :مقدار کد کاهش یافت و دیگر کد های ما تکرار نمی‌شوند. کد ما یک بار و در یک جا نوشته شده است و از این به بعد فقط از هوک مخصوص به خودش استفاده می‌کنیم.کد خوانا تر می‌شود. کسی که کد را برای اولین بار می‌خواند، متوجه می‌شود که قرار است از طریق کاستوم هوک useOnlineStatus، وضعیت اینترنت کاربر را متوجه شویم. پس درگیر جزییات کاستوم هوک نخواهد شد.نکته نهایی: در شروع اسم کاستوم هوک ها از کلمه‌ی use استفاده می‌کنیم. البته این یک باید نیست و صرفا قرادادی است که بهتر است رعایت شود. به این دلیل که تفاوت هوک ها با توابع عادی مشخص شود.مثال دومدر این مثال که کمی پیشرفته تر است، قرار است یک کاستوم هوک با اسم useSemiPersistentState ایجاد کنیم. وظیفه‌‌اش این است که مقادیر درون استیت های ما را با Local Storage مرورگر هماهنگ کند.عکس زیر شکل برنامه‌ی ما پس از استفاده از این کاستوم هوک است :حال به بررسی محتوای خود کاستوم هوک می‌پردازیم. کاستوم هوک ما در ابتدا به صورت زیر می‌باشد :تا اینجای کار، کاستوم هوک ما شامل هوک های useState و useEffect است. البته هنوز کامل نیست. 2 تا چیز دیگر هم باید به آن اضافه کنیم:مقدار اولیه‌ی استیت به عنوان ورودی کاستوم هوکریترن کردن(Return) استیت در قالب یک آرایهبعد از انجام دادن این مراحل، باید چنین چیزی داشته باشیم :در حال حاضر این کاستوم هوک به درستی کار می‌کند ولی نیاز به ریفکتور دارد.بهتر است که کمی آن را جامع تر (و نه فقط برای استیت searchTerm) بنویسیم، زیرا که ممکن است در قسمت های مختلفی از برنامه‌ی ما استفاده شود.بعد از ریفکتور، کد ما به شکل زیر می‌شود :همچنان تا اینجا همه چیز به درستی کار می‌کند. ولی به یک ریفکتور دیگر هم احتیاج داریم.اگر این کاستوم هوک را 2 یا چند بار در قسمت های مختلف برنامه استفاده کنیم، مقدار درون Local Storage جایگزین مقادیر قبلی میشود و مقادیر قبلی از بین می‌روند. دلیلش هم این است که ما در کد کاستوم هوک خود از مقداری ثابت به اسم "value" استفاده کرده‎‌ایم.برای حل این مشکل، می‌توانیم این مقدار value را هم از ورودی هوک دریافت کنیم(اسم آن را key می‌گذاریم) :حالا کاستوم هوک ما به صورت جامع تر و کلی تر درآمده است. پس می‌توانیم از آن در قسمت های مختلف برنامه، به صورت زیر استفاده کنیم:جمع بندییکی از مهم ترین اهداف ما در نوشتن یک برنامه، نوشتن کدی تمیز و قابل مدیریت است. یکی از راه های رسیدن به این هدف، استفاده از ابزار هایی مانند کاستوم هوک می‌باشد. امیدوارم که این بحث رو کامل متوجه شده باشید و مفهوم رو به خوبی رسونده باشم. اگه نظری بود حتما در قسمت کامنت ها بنویسید.امیررضا موسوی فردامیررضا موسوی فردTue, 15 Aug 2023 19:00:04 +0330https://virgool.ir/@am1rrezaa/تفاوت-class-ها-در-تایپ-اسکریپت-و-جاوااسکریپت-agwquecyrnukکلاس ها بخش مهمی از دنیای برنامه‌نویسی هستند که بر پایه‌ی آنها برنامه‌نویسی شی گرا(OOP) ایجاد شده است. در این مطلب قصد دارم که تفاوت کلاس ها را در تایپ‌اسکریپت و جاوا‌اسکریپت بررسی کنم. به این علت که تایپ‌اسکریپت امکانات پیشرفته تر و کامل تری را در این زمینه نسبت به جاوااسکریپت در اختیار ما قرار می‌دهد.Type Annotationsدر تایپ‌اسکریپت برای ایجاد Property های کلاس، باید اونارو یک بار خارج از Constructor تعریف کنیم و تایپ مشخصی بهشون بدیم و سپس در Constructor مقدار دهی بشن. ولی اگه در همان خارج از Constructor، مقدار اولیه‌ای به Property ها بدیم، دیگه الزامی به تعریف اونا در Constructor نیست.البته یک سینتکس کوتاه تر هم برای تعریف Property ها وجود داره که در ادامه‌ی مطلب بهش می‌پردازیم.در جاوااسکریپت، ما Property ها رو مستقیما در خود Constructor تعریف و مقدار دهی می‌کنیم :همونطور که واضحه، در جاوااسکریپت کد کمتری صرف نوشتن Property های کلاس میشه ولی تایپ‌اسکریپت بخاطر مشخص کردن تایپ ها، کد کم باگ تر و امن تری رو در اختیار ما قرار میده.Access Modifiersتایپ‌اسکریپت به ما اجازه می‌ده که از Access Modifier هایی مثل public، private و protected استفاده کنیم : اگر متد و یا Property در کلاس ما private باشه، به این معناست که اون متد یا پراپرتی فقط در بدنه‌ی همان کلاس قابل دسترسی است و دیگه خارج از کلاس نمی‌توان به آن دسترسی داشت.اگر متد و یا Property در کلاس ما protected باشه، به این معناست که اون متد یا پراپرتی فقط در بدنه‌ی همان کلاس و کلاس هایی که از آن ارث‌بری کرده‌اند قابل دسترسی است.متد ها و Property های public نیز در همان کلاس، کلاس هایی که از آن ارث‌بری کرده‌اند و در خارج از کلاس قابل دسترسی هستند. (عملا همه جا)متد ها و Property ها در تایپ‌اسکریپت و جاوا‌اسکریپت به طور پیشفرض public هستند.جاوا‌اسکریپت از این Access Modifier ها پشتیبانی نمی‌کند و اساسا همه چیز در آن public است.Readonly Propertiesتایپ‌اسکریپت این امکان را در اختیار ما قرار می‌دهد که Property های خود را Readonly کنیم. یعنی فقط یکبار در Constructor مقدار دهی می‌شوند و پس از آن دیگر مقدارشان را نمی‌توانیم تغییر دهیم : Constructor Overloadsیکی از قابلیت های کلاس ها در تایپ‌اسکریپت این است که می‌توانیم چندین Constructor را برای حالات مختلف ممکن تعریف کنیم : اما همین کد در جاوااسکریپت به صورت زیر است : Shortcut for Defining Properties تایپ‌اسکریپت این امکان را به ما می‌دهد که تعریف Property های خود را به صورت کوتاه تر انجام دهیم : ‌در این نوع تعریف الزاما باید یکی از Access Modifier ها را پشت اسم Property خود قرار دهیم. حتی اگر Property ما از نوع public باشد که در حالت عادی نیازی به تعریف آن نبود.Interfacesدر تایپ‌اسکریپت برخلاف جاوااسکریپت امکان تعریف interface و پیاده سازی آن در کلاس ها را داریم :همین کد در جاوااسکریپت به یک کلاس Person و یک متد greet تبدیل می‌شود. بدون هیچ اثری از interfaceجمع بندیهمانطور که در ابتدای کار اشاره کردم، کلاس ها در تایپ‌اسکریپت پیشرفته تر و کامل تر از جاوااسکریپت هستند ولی خب نکته‌ای که وجود داره این هست که در نهایت همان کد های تایپ‌اسکریپت به کد های جاوااسکریپت تبدیل می‌شوند و این ویژگی ها در طول توسعه‌ی برنامه به کمک برنامه‌نویس می‌آیند. امیدوارم که این مطلب براتون مفید بوده باشه. اگه نظری بود حتما در قسمت کامنت ها بنویسید.امیررضا موسوی فردامیررضا موسوی فردFri, 11 Aug 2023 20:46:30 +0330https://virgool.ir/@am1rrezaa/مبحث-generics-در-تایپ-اسکریپت-به-زبان-ساده-q4sg8mncf52qاین ابزار ،یعنی Generic، یکی از ابزار های قدرتمند تایپ اسکریپت است. من قصد دارم که در ابتدا با یک مثال مشکلی رو مطرح کنم که به وسیله‌ی Generic قابل حل هست تا متوجه شویم که چرا باید از این قابلیت استفاده کنیم و در ادامه به توضیح کامل آن خواهم پرداخت. امیدوارم که در پایان مقاله این مبحث رو به طور کامل متوجه شده باشید.منبع من برای توضیح این مبحث کتاب Programming TypeScript می‌باشد.مثالتصور کنید که تابعی برای فیلتر کردن یک آرایه نوشته‌اید. شکل آن به صورت زیر است :همانطور که از کد این تابع پیداست، تابع ما یک آرایه را می‌گیرد و روی آن حلقه می‌زند و در نهایت آرایه‌ی فیلتر شده را برمی‌گرداند. به طور مثال :تا اینجای کار که تنها با جاوااسکریپت سر و کار داشتیم و چیز تایپ اسکریپتی‌ای در کار نبود.حال تصور کنید که می‌خواهیم یک type کاستوم مخصوص این تابع درست کنیم که در آن نوع ورودی ها و خروجی تابع را مشخص کنیم (بالاخره برای همین داریم از تایپ اسکریپت استفاده می‌کنیم دیگه) :در ابتدا به عنوان تایپ ورودی ها و خروجی تابع، تایپ number را می‌نویسیم که به این معناست: تابع ما تنها می‌تواند آرایه‌ای از اعداد را دریافت و فیلتر کند. ولی خب مگه ما همیشه با آرایه‌ای از اعداد سر و کار داریم؟ممکنه لازم داشته باشیم آرایه‌ای از رشته ها(string) و یا آبجکت ها(object) رو فیلتر کنیم. خب اولین چیزی که به ذهنمون می‌رسه اینه که بقیه حالات ممکن رو هم به type کاستوم خودمون اضافه کنیم :تا اینجا همه چیز بنظر درست میرسه.(با صرف نظر از اینکه اگه حالات ممکن یک تابع بیشتر بشه، اضافه کردنشون یک کار اضافی و طاقت فرساست) مشکلپس بیایم یکبار دیگه از تابع استفاده بکنیم، ولی این دفعه با آرایه‌ای از آبجکت ها :همونطور که می‌بینید ارور گرفتیم. متن ارور هم میگه که اصلا چیزی به اسم firstName در آبجکت ما وجود نداره. در صورتی که وجود داره مگه نه؟دلیلمشکل از اونجایی شروع میشه که وقتی ما حالات ممکن رو برای type کاستوم خودمون تعریف کردیم، در حالت آخر اشاره کردیم که ورودی ها و خروجی تابع ما آرایه‌ای از آبجکت هاست.ولی باید دقت کنیم که هیچ جزییات دیگه‌ای رو نگفتیم. خود تایپ اسکریپت هم دقت نمیکنه که درون آبجکت های ما چه مقادیری وجود داره و فقط و فقط میدونه که قراره تابع ما صرفا یک آبجکت رو دریافت کنه.برای همین هست که وقتی میخواد به مقدار firstName دسترسی پیدا کنه نمیتونه، چون اصلا خبر نداره داخل آبجکت ما چه چیزی هست.راه حلخب باید چیکار کنیم؟ اینجاست که Generic ها وارد عمل میشن. بیایم type کاستوم خودمون رو به شکل زیر بازنویسی کنیم :حالا این چه معنی میده؟چیزی که الان نوشتیم به این معناست : ما یک تابع داریم که تایپ ورودی هاش و خروجیش پارامتر T هست. T یک تایپ مشخص نیست و ما تشخیص تایپ رو به عهده خود تایپ اسکریپت میزاریم. یعنی هر بار که از تابع استفاده می‌کنیم، خود تایپ اسکریپت می‌فهمه که چه تایپی از آرایه رو بهش دادیم و اون رو جای تمام T هایی میزاره که در تصویر بالا می‌بینید.مثلا در مثال اول همین مقاله که آرایه‌ای از اعداد رو به تابع دادیم، خود تایپ اسکریپت تایپ number رو تشخیص میده و جای تمام T ها در عکس بالا number رو قرار میده.البته دقت کنید که اسم T یک اسم اختیاری است و شما میتونید جای حرف T هر حرفی که دوست دارید رو قرار بدید. حرف T صرفا یک قرارداد برای نام گذاری پارامتر های Generic هست.مزیتخب حالا چه فرقی کرد؟ این کاری که الان کردیم 2 تا مزیت داره :دیگه لازم نیست برای توابعی که ممکنه چندین نوع از ورودی رو دریافت کنن تمام حالاتشون رو خودمون به صورت دستی بنویسیم. از Generic ها استفاده می‌کنیم و اجازه میدیم که خود تایپ اسکریپت نوع ورودی رو بفهمه.مزیت مهم تر این هست که دیگه وقتی از آبجکت ها استفاده می‌کنیم، تایپ اسکریپت دقیقا می‌دونه داخل آبجکت های ما چه خبره و چه مقادیری رو دارن. پس در مثال بالاتر که ارور گرفتیم، دیگه برای دسترسی به مقدار firstName اروری رو دریافت نخواهیم کرد.جمع بندیامیدوارم که این بحث رو کامل متوجه شده باشید و تونسته باشم مفهوم رو به خوبی برسونم. البته این بحث کمی گسترده تر هست و کاربرد ها و حالات دیگه‌ای هم براش وجود داره که امیدوارم بتونم اونارو هم در پست های بعدی به طور کامل توضیح بدم.امیررضا موسوی فردامیررضا موسوی فردTue, 08 Aug 2023 19:19:54 +0330