پست‌های انتشارات تیم فرانت اند تومن

توسعه افزونه‌های کروم

علی عباسی — Wed, 18 Oct 2023 15:44:55 +0330

توسعه افزونه‌های کرومتا حالا به این فکر کردید که افزونه های کروم چی هستن و با چی ساخته میشن؟ جواب خیلی ساده تر از چیزیه که فکر می‌کنید؛ افزونه‌های کروم معمولاً با جاواسکریپت و در صورت نیاز HTML و CSS نوشته میشن!تو این مقاله فرآیند ساخت افزونه‌های کروم رو بررسی می‌کنیم. افزونه‌های بقیه‌ی مرورگرها هم ساختار مشابهی با همین ساختاری که توضیح خواهیم داد دارن. پس احتمالاً این مقاله به دردتون می‌خوره. من سعی کردم توضیحاتم رو به زبان ساده بیان کنم، پس اگه حس کردید قسمتی رو نامفهوم یا پیچیده توضیح دادم حتماً تو کامنت ها بهم اطلاع بدید.اجزای اصلیفایلی که تو هر افزونه‌ای باید وجود داشته باشه فایل manifest.json‍‍‍‍‍ هست. این فایل به نوعی فایل پیکربندی هر افزونه‌ایه.جزء کاربردی بعدی background script ها هستن که همونطور که از اسمش هم مشخصه تو پس زمینه اجرا میشن و کاربر چیزی از اون نمی‌بینه. (مثل service worker ها)ممکنه افزونه‌ها content scripts هم داشته باشن که روی وب سایتی که کاربر در حال مشاهده هست اجرا میشن و میتونن تغییراتی روی صفحه موردنظر ایجاد کنن یه چیزی بهش اضافه کنن.افزونه‌ها می‌تونن رابط کاربری هم داشته باشن که میتونه تو صفحه تنظیمات یا به عنوان pop-up window شخصی سازی بشه.Manifestتو هسته هر افزونه کروم، فایل manifest.json قرار داره. این فایل توی افزونه مثل ستون فقرات توی بدن عمل میکنه و شامل اطلاعات و تنظیمات اصلی و مهمی هست که کروم برای درک و مدیریت کردن افزونه شما از این فایل استفاده می‌کنه. بیاید بخش‌های مهم ساختار این فایل رو با هم بررسی کنیم:نسخه فایل manifest (manifest_version): در حال حاضر کروم ۲ نسخه از فایل manifest رو پشتیبانی می‌کنه؛ v2 و v3. در حال حاضر کروم استفاده از نسخه 3 را به دلیل به‌روز تر بودن پیشنهاد می‌کنه.نام افزونه (name): نام افزونه رو مشخص می‌کنه. تو این قسمت معمولاً یک اسم توصیفی و مختصر انتخاب میشه که هدف افزونه رو نشون بده.نسخه افزونه (version): نسخه افزونه تو این قسمت مشخص میشه. هربار که قصد انتشار نسخه جدیدی از افزونه رو داریم این عدد رو افزایش میدیم.توضیحات (description): تو این بخش یه توضیح مختصر از کاربرد افزونه نوشته می‌شه. این توضیحات تو صفحه مدیریت افزونه‌ها تو کروم نمایش داده می‌شه.آیکون‌ها (icons): آیکون‌های افزونه تو اندازه‌های مختلف تو این قسمت مشخص میشه. کروم با خوندن این آیکون‌ها، اون رو توی منو و صفحه مدیریت افزونه‌ها نشون می‌ده.مجوزها (permissions): برای استفاده از برخی از APIهای کروم و یا داده‌های کاربر نیازه که اون‌ها رو تو این قسمت فهرست کنین تا کروم بعد از بررسی مجوزها اجازه انتشار افزونه رو بده.یه فایل manifest ساده تقریباً همچین ساختاری داره:نمونه فایل manifest.jsonبرای اضافه کردن افزونه به کروم، کروم رو باز کنید و صفحه مدیریت افزونه‌ها (chrome://extensions) رو باز کنید. حالت "Developer Mode" رو در گوشه سمت راست بالا فعال کنید. حالا روی "Load Unpacked" کلیک کنید. تو این قسمت باید پوشه‌ای که فایل manifest.json توی اون قرار داره رو انتخاب کنید. اگه همه چیز درست پیش رفته باشه افزونه شما باید کنار بقیه‌ی افزونه ها نمایش داده بشه.Background scriptsدر background scripts، اسکریپت‌هایی قرار می‌گیرن که معمولاً بخش اصلی افزونه رو تشکیل می‌دن. این اسکریپت‌ها معمولا شامل Event Listener هاییه که بعد از اتفاق افتادن تعدادی رویداد خاص توسط خود مرورگر یا کاربر، اجرا می‌شن (مثلا وقتی کاربر یه تَب جدید توی مرورگر باز میکنه یا وقتی URL تغییر می‌کنه). این بخش از افزونه می‌تونه به بخش های مختلف هم دسترسی داشته باشه، برای مثال درخواست به سرویس های خارجی بزنه، به حافظه مرورگر دسترسی داشته باشه و یا از API های خود کروم استفاده کنه.برای مثال می‌تونیم وقتی کاربر افزونه رو نصب کرد یه پیام تو کنسول بهش نشون بدیم:یکی از مهم‌ترین توانایی‌های background scripts انتقال اطلاعات بین اجزای مختلف افزونه‌ست. بیاید با یه مثال ببینیم که چطور می‌شه از این قابلیت استفاده کرد. فرض کنید توی pop-up اطلاعاتی رو از کاربر دریافت می‌کنیم و می‌خوایم با استفاده از اون اطلاعات یه درخواست API خارجی ثبت کنیم تا پردازش بشه و دوباره اطلاعات پردازش شده رو توسط یک تابع Callback به کاربر برگردونیم :یادتون نره که باید فایل background scripts خودتون رو به صورت زیر توی manifest.json اضافه کنید:Content Scriptsبا استفاده از Content Scripts می‌تونیم اسکریپت‌هایی رو روی صفحات وب اجرا کنیم. با دسترسی ویرایش DOM میتونیم تغییرات مورد نظرمون رو روی صفحه وبی که کاربر مشاهده می‌کنه اعمال کنیم یا یه بخش جدید بهش اضافه کنیم. با استفاده از این اسکریپت‌ها می‌شه DOM رو تغییر داد، استایل های CSS رو عوض کرد، المان هایی اضافه یا حذف کرد و حتی به وسیله برقراری ارتباط با Background Scripts کارهای خلاقانه تری انجام داد!برای استفاده از Content Scripts باید فیلد "content_scripts" رو توی "manifest.json" اضافه کنیم:توی این ساختار، "matches" مشخص می‌کنه که این اسکریپت‌ها باید توی چه URL هایی اجرا بشن. امکان اضافه کردن فایل های CSS هم برای استایل دادن به المان های جدید با فیلد "css" وجود داره.ادامه کار رو با یک مثال کلی جلو می‌بریم. تو مثال بالا Content Scripts توی فایلی با نام "content_scripts.js" ذخیره شدن و با استفاده از فیلد "matches" اون هارو تنظیم کردیم که تو صفحه اصلی google اجرا بشن. حالا میخوایم تصویر پس زمینه صقحه اصلی گوگل رو عوض کنیم.توی "content_scripts.js" کد زیر رو برای عوض کردن پس زمینه اضافه می‌کنیم:حالا وارد صفحه مدیریت افزونه‌های کروم بشید و افزونه رو به‌روز کنید. اگه همه چیز درست پیش رفته باشه و وارد صفحه اصلی گوگل بشید بایدهمچین صحنه‌ای باز شده باشه:مجوزهابرای استفاده از برخی از API های کروم، باید مجوزهای مورد نیازش را تو لیست مجوزهای "manifest.json" اضافه کنیم. رایج‌ترین مجوزهای مورد استفاده رو لیست کردم:تَب‌ها (tabs): برای دسترسی به تَب‌های کروم.حافظه (storage): برای دسترسی به حافظه مرورگر.تَب فعال (activeTab): برای دسترسی به تَبی که در حال حاضر توی کروم باز شده.بوک‌مارک‌ها (bookmarks): برای دسترسی به بوک‌مارک‌های کاربر.نوتیفیکشن (notifications): برای نشون دادن نوتیفیکیشن به کاربر توی مرورگر.Actionsتو فایل "manifest.json" با استفاده از فیلد "actions" می‌تونید رفتار افزونه رو توی نوار ابزار (toolbar) کروم مدیریت کنید.بعد از اضافه کردن ساختار بالا به فایل "manifest.json"، با نگه داشتن نشان‌گر ماوس روی آیکون افزونه تو نوار ابزار کروم، "Click Me!" رو آیکون نمایش داده می‌شه. با کلیک کردن روی آیکون افزونه هم فایل "popup.html" نشون داده می‌شه.برای استفاده از این ویژگی‌ها، یه قابلیت جدید به افزونه خودمون اضافه می‌کنیم که با کلیک کاربر روی یه دکمه توی فابل "popup.html" پس زمینه صفحه گوگل عوض بشه.اول فایل "popup.html" رو با این ساختار ایجاد می‌کنیم:حالا فایل "popup.js" رو هم با ساختار زیر می‌سازیم:با کلیک روی دکمه، تابع changeBackground اجرا می‌شه که یه پیام با کلید "change-background" به Background Scripts ارسال می‌کنه.حالا باید کد مورد نیاز رو توی ‌Background Scripts اضافه کنیم تا Content Scripts رو توی صفحه اصلی گوگل اجرا کنه و پس زمینه رو عوض کنه.حواستون باشه که دیگه نیازی نیست Content Script هامون بلافاصله بعد از باز شدن صفحه اجرا بشن و باید با کلیک کردن روی دکمه این اتفاق بیفته. پس باید بخش Content Scripts رو از فایل "manifest.json" حدف کنیم.یادتون نره که باید مجوزهای لازم رو هم اضافه کنیم:حالا با کلیک رو آیکون افزونه توی نوار ابزار کروم، پنجره popup نشون داده می‌شه. اگه تو صفحه اصلی گوگل باشید، با کلیک روی دکمه‌ی توی صفحه پس زمینه صفحه وب تغییر می‌کنه.Web Accessible Resourcesاگه نیاز دارید از عکس، فونت یا هر نوع منبع دیگه‌ای توی افزونه استفاده کنید باید اون‌ها رو توی فیلد "web_accessible_resources" تو فایل "manifest.json" اضافه کنید. برای اضافه کردن می‌تونید اون‌هارو مستقیم اضافه کنید یا از الگوهایی برای تطبیق دادنشون استفاده کنید.نتیجه گیریبا افزونه‌های کروم می‌تونیم عملکردهای مرورگر رو ارتقا بدیم و تجربه بهتری به کاربرها ارائه بدیم.تو این مقاله اصول اولیه توسعه افزونه‌های کروم رو بررسی کردیم؛ اگرچه، افزونه‌ها ویژگی‌های زیادی توسط کروم با ابزارهای عالی ارائه می‌دن. پس اگه کاربرد خاصی توی ذهنتون دارید برای ورود به این دنیای جذاب تردید نکنید.گوگل مستندات کاملی از افزونه‌های کروم ارائه کرده که می‌تونه منبع مناسبی برای پیدا کردن ویژگی‌های دیگه و راه حل های بهتر باشه.

React Query: Data Magic

محمدطه بصیری | MohammadTaha Basiri — Sun, 27 Aug 2023 17:59:24 +0330

این روزا اکثر اپلیکیشن‌های وب با سرویس‌‌های سمت سرور کار میکنن و کمتر اپلیکیشنی پیدا میکنید که بدون استفاده از دیتای بیرونی کار کنه. همین موضوع باعث شده که ابزارهای جدیدی برای مدیریت و تعامل با سرویس‌های بیرونی توسعه داده بشن که 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 بیان کرد. اما برای طولانی نشدن بیش از حد این مقاله همینجا این قسمت رو تموم میکنیم و سعی میکنم در آینده بیشتر ازش بگم.

Refs: Web Development Superchargers

محمدطه بصیری | MohammadTaha Basiri — Tue, 06 Jun 2023 12:29:38 +0330

تا حالا چیزی از 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 و امکاناتش به خودمون بگیم توسعه دهنده وب! تو مقاله‌های بعدی سعی میکنم به صورت پیشرفته‌تر بهش بپردازم.

ساختار Folder per feature MVVM

Ali Khoshgoftar — Mon, 29 May 2023 16:29:53 +0330

نرم افزار ها نقش حیاتی برای یک کسب و کار رو دارن و یک اپلیکشن بد میتونه آینده یک کسب و کار رو تحت تاثیر قرار بده و برعکس این موضوع هم صادقِ هرچه نرم افزار توسعه پذیر تر باشه و هزینه نگهداری کمتری داشته باشه احتمال موفقیت اون کسب و کار بیشتر میشه!یکی از چالش هایی که در اکثر تیم های برنامه نویسی وجود داره که تیم فرانت اند تومن هم از این قاعده مستثنی نیست اسکیل کردن پروژه با حداقل هزینه هست. به همین دلیل چندتا از معماری های نرم افزار مرسوم بازار رو بررسی کردم و با توجه به چالش ها و نیاز های آینده پروژه تصمیم گرفتیم معماری که در ادامه توضیح میدم رو پیاده کنیم.چند نمونه از چالش های پیش روامکان اسکیل کردن پروژه (به صورت ماژولار یا مایکرو فرانت اند)امکان نوشتن تست برای پروژهقابلیت نوشتن چند UI مختلفقابلیت استفاده مجدد از کامپوننت هایادگیری ساده برای اعضای جدید تیمامکان داکیومنت کردن پروژهو....از اونجایی که تا الان هیچوقت دوست نداشتم چرخ رو از اول اختراع کنم تصمیم گرفتم معماری نرم افزار های مرسوم رو بیشتر مطالعه کنم تا تصمیم گیری برام راحت تر باشه برای معماری نرم افزار مقالات زیادی وجود داره و هر کدوم مزایا و معایب خودشون رو دارن. برای مثال معماری های زیر رو بررسی کردممعماری Cleanمعماری پیازیمعماری MVCمعماری MVVMو همچنین معماری های فولدر استراکچر زیر رو بررسی کردممعماری Group by file typesمعماری Group by Featuresو در نهایت تصمیم گرفتم معماری فولدر های مختلف رو با استفاده از مزیت های ذکر شده در معماری های بالا و شبیه به معماری Group by Features پیاده سازی و متناسب به نیاز های پروژه شخصی سازیش کنم folder per feature mvvmپوشه Assets:در این پوشه تمامی فایل های مورد نیاز توسعه مانند فایل های SVG تصاویر آیکون ها فونت ها و... قرار میگیرد.پوشه API:یکی از چالش هایی که ممکنه داشته باشیم بحث ارتباط با سرور هستش و ممکنه یکسری از دیتا هایی که از سمت سرور برگردانده میشود به هر دلیلی نیاز به بررسی مجدد و تغییر یا تبدیل داشته باشن. در این فولدر طبق استاندارد RESTful API برای هر اند پوینت یک CRUD در نظر میگیریم.پوشه Utility:− پوشه Helpers:در پوشه Helpers میتوان تابع هایی که در طول زمان توسعه نرم افزار چندین بار مورد استفاده قرار میگیرند را قرار داد− پوشه Hooks:در این پوشه میتوان کاستوم هوک هایی نوشت که در توسعه برنامه چندین بار مورد استفاده قرار گیرند− پوشه Consts:همانطور که از نام این پوشه مشخص است میتوان یک یا چندین فایل مختلف در این پوشه برای نگهداری ثابت های پروژه استفاده کرد مثلا میتوان تمامی متن های استفاده شده در برنامه و... را در این پوشه قرار دادپوشه Components:در این فولدر سه بخش مختلف داریم که در ادامه بررسی میکنیم- پوشه UIKit:در این پوشه تمامی کامپوننت های جزئی ولی پر تکرار پروژه قرار داده می شود برای مثال ما در پروژه ۵ نوع دکمه مختلف داریم که کاربرد های تقریبا مشابه دارند ولی دیزاین های متفاوتی دارند و برای همین یک کامپوننت به اسم Button در این پوشه ایجاد میکنیم.- پوشه Shared: بصورت پیشفرض این پوشه خالی میباشد و در تیم این قرارداد را رعایت میکنیم که هر سکشنی از صفحات باید به صورت Local components در نظر گرفته بشه ولی هر کامپوننتی در دیزاین که بیشتر از یکبار استفاده بشه باید به این پوشه انتقال پیدا کنه.پوشه Pagesدر این پوشه به ازای هر صفحه یک پوشه جدید ساخته میشود برای مثال ما در این پروژه دو صفحه به عنوان صفحه اصلی و لیست معاملات رو داریم که به ازای هر کدام یک پوشه جدید ایجاد شده است. در قدم بعدی باید هر کدام از این صفحات را بر اساس فیچر های مختلف کوچک میکنیم و در صورت نیاز مجدد همین روند رو تکرار میکنیم تا به کامپوننت هایی با قابلیت استفاده مجدد و معنا دار تقسیم بشن.کامپوننت هایی که در این صفحه به قسمت های کوچک تبدیل میشن به عنوان Local components در نظر گرفته میشن و در صورتی که در چندین جای پروژه استفاده بشن به Components/Shared انتقال پیدا میکنن.پیاده سازیبرای نمونه میخوام دیزاین زیر که مربوط به صفحه جزییات معامله میباشد رو طبق این معماری تقسیم بندی کنیم.صفحه جزییات معاملهمرحله اول: باید به ازای این صفحه یک پوشه جدید به اسم DealDetails در پوشه Pages ایجاد کنیمجدا سازی هدر و فوترمرحله دوم: قسمت هایی مثل هدر و فوتر صفحه که با صفحات دیگر مشترک است باید در پوشه Components/Shared پیاده سازی شودfolder per feature componentsمرحله سوم: در این مرحله باید هر قسمت صفحه به کامپوننت های معنادار تقسیم شود.ابتدا یک پوشه کامپوننت محلی برای جزییات معامله در نظر میگیریم. سپس این کامپوننت را به سه قسمت وضعیت معامله، جزییات و موارد معامله (رنگ آبی) تقسیم میکنیماین روند را برای تک تک این کامپوننت ها نیز مجدد اجرا میکنیم و کامپوننت وضعیت معامله نیز به دو قسمت قیمت و تایم لاین (رنگ قرمز) شکسته میشودکامپوننت تایم لاین نیز از تکرار کامپوننت وضعیت ساخته شده که این کامپوننت بر اساس وضعیت های مختلف آیکون، رنگ، عنوان، تاریخ و توضیحات آن متغیر است در نهایت باید خروجی فولدر ها مشابه تصویر زیر باشدfolder per feature MVVMدر تصویر بالا بعد از این که هر بخش رو به کامپوننت های کوچکتر تقسیم کردیم به ازای هر کامپوننت باید چند فایل ساخته شود که در ادامه در مورد هر کدام توضیح میدمفایل item.js:در این فایل فقط لایه view کامپوننت پیاده سازی میشه و قسمت منطق کامپوننت نباید در این لایه قرار بگیره و هر قسمتی که نیاز به لاجیک داشتیم باید از کاستوم هوک هایی و توابعی که در useItem.js پیاده شده استفاده کنیمفایل useItem.js:در این فایل باید تمامی منطق های کامپوننت پیاده سازی بشه همچنین تمام استیت ها در این فایل قرار میگیره و تمامی این تابع ها میتوانند توسط items.js استفاده شوندفایل item.style.js:در صورتی که برای استایل دهی فایل ها از styled-components یا ابزار های مشابه استفاده کنیم بهتر است استایل ها را جدا کرده و در این فایل قرار دهیمفایل item.test.js:در صورتی که برای پروژه تست بنویسیم تست ها در این فایل قرار می گیردچند نمونه از مزیت های جداسازی منطق و رابط کاربریمنطق برنامه به تنهایی قابل تست میباشدمیتوان با یک منطق چندین UI متفاوت پیاده سازی کرد (مثلا دو نسخه متفاوت برای موبایل و وب توسعه داد)میتوان به راحتی لایه view پروژه را ریدیزاین کردیادگیری و تسلط نیرو جدید با این استراکچر بیشتر استسخن پایانیاستفاده از این استراکچر یا هر معماری دیگه ای در هر پروژه ای ضروری نیست و تا حدود زیادی به عواملی همچون سایز پروژه و ظرفیت تیم و نوع دیزاین بستگی دارد.این معماری بیشتر در پروژه هایی که پیش بینی میشود نیاز به اسکیل شدن پیدا میکنند پیشنهاد میشود و در پروژه های کوچک باعث ایجاد پیچیدگی بی دلیل میشود

مدیریت زمان، چرا و چگونه؟

محمدطه بصیری | MohammadTaha Basiri — Fri, 26 May 2023 01:19:34 +0330

در این مقاله سعی داریم به با هم به بررسی مفهوم مدیریت زمان، علت نیاز بهش و چگونگی انجامش بپردازیم. پس بیاید با یه تعریف ساده شروعش کنیم.تعریفبه توانایی اولویت‌بندی و تخمین زمان انجام امور در کنار استفاده بهینه از زمان در دسترس مدیریت زمان گویند!چرا؟این که چرا مدیریت زمان خوبه رو احتمالا هممون میدونیم، اما قبل از این که بریم سراغ چگونگیش ، بیاید یکم بیشتر به دلایل اهمیتش بپردازیم.مدیریت زمان تو جاهای مختلفی کاربرد داره و مهم ترینش زندگی شخصیه. مدیریت زمان تو زندگی شخصی باعث کاهش استرس، تصمیم‌گیری بهتر، تنظیم کار و زندگی، موقعیت و پیشرفت و نهایتا رسیدن به اهداف میشه.اما تو زندگی اجتماعی هم به خوبی میشه اهمیت مدیریت زمان رو حس کرد. بیاید یکم جزئی‌تر وارد مساله بشیم و به بررسی مدیریت زمان در جلسه‌هایی مثل جلسه‌‌های کاری بپردازیم.تا حالا شده تو یه جلسه کاری شرکت کنید، ولی بعد از دقایق و احتمالا ساعت‌‌ها صحبت و مطرح شدن مسائل مختلف به نتیجه خاصی نرسید؟یا مثلا از ۵ موضوع مطرح شده در جلسه یا صورت جلسه، فقط به بررسی یک یا دو مورد رسیده باشید؟در چنین موقعیت‌هایی نیازمندی به مدیریت زمان شدیدا حس میشه و مدیریت زمان میتونه باعث دقت بالاتر، تصمیم‌گیری بهتر، شرکت موثرتر حاضرین، شافیت، استفاده بهینه از منابع انسانی و غیر‌انسانی و پیش‌برد بهتر موضوعات مطرح شده بشه.اما چطوری زمان رو مدیریت کنیم؟چگونه؟برای مدیریت زمان، باید تلاش کنیم موارد زیر رو انجام بدیم:تعریف اهداف مشخصمشخص کردن اهدافی واضح، اولین چیزیه که باید رعایت کنیم. اگر هدف‌ها بزرگ هستن میتونیم اونها رو به اهداف کوچکتر بشکنیم تا مدیریتشون راحت‌تر بشه.اولویت‌بندیبررسی اولویت کارها دومین مورده، باید سعی کنیم اهداف رو با توجه به اهمیتشون مرتب کنیم و برای این کار میتونیم از تکنیک‌هایی مثل تکنیک Eisenhower Matrix استفاده کنیم. در این تکنیک کارها به سه دسته زیر تقسیم میشن:‍۱) کارهای فوری یا اورژانسی (urgent)۲) مهم (important)۳) غیرفوری (non-urgent) برنامه زمان‌بندیمورد بعدی، نوشتن یه برنامه زمان‌بندی به شکل to-do list هست، با این تفاوت که باید زمان انجام هر کاری رو با یه تخمین واقع‌بینانه یادداشت کنیم.جلوگیری از عقب انداختن کارهایکی از آسیب زننده ترین کارها به زمان و مدیریتش، عقب انداختن و به آینده موکول کردن کارهاست. همونطور که قبلا گفته شد، بزرگ بودن کارها و هدف‌ها میتونه باعث این بشه که اون‌ها رو به عقب بندازیم. پس باید با شکستن اونها به کارهای کوچکتر به جلوگیری از عقب انداختن اونها کمک کنیم.از بین بردن حواس‌پرتی‌هاکم کردن عواملی که باعث حواس‌پرتی میشن، اعم از عوامل شخصی و بیرونی.ادامه ندادن!همونطور که گفته شد، باید برای هر کاری زمانی در نظر بگیریم و وقتی به انتهای اون بازه رسیدیم باید کارمون رو متوقف کنیم.استراحتیکی دیگه از مواردی که باید در نظر بگیریم، مشخص کردن زمان استراحت بین کارهامونه. این کار باعث میشه با تمرکز بیشتری به سراغ کار بعدی بریم. برای این کار می‌تونیم از تکنیکهایی مثل تکنیک Pomodoro استفاده کنیم. این تکنیک از ما میخواد که تایم ثابتی رو برای کارهامون مشخص کنیم و بعد از هر کدوم یه استراحت کوچیک داشته باشیم.توانایی نه گفتن!برای این که بتونیم طبق برناممون پیش بریم باید نه گفتن رو یاد بگیریم تا هر عامل درونی یا بیرونی باعث خارج شدن برنامه ما از حالت عادیش نشه.خلاصهمدیریت زمان یه مهارته که دست یافتن بهش نیازمند تمرین زیادیه و امتحان کردن تکنیک و روش‌های مختلف برای رسیدن به این مهارت نیازه. پس عجله نکنید و با بررسی و انجام روش‌های مختلف به این مهارت برسید.

DoR (Definition of Ready)

علی عباسی — Thu, 25 May 2023 13:47:00 +0330

در توسعه نرم‌افزار با متودولوژی Agile، قبل از این که یک آیتم بک‌لاگ محصول (Product Backlog Item یا PBI) بتونه برای توسعه انتخاب بشه باید شاخص هایی رو رعایت کنه که این دسته از شاخص ها رو با اسم Definition of Ready یا به اختصار DoR می‌شناسیم. DoR ابزار مفیدیه برای اطمینان از اینکه یک PBI به خوبی درک شده، اندازه مشخص و درست داره و می‌تونه به طور موثر پیاده سازی شه. در واقع هدف از ارائه مفهوم DoR رسیدن به یک درک مشترک از «آماده» بودن یک PBI برای شروع فرآیند اجراست.تو این مقاله مفاهیم DoR رو بررسی می‌کنیم و به اهمیت اون تو متودولوژی Agile می‌پردازیم.مفهوم DoR شامل چه مواردی می‌شود؟معمولا مواردی که برای تعریف شاخص های DoR در نظر گرفته میشه شامل از این دسته هاست:ملاک پذیرش: یه PBI باید معیارهای پذیرش مختصر، واضح و قابل اندازه‌گیری داشته باشه. در این صورت می‌شه تا حد خوبی موارد مورد نیاز برای توسعه اون رو تخمین زد.تخمین اندازه: با تخمین اندازه یک PBI می‌شه از به اندازه کافی کوچک بودنش برای قرار گرفتن توی اسپرینت مطمئن شد.وابستگی: قبل از انتخاب یه PBI برای توسعه، باید وابستگی های اون PBI، به PBI ها یا تیم های دیگه مشخص و برطرف بشه.داستان کاربر (user story): یه PBI باید به صورت یک داستان از زبان کاربر نقل شه تا مشخص بشیم چه ارزشی برای کاربر خلق می‌کنه.اولویت: PBI ها باید با توجه به ارزش تجاری و فوریت اجرا اولویت بندی بشن.چرا تعریف و اجرای DoR مهمه؟با تعیین شاخص های DoR برای یک تیم، می‌تونیم تضمین کنیم که اون تیم درک مشترکی از آماده بودن یک PBI برای شروع فرآیند توسعه داره. این درک مشترک علاوه بر کم کردن درگیری‌ها، مشکلات و تأخیرهای معمول در فرآیند توسعه، به تیم کمک می‌کنه که فرآیند توسعه کارآمدتر و موثرتری داشته باشه. با درک درست اندازه یک PBI تیم می‌تونه به شکل درست‌تری برای اون برنامه ریزی کنه، مدیریت حجم کاری تیم بهتر انجام می‌شه و در نتیجه تیم به تعهدات خودش بهتر عمل می‌کنه.یکی از مهمترین عوامل ایجاد تأخیر در فرآیند توسعه، وابستگی ها هستن. با شناسایی و حل وابستگی ها قبل از شروع توسعه، تیم می‌تونه از تأخیرهایی که ممکنه در طول توسعه رخ بده، جلوگیری کنه تا وظایف تیم هم در طول اسپرینت کامل انجام بشه.مثالی از شاخص های DoRدر ادامه یکی از معروف ترین دسته از شاخص های DoR رو معرفی می‌کنیم که به شاخص INVEST هم معروفه:عدم وابستگی (Independent): یک PBI باید خودکفا باشه. یعنی بدون هیچ‌گونه وابستگی به بخش دیگه‌ای بتونه به مرحله توسعه برسه.قابل مذاکره (Negotiable): نحوه پیاده سازی یک PBI باید قابل بحث باشه تا بشه بهینه‌ترش کرد.ارزشمندی (Valuable): تقریبا مهم‌ترین اولویت برای یک PBI ارزشمندی اون برای مشتری‌ها و سرمایه‌گذارهاست.قابل تخمین (Estimable): اندازه و حجم کار یه PBI باید قابل تخمین باشه تا بشه براش برنامه‌ریزی کرد.کوچک (Small): یک PBI باید به قدری کوچک باشه که بشه تخمین خوبی برای مدت زمان و حجم کار مورد نیازش زد. معمولا هرچه PBI ها بزرگ‌تر باشن، تخمینی که براشون در نظر گرفته میشه دقت کمتری داره!قابلیت تست (Testable): برای هر PBI باید یک سری معیارهای پذیرش (Acceptance Criteria) تعریف بشه که بعد از انجامش توسط همون معیارها بتونیم کیفیت اون رو بسنجیم.نتیجه گیریقرارداد کردن یک سری موارد و شاخص ها با عنوان تعریف آماده بودن برای یک PBI علاوه بر سنجیدن ارزش پیاده سازی، با یکسان کردن درک کل تیم از اون PBI کمک می‌کنه درک درست تری از وظایف و کارهای لازم برای توسعه داشته باشیم و با برنامه ریزی درست‌تر و دقیق‌تر میتونیم تیم منظم‌تر و کارآمد تری بسازیم.

DoD (Definition of Done)

محمدطه بصیری | MohammadTaha Basiri — Mon, 22 May 2023 18:01:04 +0330

مقدمهاین اولین مقاله من توی ویرگوله و قصد دارم براتون از Definition of Done یا به فارسی تحت الفظی "مفهوم انجام شدن" بگم. این مفهوم بیشتر در دنیای توسعه نرم‌افزار و از نوع چابک معنی میده و مختصرا میشه اینطوری تعریفش کرد:تعریفمجموعه‌ای از ضابطه‌ها، معیارها و استانداردهایی که در توسعه یه محصول باید رعایت بشه تا بشه اون رو عرضه کرد.بیاید با بررسی یه مشکل بهتر به مفهمومش پی ببریم!مشکلزمانی رو تصور کنید که تو یه تیم توسعه نرم‌افزار، مثلا در نقش یه توسعه دهنده فرانت‌اند (Front-End)، مشغول هستید و قراره یه ویژگی (Feature) جدید به محصولتون اضافه کنید. انجام این کار به دو نفر محول شده تا به صورت همزمان انجامش بدن و یکی از اون افراد شمایید.هم تیمی شما صرفا براش مهمه که ویژگی خواسته شده رو توسعه بده و بدون هیچ گونه تستی به محصول اضافش کنه، در واقع رسیدن سر وقت ویژگی رو مهمتر از بررسی فنیش میدونه. اما شما برخلاف همکارتون تمایل دارید که نتنها تست‌های فنی بلکه تست‌هایی فراتر روی چیزی که توسعه دادید انجام بشه. قاعدتا کار شما بیشتر طول میکشه و نتیجه باکیفیت‌تری هم داره. اینجا دقیقا میشه گفت که مفهوم انجام شدن برای شما و همکارتون به گونه‌های متفاوتی تعریف شدن!حالا چه مشکلاتی ممکنه به وجود بیاد؟زمان انجام کارها: اولین مشکل عدم تطابق زمانی برای انجام یه تسکه. با توجه به این که هر یک از شما دو نفر تسک مشابه رو در زمان‌های متفاوتی توسعه دادید، تخمین زمان انجام شدن تسک‌ها رو در ادامه برای سایرین دشوار میکنید.شفافیت و نتیجه: شما و همکارتون با دو برخورد متفاوت تسک رو انجام دادید، اما هیچ قانونی مشخص نکرده که کدوم برخورد با توجه به شرایط محصول مناسب تره! در نتیجه هیچکدوم از شما نمیدونید که دقیقا چی ازتون خواسته شده و چی باید تحویل بدید!راه حلدر چنین شرایطی، نیازمند یه استاندارد برای انجام شدن کارها هستیم. این استاندارد باید مشخصا به شما بگه که با توجه به شرایط فعلی محصول یا پروژه، آیا تست کردن لازمه؟ در صورت لزوم، این تست‌ها در چه سطحی باید باشن؟ در چه صورتی شما میتونید بگید که این تسک به درستی انجام شده؟ چه ضوابطی باید رعایت شده باشه تا بشه وضعیت این تسک رو به انجام‌شده تغییر داد؟ و...بله! به این استاندارد دقیقا میگن "Definition of Done" یا "DoD".یک مفهموم در سطوح مختلفمفهوم انجام شدن میتونه تو سطوح مختلفی تعریف بشه، از یه تیم کوچیک توسعه دهنده که هدفش توسعه محصول درخواست شده از تیم محصول یا مدیر محصوله تا یه تیم تولید محصول که هدفش تولید محصول مورد درخواست سطح بالاتره و تیم توسعه رو هم در بر میگیره، و یا حتی یه سطح بالاتر! چیزی که نهایتا یه مجموعه استارتاپ یا شرکت به دنبال رسیدن بهشه که یه محصول کاملا تست شده از نظر فنی، کاربردی و ظاهریه.چگونه یک استاندارد تعریف کنیم؟حالا که با مفهموم DoD آشنا شدیم، باید یاد بگیریم که چطوری DoD برای تیممون تعریف کنیم.برای تعریف DoD، اول از همه باید به این سوال‌ها پاسخ بدیم:- در چه صورتی میشه گفت که محصول توسعه داده شده قابل استفاده هست؟- محصول ما در چه محیط‌هایی باید به درستی کار کنه؟- با انجام چه تست‌هایی میتونیم بگیم که محصولمون آماده برای ارائه هست؟- چه مستنداتی باید تهیه بشه؟در ادامه باید به این سوال‌ها دقیقا پاسخ بدیم:- دقیقا چه تست‌هایی باید روی محصول انجام بشه؟- این تست‌ها در چه سطح و عمقی باید انجام بشن؟- کدوم نتایج از این تست‌ها مقصود هستن؟حالا که به این سوال‌ها پاسخ دادیم، باید لیستی از این استانداردها که شامل انواع تست‌ها و بررسی‌ها هستن تهیه کنیم و برای توسعه هر ویژگی یا محصولی اون‌ها رو یک به یک رعایت کنیم. به مرور زمان باید سعی کنیم این استانداردها رو دقیق و دقیق‌تر کنیم و حتی در صورتی که احتیاج به تغییر داشتن تغییرشون بدیم.خلاصهمفهوم انجام شدن یه تعریف خیلی موثر در تولید و توسعه نرم‌افزاره که نتنها باعث نظم بیشتر میشه، بلکه شفافیت رو افزایش میده و همچنین میتونه باعث تصمیم‌گیری های واقع‌بینانه‌تر و برنامه‌ریزی بهتر در فرآیند تولید و توسعه نرم‌افزار بشه.

بررسی الگوریتم مرتب سازی Selection Sort

Davood Habbabi — Sat, 24 Jul 2021 12:54:27 +0430

این نوع الگوریتم هم خیلی سادس و فهمیدنش اصلا کار سختی نیست به تصویر بالا دقت کنیدطبق این الگوریتم توی قدم اول میاد و اولین ایندکس از ارایه رو در نظر می گیره و توی بقیه ارایه می گرده دنبال کوچک ترین عدد که کوچک تر از ایندکس اول باشه رو پیدا می کنه وقتی که عددی پیدا کرد که کوچیک تر باشه میاد جای ایندکس اول و عدد کوچک تر رو عوض می کنه توی پالس بعدی ایندکس دوم رو در نظر می گیره و باز بررسی می کنه کوچک ترین عدد که کوچک تر از ایندکس دوم باشه رو پیدا می کنه و جاشونو عوض می کنه این روند به تعداد مقادیر موجود در ارایه ( arr.length) تکرار می شه تا ارایه مرتب بشهاگر دقت کنید خود به خود ارایه ما تبدیل به دو بخش مرتب شده و مرتب نشده از ایندکس صفر تا ایندکس اخر تقسیم می شه این الگوریتم الگوریتم مرتب سازی درجا هستش و نیازی به اشغال حافظه بیشتر رو نداره و در همون ارایه مرتب سازی انجام می شه ولی پرفورمنس خوبی نداره و پیچیدگی زمانی این الگوریتم برابر با O(n^2) است.بریم کدش رو بررسی کنیم function selectionSort(arr) { for (let i = 0; i < arr.length; i++) { let minIndex = i; //(1) for (let j = i + 1; j < arr.length; j++) { if (arr[j] < arr[minIndex]) { minIndex = j; } } if (i !== minIndex) { //(2) const lesser = arr[minIndex]; arr[minIndex] = arr[i]; arr[i] = lesser; } } return arr; }خب خود کد تقریبا همه چیز رو گفته و زیاد به توضیح نداره (1) در این بخش از طریق یه حلقه و یک متغییر کوچک ترین ایندکس بعد از ایندکس n رو پیدا می کنیم(2)در این بخش هم با استفاده از یک متغییر کمکی جای کوچکترین عدد رو با ایندکس فعلی عوض می کنیمامیدوارم مفید باشه :)آقا داود

الگوریتم Bubble Sort یا همون مرتب سازی حبابی

Davood Habbabi — Tue, 20 Jul 2021 18:10:47 +0430

این الگوریتم تقریبا ساده ترین راه برای مرتب سازی یک ارایه از اعداد یا رشته ها هستش نحوه کار کرد این الگوریتم به این نحوه که میاد ایندکس اول رو با ایندکس دوم مقایسه می کنه اگر عدد اول بزرگ تر بود جاشو با عدد دوم عوض می کنه اگر نه دست بهش نمی زنه و به همین نحو تا ایدکس اخر می ره یعنی چی ؟ به عکس پایین نگاه کنید ما اینجا یک ارایه از اعداد مثل ارایه پایین داریمlet array = [ 5 , 1 , 4 , 2 , 8 ]خب عکسو ببینید توی پالس اول 5 بزرگ تر از 1 هستش پس جاشو عوض می کنه خط بعدی باز 5 از 4 بزرگ تره جاشونو عوض می کنه خط سوم 5 از 2 بزرگ تره باز هم جا به جایی صورت می گیره حظ چهارم 5 از 8 کوچیک تره جا به جایی صورت نمی گیره و می ره برای پالس بعدی توی پالس بعدی هم همون مقایسه ها از اول تکرار می شه و این چرخه انقدر ادامه پیدا می کنه تا هیچ جا به جایی صورت نگیره خب به صورت تئوری فهمیدیم این الگوریتم به چه شکله حالا بیاید کد جاوااسکریپتیش رو بنویسیمfunction bubbleSort(array) { let swapped = true; //(1) do { swapped = false; for (let j = 0; j < array.length; j++) { if (array[j] > array[j + 1]) { //(2) let temp = array[j]; //(3) array[j] = array[j + 1]; array[j + 1] = temp; swapped = true; //(4) } } } while (swapped); return array; }کد بالا رو ببینید(1) اول اومدیم یه متغییر تعریف کردیم تا بتونیم تشخیص بدیم که ایا توی هر پالس جا به جایی صورت می گیره یا نه (2) شرط گذاشتیم که ایندکسمون با ایندکس بعدیش بزرگ تره یا نه و اگر بزرگ تر باشه جا به جایی انجام می شه در غیر این صورت هیچ اتفاقی نمی افته (3) حین جا به جایی ایندکس فعلی رو می ریزیم توی یک متغییر به اسم temp تا داشته باشیم و خط بعدش میایم ایندکس فعلی رو با اندکس بعدیش جا به جا می کنیم و مقدار temp رو می ریزیم تو ایندکس بعدی (4) وقتی شرط اجرا می شه در واقع یعنی یک جا به جایی صورت گرفته و بالاتر توضیح دادم که وقتی جا به جایی داشته باشیم به این معنی که پالس بعدی هم داریم و باید انقدر پالس ها رو اجرا کنیم تا هیچ جا به جایی اتفاق نیفته پس مقدار رو true می کنیم تا do while یک بار دیگه اجرا بشه پیچیدگی زمانی این الگوریتم توی بهترین حالت برابر (n)O هستش و در حالت متوسط و بد (n * n)O هستش و بهترین حالت وقتیه که ارایه از قبل مرتب شده باشه و بدترین حالت وقتیه که ارایه برعکس مرتب شده باشه که ذاتا پرفرمنس خوبی نداره و الگوریتم های بهتری (از نظر زمان) برای مرتب سازی وجود داره که توی پست های بعدی معرفی خواهم کرد این الگوریتم یک روش مرتب سازی درجا هستش یعنی برای مرتب سازی از فضای جانبی کمک نمی گیره و با جا به جا کردن ایندکس های خود ارایه اون ها رو مرتب می کنه امیدوارم مفید باشه :)آقا داود