نوشته های Ali Razavi

برای همیشه CORE WEB VITAL رو بذار تو جیبت و نمره خوبی دریافت کن

Ali Razavi — Fri, 25 Oct 2024 22:50:32 +0330

مقدمه : Core Web Vitals مجموعه‌ای از معیارهای عملکردی گوگل است که تجربه کاربری را با محوریت سرعت بارگذاری، تعاملی بودن و ثبات بصری اندازه‌گیری می‌کند. این معیارها شامل Largest Contentful Paint (LCP) برای زمان بارگذاری محتوای اصلی صفحه، First Input Delay (FID) برای اندازه‌گیری زمان تعامل اولیه کاربر و Cumulative Layout Shift (CLS) برای سنجش ثبات بصری صفحه می‌شوند.این موارد به طور مستقیم روی تجربه کاربری و سئو تاثیر می‌گذارند، و گوگل این معیارها را به عنوان یکی از عوامل رتبه‌بندی در نظر می‌گیرد. بهینه‌سازی Core Web Vitals نه تنها باعث افزایش رضایت کاربر و کاهش نرخ خروج می‌شود، بلکه به بهبود رتبه سایت در نتایج جستجوی گوگل نیز کمک می‌کند. در این مقاله، به نکات کاربردی برای بهبود Core Web Vitals می‌پردازیم تا تجربه بهتری برای کاربران وب‌سایت فراهم کنیم و عملکرد بهینه‌تری داشته باشیم.بهینه‌سازی عکس‌ها (Images)فرمت‌های جدیدتر: از فرمت‌های بهینه‌تر مثل WebP یا AVIF استفاده کنید که حجم کمتری نسبت به JPG و PNG دارند.فشرده‌سازی تصاویر: تصاویر را با ابزارهایی مثل TinyPNG یا ImageOptim فشرده کنید تا حجم کاهش یابد.Lazy Loading: بارگذاری تنبل تصاویر باعث می‌شود که تصاویر تنها زمانی بارگذاری شوند که کاربر به آنها نیاز دارد.اندازه مناسب تصاویر: اندازه تصاویر را برای دستگاه‌ها و رزولوشن‌های مختلف تنظیم کنید تا تصاویر با اندازه غیرضروری بزرگ ارسال نشوند.CDN برای تصاویر: استفاده از Content Delivery Network (CDN) به نزدیکتر کردن محتوای تصویری به کاربران کمک می‌کند.بهینه‌سازی فونت‌ها (Fonts)فرمت‌های جدید فونت: از فرمت‌های woff و woff2 استفاده کنید که کم‌حجم‌تر از eot و ttf هستند.Display و font-swap: از ویژگی CSS font-display: swap; استفاده کنید تا متن ابتدا با فونت سیستم نمایش داده شود و سپس با بارگذاری فونت سفارشی جایگزین شود.فشرده‌سازی فونت: از ابزارهایی مانند Font Squirrel یا Transfonter برای حذف گلیف‌های غیرضروری استفاده کنید.استفاده از Subset: فقط گلیف‌های مورد نیاز را بارگذاری کنید، مثلا اگر سایت شما فقط فارسی است، نیازی به بارگذاری حروف لاتین ندارید.کاهش حجم جاوا اسکریپت (JavaScript)کاهش حجم CSS: از ابزارهایی مثل CSSNano یا PurgeCSS برای کوچک کردن فایل CSS و حذف کلاس‌های غیرضروری استفاده کنید.Critical CSS: بخش‌های اصلی CSS که در ابتدا لازم هستند را در فایل HTML قرار دهید و بقیه را بعدا بارگذاری کنید.Lazy Loading برای CSS‌های اضافی: فایل‌های CSS غیرضروری و کتابخانه‌ها را بعد از بارگذاری اولیه به صورت تنبل بارگذاری کنید.بهینه‌سازی سرور و زیرساختCDN: استفاده از CDN، محتوای شما را به کاربر نزدیکتر می‌کند و زمان بارگذاری را کاهش می‌دهد.فشرده‌سازی Gzip یا Brotli: فایل‌ها را با استفاده از فشرده‌سازی Gzip یا Brotli ارسال کنید تا حجم فایل‌ها کمتر شود.استفاده از Caching: از cache برای محتوای ثابت استفاده کنید، مانند تصاویر، CSS، و جاوا اسکریپت. هدرهای Cache-Control و Expires را به درستی تنظیم کنیبهینه‌سازی تجربه کاربری و تعامل (UX/UI)Prefetch و Preload: فایل‌های مورد نیاز آینده را پیش‌بینی کرده و با rel="prefetch" و rel="preload" آنها را آماده کنید.انتقال سرور سریع‌تر: از HTTP/2 یا HTTP/3 استفاده کنید که اتصال سریع‌تر و موازی را فراهم می‌کند.بارگذاری فونت‌ها و تصاویر حیاتی با priority بالا: با rel="preload" برای تصاویر یا فونت‌های حیاتی.ابزارهای تست و بهینه‌سازیLighthouse: از ابزار Lighthouse گوگل برای بررسی عملکرد، دسترس‌پذیری، و Core Web Vitals سایت استفاده کنید.PageSpeed Insights: از PageSpeed Insights گوگل برای سنجش و بهینه‌سازی تجربه کاربری و Core Web Vitals سایت استفاده کنید.WebPageTest: این ابزار جزئیات بیشتری درباره زمان بارگذاری صفحات و مشکلات شبکه ارائه می‌دهد.رعایت این نکات باعث بهبود Core Web Vitals و افزایش رضایت کاربر و رتبه‌بندی بهتر در موتورهای جستجو می‌شود.

principle های مهم در مهندسی نرم افزار

Ali Razavi — Mon, 11 Sep 2023 15:29:19 +0330

مقدمه : خب چند وقتیه دید خودمو از دایره که همیشه دور خودم می کشیدم وسیع تر کردم و سعی میکنم موارد و موضوعات مختلف از ساید بالا به پایین بهشون نگاه بندازم تا بتونم خودمو یکم نسبت بهشون آماده کنم و در موردشون فکر کنم تو این چند وقتی که این دید به زندگی اضافه کردم دنیای دیدم و عمق مطالب برای وسیع تر و زیباتر شدن و باعث شده بتونم چند principle مهم در مهندسی نرم افزار یاد بگیرم دوست داشتم براتون به اشتراک بذارم شاید به دردتون بخوره :)اولین اصل Keep it simple, stupid به مخفف بهش KISS هم میگن این اصل بهمون میگه همه چیز رو ساده بگیر احمق پیچیده نکن مطالب رو برای خودت به قول امروزیا سختش نکن این اصل سال ۱۹۶۰ اولین بار توسط نیروی دریایی ایالات متحده مورد توجه قرار گرفت . طبق داستان کوتاهی که ازش پیدا کردم داستان از این قرار بوده میخاستن سیستم اطلاع رسانی شونو راه اندازی کنند و مهندسی که این وظیفه بر عهده داشته کلی پیچیده کرده بود کارو و برای اطلاع رسانی کردن باید کلی کار میکردی تا پیام ارسال می شد مدیر اونجا از این واژه Keep it simple, stupid استفاده میکنه و میگه همه چیز رو ساده بگیر احمق . یک مثال دارن اینگلیسی ها میگه چی میگه اکثرا سیستم ها در صورتی بهترین عملکرد را دارند که ساده نگه داشته شوند نه پیچیده . در مهندسی نرم افزار میگن یک هدف کلیدی در طراحی اینه از پیچیدگی های غیر ضرروری اجتناب گردد . یک داستان باحال دیگه راجب این موضوع بهتون بگم اینکه Kelly Johnson مهندس هواپیما بوده که از جملات : بسیار ساده نگه دارید . ساده باش عزیزم . ساده نگه دار یا آن را ساده حفظ کن . ساده سر راست نگه دارید و ... استفاده میکرده که به تمامی زیر دستان خودش و خودش یاد اوری کنه بهترین اصل ساده نگه داشتنه . دومین اصل You Aren't Gonna Need It به مخفف بهش YGNI هم میگن این اصل بهمون میگه پیچیدگی به نرم افزار خودت اضافه نکن به اصطلاح Over Engineering نکن یعنی چی یعنی اینکه داخل نرم افزارت نیا کاری بکن که شاید احتمال وقوعش زیر ۵ درصد باشه و شاید اصن بهش نیاز نداشته باشی و تو فکرش باشی پس به این فکر کن شاید کاری که الان میکنی نرم افزارت نیاز بهش نداشته باشه پس دست نگهدار .از نظر من وقتی دارید کد نویسی میکنید خا ناخواه دارید بدهی به نرم افزار خودتون اضافه میکنید پس بدهی الکی بیهوده اضافه نکن . سومین اصل separation of concern هستش خب مخففی نداره :) تا الان مخففی براش نساختن همون کامل صداش بزنید فکر کنم بدش میاد مخففش کنیم . بگذریم این اصل بهمون میگه دغدغه های که داری جداسازی کن از هم و هر کدومشون رو به قطعات کوچیک تر تقسیم کن و هر کدوم رو جای درست قرار بده تا به شکل نهایی برسی این اصل داخل برنامه نویسی خیلی استفاده میشه میگن اپلیکیشن خودتو به لایه های متفاوت تقسیم کن و جوری لایه ها اپلیکیشن توسعه بده که کمترین هم پوشانی بین عملکرد لایه های دیگه داشته باشه . چهارمین اصل Don't Repeat Yourself هستش که به مخفف بهش میگن DRY این به این معنی هستش از الگو های تکراری و کد های تکراری جلوگیری کن و سعی کن جوری نرم افزارت توسعه بدی که از تکرار بپرهیزی که بر پایه این اصل یک مطلب هست میگه هر وقت دیدی داری کدی میزنی و تکرار میکنی یک چیزیو هعیی بدون کدت بهینه نیست و میتونی بهینه تر بنویسی و از تکرار بی مورد بپرهیزی . امیدوارم زندگی داشته باشید که دغدغه هاتون از هم جدا کنید و به اون چیزی که زیر ۵ درصد اتفاق می افته فکر میکنی و شاید اصن رخ نده نیازش نداشته باشی فکر نکنی و در عین سادگی از تکرار بپرهیز .

deep clone چیست و اصن چه دردی از من دوا میکنه ؟

Ali Razavi — Sun, 27 Aug 2023 11:50:23 +0330

سلام دوستان خیلی خوشحالم دوباره توفیق اینو دارم بتونم براتون در مورد یک مبحث تخصصی صحبت کنم امروز اومدیم با یکی از عمیق ترین مفهموم ها داخل ساختمان داده به اسم deep clone اول براتون یک مثال میزنم بعد اهمیت deep clone میگم بعد هم به یک جمع بندی می رسیم پس با من همراه باشید . احتمالا تا حالا خواستید که یک شی که از کلاستون خواستید داخل یک جای از حافظه دیگ کپی کنید یا به اصطلاح clone بگیرید اما دیدین به صورت copy by value شده نه copy by reference این یعنی چی بریم سراغ کد من با کد PHP براتون توضیح میدم ( اما داخل همه زبان های برنامه نویسی این نوع کاربردی میاد پس cast کردنش زحمت خودتونه :) )من اینجا اومدم یک کلاس ساختم به اسم Test که یک property دارم به اسم Ali که با استفاده از متد getName میاد این property بر میگردونم یک نمونه ازش میسازم به اسم test بعد میام مقدار test قرار میدم داخل test1 بعد اومدم مقدار property name داخل به وسیله متغییر test1 عوض کردم خروجی که داریم Mohammad هستش اما اتفاقی می افته ما داریم به صورت copy by value مقادیر تغییر میدیم نه copy by reference این یعنی ناخواسته بدون اینکه حواسمون باشه میایم کلاس اصلی رو تغییر میدیم برای حل این مشکل میایم از قابلیت clone داخل php استفاده میکنیم مشکل حل میشه به این شکل : خب مشکل حل شد ولی به نظرتون اگر متغییر $name ما یک نمونه از یک ابجکت بود چطور بازم حل می شد مشکل ؟ نه نمی شد و بازم مشکل داشتیم اینجا مفهوم Deep cloning به کمک ما می آید .یک توضیح بدم اصن چیه Deep cloning : به معنای ساخت یک کپی کامل از یک شیء یا ساختار داده هست، به طوری که تمامی ویژگی‌ها و ویژگی‌های تو در تو آن شیء هم در کپی ایجاد شده حفظ بشن. به عبارت دیگه، هرگونه تغییری در کپی ایجاد شده تنها بر روی اون تاثیر میذاره و اصل شیء یا ساختار داده بدون تغییر باقی میمونه.کجا مورد استفاده قرار میگیره ؟استفاده از deep clone در برخی موارد خاص الزامی هست. بعضی از موارد کاربردی عبارتند از:1. حفظ داده‌ها: در صورتی که می‌خواید یک نسخه مستقل از یک شیء یا ساختار داده داشته باشید تا تغییرات در یک کپی، تاثیری بر روی اصل داشته باشد، deep clone استفاده می‌شود. این کاربرد مفید است زمانی که شما نیاز دارید تا مقدار اولیه یک شیء رو حفظ کنید و تغییرات در کپی آن نیز دست‌کمی به اصل شیء داشته باشد.2. پشتیبان گیری: هنگامی که می‌خواید اطلاعات مهم رو به صورت کپی نگهداری کنید و از تغییرات در کپی‌ها جلوگیری کنید، می‌تونید از deep clone استفاده کنید. این کاربرد مفید هست زمانی که نیاز به بازیابی داده‌های اصلی بدون تغییرات اضافی دارید.3. کار با ساختارهای پیچیده: در صورتی که با ساختارهای داده پیچیده و چند بعدی کار میکنید که شامل زیرساختارهای تودرتو و ارتباطات گلوبال هستن، deep clone به شما امکان میده تا یک کپی کامل از این ساختارها را بسازید بدون ایجاد پیچیدگی‌های اضافی در تعاملات آنها.خب بریم سراغ کد این روش صرفا حل مشکل داخل زبان php هستش بازم میگم cast کردن این موضوع به زبان مربوطه زحمت خودتونه خب اینجا دو تا کلاس داریم به اسم SubObject و MyCloneable که اومدم یک نمونه از MyCloneable برای خودم درست کردم و اومدم مقدار property داخل نمونه MyCloneable که object1 رو برابر با یک نمونه از کلاس Subobject قرار دادم بعد توسط مجیک متد __clone اومدم clone گرفتم از نمونه ابجکت ام اینطوری تمام ویژگی ها کلاس مدنظرم کپی میشه داخل نمونه clone شده obj2 و بدون دردسر میتونم یک انشعاب بدون دردسر از کلاس خودم بگیرم نکته بسی مهم : مراقب باشید که استفاده از deep clone در برخی موارد ممکن هست سنگین باشد و هزینه‌های زمانی و حافظه رو بالا ببره، به خصوص زمانی که داده‌ها بسیار بزرگ و پیچیده هستن. در این صورت، ممکن است نیاز باشد به جای deep clone، از روش‌های دیگه ای مثل شبه کپی (shallow copy) یا استفاده از اشتراک‌گذاری داده‌ها استفاده کنید.

کاستوم هوک ها رو در ری اکت بشناسیم

Ali Razavi — Fri, 24 Feb 2023 16:47:52 +0330

مقدمه : ورژن ۱۶ بود ری اکت در یک تغییر انقلابی به سمت هوک ها رفت و از قائده نوشتاری پیش فرض که کلاس بود به سمت فاکشنال رفت و مفهوم جدیدی به اسم کاستوم هوک به وجود اومد در این مقاله سعی دارم در مورد کاستوم هوک های پیش فرض که داخل ری اکت وجود دارند براتون بگم و هر کدوم توضیح مختصری راجبشون بدم که باهاشون بیشتر اشنا بشید نکته بعضی از کاستوم هوک ها داخل ورژن جدید ری اکت ورژن ۱۸ اضافه شدن که داخل این مقاله اوناهم پوشش دادیم :)لیستی از کاستوم هوک های که قراره داخل این مقاله بهشون بپردازیم :useStateuseEffectuseContextuseReduceruseRefuseMemouseCallbackuseLayoutEffectuseImperativeHandleuseDeferredValueuseTransitionuseIdکاستوم هوک useState چیه و چکار میکنه ؟نحوه تعریف useStateimport {useState} from "react"const [count,setCount]=useState(0)داخل اپلیکیشن ری اکت مون بر اساس یک سری اتفاق باید اجزای داخل DOM واکنش نشون بدن نسبت به عملیاتی رخ میده و تغییر وضعیت رخ میده useState وظیفه اینو داره وضعیت موجود رو داخل حافظه موقتی که وجود داره نگهداری کنه که یک مقدار پیش فرض میتونه دریافت کنه نظیر عدد رشته ارایه ابجکت و ... و خروجی که بهمون میده دو مقدار هستش یک مقدار اولیه دومی یک تابع که میتونیم مقادیر پیش فرض که دادیم رو عوض کنیم یا اضافه کنیم . کاستوم هوک useEffect چیه و چکار میکنه ؟نحوه تعریف useEffect : import {useEffect} from "react"useEffect (()=>{//code here},[])//dependency or [] این کاستوم هوک به ما کمک میکنه به چرخه زندگی کامپوننت دسترسی پیدا کنیم اکثرا داخل useEffect درخواست های api که داخل اپلیکیشن نیاز داریم رو صدا میزنیم useEffect شامل سه بخش از زندگی کامپوننت میشه اگر [] گذاشتیم فقط یک بار کد های داخل useEffect اجرا میشه اگر dependency به useEffect خودمون بدیم وابسته dependency که پاس دادیم میشه هر موقعه این مورد دیتاش عوض شد اجرا میشه میتونه بدون dependency و [] باشه که در این صورت داخل لوپ قرار میگیره و ثانیه یک بار کد های داخل useEffect نوشتید اجرا میشه . کاستوم هوک useContext چیه و چکار میکنه ؟اینو بهتون بگم بحث این کاستوم هوک خیلی بحث کلی و کلا مقاله جدا مطلبه اینجا صرفا یک توضیح مختصر راجبش میدیم . اگر در حال حاضر برنامه نویس React هستید به احتمال خیلی زیاد میدونید که context چیست.در React همه چیز بر مبنای component است و props ها از طریق کامپوننت های والد به فرزندان منتقل می شود.در React کامپوننت ها single directional flow هستند.اما با رشد برنامه این موضوع می تواند در کامپوننت هایی که مجبور هستید اطلاعات رو برای چندین سطح از فرزندان بفرستید دست و پاگیر شود و این اصلا ایده آل نیست.تصور کنید که قرار است اطلاعات کاربر رو در چندین کامپوننت مختلف نمایش دهید.ارسال اطلاعات به این کامپوننت ها از طریق props زیاد جالب نیست.این مشکل از طریق کتابخونه های جانبی مثل Redux حل شده است که state برنامه رو درون store ذخیره میکند و بین کامپوننت ها به اشتراک می گذارد.همچنین ما میتونیم با استفاده از Context این مشکل رو حل کنیم.Context یک روش برای اشتراک گزاری value ها بین کامپوننت ها بدون پاس دادن props ها از طریق component tree فراهم می کند.کاستوم هوک React Context API برای حل مشکل پاس دادن value ها به صورت props از طریق tree of components معرفی شد.state های برنامه میتوانند به صورت global ذخیره شوند و بین کامپوننت های مختلف به اشتراک گذاشته شوند.کاستوم هوک useReducer چیه و چکار میکنه ؟این کاستوم هوک یک جایگزین مناسب برای useState هستش و ترکیبش با useContext میتونه براتون معجزه کنه من برای درک بهتر از یک مثال استفاده میکنم که داخل اکثر داکیومنت های خارجی این مثال رو میزنن برای درک بهتر ما می توانیم reducer در Rect را به عنوان یک “Coffee Maker” در نظر بگیریم.اون یک state قدیمی را میگیرد و یک سری عملیات روی آن انجام می دهد و یک state جدید تحویل می دهد(قهوه تازه).فرض کنید Coffee Maker یا همان قهوه ساز آب و پودر قهوه را می گیرد و یک فتجان قهوه تازه دم شده را بر می گرداند که ما از آن لذت می بریم.بر اساس این مثال reducers توابعی هستند که current state یعنی پودر قهوه و action یعنی آب را می گیرد و یک state جدید یعنی قهوه تازه ایجاد می کند. Reducer ها pure function هایی هستند که state و action را می گیرند و یک state جدید بر می گردانند. مفهوم pure function چیست ؟ به طوری کلی اگر متدی از این دو حالت پیروی کنه بهش میگن pure function تابع همیشه یک خروجی یکسان رو برگردونه اگر یک arguments یکسان بهش پاس داده بشه.تابع هیچ side-effects رو ایجاد نکنهکاستوم هوک useRef چیه و چکار میکنه ؟کاستوم هوک useRef یک مقدار اولیه میگیره که بهمون یک ref object قابل تغییر بهمون میده یک مقدار داره به اسم current که مقدارش initial value هست که بهش پاس میدیم و اینکه مقدار این useRef در طول حیاط یک کامپوننت تغییر نمیکنه . فرض کنید یک input داریم میخایم به این المنت دسترسی پیدا کنیم یک Ref میسازیم به این شکل : const inputRef = useRef(null)و الان میتونیم با object ref که بهمون بر میگردونه میتونیم به element input دسترسی پیدا کنیم و ویرایش کنیم و به کلی attribute ها و متد های پیش فرض که داخل جاوا اسکریپت خام بودن دسترسی پیدا کنیم . ویژگی بعدی که خیلی ها نمیدونن راجبش به کمک useRef شما میتونید به state قبلی هم دسترسی پیدا کنید کاستوم هوک useMemo چیه و چکار میکنه ؟احتمالا دیدین داخل اپلیکیشن خودتون وقتی داخل کامپوننت state تغییر میکنه و دوباره rerender میشه تمامی کامپوننت وابسته کامپوننت دوباره re render میشه این یعنی کامپوننت های که اصن هیچ side Effect هم براشون نشده مجددا بارگزاری میشن و این یک بار اضافی برای اپلیکیشن شما خواهد بود . کاربرد useMemo دقیقا همینه جلوگیری از re render شدن کامپوننت های که هیچ گونه side effect روشون صورت نگرفته باشه و مقدار قبلی که داخل حافظه وجود داره رو برمیگردونه مادامی که یک تغییر بر روی کامپوننت صورت بگیرد . کاستوم هوک useCallback چیه و چکار میکنه ؟کاستوم هوک useCallback یک تابع و یک آرایه از dependencies ها به عنوان پارامتر می گیرد.useCallback یک نسخه memoized از callback را برمی گرداند و تنها در صورتی تغییر می کند که یکی ازdependencies ها تغییر کرده باشد. شما همچنین می توانید یک آرایه خالی از dependencies را به عنوان پارامتر پاس دهید که باعث می شود تنها یکبار useCallback اجرا شود.اگر شما اصلا آرایه را پاس ندهید، در هر بار فراخوانی یک value جدید را بر می گرداند. کاستوم هوک useLayoutEffect چیه و چکار میکنه ؟کاستوم هوک useLayoutEffect کارش شبیه useEffect هستش اما با این تفاوت که useEffect توی دستکاری دام یکم ضعف داره چون بعد از پینت شدن ui اجرا میشه ، حالا این هوک اومده که اون ضعف رو بپوشونه.این هوک دقیقا بعد از اجرای رندر و قبل از پینت شدن ui اجرا میشهما توی اکثر مواقع از useEffect استفاده میکنیم اما توی این یه مورد ( دستکاری دام) از این هوک استفاده میکنیممرورگر ui رو روی صفحه پینت نمیکنه تا این هوک کارش تموم شه پس حواستون باشه که چجوری ازش استفاده میکنید که مشکل پرفورمنس براتون به وجود نیاره همونطور که گفتم اکثر مواقع و برای اکثر کارها همون useEffect کارمون رو راه میندازه.کاستوم هوک useImperativeHandle چیست و چکار میکنه ؟زمانی که ما یک ref یا همون ارجاع رو به کامپوننت پدر ارسال کنیم برای ویرایش کردن اون ref میتونیم از این هوک استفاده کنیم ، و این هوک هم به این شکل هست :useImperativeHandle(ref, createHandle, [deps])که در اینجا ref همون ارجاعی هست که به کامپوننت پدر ارسال کردیم و createHandle اون تابعی هست که روی ref قراره اجرا بشه و deps هم آرایه ای از وابستگی ها هست که توی بخش useEffect توضیح دادم .کاستوم هوک useDeferredValue چیست و چکار میکنه ؟این هوک یک مقدار رو میگیره و یه کپی از اون برمیگردونه و نمایش میده تا زمانی که ما نیاز داریم که به صورت فوری مقدار اپدیت بشه کندی کم تری رو تجربه کنیم برای مثال وقتی که ما یک لیست طولانی داریم از داده ها و یک اینپوت داریم که میخوایم زمانی که کاربر متن رو وارد کرد همزمان اون مقادیری که داریم تغییر کنن ، خب در حالت های عادی ما از صفحه بندی استفاده میکنیم که نیاز نباشه تمام دیتا رو با هم نمایش بدیم یا از راه های دیگه ... اما خب اگه لازم باشه که اطلاعات رو با هم نمایش بدیم به این هوک نیاز پیدا میکنیم ، از این هوک وقتی باید استفاده کرد که دیتایی که میگیریم از یه لایه ی بالاتر بیاد و ما کنترلی روی ست کردن اون مقدار نداشته باشیم توی کامپوننت خودمون ، در اون صورت ما دیتامون رو به این هوک میدیم به این شکل :const deferredValue = useDeferredValue(value);و حالا مقدار ما با کندی کمتری تغییر میکنه و تجربه ی کاربری بهتری رو ارائه میدیم .کاستوم هوک useTransition چیست و چکار میکنه ؟این هوک هم یه جورایی برای موقعیت هایی شبیه موقعیتی که از هوک useDeferredValue استفاده میکنیم استفاده میشه و کاربردی مثل اون داره یه جورایی ، اما وقتی باید ازش استفاده کنیم که ما کنترل روی ست کردن مقادیرمون داریم .const [isPending, startTransition] = useTransition();همونطور که میبینید ما یک هوک داریم که با خودش دو تا المنت isPending و startTransition رو داره ، ما از تابع startTransition برای این استفاده میکنیم که تابع های ست کردن اون استیت هایی که اهمیت کم تری دارند رو داخلش قرار میدیم و بهش میگیم که این استیت که قراره ست بشه رو دیرتر ست کن و خب این باعث میشه همزمانی ست کردن استیت ها از بین بره و یا کم بشه که در نهایت تجربه ی کاربری بهتری ارائه میدیم و سرعت اجرای برنامه بالاتر میاد ، و isPending هم یک مقدار بولین هست که میتونه true یا false باشه که وقتی ازش استفاده میکنیم که میخوایم موقعی که startTransition داره اون ست کردن رو دیر تر انجام میده به کاربر یه پیام یا لودینگ برای مثال نمایش بدیم .کاستوم هوک useId چیست و چکار میکنه ؟بالاخره ری اکت دست به کار شد و هوک خودش رو برای ایدی های یونیک معرفی کرد تا دیگه نیاز نباشه برای ساختن ایدی های رندوم و یونیک از پکیج دیگه ای استفاده کنیم ، که خب این خیلی خوبه و برای اینجور مواقع خیلی کاربردیه ، روش استفاده ازش هم به این شکل هست :const id = useId() ;در اخر اینکه میتونید خودتون هم کاستوم هوک های شخصی سازی خودتون هم داشته باشید .خب اینم از اخر این مقاله خوشحال میشم نظرات خودتون رو پایین مقاله برام بنویسید و اگر دوست داشتید لایک کنید و با دوستان خودتون اشتراک بذارید .

میکروفرانت در یک نگاه

Ali Razavi — Mon, 20 Feb 2023 12:07:37 +0330

مقدمهمیکرو فرانت اند این روز ها خیلی بحث اش داغ شده و اکثر شرکت های که در بر گیرنده چند تیم مختلف فرانت هستن به سمت معماری میکروفرانت اند میرن در این مقاله سعی میکنم در مورد اینکه میکروفرانت اند چیه صحبت کنیم و سپس در مورد راه های استفاده از میکروفرانت صحبت میکنیم پس با من همراه باشید . خب چرا باید از میکروفرانت اند استفاده کنیم ؟در حال حاضر توسعه اپلیکیشن ها به صورت اپ های یک پارچه صورت میگیره یعنی تمامی کامپوننت ها صفحات و ... داخل یک اپلیکیشن و یک سورس کد قرار داره و کل تیم های مختلف هر بخش بر روی یک سورس کد مشغول به انجام فعالیت هستن و یک جور وابستگی ایجاد میشه بین تیم های مختلف و ریسک تحت تاثیر قرار دادن کد ها در قسمت های مختلف وجود داره .میکرو فرانت اند اومده میگه هر بخش از اپلیکیشن یک پارچه خودتون رو مشخص کنید و داخل اپلیکیشن های کوچیک تر قرار بدهید خب این یعنی چی ؟ من با یک مثال این بخش توضیح میدم فرض کنید یک اپلیکیشن فروشگاه اینترنتی داریم شامل دو تا بخش هستش لیست محصولات و سبد خرید هر بخش لیست محصولات و سبد خرید میتونه در قسمت جدا توسعه پیدا بکنه یعنی لیست محصولات داخل یک اپلیکیشن جدا SPA باشه و سبد خرید هم همچنین خب گفتم اپلیکیشن جدا SPA یعنی چی این حرف یعنی میتونید لیست محصولات خودتون رو با ری اکت سبد خرید رو با ویو جی اس توسعه بدین یعنی وابستگی زبانی هم اینجا نداریم هر بخش بر حسب نیاز میتونه از یک معماری منحصر به فرد خودش پیروی کنه . خب الان با خودتون میگید برای ارتباط این دو بخش چکار باید بکنیم ؟ فرض کنید من بر روی دکمه اضافه کردن به سبدخرید میزنم باید به بخش سبد خرید من یک ایتم اضافه بشه اما چطوری ؟ میکروفرانت میگه نباید وابستگی مستقیم بین این دو بخش ایجاد بکنید ! و صرفا باید از Api استفاده بکنید و ارتباط داشته باشید اینگونه وابستگی مستقیم بین این دو بخش حذف میکنید . مزایا میکرو فرانت اند :میتونیم هر بخش از اپلیکیشن خودمون رو به تیم های مجزا بدیم .اپ یک پارچه داشتیم تبدیل به اپ های کوچیک میشه و اینجوری درک مسئله راحت تره و تغییرات روی هر بخش را به راحتی میشه انجام داد هر اپ کوچک که وجود داره برای یک بخش و یک ویژگی از محصول تهویه شده نمونه ای از ساختار اپلیکیشن یک پارچهنمونه ای از معماری میکروفرانت اندخب احتمالا با خودتون بگید چرا یک بخش اضافه شده به اسم Container اصن کار این بخش چیه چکار میکنه .این بخش کاری میکنه اینه که مشخص میکنه که اپلیکیشن میکروفرانت اندی ما کی و کجا نمایش داده باشه . یک جور نقش مدیریت اپلیکیشن میکروفرانت اندی ما رو خواهد داشت . پس باید به سورس کد این دو اپلیکیشن ما دسترسی باید داشته باشه اما چطوری ؟ اینجا یک مفهوم وجود داره به اسم ادغام یا Integration که به ما کمک میکنه این مورد هندل کنیم .ادغام یا Integration قبل از توضیحات این بخش بهتون بگم راه های وجود داره بدون نقص و ایراد نیستن و بدین معنی هستش هر کدوم از این راه ها درد سر خاص خودشون دارن و هر کدوم نقاط قوت و منفی دارند و شما باید نگاه کنید نیازمندی موجود شما چیه و به متناسب با نیازمندی خودتون انتخاب کنید کدوم راه حل مشکل شما و نیاز شما رو برطرف میکنه . نکته : تمامی این مثال ها رو من با اپلیکیشن میکروفرانت اند لیست محصولات میزنم .ادغام سمت سرور : در حالی که فایل جی اس رو برای لود Container سمت کلاینت میفرستید سرور تصمیم میگیره آیا شامل سورس کد لیست محصولات باشد یا نه ادغام هنگام اجرا : Container بعد از اینکه توی مرورگر لود شد . به سورس کد لیست محصولات دسترسی پیدا میکنه ادغام هنگام بیلد : Container قبل از اینکه توی مرورگر لود بشه به سورس کد لیست محصولات دسترسی پیدا میکنه مراحل ادغام در هنگام بیلد تیم توسعه لیست محصول رو توسعه میده وقت deploy میرسه لیست محصول را به عنوان یک پکیج داخل NPM انتشار میده و تیم مسئول پروژه Container لیست محصول رو به عنوان یک پکیج نصب میکنه و تیم Container از اپشون بیلد میگیره و خروجی باندل شده تمام کدهای لیست محصول رو به همراه خواهد داشت . مزیت این بخش : درک مفهوم آن و راه اندازی اش بسیار آسان است . عیب این بخش : با هر تغییری در لیست محصول نیاز است تا Container مجدد deploy شود . بد عادت شدن و وابستگی زیاد ایجاد کردن بین Container و لیست محصول . مراحل ادغام در هنگام اجرا تیم توسعه لیست محصول رو توسعه میدن وقت deploy وقتی رسید کد های لیست محصول در ادرس my-app.com/ProductList.js دپلوی میکنند وقتی کاربر به my-app.com می رود اپ Container لود میشه اپ Container هم لیست محصولات رو Fetch میکنه و سپس اجرا میکنه . نکته تمامی این کارها در تنظیمات وب پک صورت میگیره پس دانش نسبتا خوبی به وب پک باید داشته باشید یا از ابزار های مثل NX یا Lerna استفاده کنید . مزایا : لیست محصول میتونه به صورت مستقل در هر زمان دپلوی بشه نسخه های مختلف از لیست محصولات میتونه دپلوی بشه و Container میتونه تصمیم بگیره از کدام یک استفاده کنه معایب راه اندازی ان دشوار و پچیده می باشد .سخن اخر من روشی بهتون پیشنهاد میدم ادغام در زمان اجرا هستش چون خیلی دستمون باز تره و توسعه پذیری بهتره داره درسته پیچیدگی داره و دشواره راه اندازیش وقت زیادی باید صرف بشه نسبت به ادغام در زمان بیلد اما روش قابل اعتماد و خوبی هستش

بهینه نوشتن در ری اکت جی اس ( پارت اول)

Ali Razavi — Sun, 19 Feb 2023 11:47:08 +0330

مقدمه دغدغه این روزهای من درست نوشتن و صحیح نوشتن کدی هست که برای اپلیکیشن توسعه میدم بعد دیدم چه خوبه که در مورد همین موضوع یک مقاله بنویسم و از تجربیات خودم در این زمینه براتون بگم سعی شده داخل این مقاله تمامی مباحث رو پوشش بدم اما اگر دیدین یک مبحث گفته نشده برام داخل بخش کامنت ها کامنت بذارید که knowledge sharing داشته باشیم باهم .نکته این سری مقالات به عنوان بهینه نوشتن در استک های مختلف فرانت قراره هر یک ماه یک بار بهش بپردازیم که این ماه سراغ ری اکت رفتیم در ماه های اینده سعی میکنم در مورد Next , Nuxt , Vue هم مطلب بذاریم .قراره در مورد چی حرف بزنیم ؟انتخاب صحیح ساختار پروژه نام گذاری صحیح استفاده از فایل های static svgبهینه نوشتن در JSXاستفاده از Memorizing در کامپوننت هااستفاده از Lazy Loadingاستفاده از Static import و Dynamic importدر به کار گیری از State استاد شوید چطوری بهینه کنیم لیست های طولانی مون داخل ری اکت استفاده درست از انیمیشن ها در ری اکت فشرده سازی در زمان Buildانتخاب صحیح ساختار پروژه انتخاب یک ساختار مناسب برای استک هر پروژه ای از نظر من باعث برد اون پروژه میشه چرا چون اگر ساختار مناسبی برنامه نویس برای اپلیکیشن نچینه باعث بهم ریختگی داخل پروژه میشه و این باعث میشه خودش باعث یک گلوگاه بشه پس بهتره در وحله اول برای پروژه مون ساختار صحیح بچینیم . انواع ساختار بندی در پروژه های ری اکت نکته : این نوع از ساختار ها صرفا بر اساس تجربیات برنامه نویس های این حوزه به وجود آمده است پس به عنوان بهترین روش نیستن یکی از ساختارهای مرسوم داخل ری اکت همچین ساختاری هستش که شامل این دایرکتوری ها میشه که هر کدومش کار خاصی رو دنبال میکنه دایرکتوری api : ما داخل این دایرکتوری میایم api خودمون call میکنیم و response رو بر میگردونیم دایرکتوری assets : شامل فایل استاتیک مون شامل SVG هامون image هامون css هامون و ...دایرکتوری components : شامل کامپوننت های اپلیکیشن مون میشه که میتونه به روش atomic design پیش بریم یا organism design و .. بسته به شرایط این دایرکتوری میتونه شامل تغییراتی بشه داخلشدایرکتوری context : شامل Provider های برنامه مون میشه این دایرکتوری میتونه نام providers هم داشته باشه .دایرکتوری layout : شامل قسمت های اشتراکی ui مون میشه مثل فوتر منو و ...دایرکتوری pages : شامل صفحات اپلیکیشن مون میشه دایرکتوری reducer : شامل reducer های پروژه مون میشه که اگر از redux استفاده میکنید داخل برنامه این دایرکتوری به store تغییر نام پیدا میکنه دایرکتوری router : که شامل یک فایل index.ts یا index.js میشه و یک متغییر ارایه ای که روت هامون داخل این متغییر تعریف میکنیم سپس داخل root پروژه با یک حلقه روت های خودمون رو مشخص میکنیم .دایرکتوری services : شامل کانفینگ سرویس های که داخل پروژه مون استفاده میکنیم میشه نکته : دایرکتوری های دیگه وجود دارند بسته به سطح پروژه به معماری پروژمون اضافه میشه مثل i18n برای چند زبانه کردن یا دایرکتوری utility که بهمون کمک میکنه یک سری helper متد تعریف کنیم یا دایرکتوری hooks که شامل کاستوم هوک هامون میشه . یکی دیگه از روش های که خیلی باب هم هست داخل معماری ری اکت معماری بر پایه ماژول هستش که میاد یک دایرکتوری به اسم views قرار میدیم و هر بخش از پروژه داخل یک دایرکتوری قرار میدیم قسمت های هر بخش داخل دایرکتوری ماژول خودش قرار میدیم نکته در معماری بالا دو بخش داریم لوکال ماژول و share ماژول نام گذاری صحیح :احتمالا داخل پروژه های مختلف داشتید با یک سری نام گذاری اشنا شدین اما واقعا کدوم جز بهترین روش میتونه باشه ؟راستش هنوز این مورد هنوز قانونی براش وجود نیومده داخل ری اکت و هر برنامه نویسی میتونه با هر ساختار و نام گذاری مربوطه خودش پیش بره اما بهتره از این قوانین نام گذاری استفاده کنیم . اسم دایرکتوری به صورت role-permissions باشد به صورت حروف کوچیک و جداکننده بین دو کلمه اسم فایل به صورت Camel Case باشد و اسم کامپوننت ها به همین شکل . برای دایرکتوری های خودمون از اسم جمع استفاده کنیم مثلا pages , forms ,etc ...از path clean استفاده کنیم یعنی چی این موضوع ؟ یعنی اینکه اگر همچین چیزی داشتیم . @components/atom/card/cardنیایم اینطور import کنیم بیایم به این شکل یک فایل به اسم index.js or index.ts درست کنیم و داخل این فایل مون به این شکل export بگیریم و فایل index فراخوانی کنیم تا path clean داشته باشیم . نکته : اگر به این شکل import export میگیرید حجم کمتری هم blunder شما خواهد داشت . احتمالا داخل اپلیکیشن خودتون از پکیج های ایکون استفاده میکنید یا uikit های روی پروژه تون نصب شده دارید و ازش استفاده میکنید . و توصیه میشه برای استفاده از هر کدوم بخش های مختلف که لازم دارید به این شکل استفاده کنید . نحوه درست از استفاده از فایل static svg : خیلی ها رو دیدم داخل فایل خودشون میاد کل سورس svg خودشون رو میذارن داخل کدشون ایراد کار اینجاست .فایلی که دارید توسعه میدین عملا شلوغ میشه تاثیر مستقیمی روی DOM SIZE شما خواهد داشت نمیتوانید عملیات کشینگ روی فایل استاتیک خودتون پیاده سازی کنید و همچنین مدیریت لازمه هم نداریم روی فایل svg مدنظرمون پس بهتره که هر کدوم از فایل svg مون رو به یک کامپوننت تبدیل کنیم و سپس داخل جای مدنظرمون call کنیم . بهینه نوشتن در JSX : برای استفاده صحیح از props ها داخل JSX از Destructuring Props استفاده کنید بهتره به جای div از fragment استفاده کنید .داخل متد render تابع تعریف نکنید . برای نمایش ندادن یک component از ternary operator استفاده کنید یا از && با css کامپوننت خودتون رو none نکنید از انیمیشن های css برای المان های خود استفاده کنید تا حد امکان یا از کتاب خانه های بهنیه مثل framer motion استفاده کنید از uuid برای key های منحصر به فردتون استفاده کنید یا از id منحصر به فرد از index در map زدن استفاده نکنید ( دلیل این موضوع بر میگرده به اینکه اگر چند تا ایدی شبیه هم داشته باشید داخل virtual dom خودتون باعث میشه نفهمه کجا تغییر کرده و نتونه کامپوننت مدنظر re redner کنه استفاده از Memorizing در کامپوننت هافرض کنید داخل اپلیکیشن شما کلی کامپوننت وجود داره همه شون زیر دسته هم دیگه هستند و حالا کامپوننت پدر state or props تغییر میکنه :) خب تمام کامپوننت ها چه خودی چه نخودی چه بیخودی re render میشن مثلا کامپوننت تایپوگرافی شما چرا باید دوباره re render بشه ؟ یا دکمه های شما یا یک کامپوننتی که اصلا side effect داخلش رخ نداده memo به شما کمک میکنه که کامپوننت های خودتون رو Memorizing کنید هر موقعه یک تغییر که تاثیر داشت روی کامپوننت شما این کامپوننت re render بشه . در پایان این از پارت اول این بخش بود امیدوارم لذت برده باشید ازش لایک کامنت یادتون نره اشتراک گذاری هم فراموش نشه :)

GraphQl در یک نگاه

Ali Razavi — Mon, 30 Jan 2023 16:49:41 +0330

مقدمهبا عرض سلام خسته نباشید خدمت دوستان عزیز قراره داخل این مقاله یک نگاهی به تکنولوژی Graphql ساخته تیم محبوب فیس بوک بپردازیم . خب در وحله اول ببینم اصلا GraphQl چه مشکلی رو از ما کمتر میکنه پس در ادامه با من همراه باشید . اگر به تاریخچه تکامل ارتباط Api یک نگاهی بکنیم میبینم نام های اشنا به چشم ما میخوره SOAP گرفته تا REST و GRPC و در نهایت GRAPHQL که هر کدوم یک سری مشکلات داشتن و دیگری سعی در پوشش اونو داشته از سال ۲۰۱۵ بود که غول فیس بوک تصمیم گرفت برای اینکه از اطلاعات دیتا در شبکه خودش بکاهه و حجم کمتر کنه از Rest به graphql کوچ کنه . تکنولوژی GraphQl که بود چه کرد اگر تا به حال rest کار کرده باشید میبینید برای هر درخواست باید یک endpoint مشخص تعریف کرد برای مثال برای گرفتن اطلاعات یک کاربر باید به endpoint با متد get درخواست بزنید و اطلاعات کاربر بگیرید خب این وسط اکثرا براتون اتفاق افتاده که برای یک صفحه شاید مقادیر نام کاربری تاریخ تولد عکس و ... رو نیاز نداشتید ولی چون از سمت بک اند کل اطلاعات کاربر با تمامی مقادیر به شما داده می شد مجبور بودید این دیتا هم داشته باشید . ( خب پس اینجا حتما میگید چ خوب می شد یک تکنولوژی بود بهش میگفتی برای این صفحه این دیتا این دیتا رو میخام و دیتا لازمه رو بهمون میداد ) خب اگر به جمله اول من دقت کرده باشید میبینید که وسط پروژه هستید پروژه متوسط رو به بالا میبینید نزدیک ۳۰۰ تا endpoint تعریف کردید و حالا بگرد دنبال پرتغال فروش :) پس اینجا هم مشکل داریم تعداد endpoint زیاد یک مشکل دیگه که داریم سر موضوع اینه تا حالا شده احتمالا شما بخواین مثلا دیتا ها کاربرتون از دیتابیس مونگو بگیرید داده های پست و مقاله تون از PostgreSQL خب این وسط باید سه ساعت بشینید دیزاین پترن repository pattern رو پیاده سازی کنید یک کلاس Storage تعریف کنید بعد نوع اتصال رو مشخص کنید و Model تون از کلاس ارث ببره و کلی ماجراهای دیگه خب پس اینجا هم یک دردسر داشتیم .خب یک خبر خوشحال کننده تمامی این مشکلات رو graphql برطرف کرده و شما میتونید راحت از این ابزار استفاده کنید و این مشکلات از بین ببرید اینم بگم graphql اینقدر هم علیه سلام نیست داخل پروژه های بزرگ برای کش کردن دیتا مشکل میخوریم یا خیلی ها سر تو در تو شدن graph هاش گیج میشن و میگن سخته درک کردنش که برای این دو مشکل من راه حل دارم :)خب یکم دست به کد بشیم شرح موضوع : فرض کنید میخواهیم اطلاعات کاربرها رو بگیریم و همچنین اطلاعات پست های یک کاربر پس با من همراه باشید برای کار کردن با GQLمراحل نصب ( در نود جی اس گفته شده در فریم ورک Express که میتونید داخل تمامی زبان های کار میکنید از پکیج های که هست مربوط به GQL هست استفاده کنید )شما نیاز به دو تا پکیج دارید اولی express-graphql هستش که با دستور زیر میتونید نصبش کنید . npm i express-graphql --saveدومین پکیج با تعریف Schema ازش استفاده میکنیم graphql-tools هستش که به شکل زیر میتونید نصبش کنید . npm i @graphql-tools/schema --saveوقتی این دو تا مورد نصب کردید باید typedef های خودمون رو بنویسیم پس به شکل زیر عمل میکنیم . اولین مورد تعریف typeQuery هستش که الزامی هستش و به ما کمک میکنه Query های که از سمت GQL میخایم تعریف کنیم ( یک جوری همون چی میخایم از سرور میشه مثلا لیست کاربرها یا اینکه لیست پست ها و ...)خب همون طور در کد مشاهده میکنید اینجا سه تا Query تعریف کردم اولیش users که لیست کاربرها رو میگیره برامون دومی posts لیست پست ها رو میگیره سومی user که ایدی بهش میدیم یک کاربر برمیگردونه نکته : احتمالا به خودتون بگید چرا هر کدوم تایپ دارن این بحث ها GQL از تعریف تایپ استفاده میکنه یعنی میتونید برای هر مقادیرتون تایپ تعریف کنید به عنوان مثال برای برگشت لیست کاربران [User] اینجور میگیم که ارایه از تایپ User برامون برگشت داده میشه خب بریم سراغ تعریف تایپ User , Post خب همون طور داخل کد مشخص هستش ما اومدیم یک سری تایپ تعریف کردیم به عنوان مثال تایپ User شامل مقادیر id,username,email,name,posts خواهد بود .نکته بعدی : احتمالا برای خودتون سوال شده باشه چرا داخل تایپ User اومدیم posts قرار دادیم ما میتونیم به کمک GQL ارتباطات بین entity های خودمون برقرار کنیم :)کل چیزای نوشتیم رو باید داخل یک متغیر به اسم typeDefs قرار بدیم به این شکل . خب بریم برای تعریف Revolvers : به ما کمک میکنه وقتی Query users صدا زده شد مثلا دیتا چطوری برگشت داده بشن یا از چه Storage دیتا ها گرفته بشه یا اینکه ارتباطات که وجود داره رو مشخص کنیم و دیتاشونو بگیریم .پس داریم: دوباره مثل typeDefs ما به اسم اشنا میخوریم به اسم Query که میگیم وقتی Query users صدا زده شد کل دیتا users به من برگشت داده بشه . نکته میتونیم در اینجا گرفتن دیتا رو از هر model یا storage داریم بگیریم یک قسمت هم هست به اسم User میگیم داخل Query User یک Query به اسم posts هست که یک ایدی کاربر دریافت میکنه و فیلتر میکنیم دیتا پست رو براساس userId ثبت شده داخل ساختار داده posts و پس این چنین میتونیم ارتباط بین Query User و Post هم تعریف کنیم . سپس باید به کمک graphql-tools schema مدنظرمونو بسازیم . داخل پکیجش یک متد وجود داره به اسم makeExecutableSchema که مقدار typeDefs و resolvers بهش پاس میدیم تا schema ما ساخته بشه و بتونیم ازش استفاده کنیم سمت client چون که الان نمیخام بحث گرفتن دیتا سمت کلاینت داخل ری اکت یا ویو و ... توضیح بدم از GUI خود graphql استفاده میکنیم ایشالله در ادامه از سری از مقالات GQL در مورد قسمت فرانت توضیح خواهم داد .پس داخل express به کمک use یک endpoint تعریف میکنیم به اسم graphql/ که وقتی اونو صدا بزنیم یک GUI برامون باز میشه . به این شکل : که میتونیم دیتاهای لازم داریم به صورت Query بنویسیم و به صورت graph بهمون تحویل میده . الان من میخام کلیه اطلاعات کاربرهامو بگیرم + لیست پست های کاربر پس مینویسم به این شکل خب همون طور که دیدین من لیست کاربرهامو گرفتم اما اینجا گفتم id name email و از posts هم id title احتیاج دارم و خروجی من به این شکل خواهد بود . خب همون طور میبینید من دیتامو فیلتر کردم و چیزایی که میخاستمو گرفتم و دیتاهای اضافی رو نگرفتم و به این شکل میتونیم دیتاهای خودمون فیلتر سازی کنیم . بریم سراغ تعریف یک Mutation که میتونیم روی Query داریم عملیات Delete update create رو داشته باشیم .پس داخل متغیر typeDefs یک type دیگه به اسم Mutation مینویسم و سپس داخلش به این شکل به اصطلاح یک تابع بهش پاس میدیم و مقادیر ورودی رو مشخص میکنیم سپس چیزی که برمیگردونه رو مشخص میکنیم . و بعد داخل revolvers مون میایم یک Mutation تعریف میکنیم به این شکل یک تابع به هم اسم تابع که داخل typedefs تعریف کردیم مینویسیم و میگیم مقدار اول که rootValue که کارش نداریم پس ignore میکنیم سپس در مقدار دوم تابع مقادیر میگیریم ( چون من یک دیتا استاتیک داشتم و نمیخاستم زیاد درگیر دیتابیس نشم یک ارایه تعریف کردم و اومدم مقادیر push کردم به model که داشتم و دیتا ورودی رو برگشت دادم ) شما میتونیم داخل اینجا عملیات CRUD خودتون سمت model خودتون و دیتابیس تون داشته باشید . سپس داخل کلاینت خودمون میایم به این شکل دیتاهامون رو وارد میکنیم و مقادیر بازگشتی هم مشخص میکنیم . که اینجا به اسم تابع که داخل resolvers تعریف کردیم صدا میزنیم و مقادیر ورودی رو مشخص میکنیم و مقادیر بازگشتی هم مشخص میکنیم چی هارو میخایم خروجی به شکل تصویر بالاست نکته برای کش کردن دیتا من از پکیج apollo graphql استفاده میکنیم و همیشه نیازمو برطرف کرده و مشکل کشینگ دیتا رو راستش نداشتم تا به حال نکته بعدی : اینکه برای اینکه اکثرا یکی از عیب های که graphql داره رو میگن تودرتو شدن graph ها هستش راستش من اینو مزیت میدونم چرا چون شما بدون هیچ کدی میتونیم ارتباطات یک به یک و یک به چند خودتون رو درست کنید و تحویل به خروجی بدید و همچنین سرعت بالاتری هم نسبت به rest در result داره که خودش یک مزیت حساب میشه حرف اخر :من خودم حدود یک سال نیم هستش دارم از GQL استفاده میکنیم خیلی ام راضیم هم سمت فرانت هم بک کلا خوشم میاد ازش و ازش بدی تا به حال ندیدم اگر دوستان سوالی نظری چیزی داشتن میتونن زیر همین پست بپرسن پس لایک کامنت یادتون نره :) حمایت شما باعث دلگرمی من خواهد بود برای ادامه این سری از اموزش ها آموزش بعدی :) رو شما میتونید تعیین کنید که چی باشه .

Cypress E2E Test | تست به روش سایپرس پارت سوم

Ali Razavi — Sun, 29 Jan 2023 17:24:32 +0330

مقدمهخب امروز قراره در مورد یک سری assertion در cypress باهم گفت گو کنیم چند مورد تست بنویسیم و در اخر روش اجرای تست برروی سرور و CI CD رو میخام براتون بگم . تست نویسی ۱ - اولین تست که قراره بنویسیم باهم قراره وارد وب سایت گوگل بشیم و عبارت cypress رو تایپ کنه و در نهایت دکمه Enter بزنه تست مون و نتایج گوگل مشاهده کنیم . ( برای اجرای این تست به Selector Input وب سایت گوگل احتیاج داریم با inspect مرورگر نحوه Select کردن شو انتخاب کنید که بهترین روشش به صورت input[name='q'] هستش )خب همون طور قسمت قبل توضیح دادم برای تست مون یک توضیحات مینویسیم سپس میگیم وارد سایت گوگل بشیم و در ادامه برای گرفتن input گوگل به کمک Selector Css اقدام میکنیم و با تابع get المنت input میگیریم و به کمک تابع type کلمه cypress رو تایپ میکنیم سپس event enter رو صدا میزنیم ( نحوه تعریف event ها در cypress {} به این شکل می باشد . )۲ - دومین تست قراره وارد سایت گوگل بشیم ببینیم title document وب سایت گوگل ایا با این کلمه Google برابر است یا خیر ؟خب دوباره یک توضیح در مورد تست مون میدیم سپس به کمک تابع visit وارد سایت گوگل میشیم و به در ادامه به کمک assertion title چک میکنیم عنوان داکیومنت به کمک assertion should برابر با Google هست یا خیر . ( should دو تا ورودی میگه اولین ورودی بهش میگن chainer میتونه شامل chainer های مختلفی باشه که در این لینک میتونید لیست تمامی chainer رو ببینید . )اجرای تست در CI CD خب احتمالا برای کانفینگ کردن cypress در قسمت جایی که انتخابی محیط اجرای تست بود یک گزینه بهش برخوردید به اسم Electron که این گزینه به شما کمک میکنه تست های خودتون داخل CI CD اجرا کنید به صورت command line نکته باید cypress به صورت Global داخل سیستم شما نصب شده باشد :) پس دستور npm i -g cypress فراموش نشود . پس با دستور cypress run namefiletest.js میتونیم تست خودمون اجرا کنیم . وقتی اجرا کردیم با این چند بخش مواجه میشیم که هر کدوم براتون توضیح میدم . خب داخل این بخش دوباره ورژن cypress داریم . سپس نوشته با Browser الکترون نسخه ۱۰۶ به صورت headless اجرا شده ( یعنی به صورت کامند لاین ) ورژن نود زده برامون که من دارم از اخرین نسخه نود استفاده میکنم . سپس چون من با این دستور ران کردم تست مو cypress run session.js گفته یک تست با این نام پیدا شد . ومحل سرچ دایرکتوری هم برامون نوشته . خب داخل این قسمت دوباره توضیحاتی که گفتم خیلی مهمه رو داره برامون نشون میده که اگر پاس شده باشن با رنگ سبز اگر پاس نشده باشن با رنگ قرمز اگر هم اسکیپ شده باشند با رنگ سفید نمایش میده . بعد دوباره یک سری امار بهمون داده که میتونید ببینید خودتون . در قسمت اخر این بخش هم که مورد باحال هست در مورد snapshot ها که توضیح داده بودم که خیلی هم مهمه برامون یک ویدیو از روند کار گرفته که اگر خطایی چیزی خوردیم داخل CI CD میتونیم اون ویدیو رو ببینیم و مشکل رو جویا بشیم ادرس ذخیره ویدیو هم داخل پوشه خود cypress هستش که میتونید بعد از اتمام تست خودتون مشاهده فرمایید . نتیجه گیری خب اینم از پایان بخش سوم امیدوارم از این مطلب هم خوشتون امده باشه و با لایک و کامنت هاتون منو حمایت کنید :)

Cypress E2E Test | تست به روش سایپرس پارت دوم

Ali Razavi — Sun, 29 Jan 2023 04:14:05 +0330

مقدمه خب داخل قسمت قبلی که در اینجا میتونید مشاهده فرمایید یکم در مورد مزایا معایب و اصن چرا باید تست بنویسیم صحبت کردیم داخل این مقاله قصد دارم یک سری کارها با cypress انجام بدیم پس با من همراه باشید .نصب Cypressبرای نصب Cypress در وحله اول باید داخل دایرکتوری مدنظرمون بشیم و دستور npm init -y بزنیم سپس با دستور npm i cypress --save-dev صبر میکنیم cypress نصب بشه . ( اینو بهتون بگم تا این لحظه که الان دارم این مقاله رو مینویسم برای نصب باید قندشکن وصل کنید ) وقتی نصب با موفقیت گذرونده شد با دستور npx میتونید cypress خودتون اجرا کنید .برای اولین دستور ورژن cypress میخایم ببینم چند نصب شده رو پروژه با دستور npx cypress -v میتونیم این کار انجام بدیم اشنایی با دایرکتوری Cypressدر این مرحله شما با زدن دستور npx cypress open میتونید یک تست های پیش فرض و از قبل نوشته شده توسط cypress اجرا کنید . وقتی این کامند رو وارد کردید یک فایل به وجود میاد به اسم cypress.json که داخل این فایل میتونیم یک سری کانفینگ ها قرار بدیم ( که در ادامه اموزش یک سری بهش خواهیم زد پس نگران نباشید . ) یک دایرکتوری داریم به cypress که بازش کنیم شامل چند تا دایرکتوری دیگه میشه که به ترتیب براتون توضیح میدم هر کدوم چکار میکنه . fixtures : داخل این دایرکتوری ما دیتاهای تست مون رو قرار میدیم مثل Email Name Password etc integration : داخل این دایرکتوری که مهم ترین دایرکتوری ما هم حساب میشه میتونیم تست های که مینویسیم داخل اینجا قرار بدیم تا GUI که خود Cypress داره بشناسه تست هامونو . ( یک خبر خوشحال کننده که cypress تست هاشو با زبان جاوا اسکریپت میتونیم بنویسیم )plugins : داخل قسمت معرفی Cypress گفتیم Cypress کامل نیست خودش اما به کمک پلاگین ها خودشو کامل کرده داخل این دایرکتوری میتونیم فایل های پلاگین خودمونو قرار بدیم و مورد استفاده قرار بدیم اونارو . support : داخل این دایرکتوری میتونیم یک سری کامند برای خودمون تعریف کنیم که کاستوم خودمون باشه بخش جذابیه :) و اکثرا نادیده میگیرن این بخش رو که قراره کلی باهم در مورد این بخش صحبت کنیم و یاد بگیریم نحوه اجرا Cypress همون طور که توضیح دادم ما برای اجرای Cypress به یک Runner احتیاج داریم که به کمک npx میتونیم ران کنیم تست هامونو به کمک دستور npx cypress open وقتی ران کردیم تست هامونو وارد GUI Cypress میشیم . اشنایی با GUI Cypress وقتی کامند npx cypress open رو زدین با این پنجره باید مواجه بشید . ( نکته من یک سری عدد با رنگ قرمز گذاشتم برای جاهای که نیاز بود طبق همون توضیحات رو خواهم داد . )استارت پروژه۱ - ورژن cypress که در حال حاضر داریم استفاده میکنیم نسخه ۱۲.۴.۱ هستش . ۲ - مارو به سایت مرجع ارجاع میده که یک سری داکیومنت خفن برامون اماده کرده . ۳ - وقتی روش کلیک کردیم کانفینگ استارت تست های E2E رو میتونیم فعال کنیم . ۴ - در اینجا تست های کامپوننت تست هامون میتونیم کانفینگ کنیم یک مسئله advance هستش که در اواسط سری از پارت ها تست بهش اشاره خواهیم کرد . یک نکته یک قسمت هست به اسم Login که میتونیم به داشبورد خود Cypress متصل بشیم که تا یک جای رایگانه اما از یک جایی به بعد پولی میشه البته نیازش هم نداریم ولی داشتنش خالی از لطف نیست .وقتی رو E2E تست کلیک کردیمخب در اینجا میتونیم محیط و مرورگر خودمون که تست ها روش اجرا بشه رو انتخاب میکنیم بسته به مرورگر های که نصب دارید رو سیستم این صفحه میتونه کاستوم بشه . فقط یک نکته Electron که اینجا میبینید میتونید باهاش تست های سمت command line بنوسید و با نود جی اس اونو اجرا کنید یک سری unit تست هایی که میخایم که وابسته به مرورگر نیستن رو داخل این محیط اجرا میکنیم .بعد از انتخاب محیط خودتون وارد این قسمت خواهید شد . ۲ - با زدن این گزینه میتونید یک سری تست بنویسید عملیات ساخت تست انتخاب اسم و ... رو به صورت GUI انجام میده زیاد گزینه به درد بخوری نیست :) ۳ - این قسمت شما میتونید بازم به پنل مدیریت Cypress وصل بشید . ۴- قسمت تنظیمات میتونید داخل این قسمت به یک سری اپشن Cypress ببینید که به صورت دیفالت صورت گرفته شده که میتونید در اینجا ویرایش شون کنید یا ببینیدشون ( البته همون طور قسمت اول مقاله توضیح دادم فایل cypress.config.js میتونید تنظیمات رو ویرایش حذف یا کم کنید . )۱ - این قسمت چون یکم توضیح مفصل و زیادی داشت اخر این قسمت اوردم واستون . در این قسمت که از قسمت سمت چپ ( Specs ) میتونید این قسمت بیارید تمامی تست های نوشتید قابل نمایشهکه میتونید هر کدوم تست های که دوست داشتید اجرا کنید و نتیجه رو ببینید ( به صورت پیش فرض یک سری مثال برامون زده خود cypress که حتما باهاش یکم بازی کنید تا باهاش اشنا بشید )قسمت سمت راست سه بخش وجود داره یکیش که آخرین ابدیت فایل تست تون هستش بعدش اخرین باری که این تست اجرا شده و در اخر گزینه خیلی جذابیه میانگین طول کشیدن زمان این تست بهتون میده که یک سری امار های باحال بهمون میده که خیلی کاربردیه . خب بریم یک تست بنویسیم :)یک تست ساده قراره بنویسیم قراره ادرس یک سایت رو بدیم و به کمک cypress تست اجرا کنید و اون سایت باز کنیم ببینیم چه نتیجه ای بهمون نمایش میده . وارد دایرکتوری cypress بشید و هر چی فایل هست داخلش پاک کنید :)و داخل دایرکتوری cypress یک دایرکتوری درست کنید به اسم E2E و درونش یک فایل به اسم session.cy.js درست کنید . و درونش این کد قرار بدهید . نمونه کد تست ساده که با میگه باید سایت مدنظرمون رو کمک cypress بیاریم بالا و status code 200 از سمت سرور بگیریم این یک نمونه کد ساده اولیه هستش که من خط به خط براتون توضیح میده . خط اول : ما باید به فایل تست خودمون بفهمونیم که میخایم از قوانین cypress پیروی کنیم پس یک reference type میدیم به cypressخط دوم : شاید براتون جالب باشه نوع نوشتاری شبیه تست Mocha هستش ( cypress یک روی Mocha اومده یک Wrapper تعریف کرده به خاطر همین میتونید از این نوع تست نویسی استفاده کنید و استاندارد هم هست . )یک توضیح برای تست مون مینویسیم که خوانا باشه که خوندش برامون راحت باشه ( بهتون میگم کجا به دردتون میخوره )بعد به کمک توابع که خود cypress بهمون میده که به اختصار به اسم cy می شناسیم میگیم تست ما باید بره سایت https://google.com بیاره بالا . میریم برای اجرا ?خب طبق دایرکتوری بندی که داشتیم میبنید که در این قسمت میتونیم تست هامونو ببنیم پس اسم دایرکتوری و اسم فایل هم مهم می باشد . بر روی session.cy.js کلیک کنید تا تست مدنظر اجرا بشه . خب میبنید تست با موفقیت اجرا شد و وب سایت گوگل برامون اومد بالا و داخل پنل دیباگ سمت چپ اگر ببینید میتونید اطلاعات خیلی جالبی کسب کنید ۱ - که به کجا برای نمایش وب سایت گوگل درخواست زده شده و نتایج چی بوده . ۲ - اگر یکم دقت کنید می بینید توضیح که در مورد اینکه تست مون چکار میکنه رو داخل اینجا میتونیم ببینیم پس مهمه چه توضیحی مینویسیم . ۳ - قسمت بالا سمت چپ اگر دقت کنید سه تا راهنما بهمون داده که نوشته یک دونه تست پاس شده با رنگ سبز اگر تست نا موفق بود قرمز می شد و اگر اسکیپ می شد گزینه اخر یک عدد بهش اضافه می شد . برای تست خودتون یک سایت که Down هستش رو بنویسید ببینید نتیجه چی بهتون میده و با این قسمت مقایسه اش کنید :) خب این سری از مقاله هم به پایان رسید منو با لایک و کامنت ها خودتون حمایت کنید و اینکه داخل این نظرسنجی داخل لینکدین هم شرکت کنید که در ادامه اموزش ها به صورت مقاله باشه یا ویدیویی :)

Cypress E2E Test | تست به روش سایپرس پارت اول

Ali Razavi — Sat, 14 Jan 2023 13:31:00 +0330

مقدمه :امروزه خیلی از اپلیکیشن های دنیا دارن از automation تست های که در دنیا تست وجود داره استفاده میکنند یکی از این automation تست ها cypress هستش در این مقاله قصد دارم که یکم در مورد این ابزار دوست داشتنی صحبت کنم یکم در مورد اینکه اصلا چی هست چکار میکنه چه مشکلی از من برنامه نویس کم میکنه و اینکه مزایاش نسبت به رقیب هاش براتون بگم و همچنین معایبش رو و در اخر یک سری منبع برای یادگیری بهتر براتون اورده ام که خیلی شیک مجلسی این ابزار دوست داشتنی رو یاد بگیرید :) و از کار باهاش لذت ببرید پس در ادامه با من همراه باشید .توضیح :فرض کنید یک سایت طراحی کردین و کد نویسی کردین و با دقت فراوان هم پیاده سازیش کردین ایا در همه حالت ها اپلیکیشن شما جوابگو هست ؟ ایا اگر یک روزی اپلیکیشن شما به روزانه بالای یک میلیون درخواست رسید چطور ؟ ایا خودتون به تنهایی میتونید تمام حالت ها رو تست کنید ؟ یا تا حالا شده بخاین یک قسمت یک جای اپلیکیشن خودتون درست کنید بعد اینکه درستش کردین بگید اخ جون تموم شد ولی یهووو میبینی کلی ایشو اومد سمت شما که اینور درست کردی یک جای دیگ برنامه مشکل خوردن و تازه این میشه اول دردسر و به خودتون میگید ای کاش اصن شروعش نمیکردین که همچین مشکلاتی پیش بیاد ! پس قطعا جواب نه هستش البته میدونم هیچ چیز غیرممکن نیست اما سر این موضوع شاید باید خیلی وقت زمان بذارید که زمان وقت برامون ارزش داره پس باید کاری کنیم در کمترین زمان ممکن بهترین خدمات ارائه بدیم به کاربرامون پس به یک رفیق نیاز داریم رفیق ما کیه ؟ ابزار های تست که وجود داره که یکیش cypress هستش .فکر کنم دیگه متوجه شده باشید چکار میکنه برامون این ابزار های تست و بودنشون چه نعمت و نبودنشون چه افتضاحهمزایا Cypress : رایگان بودن Cypress و همچنین داشتن یک داکیومنت قدرت مند درون سایت خودش و همچنین یک جامعه بسیار خفن و بروز ( البته برای ایرانیا باید یکم خاص تر باشه چون تیم لید این ابزار قدرت مند ایرانی هستش آقای امیر رستم زاده هستن که در اینجا میتونید لینکدین ایشون رو ببینید ) رقیب این ابزار selenium هستش که نسبت به این ابزار cypress سرعتش خیلی بیشتره و همچنین یکی از مزایا cypress نسبت به این ابزار در ارتباط بدون مستقیم این ابزار با مرورگر هستش شما میتونید با این ابزار هم End 2 End تست بنوسید هم Unit test یکی دیگه از ویژگی های بینظیر این ابزار Time Travel هستش که میتونید به کمک این ویژگی از تمام اکشن های که رخ میده Snapshot تهیه کنید خطایابی بسیار سریع و آسان به لطف ویژگی بالا که براتون گفتم شما میتونید هر موقعه خواستید به Snapshot قبل یا بعد برید و از تمام اتفاقات باخبر بشید ویژگی بعدی assertion های که در درون Cypress وجود داره بسیار زیاد و کار راه اندازن و برای هر موقعیت هر زمان شما میتونید ازشون استفاده کنید که یکی از مزایا های که نسبت به ابزار selenium داره اینه که میتونید Http Request های که وجود داره برای هر صفحه رو مدیریت کنید که این فوق العادس :)به صورت Real Time تغییرات قابل مشاهده هستن یعنی اینکه شما بعد از هر تغییر میتونید تغییر به صورت زنده مشاهده کنید بدون رفرش :)ویژگی بعدی Cypress Dashboard هستش که نسخه رایگانش میتونه تا حد بسیار خوبی کارتون راه بندازه ویژگی اخرش تهیه Snapshot و Video Recorder در زمان تست CI CD هستش که میتونید از نحوه اجرا و باگ های احتمالی دیدن فرمایید :) و مشکلات برطرف کنید معایب Cypress : نبودن Xpath که این برای افرادی که Selector Css راجبش نمیدونند یکم مشکلات ایجاد میکنه پس یکی از پیش نیاز استفاده از Cypress یادگیری Selector Css هستش ساپورت نکردن از مرورگر Safari که نمیتونید کد خودتون رو این مرورگر تست کنید و این جز معایب بسیار بدش میتونه باشه ذخیره نکردن Auth State در اپلیکیشن هستش این یعنی اینکه نمیتونه اطلاعات Login Info رو ذخیره کنه و شما مجبوریم برای هر تست اول لاگین کنید سپس کار خودتون صورت بدید .مورد آخر Cypress روی سرویس Claude خیلی بازی در میاره و سخته یکم integration کنید اپلیکیشن تون اما اگر همون سرویس روی Self Host پیاده سازی کنید این مشکل برطرف میشه اینم بگم به غیر مورد دومی بقیه موارد چون Cypress از قابلیت Plugin بهره میبره میتونید هندل کنید پس جای نگرانی نیست :)منابع برای یادگیری : اولین منبع سایت خود Cypress هستش که میتونید کلی اطلاعات کسب کنید ازش دومین منبع گیت هاب خود Cypress هستش که کلی مثال زده از نحوه چطوری تست نوشتن در تمامی حالت که میتونه یک برگه تقلب خوبی براتون باشه .یک مورد اینکه یک دونه مخزن هست داخل خود گیت هاب Cypress که یک اپلیکیشن واقعی رو تیم خود Cypress اورده بالا و تمامی حالت های ممکن رو تست نوشتن که میتونید از این لینک مشاهده فرمایید . سخن اخر امیدوارم از این مقاله خوشتون اومده باشه و کلی چیز میز خوب ازش یادگرفته باشید این مقاله پارت اول اشنایی با Cypress بود که در ادامه قصد اینو دارم به صورت مقاله یا ویدیو یک سری اموزش ها در مورد این ابزار هم داشته باشیم .نظر و لایک فراموش نشه :)

Validation in nodejs (اعتبار سنجی در نود جی اس)

Ali Razavi — Fri, 06 Jan 2023 17:58:39 +0330

اعتبار سنجی در محیط نود جی اس :خیلی مهمه که بتونی برنامه ای تولید کنید که بتونید ورودی های کاربر رو اعتبار سنجی بکنید . خیلی وقت ها باگ های برنامه های سمت وب سر این به وجود میاد مقدار ورودی کاربر اعتبار سنجی نشده وارد دیتابیس شده و اینگونه میشه یک سری باگ ها پیش میاد . در ادامه این مقاله قصد اینو دارم چند نوع روش اعتبارسنجی کتابخانه های مهم که در همین راستا توسعه داده شدند بهتون معرفی کنم این نکته هم بهتون بگم پکیج های معرفی شده در سه بخش توضیحات اولیه - آمار نصب - نحوه چگونگی استفاده مورد برسی قرار خواهند گرفت . پس در ادامه با من همراه باشید .Express validator :توضیحات اولیه :کمتر کسی هست نود جی اس کار کرده باشه با این پکیج کار نکرده باشه یا حداقل اسمشو نشنیده باشه . از نظر من بهترین پکیج اعتبارسنجی در نود جی اس همین پکیج هستش که در ادامه توضیح خواهم داد چرا ! پس پنیک نکنید :) امار ارقام : نمونه آماری از سایت مرجع npmخب همون طور دارید مشاهده می کنید با تعداد ۳۲۹ هزار تا دانلودی در هفته در npm و با ۶K تقریبا star در گیت هاب نشون میده پکیج بسیار قدرت مندی هستش هم اکنون ورژن ۶ این پکیج مورد استفاده قرار میگیره ۱۱۳ تا توسعه دهنده هم اکنون این پکیج نگهداری میکنند .و اینکه خوبی این پکیج حجم باندل سایز این پکیج هستش که تنها ۹۸ کیلوبایت حجم داره که این شگفت انگیزه نحوه استفاده :خب بریم سراغ نوشتن یک قطعه کد با این پکیج از نحوه نصب این پکیج ما شروع میکنیم . من از پکیج منیجر npm استفاده میکنم شما میتونید از هر نوع پکیج منیجر مدنظر خودتون استفاده کنید :) پس don't worry npm i express-validatorفرض کنید ما یک controller داریم به اسم authController میخایم اطلاعات یک کاربر بگیریم سپس عملیات ثبت نام اونو انجام بدیم ( اینو بگم داخل کل پکیج ها ما این موضوع رو در نظر میگیریم ) . میایم یک فایل درست میکنید داخل دایرکتوری validation من همیشه دوست دارید یک دایرکتوری جدا داشته باشم برای اینکار میایم یک فایل درست میکنیم به اسم auth.js سپس میایم مقادیری که از body میاد رو validation میکنیم .اینجا اومدیم از پکیج express-validator مقدار body رو گرفتیم یک تابع درست میکنیم به اسم register validation سپس میایم یک ارایه داخل این تابع بر میگردونیم و مقادیر body رو validation میکنیم همون طور در تصویر قابل مشاهده هستش اولین مقدار username هستش که اومدیم اول طول رشته رو اعتبار سنجی کردیم سپس اومدیم با تابع withMessage متن پیام اون validation رو نوشتیم سپس با تابع bail اومدیم گفتیم اگر این مورد مشکل داشت دیگه نره بقیشو چک کن متن پیام رو نشون ما بده به اصطلاح میایم یک ارور از هر فیلد نشون میدیم اینطوری یکم بهتره سپس اومدیم گفتیم isAlphanumeric یعنی میتونه این فیلد شامل اعداد و رشته ها باشه بعد اومدیم یک custom validation نوشتیم که همین موضوع برای من :) جذابه تو این پکیج که یکم این پکیج برای من حداقل متفاوت تر کرده طبق سیاست برنامه نمیخایم نام کاربری تکراری داشته باشیم پس میایم یک custom validation براش مینویسیم . و چون که میخایم وصل دیتابیس بشیم و یک کوئری داشته باشیم و این عملیات زمان بر هستش async میکنیم این حرکتو .خب بقیش هم مشخصه براتون توضیح خاصی نداره فقط نکته اینکه همه این موضوعات رو میتونید با جی اس خام انجام بدید و نیاز پکیج نداشته باشید اما به طور مثال فقط برای چک کردن اینکه ایمیل صحیح وارد شده یا نه باید regex بنویسید و همچنین درصد خطا بالاتر میبره که به ریسک این موضوع نمی ارزه :) نکته اینکه اعتبارسنجی موبایل ایران هم ساپورت میکنه این پکیج که این خودش چند لول کار بالاتر میبره :)نکته اینکه میتونید دیتا از سمت کاربر رو پاک سازی کنید یا به اصطلاح sanitize کنید .سپس برای اینکه داخل controller مون بتونیم ازش استفاده کنیم بهترین روش اینکه یک middleware بسازیم به اسم validation و به این شکل ارور ها رو نمایش بدیم .میایم از پکیج express-validator مقدار validation result میگیریم سپس میایم یک یک تابع بر اساس شرایط middleware express مینویسیم که اینجا میاد اروری های از سمت request میاد رو میگیره و هر کدوم رو مشخص میکنه برای کدوم قسمته که بعد هم میایم نمایش میدیم یا اینکه اگر اروری وجود نداشت به مرحله بعد میریم .و سپس داخل Route های که میخایم validation صورت بگیره به این شکل مورد استفاده قرارش میدیم . اینجا اول اومدیم تابع validation رو که خودمون نوشتیم رو صدا میزنیم سپس میایم از middleware checkvalidation استفاده میکنیم البته این به صورت لوکاله همون طور میدونید شما میتونید middleware ها رو به صورت گلوبال هم تعریف کنید که دیگه این دردسر ها نداشته باشید که پیشنهاد میکنم از این روش استفاده کنید بهترین روش هم هست .خب یک معجزه رخ داد :) شما الان میتونید با خیال راحت دیتا رو از سمت کاربر دریافت کنید و مورد استفاده قرار بدین . Joiتوضیحات اولیه :این پکیج خیلی محبوبه بین برنامه نویس نود جی اس و به شدت آمار دانلودی خوبیم هم داره که در ادامه بهش اشاره خواهم کرد اما راستش زیاد من ازش خوشم نمیاد :) ترجیحا بیشتر با express-validtor حال میکنم تا به Joi آمار ارقام : همون طور در قسمت توضیحات براتون گفتم میبنید که با ۵ میلیون دانلودی در هفته که خودش یک رکورد حساب میشه این پکیج به شدت محبوبیت بالایی داره و اینکه ورژن الان این پکیج ورژن ۱۷ هستش که باندل سایز این پکیج ۵۲۷ کیلوبایت هستش که یکم از نظر من زیاده این موضوع داخل گیت هاب چیزی حدود ۲۰K star داره و اینکه ۲۱۳ نفر توسعه دهنده داره که در حال حاضر وظیفه نگهداری این پکیج برعهده دارند .نحوه استفاده : بازم برمیگردیم به مسئله ثبت نام کاربر اینبار میخایم با پکیج Joi اعتبارسنجی مقادیر ورودی رو در دست بگیریم پس شروع میکنیم . اول با نحوه نصب JOI شروع میکنیم به این شکل میتونیم نصبش کنید . npm install joiمثل عادت قبلیمون یک دایرکتوری به اسم validation درست میکنیم و یک فایل به اسم user.js درست میکنیم و به این شکل یک Schema از دیتاهامون درست میکنیم برای اعتبارسنجی همون طور قابل مشاهده هست میتونید اقسام مختلف validation رو داشته باشید اما متاسفانه این پکیج validation موبایل رو نداره پس باید برای اون regex بنوسید :) که میتونید با یک سرچ ساده اموزش regex رو یاد بگیرید . سپس باید از این Schema استفاده کنید به این شکل :await checkUserSchema.validateAsync(req.body);میایم از پکیج JOI تابع validateAsync رو صدا میزنیم و همه ورودی req.body رو بهش پاس میدیم که اگر مشکل چیزی داشته باشه میره به بخش middleware اروری که اپلیکیشن پیاده سازیش کردیم که ارور بسیار تمیزی هم داره که خروجیش به این شکله Fastest Validator :توضیحات : همون طور از اسمش مشاهده میکنید خودشو با المان سرعت معرفی میکنه پس باید انتظار سرعت زیادی باید ازش داشته باشیم و همین طورم هست طبق تست های صورت گرفته شده که در تصویر زیر قابل مشاهده هست از کتابخانه ای که معرفی کردم تقریبا پرسرعت ترهه این یعنی performance بالا در بحث اعتبارسنجی این برای سمت بک اند به شدت قابل درک و مملوس هستش چون منابع کمتر هزینه کمتر . طبق تصویر نسبت به پکیج JOI پنجاه درصد سریع تره و این فوق العادس :) آمار و ارقام :نسبت به دو پکیج که معرفی کردیم در این پست این پکیج تعداد star کمتری در گیت هاب داره با ۲K و تعداد توسعه دهنده هاش هم ۳۳ نفر بیشتر نیستن که برای نگهداری و توسعه روی این پکیج کار میکنند . اما نگاه به ارقام کم گیت هابش نکنید :) استفاده ش کنید ازش لذت میبرید و در نهایت معتادش می شید . :)تعداد دانلود هفتگیش چیزی حدود ۵ هزارتاست داخل npm و اینکه ورژن ۱.۱۶ هم اکنون در دسترس هستش و باندل سایز این پکیج چیزی حدود ۳۷۶ کیلوبایت هستش که نسبت به JOI خیلی سبک تر هستش .روش نصب و استفاده npm i fastest-validatorخب اولین کاری میکنیم نصب این پکیج داخل پروژه مون هست . به این شکل با npm نصبش میکنیم . به این شکل ما میتونیم Schema خودمون ایجاد کنیم و مقادیر ورودی کاربر رو اعتبارسنجی کنیم متد compile دو تا خروجی داره یا true بر میگردونه این به این معنی هستش که درست اعتبارسنجی شده و مقادیر ورودی مشکلی ندارند بنا بر قانونی با تصویب کردیم یا ارایه از ارور ها رو بر میگردونه . و این پکیج میتونه تمامی ورودی های موجود مورد اعتبارسنجی قرار بدهد این یعنی دست برنامه نویس به شدت بازهه بتونه هر کاری میخاد انجام بده تا برنامه شو بدون باگ توسعه بدهد . توضیحات بیشتر این پکیج در این لینک داکیومنت خود پکیج مذکور میتونید مشاهده فرمایید .جمع بندی پایانی صرفا این مقاله جهت اشنایی شما با این سه پکیج بوده که میتونید با خوندن داکیومنت هر کدوم از پکیج های نام برده در این مقاله به اپشن های بهتری دست پیدا کنید تا ux بهتری به کاربرتون بدید و اینکه امنیت بیشتری به برنامه خودتون .و در اخر :این مقاله از سری مقالات هر جمعه من خواهد بود که در مورد تکنولوژی مختلف قراره کلی حرف بزنیم گپ بزنیم نظرات شما باعث دل گرمی من خواهد شد برای تولید محتوای بهتر و باکیفیت تر پس نظر و انتقادی داشتید برام کامنت کنید :) سوالی داشتید بپرسید

closure function در جاوا اسکریپت

Ali Razavi — Fri, 10 Sep 2021 19:48:13 +0430

مقدمه : خوب دوستان عزیز ? بعد از مدت ها دوری دوباره اومدم با یک مفهوم خفن ( که داخل اکثر زبان های برنامه نویسی وجود داره ) که خیلی ها نمیدونید چیه و به چه کار میاد اونم چیزی نیست جز closure function این بار داخل جاوا اسکریپت میخایم بررسیش کنیم . پس بزن بریم ?احتمالا که نه حتما شما با توابع اشنا هستید میدونید توابع یک سری ورودی میگیره یک پردازشی روی ورودی ها انجام میدن که با صدا زدن اسم تابع این پردازش انجام می شن که میتونیم ما از اون پردازش داخل برنامه مون استفاده بکنیم . اما حالا جریان closure function چیه ؟ closure function چیست ؟فرض کنید با دانشی که الان داریم ( یعنی اینکه closure function نمیدونیم چیه ) این فرضیه رو میخایم انجام بدیم که یک عدد بدیم به تابع مون و همون تابع یک تابع دیگه رو صدا بزنه و یک عدد دیگه بگیره و کار تابع دومی این باشه عدد اولی رو با دومی جمع کنه ؟ ? وات د هل علی چی میگی تو ؟؟ مگه داریم ؟! ?آره داریم همچین چیزی با closure function میشه انجامش داد پس بریم سراغ کد ? تا مملوس تر براتون بشه جریان خوب ما اومدیم اینجا یک تابع تعریف کردیم به اسم getAdder که یک ورودی میگیره برامون بعد اومدیم داخل دل تابع getAdder یک تابع به اسم sum تعریف کردیم و اونو return کردیم و داخل بدنه sum اومدیم یک عدد ورودی گرفتیم که میاد اون عدد از getAdder گرفتیمو با عدد که داخل تابع sum گرفتیم جمع کردیم و عملیات return کردیم .موقعه استفاده هم باید اول تابع getAdder رو صدا بزنیم و برای استفاده از تابع دوم باید اونو داخل یک متغیر قرار بدیم سپس متغیر دوم sumFunction رو به صورت تابع باید صدا بزنیم و ورودی رو بهش پاس بدیم به این عملیات بالا که داخل یک تابع تابع دیگه ایی رو بر میگردونیم بهش میگن closure function استفاده از closure function رو میتونید داخل useEffect داخل ری اکت ببنید موقعه که میخاید cleanup کنید داخل useEffect مقادیر رو چون ما میایم داخل یک تابع یک تابع دیگه رو return میکنیم . سخن پایانی لایک ? کامنت ? یادتون نره اگر خوشتون اومد از مطلب ?

کیوردهای self و static و مفهوم Late Static Binding در PHP

Ali Razavi — Wed, 03 Mar 2021 10:49:22 +0330

امروز اومدم واستون مفهوم این دو تا رو توضیح بدم واستون در زبان PHP که یکی از زبان های محبوب منه .واسه هر کسی میخاد داخل شی گرایی قوی بشه باید با این دو تا مفهوم اشنا بشه و یکی از مزیت های OOP میتونیم اسمشو بذارید خب بریم سر اصل مطلب Late Static Binding چیستپس باید بریم باز سراغ کد ?class Shape { public function getNameClass() { echo self::class; } } class Circle extends Shape{ } class Square extends Shape{ } $c=new Circle(); $s=new Square(); $shape=new Shape(); $shape->getNameClass(); $s->getNameClass(); $c->getNameClass();من یک کلاس درست کردم به اسم Shape و یک متد تعریف کردم به اسم getNameClass که وظیفه اش اینه که بیاد اسم کلاس رو برگردونه کلاس Shape پدر Circle و Square هستش وقتی ما از Circle و Square شی میسازیم چون که self به کلاس اشاره دارد . اسم کلاس جایی رو میگه که داخلش self::class نوشتیم رو بهمون میده پس انتظارمون غلطه چون ما میخاستیم اسم کلاس Square و Circle بهمون بده خب پس چکار کنیم ؟?همون طور احتمالا حدس زده باشید باید از keyword static استفاده کنیم چرا چون که keyword static میاد چک میکنه Object که درست کردیم از کلاس میبینه کلاسی که اون Object ازش صدا زدیم کیه و به اون اشاره داره نه جایی که تعریفش کردیم .پس میایم کد بالا رو اصلاح میکنیم ? class Shape { public function getNameClass() { echo static::class; } } class Circle extends Shape{ } class Square extends Shape{ } $c=new Circle(); $s=new Square(); $shape=new Shape(); $shape->getNameClass(); $s->getNameClass(); $c->getNameClass();الان خروجی که میخایم بهمون میده یعنی متد getClassName میاد و اسم اون class رو بر میگردونه که ازش Object ساختیم اینم مفهموم رو بهش میگن :) Late Static Binding از لحاظ کامپایلری این مفهموم میاد یک تاخیری میندازه تو روند اجرا و صبر میکنه تا اینکه ببینه کدوم Object از کدوم کلاس صدا زده شده تا اسم اون کلاس رو بهمون برگردونه .امیدوارم از این مطلب خوشتون اومده باشه ?

typescript چطوری باید استفاده کرد ؟ و چرا باید استفاده کرد ؟

Ali Razavi — Tue, 16 Jul 2019 15:02:34 +0430

خب در مقاله قبلی در مورد تعریف typescript باهاتون حرف زدم و مفهوم تعریف این تکنولوژی رو واستون توضیح دادم در این مقاله قصد دارم ! در وحله اول چرا باید از typescript استفاده کنیم و در وحله دوم طریقه نصب این تکنولوژی خواهم بود !چرا باید از typescript استفاده کرد ؟این سوالی هستش که حتما ذهن شما رو درگیر کرده با خودش دلیل استفاده ما از تایپ اسکریپت به چند دلیل هستش این دلایل عبارت از :تایپ اسکریپت اولین بار توسط فریم ورک انگولار 2 مورد حمایت قرار گرفت و انگولار 2 از syntax این تکنولوژی استفاده کرد و کسانی که انگولار کار میکردن مجبور بودن این تکنولوژی رو یاد بگیرن و بازم مجبورن یاد بگیرن چرا چون انگولار 8 هم از این تکنولوژی استفاده میکنه !دلیل بعدی بالا بردن خوانایی کد برنامه نویس هستش که شما توسط تایپ اسکریپت میتونید کد های خودتون رو ماژولار کنید و تمیز کد بزنید در جاوا اسکریپتدلیل بعدی میتونم نام ببرم امن سازی کد های جاوا اسکریپتمون با استفاده از تایپ اسکریپت هستش چرا چون این تکنولوژی کامپایلری هستش و بیش از اینکه کد های شما در زبان اجرا به خطا بخورن در زمان کامپایل از شما ایراد گرفته میشه و برای رفعش میتونید به راحتی به کامپایلر تایپ اسکریپت ایمان داشته باشید و ارور خودتون رو رفع کنید دلیل بعدی که میتونم نام ببرم تبدیل کد ها تایپ اسکریپتیمون به جاوا اسکریپت ورژن 5 هستش که امروزه تمامی مرورگر ها از قابلیت ES6 پشتیبانی نمیکنن و حتما بهش بر خوردید که یک کد ES6 نوشتید و به ارور برخوردید البته اگر از babel استفاده نکرده باشید ! دلیل بعدی کامپایل کردن کد هامون به محیط سیستم عامل مون بستگی ندارد چه ویندوز چ مک و چه لینوکس به راحتی کد هامون کامپایل میشندلیل بعدی هم که من عاشق این زبان ها و فریم ورک ها هستم متن باز بودن یا رایگان بودن این ابزار هستش طریقه نصب typescript و استفاده از آن در پروژه هامون :برای نصب تایپ اسکریپت باید از ابزار قدرت مند Node js استفاده کنیم پس وارد وب سایت نود جی اس میشویم و ابزار node رو دانلود میکنیم همراه با node js یک ابزار قدرمت مند دیگه به نام npm هم برامون نصب میشه که یک ابزار package manager هستش پس از نصب node js وارد ترمینال خودتون بشید و دستور npm -v رو بزنید باید ورژن نصب شده npm رو واستون باید نمایش بده اگر درست نصب کرده باشید node js رو واسه فهمیدن ورژن نود جی اس هم باید دستور زیر رو بزنید در ترمینال خودتون :node -v سپس ورژن نود جی اس رو باید بهتون نشون بده اگر نشون داد یعنی به درستی نود جی اس نصب شده ! و میتونید بقیه این آموزش رو ادامه بدیم !وارد وب سایت تایپ اسکریپت بشید که یک مرجعه کامل در خصوص یادگیری این تکنولوژی می باشد برای نصب این تکنولوژی باید دستور زیر را در ترمینال خود بزنید npm install -g typescript بعد از پر شدن progress bar دستور زیر را وارد کنید :tsc باید ورژن نصب شده تایپ اسکریپت رو بهتون بده اگر بهتون ورژن رو داد یعنی به درستی نصب شده !طریقه کامپایل کردن کد های تایپ اسکریپت به جاوا اسکریپت:من همیشه عادت دارم یک دایرکتوری ( فولدر ) در Desktop خودم ایجاد میکنم به اسم typescript با استفاده از ترمینال خودم وارد این دایرکتوری میشم :با استفاده از ادیتور vs code پروژه خودمو باز میکنم و یک فایل با پسوند .ts میسازم پسوند فایل های typescript .ts هستش !داخل فایل typescript.ts کد زیر رو مینویسم :توجه هنوز وارد مبحث اصلی نشدیم پس زیاد کد های زیر رو جدی نگیرید فعلا و فقط هدف ما از این نوشتن این کد طریقه کامپایل کردن کد های تایپ اسکریپت به جاوا اسکریپت هستش :function getName(firstName:string) { return firstName; } let firstName="Ali"; console.log(firstName);سپس در ترمینال کد زیر رو وارد کنید :tsc fileName.tsاگر خطایی رخ نداد در زمان کامپایل کدتون یک فایل با هم نام با اسم فایل تایپ اسکریپتون درست میشه با پسوند .js که میتونید از این فایل در پروزه هاتون استفاده بکنیدامیدوارم این مقاله مفید بوده باشه واسه شما خوش حال میشم حمایتم کنید موفق باشید !

typescript چیست ؟

Ali Razavi — Tue, 16 Jul 2019 06:08:35 +0430

با عرض سلام امروز میخام در مورد typescript باهاتون حرف بزنم :دوستان عزیز شاید براتون عجیب باشه جاوا اسکریپت کد بزنید اما چیزهایی مثل تعریف interface nampespace و ... وجود نداشته باشه اگر ES5 کد بزنید که چیزی به اسم class هم نخواهیم داشت عملا با ساختار ذهنی ما در مورد زبان برنامه نویسی تداخل داره و این میتونه از جاوا اسکریپت زده بشیم و بگید به معنای واقعی بیخیالش ! برای من اینطور بوده :)من جاوا اسکریپت مثل یک بچه ایی میبینم به تنهایی حرف زدن بلده راه رفتن بلده اما ازش هیچ کاری بر نمیاد ES6 اومده بهش خوندن نوشتن یاد داده توانایی بهش اضافه کرده و typescript اومده به بچه یک بال داده گفته پرواز کن در تصویر زیر میتونید این مسئله رو به وضوح احساس کنید در مورد تصویر و عبارات نوشته شده در تصویر در ادامه اموزش حرف خواهیم زد !پس typescript یک ابزار عالی میتونه برای ما باشه فکر کنم الان دیگه به جواب عنوان این پست رسیده باشیم که :تایپ اسکریپت (typescript) چیست ؟ تایپ اسکریپت یک ابزار یا فریم ورکی هستش که کار رو برای برنامه نویس ها اسون تر میکنه و اینکه درک کد ها رو برای برنامه نویس ها اسون تر میکنه و خروجی که در نهایت به ما میدهد جاوا اسکریپت بسیار ایزوله هستش و فکر مارو فقط فقط به توسعه دادن برنامه خودمون به سادگی بدون پیچیدگی سوق میده و ما به اصطلاح زبان جاوا اسکریپت رو با typescript توسعه دادیم در ادامه این مجموعه دوست دارم در مورد typescript بیشتر توضیح بدم براتون پس با من همراه باشید موفق باشید !