https://virgool.ir/feed/@m.taha.basirifa2026-11-10 21:35:05https://files.virgool.ir/upload/users/2499501/avatar/avatar.pnghttps://virgool.ir/@m.taha.basirihttps://virgool.ir/@m.taha.basiri/gzipping-react-boosting-performance-with-compression-utc2l0jv6zkoتا حالا با مشکل باندل سایز سنگین مواجه شدید؟ یا به هر دلیل دنبال کم کردن باندل سایز اپلیکیشنتون بودید؟برای کاهش سایز باندل اپلیکیشن هایی که با React توسعه داده شدن، روش‌های مختلفی وجود داره، مثل استفاده از lazy برای کامپوننت‌ها یا استفاده از ورژن‌ سبک‌تر کتابخونه‌ها و ... .اکثر روش‌هایی که برای سبک کردن باندل وجود داره، در زمان توسعه انجام میشه و در واقع دست توسعه دهندست که با رعایت یه سری اصول و قواعد، باندل رو بهینه کنه. اما توی این مقاله میخوایم درباره یه روش متفاوت از سبک کردن باندل یاد بگیریم که بعد از build شدن اپ انجام میشه و تاثیر بسیار بالایی روی پرفورمنس داره و اون چیزی نیست جز Gzip Compression.اما Gzip چیه؟احتمالا با دیدن zip توی اسمش یاد مفاهیمی مثل فشرده سازی افتادید. بله، Gzip یکی از روش‌های فشرده سازی فایل هست که به شدت پر استفاده در سیستم عامل‌های Unix Based هست.Gzip و Reactقبل از هر چیز، باید بدونیم که Gzip در عمل سایز باندل اپلیکیشن شما رو کم نمیکنه، بلکه با فشرده کردنش باعث میشه حجم فایلی که کاربر دانلود میکنه به حد خوبی کم بشه، به این شکل که باندل اصلی توسط سرور Gzip میشه و تو browser کاربر از حالت فشرده خارج میشه. از اونجایی که این عملیات توسط سرور انجام میشه، فعال و تنظیم کردنش هم توی سرور انجام میشه و نیازی به تغییر خاصی تو کد اپلیکیشن نیست. استفاده از Gzip مزایا و معایبی داره که برخی از اون‌ها عبارت‌اند از:مزایا: - کاهش سایز دانلود - پوشش بالای browser: تمام browser های بروز فعلی Gzip رو پشتیبانی میکنن و عملا میتونیم نگرانی‌ای نسبت به عدم پشتیبانی نداشته باشیم.- امکان غیرفعالسازی در صورت عدم پشتیبانی: با این که احتمال عدم پشتیبانی خیلی پایینه، اما میشه در حالتی که پشتیبانی وجود نداشته باشه به صورت اتوماتیک باندل غیر فشرده رو جایگزین باند Gzip شده کرد.- امکان تعیین میزان فشرده سازی: Gzip این اجازه رو به ما میده تا سطح فشرده سازی رو مشخص کنیممعایب: - افزایش فشار به سرور و browser: از اونجایی که فشرده و غیرفشرده‌سازی توسط سرور و browser انجام میشه، در صورت استفاده از Gzip نیاز به سخت‌افزار بیشتر خواهدبود. - پیچیدگی پیاده‌سازی در برخی از محیط‌هاشاید براتون سوال شده باشه که استفاده از Gzip چقدر تاثیر داره، بریم ببینیم!احتمالا در انتهای فرایند build اپلیکیشنتون تا الان لاگی مشابه این لاگ دیدید:همونطور که از خط اول پیداست، بیلدر به شما اطلاع میده که در صورتی که از Gzip استفاده کنید، حجم باندل و chunk هاتون چه مقدار خواهد بود. پس اگه میخواید ببینید که ارزشش رو داره یا نه، دفعه بعدی که build انجام دادید، به این اعداد توجه بیشتری بکنید! برای مثال لاگی که توی این عکس می‌بینید مربوط به اپلیکیشنی بوده که حجم فایل main اون ۱.۹ مگابایت بوده!‌ یعنی فشرده سازی از ۱.۹ مگابایت به ۴۳۸ کیلوبایت که واقعا خفنه!چطوری از Gzip استفاده کنیم؟هدف اصلی این مقاله این بود که با Gzip و مفهومش آشنا شیم، منابع متعددی برای آموزش پیاده‌سازی Gzip در محیط‌های مختلف وجود داره و میتونید برای پیاده‌سازی تو محیط مدنظرتون ازشون استفاده کنید. توی این مقاله صرفا برای آشنایی با برخی از تنظیمات Gzip به تنظیم Gzip در nginx میپردازیم:برای پیاده‌سازی Gzip Compression در nginx میتونید تنظیمات زیر رو توی بلوک server از کانفیگ nginx پروژتون قرار بدید:gzip on; gzip_disable "msie6" gzip_vary on; gzip_comp_level 6; gzip_min_length 0; gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;از اونجایی که ممکنه راست چینی متن بهم بریزه، به شکل زیر تک به تک دستورها رو بررسی میکنیم: خط اول: این دستور همونطور که مشخصه، Gzip Compression رو فعال میکنه. اما فقط برای محتواهای html. خط دوم: غیرفعالسازی Gzip در مرورگرهایی که پشتیبانی ندارن خط سوم: در صورتی که browser درخواست دهنده به هر دلیل درخواست دریافت محتوای غیرفشرده داشته باشه، این دستور این اجازه رو میده که محتوای غیر فشرده برای اون browser ارسال بشه. خط چهارم: میزان فشرده‌سازی، که در nginx مقدار اولیش ۶ هست. خط پنجم: مشخص کردن حداقل حجم فایل‌هایی که Gzip باید روی اون‌ها انجام بشه.برای مثال اگه شما این مقدار رو ۱۰۰۰ تنظیم بکنید، فایل‌هایی که حجمی کمتر از ۱۰۰۰ داشته باشن فشرده نخواهندشد. خط ششم: مشخص کردن فایل‌هایی که باید فشرده بشن، برای مثال شما حتی میتونید عکس‌هاتون رو هم توی این فرمت‌ها قرار بدید، اما در نظر داشته باشید که هر چقدر که فایل‌های بیشتری رو فشرده کنید فشاری که به سرور برای فشرده‌سازی خواهداومد بیشتر خواهدبود. پس بهتره برای فایل‌هایی مثل فایل‌‌های تصویری، حین توسعه اون‌ها رو بهینه کنید تا نیازی به فشرده‌سازی نداشته باشن.استفاده از ‌Gzip در حال حاضر خیلی متداوله و همونطور که دیدید تنظیم کردنش کار خیلی پیچیده و زمان‌بری نیست، همچنین تصمیم برای استفاده کردن یا نکردن از Gzip تصمیم بزرگ و وحشتناکی نیست اما قبل از استفاده ازش حتما وجود نیاز و مزایا و معایبش رو به خوبی بررسی کنید.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriThu, 30 Nov 2023 22:20:48 +0330https://virgool.ir/tomanfrontendteam/react-query-data-magic-ncmv1ruyppu3این روزا اکثر اپلیکیشن‌های وب با سرویس‌‌های سمت سرور کار میکنن و کمتر اپلیکیشنی پیدا میکنید که بدون استفاده از دیتای بیرونی کار کنه. همین موضوع باعث شده که ابزارهای جدیدی برای مدیریت و تعامل با سرویس‌های بیرونی توسعه داده بشن که React-Query یکی از باحال ترین اونهاست. تو این مقاله قصد نداریم با React-Query آشنا شیم! قراره از آشنایی اولیه پا رو یکم فراتر بذاریم و با بعضی از ویژگی‌های خاصش سر و کله بزنیم!مفاهیم پایه(اگه میدونید React-Query چیه و با مفاهیم پایش هم آشنایید، میتونید این قسمت رو مطالعه نکنید.)این کتابخونه همونطور که از اسمش پیداست، روی پروژه‌هایی که با React توسعه داده شدن قابل نصب و استفاده هست. React-Query با ارائه دو هوک useQuery و useMutation کلیه امور مربوط به state-management، کش کردن، تلاش مجدد و ... رو میتونه مدیریت کنه. برای پیاده‌سازیش هم فقط کافیه Provider مربوط بهش رو به عنوان یه HOC یا Higher Order Component به پروژتون اضافه کنید.در نظر داشته باشید که React-Query نمیتونه جای fetch یا axios رو بگیره و از اونا استفاده میکنه. در واقع شما باید متدهایی که درخواست به سمت سرور ارسال میکنن رو بنویسید، اون ها رو به useMutation یا useQuery پاس بدید و بقیه عملیات رو به React-Query بسپرید. یه مثال با هم ببینیم:همونطور که میبینید، تو این مثال یه تابع برای درخواست به سرور به نام fetchTodoList نوشته شده و اون تابع به useQuery پاس داده شده و در نهایت چیزی که از useQuery گرفته شده، مقادیر isLoading، data و error هست. مقادیر دیگه ای هم میتونیم ازش بگیریم که توی این مثال آورده نشدن اما احتمالا الان براتون واضح شده که React-Query داره چقدر کار ما رو راحت میکنه!فرض کنید میخواستید مقدار isLoading رو خودتون و با استفاده از useState مدیریت کنید، نیاز بود که state رو تعریف کنید، قبل از صدا زدن تابع مقدارش رو true و بعد از اتمام کار مقدارش رو false کنید، همچنین نیاز بود که با استفاده از هوک useEffect تابع fetchTodoList رو صدا بزنید. خلاصه بعد از مقداری دنگ و فنگ بالاخره میتونستید تازه به isLoading برسید!کمی عمیق‌تر!(اگه با query key و error handling در React-Query آشنا هستید، میتونید این قسمت رو هم مطالعه نکنید.)اگه مثال بالا رو دقیق‌تر نگاه بکنید، میبینید که به useQuery قبل از پاس دادن تابع fetchTodoList یه مقدار از جنس رشته پاس داده شده. این مقدار رو بهش میگن query key. اما کارش چیه؟همونطور که گفتم یکی از کارهایی که React-Query انجام میده مدیریت کش response هاست. با استفاده از query key، دیتاهای مختلفی که از طریق request های مختلف به دست میان از هم جدا سازی میشن و بعدا میشه با استفاده از همین key ها کارای جالبی انجام داد که باهاشون آشنا خواهیم شد.شاید براتون این سوال پیش اومده باشه که React-Query چطوری متوجه Error میشه و مقدار براش ست میکنه؟اگه به تابع fetchTodoList نگاه کنید، زمانی که مقدار response.ok درست نیست (true نیست)، یه Error ایجاد و throw شده. در نظر بگیرید که React-Query اصلا با این که سرور چه پاسخی داده کاری نداره و کد تابع شما باید به throw کردن یه Exception یا Error به React-Query بفهمونه که کار به درستی پیش نرفته. مقدار Error هم دقیقا همون چیزی هست که شما throw میکنید.تفاوت useQuery و useMutationهمونطور که گفته شد، React Query با استفاده از دو هوک useQuery و useMutation کارش رو انجام میده. اما تفاوت این دو هوک چیه؟اگه مستندات خود React-Query رو بخونیم، نوشته شده که برای فرآیند‌های Create، Update و Delete باید از useMutation استفاده بشه و برای Read از useQuery. به عبارت دیگه درخواست‌هایی با متدهای post، put، patch و delete رو باید از طریق useMutation انجام بدیم و get ها رو از طریق useQuery. اما اگه در پروژه‌های واقعی بخوایم کاربردهاشون رو اینطوری در نظر بگیریم به پیچیدگی هایی میخوریم. با جستجوی بیشتر و تجربه‌ای که من به دست آوردم و همچنین چیزی که سازنده React-Query گفته، تفاوت این دو هوک رو میشه اینطوری گفت:هوک useQuery، الگوی اعلانی (Declarative) و هوک useMutation، الگوی دستوری (Imperative) دارد.(اگه نمیدونید این دو الگو چی هستن، این مقاله از من رو میتونید مطالعه کنید.)اما منظور چیه؟هر جایی که نیاز داریم خودمون request بزنیم، تلاش مجدد بکنیم و ... بهتره از useMutation استفاده کنیم و هر جایی میخوایم این کارها رو کاملا به React-Query بسپریم، بهتره از useQuery استفاده کنیم.برای مثل فرض کنید که شما نیاز دارید بعد از ثبت یه درخواست، نتیجه اون رو از طریق متد get دریافت کنید، اگه با منطق اول پیش بریم، برای این کار باید از useQuery استفاده کنیم که برای انجام این کار چون useQuery در همون ابتدا درخواست میزنه فقط با غیر فعال کردنش میشه این کار رو انجام داد اما با استفاده از useMutation میتونیم هر وقت که نیاز داریم درخواست مورد نظر رو ارسال کنیم.مفاهیم پیشرفته‌ترحالا که خیلی کلی با مفاهیم اولیه در React-Query آشنا شدیم، میخوایم یه نگاه حرفه‌ای تری بهش بکنیم و با ویژگی‌هایی کمی ناشناخته کار کنیم.بروزرسانی زمان دار با refetchIntervalشرایطی رو در نظر بگیرید که نیاز دارید درخواستی رو هر یک ثانیه یک بار برای سرور ارسال کنید و داده ای رو دریافت کنید. به کمک متد refetchInterval که در useQuery وجود داره میتونید این کار رو به راحتی انجام بدید. به این صورت:توی مثال بالا، شرطی گذاشته شده که مادامی که کد پاسخ سرور ۲۰۲ باشه، این درخواست با فاصله ۱۰۰۰ میلی ثانیه یا همون یک ثانیه تکرار بشه. در واقع مقداری که این تابع برمیگردونه فاصله هر بروزرسانی با بروزرسانی بعدی رو مشخص میکنه و اگه این مقدار false باشه بروزرسانی انجام نخواهد شد.بروزرسانی با فوکوس روی صفحه یا refetchOnWindowFocusاین ویژگی به صورت پیش‌فرض فعال هست. کاری که انجام میده اینه که وقتی کاربر به هر دلیل جای دیگه ای کلیک کرده یا تو تب دیگه ای رفته یا ...، زمانی که به اپ ما برمیگرده query های موجود رو دوباره صدا میزنه و داده‌ها بروزرسانی میشن. این باعث میشه که کاربر هر بار برای بروز کردن اطلاعات مجبور به reload صفحه نشه.اما توی بعضی از اپلیکیشن‌ها ممکنه به هر دلیلی به این ویژگی نیاز نداشته باشیم یا باعث مختل شدن بخشی از اپلیکیشن بشه، به شکل زیر میتونیم این ویژگی رو غیر فعال کنیم:مقدار queryClient چیزی هست که به provider مخصوص React-Query پاس میدیم.همچنین میشه برای یه درخواست خاص هم این مقدار رو مشابه refetchInterval داخل کانفیگ useQuery ست کرد.نگهداری داده‌های قبلی یا keepPreviousDataفرض کنید که داده‌ای دارید و میخواید اون رو refetch یا بروزرسانی کنید. در حالت پیش‌فرض، داده قبلی پاک میشه و داده‌های جدید جایگزین اون میشن. اما اگه در فرآیند دریافت داده‌های جدید مشکلی به وجود بیاد شما دیگه داده‌ای برای نشون دادن به کاربر ندارید. به کمک ست کردن مقدار keepPreviousData با مقدار true، React-Query داده‌های قبلی رو نگه میداره و در صورتی که نتونید داده‌های جدید رو بگیرید، دستتون تو پوست گردو نمیمونه! به شکل زیر:نامعتبرسازی کش یا invalidateQueryCacheحالتی رو در نظر بگیرید که توی یه صفحه لیستی از آیتم‌ها رو دارید و برای هر آیتم دکمه‌ای گذاشتید که با کلیک روی اون دکمه، درخواست حذف اون آیتم برای سرور ارسال میشه. بعد از اون احتمالا میخواید که آیتم رو از لیستی که کاربر میبینه هم پاک کنید. به کمک invalidate کردن کش درخواستی که اون لیست رو از سرور گرفته شما میتونید دیتای بروز شده اون لیست رو داشته باشید.برای این کار لازمه query key مربوط به اون درخواست رو داشته باشید و به شکل زیر عمل کنید:تو این مثال، توی تابع removeUserHandler، بعد از حذف کاربر و با استفاده از invalidateQueryCache، لیست کاربرها رو بروزرسانی کردیم. توجه کنید که با استفاده از تابع refetch که از useQuery استخراج شده هم میتونستیم این کار رو بکنیم. کاربرد invalidateQueryCache برای زمانی هست که دستری به تابع refetch دشوار باشه و با استفاده از اون میتونیم به refetch میانبر بزنیم!درخواست‌های وابسته به متغیراگه درخواستی که میخواید ارسال کنید متغیر هم داشت، مثلا فیلتر یا جستجویی باید روش اعمال میشد، میتونید به راحتی مدیریتش کنید! به شکل زیر:مشابه عملکرد dependancy ها در useEffect و useCallback و ...، تو React-Query هم از طریق پاس دادن یه آرایه به جای کلید میشه dependancy ایجاد کرد. توی این مثال با عوض شدن مقدار search، درخواست تکرار میشه.قطعا کاربرد و ویژگی‌های بیشتری رو میشه از React-Query بیان کرد. اما برای طولانی نشدن بیش از حد این مقاله همینجا این قسمت رو تموم میکنیم و سعی میکنم در آینده بیشتر ازش بگم.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriSun, 27 Aug 2023 17:59:24 +0330https://virgool.ir/@m.taha.basiri/declarative-imperative-programming-y46zoxgrah4wاگه این مقاله از من رو خونده باشید، تو قسمتی ازش به برنامه نویسی اعلانی (Declarative) و برنامه نویسی دستوری (Imperative) اشاره کردم. تو این مقاله میخوایم درباره این دو الگو (Paradigm) برنامه نویسی به صورت مختصر یاد بگیریم.برنامه‌نویسی دستوری (Imperative Programming)در این الگوی برنامه نویسی، برنامه‌ای که نوشته میشه باید دقیقا مرحله به مرحله به کامپیوتر بفهمونه که چه کاری باید انجام بده. در واقع تمرکز بیشتر روی الگوریتم‌هایی هست که برای رسیدن به هدف خاص نوشته میشن.برای مثال یه کد جاوا اسکریپتی که با استفاده از این الگو نوشته شده رو با هم ببینیم:const list = ['a', 'b', 'c', 'd']; let word = '' for(item in list) { word = word + item; } console.log(word); // 'abcd'همونطور که میبینید، توی این کد ما دقیقا و مرحله به مرحله به کامپیوتر میگیم که چه کارهایی رو انجام بده تا نهایتا مقدار word که مجموع مقادیر عناصر موجود در متغیر list هست رو به دست بیاره و نشون بده.احتمالا تو اوایل مسیر یادگیری برنامه‌نویسی بیشتر با این نوع برنامه‌نویسی سر و کله زدید یا می‌زنید!استفاده از این الگوی برنامه نویسی فهمیدن کد رو راحت‌تر میکنه و همچنین کنترل بهتری رو به توسعه‌دهنده میده. کاربردش هم بیشتر در زبان‌های برنامه‌نویس سطح پایین (low-level) و برنامه‌هایی هست که نیاز به کنترل و بهینگی بالایی دارن.برنامه‌نویسی اعلانی (Declarative Programming)در این الگو، ما بیشتر به دنبال این هستیم که نتیجه نهایی از کدی که نوشته میشه بگیریم و خیلی درگیر نوشتن مرحله به مرحله عملیات و الگوریتم برای انجام یه کار خاص نمیشیم. به بیان دیگه، عملیات رو به صورت کلی مشخص میکنیم و انجام مراحل ریز به ریز رو به زبان یا فریمورکی که داریم باش کار می‌کنیم میسپریم. نمونه کد زیر دقیقا کاری رو انجام میده که کد قبلی انجام میداد و تفاوتش در الگوی برنامه‌نویسیشه:const list = ['a', 'b', 'c', 'd']; const word = list.join('') console.log(word); // 'abcd'توی این کد، ما به جای این که به کامپیوتر مرحله به مرحله بگیم توی لیست پیمایش کن و آیتم‌ها رو دونه به دونه به انتهای متغیر word اضافه کن، از متد join جاوا اسکریپت استفاده می‌کنیم و درگیر جزئیات الگوریتم نمیشیم.مزایای استفاده از این الگوی برنامه‌نویسی:۱) فهم راحت‌تر نتیجه نهایی کد۲) نزدیکی بیشتر کد به موضوع و مشکل به جای راه حل اون۳) قابلیت بهبود بهینگی بدون تغییر کد (از طریق تغییر در لایه‌های زیرین زبان، فریمورک یا سیستم)امروزه تو اکثر زبان‌های برنامه‌نویسی از این دو الگو به صورت همزان پشتیبانی میشه و توسعه‌دهنده میتونه با توجه به کاری که میخواد انجام بده از هر کدوم از الگوها به صورت جدا گونه و یا حتی مشترک استفاده کنه.امیدوارم این مقاله براتون مفید بوده باشه.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriWed, 02 Aug 2023 01:51:30 +0330https://virgool.ir/tomanfrontendteam/refs-web-development-superchargers-biujccsbrcrcتا حالا چیزی از ref تو دنیای وب شنیدید؟ چقدر از کاربرداش اطلاع دارید؟ تا حالا ازش استفاده کردید؟ بیاید تو این مقاله درباره ref ها یاد بگیریم.‏Ref دقیقه چیه؟تصور کنید تعداد زیادی بادکنک دارید که هر کدوم با یه نخ به جایی وصل هستن و شما میخواید یکی از اون بادکنکا رو بردارید اما دستتون بهشون نمیرسه! چیکار میکنید؟ نخی که به اون بادکنک وصله رو میگیرید و میکشیدش تا به اون بادکنک دسترسی پیدا کنید.مشابه همین مثال رو در دنیای وب داریم، شما برای این که به یه element خاص از element های موجود تو صفحه وبتون در زمان اجرا دسترسی داشته باشید، نیاز دارید نخی که به اون element وصله رو مشخص کنید و هر کاری با اون المنت دارید به کمک اون نخ انجام بدید. ref ها نقش نخ رو در مثال بالا بازی میکنن.هر ref به یه element خاص وصله و شما به کمک اون ref میتونید کارهای مختلفی رو با اون element انجام بدید.چه کارهایی رو به کمک ref میشه انجام داد؟چندتا از کارایی که به کمک ref میشه انجام داد رو ببینیم و بررسی کنیم:۱) دسترسی مستقیم به element های DOM: با استفاده از ref ما میتونیم به element ها دسترسی مستقیم داشته باشیم و کارهایی مثل فوکوس کردن، اسکرول کردن به نقطه ای خاص و یا حتی صدا زدن متدهای اون element رو انجام بدیم.۲) عملیات‌های مربوط به فرم: ref به ما این امکان رو میده که به ورودی‌های موجود در فرم دسترسی داشته باشیم و حتی اونها رو ویرایش کنیم.۳) تعامل با پکیج و کتابخونه‌ها: تعداد زیادی از پکیج‌ها و کتابخونه‌هایی که در دنیای وب استفاده میشن برای این که کارشون رو به درستی انجام بدن نیازمند دسترسی به DOM هستن که به کمک ref میتونیم این دسترسی رو بهشون بدیم.۴) تغییرات ظاهری و انیمیشن‌ها: به کمک ref میتونیم style یه المنت رو عوض کنیم و حتی بهش انمیشن بدیم.۵) اندازه‌گیری: با استفاده از ref میشه اندازه و مکان و... یه المنت رو به دست آورد که میتونه برای محاسبات و همچنین پیاده‌سازی دیزاین responsive کاربرد داشته باشه.۶) پیاده‌سازی منطق دستوری: همونطور که احتمالا میدونید، React به برنامه‌نویسی اعلانی (Declarative) تاکید داره، اما ممکنه تو یه نمونه خاص، شما به برنامه‌نویسی دستوری (imperative) نیاز داشته باشید. به کمک ref میتونیم این کار رو انجام بدیم. (اگه علاقه‌مند به بیشتر دونستن درباره این دو الگوی برنامه‌نویسی هستین، توی کامنتای همین مقاله بهم بگین تا تو مقاله یا مقاله‌های بعدیم بهش بپردازم.)۷) افزایش کارایی (Optimizing performance): ref میتونه با جلوگیری از re-render های اضافه، به افزایش سرعت، کارایی و بهینگی برنامه کمک کنه. اما چطوری؟ با توجه به این که میشه با استفاده از ref به یه المنت خاص دسترسی داشت، پس میشه به جای re-render شدن کل صفحه یه المنت خاص رو آپدیت کرد.۸) Focus & Interactions: یکی دیگه از کارایی‌های ref، اینه که به ما این اجازه رو میده که Focus کاربر رو مدیریت کنیم، مثلا کاربر رو به یه ورودی خاص هدایت کنیم و یا داخل یه tab-view به یه tab خاص بریم.این موارد فقط بخشی از کارایی بودن که به کمک ref میتونیم انجام بدیم. ref ابزار قدرتمندیه که به کمک دسترسی‌ای که به element ها داره باهاش کارهای خیلی زیادتری میشه انجام داد.چگونه از ref استفاده کنیم؟اول از همه این که چطوری یه ref رو به یه element اختصاص بدیم رو ببینیم:برای این که چیزی که توی ref ذخیره شده رو بخونیم، از این سینتکس استفاده میکنیم:console.log(divRef.current)با این کار div ای که بهش ref رو پاس دادیم رو در کنسول خواهیم دید.اما احتمالا این دیتایی نیست که ما میخوایم، مثلا میتونیم تکست داخل المنت رو توی log نشون بدیم، به این شکل:console.log(divRef.current.innerText) // => Hello refs!توی مثال بعدی، میخوایم ببینیم که چطوری میشه با استفاده از ref سایز یه element رو به دست آورد.اگه روی این div کلیک کنیم، مقادیری که توی console می‌بینیم به ترتیب 200 و 100 خواهندبود.مثال بعدی نمونه‌ای از استفاده ref برای focus به یه input هست:با کلیک روی دکمه focus روی input انجام میشه. حتی میتونیم focus روی input ها رو اتوماتیک کنیم، به این شکل که مثلا با وارد شدن شماره موبایل، focus رو با استفاده از ref ای که به ورودی بعدی اختصاص دادیم، به ورودی بعدی انتقال بدیم.یا همچنین میشه ازinputRef.current.scrollIntoView()برای اسکرول به موقعیت input استفاده کرد.مثال بعدی مثالی از دسترسی به متدهای element های فرزند (child) با استفاده از ‌ref هست:آخرین مثالی که بررسی میکنیم یه مثال پیشرفته‌تر اما جذابه، تا حالا فکر کردین چطوری وقتی تو پیام‌رسان‌‌ها پیام میدیم، اسکرول صفحه تغییر میکنه به موقعیت آخرین پیام ارسال شده؟اینطوری:با استفاده از ref و useEffect ای که با هر تغییر توی message ها اجرا میشه، میتونیم بعد از اضافه شدن یه پیام جدید، اسکرول رو به محل اون پیام تغییر بدیم!تو این مقاله با کلیت ref، طرز کارش و ابزار و امکاناتی که در اختیار ما قرار میده آشنا شدیم. همونطور که گفتم، این کاربردها بخشی از کاربردهای ref هستن و خیلی کارهای دیگه‌ای هم میشه به کمکشون انجام داد و نمیشه بدون یادگیری کار با ref و امکاناتش به خودمون بگیم توسعه دهنده وب! تو مقاله‌های بعدی سعی میکنم به صورت پیشرفته‌تر بهش بپردازم.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriTue, 06 Jun 2023 12:29:38 +0330https://virgool.ir/tomanfrontendteam/مدیریت-زمان-چرا-و-چگونه-gcdotuui8navدر این مقاله سعی داریم به با هم به بررسی مفهوم مدیریت زمان، علت نیاز بهش و چگونگی انجامش بپردازیم. پس بیاید با یه تعریف ساده شروعش کنیم.تعریفبه توانایی اولویت‌بندی و تخمین زمان انجام امور در کنار استفاده بهینه از زمان در دسترس مدیریت زمان گویند!چرا؟این که چرا مدیریت زمان خوبه رو احتمالا هممون میدونیم، اما قبل از این که بریم سراغ چگونگیش ، بیاید یکم بیشتر به دلایل اهمیتش بپردازیم.مدیریت زمان تو جاهای مختلفی کاربرد داره و مهم ترینش زندگی شخصیه. مدیریت زمان تو زندگی شخصی باعث کاهش استرس، تصمیم‌گیری بهتر، تنظیم کار و زندگی، موقعیت و پیشرفت و نهایتا رسیدن به اهداف میشه.اما تو زندگی اجتماعی هم به خوبی میشه اهمیت مدیریت زمان رو حس کرد. بیاید یکم جزئی‌تر وارد مساله بشیم و به بررسی مدیریت زمان در جلسه‌هایی مثل جلسه‌‌های کاری بپردازیم.تا حالا شده تو یه جلسه کاری شرکت کنید، ولی بعد از دقایق و احتمالا ساعت‌‌ها صحبت و مطرح شدن مسائل مختلف به نتیجه خاصی نرسید؟یا مثلا از ۵ موضوع مطرح شده در جلسه یا صورت جلسه، فقط به بررسی یک یا دو مورد رسیده باشید؟در چنین موقعیت‌هایی نیازمندی به مدیریت زمان شدیدا حس میشه و مدیریت زمان میتونه باعث دقت بالاتر، تصمیم‌گیری بهتر، شرکت موثرتر حاضرین، شافیت، استفاده بهینه از منابع انسانی و غیر‌انسانی و پیش‌برد بهتر موضوعات مطرح شده بشه.اما چطوری زمان رو مدیریت کنیم؟چگونه؟برای مدیریت زمان، باید تلاش کنیم موارد زیر رو انجام بدیم:تعریف اهداف مشخصمشخص کردن اهدافی واضح، اولین چیزیه که باید رعایت کنیم. اگر هدف‌ها بزرگ هستن میتونیم اونها رو به اهداف کوچکتر بشکنیم تا مدیریتشون راحت‌تر بشه.اولویت‌بندیبررسی اولویت کارها دومین مورده، باید سعی کنیم اهداف رو با توجه به اهمیتشون مرتب کنیم و برای این کار میتونیم از تکنیک‌هایی مثل تکنیک Eisenhower Matrix استفاده کنیم. در این تکنیک کارها به سه دسته زیر تقسیم میشن:‍۱) کارهای فوری یا اورژانسی (urgent)۲) مهم (important)۳) غیرفوری (non-urgent) برنامه زمان‌بندیمورد بعدی، نوشتن یه برنامه زمان‌بندی به شکل to-do list هست، با این تفاوت که باید زمان انجام هر کاری رو با یه تخمین واقع‌بینانه یادداشت کنیم.جلوگیری از عقب انداختن کارهایکی از آسیب زننده ترین کارها به زمان و مدیریتش، عقب انداختن و به آینده موکول کردن کارهاست. همونطور که قبلا گفته شد، بزرگ بودن کارها و هدف‌ها میتونه باعث این بشه که اون‌ها رو به عقب بندازیم. پس باید با شکستن اونها به کارهای کوچکتر به جلوگیری از عقب انداختن اونها کمک کنیم.از بین بردن حواس‌پرتی‌هاکم کردن عواملی که باعث حواس‌پرتی میشن، اعم از عوامل شخصی و بیرونی.ادامه ندادن!همونطور که گفته شد، باید برای هر کاری زمانی در نظر بگیریم و وقتی به انتهای اون بازه رسیدیم باید کارمون رو متوقف کنیم.استراحتیکی دیگه از مواردی که باید در نظر بگیریم، مشخص کردن زمان استراحت بین کارهامونه. این کار باعث میشه با تمرکز بیشتری به سراغ کار بعدی بریم. برای این کار می‌تونیم از تکنیکهایی مثل تکنیک Pomodoro استفاده کنیم. این تکنیک از ما میخواد که تایم ثابتی رو برای کارهامون مشخص کنیم و بعد از هر کدوم یه استراحت کوچیک داشته باشیم.توانایی نه گفتن!برای این که بتونیم طبق برناممون پیش بریم باید نه گفتن رو یاد بگیریم تا هر عامل درونی یا بیرونی باعث خارج شدن برنامه ما از حالت عادیش نشه.خلاصهمدیریت زمان یه مهارته که دست یافتن بهش نیازمند تمرین زیادیه و امتحان کردن تکنیک و روش‌های مختلف برای رسیدن به این مهارت نیازه. پس عجله نکنید و با بررسی و انجام روش‌های مختلف به این مهارت برسید.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriFri, 26 May 2023 01:19:34 +0330https://virgool.ir/tomanfrontendteam/dod-definition-of-done-uqao6x7cynmbمقدمهاین اولین مقاله من توی ویرگوله و قصد دارم براتون از Definition of Done یا به فارسی تحت الفظی "مفهوم انجام شدن" بگم. این مفهوم بیشتر در دنیای توسعه نرم‌افزار و از نوع چابک معنی میده و مختصرا میشه اینطوری تعریفش کرد:تعریفمجموعه‌ای از ضابطه‌ها، معیارها و استانداردهایی که در توسعه یه محصول باید رعایت بشه تا بشه اون رو عرضه کرد.بیاید با بررسی یه مشکل بهتر به مفهمومش پی ببریم!مشکلزمانی رو تصور کنید که تو یه تیم توسعه نرم‌افزار، مثلا در نقش یه توسعه دهنده فرانت‌اند (Front-End)، مشغول هستید و قراره یه ویژگی (Feature) جدید به محصولتون اضافه کنید. انجام این کار به دو نفر محول شده تا به صورت همزمان انجامش بدن و یکی از اون افراد شمایید.هم تیمی شما صرفا براش مهمه که ویژگی خواسته شده رو توسعه بده و بدون هیچ گونه تستی به محصول اضافش کنه، در واقع رسیدن سر وقت ویژگی رو مهمتر از بررسی فنیش میدونه. اما شما برخلاف همکارتون تمایل دارید که نتنها تست‌های فنی بلکه تست‌هایی فراتر روی چیزی که توسعه دادید انجام بشه. قاعدتا کار شما بیشتر طول میکشه و نتیجه باکیفیت‌تری هم داره. اینجا دقیقا میشه گفت که مفهوم انجام شدن برای شما و همکارتون به گونه‌های متفاوتی تعریف شدن!حالا چه مشکلاتی ممکنه به وجود بیاد؟زمان انجام کارها: اولین مشکل عدم تطابق زمانی برای انجام یه تسکه. با توجه به این که هر یک از شما دو نفر تسک مشابه رو در زمان‌های متفاوتی توسعه دادید، تخمین زمان انجام شدن تسک‌ها رو در ادامه برای سایرین دشوار میکنید.شفافیت و نتیجه: شما و همکارتون با دو برخورد متفاوت تسک رو انجام دادید، اما هیچ قانونی مشخص نکرده که کدوم برخورد با توجه به شرایط محصول مناسب تره! در نتیجه هیچکدوم از شما نمیدونید که دقیقا چی ازتون خواسته شده و چی باید تحویل بدید!راه حلدر چنین شرایطی، نیازمند یه استاندارد برای انجام شدن کارها هستیم. این استاندارد باید مشخصا به شما بگه که با توجه به شرایط فعلی محصول یا پروژه، آیا تست کردن لازمه؟ در صورت لزوم، این تست‌ها در چه سطحی باید باشن؟ در چه صورتی شما میتونید بگید که این تسک به درستی انجام شده؟ چه ضوابطی باید رعایت شده باشه تا بشه وضعیت این تسک رو به انجام‌شده تغییر داد؟ و...بله! به این استاندارد دقیقا میگن "Definition of Done" یا "DoD".یک مفهموم در سطوح مختلفمفهوم انجام شدن میتونه تو سطوح مختلفی تعریف بشه، از یه تیم کوچیک توسعه دهنده که هدفش توسعه محصول درخواست شده از تیم محصول یا مدیر محصوله تا یه تیم تولید محصول که هدفش تولید محصول مورد درخواست سطح بالاتره و تیم توسعه رو هم در بر میگیره، و یا حتی یه سطح بالاتر! چیزی که نهایتا یه مجموعه استارتاپ یا شرکت به دنبال رسیدن بهشه که یه محصول کاملا تست شده از نظر فنی، کاربردی و ظاهریه.چگونه یک استاندارد تعریف کنیم؟حالا که با مفهموم DoD آشنا شدیم، باید یاد بگیریم که چطوری DoD برای تیممون تعریف کنیم.برای تعریف DoD، اول از همه باید به این سوال‌ها پاسخ بدیم:- در چه صورتی میشه گفت که محصول توسعه داده شده قابل استفاده هست؟- محصول ما در چه محیط‌هایی باید به درستی کار کنه؟- با انجام چه تست‌هایی میتونیم بگیم که محصولمون آماده برای ارائه هست؟- چه مستنداتی باید تهیه بشه؟در ادامه باید به این سوال‌ها دقیقا پاسخ بدیم:- دقیقا چه تست‌هایی باید روی محصول انجام بشه؟- این تست‌ها در چه سطح و عمقی باید انجام بشن؟- کدوم نتایج از این تست‌ها مقصود هستن؟حالا که به این سوال‌ها پاسخ دادیم، باید لیستی از این استانداردها که شامل انواع تست‌ها و بررسی‌ها هستن تهیه کنیم و برای توسعه هر ویژگی یا محصولی اون‌ها رو یک به یک رعایت کنیم. به مرور زمان باید سعی کنیم این استانداردها رو دقیق و دقیق‌تر کنیم و حتی در صورتی که احتیاج به تغییر داشتن تغییرشون بدیم.خلاصهمفهوم انجام شدن یه تعریف خیلی موثر در تولید و توسعه نرم‌افزاره که نتنها باعث نظم بیشتر میشه، بلکه شفافیت رو افزایش میده و همچنین میتونه باعث تصمیم‌گیری های واقع‌بینانه‌تر و برنامه‌ریزی بهتر در فرآیند تولید و توسعه نرم‌افزار بشه.محمدطه بصیری | MohammadTaha Basiriمحمدطه بصیری | MohammadTaha BasiriMon, 22 May 2023 18:01:04 +0330