نوشته های Mahdi Robatjazi

چند تا از مفاهیم فرانت به زبان ساده (قسمت اول)

Mahdi Robatjazi — Sun, 08 Sep 2024 21:52:43 +0330

CSR Client Side Renderingواژه CSR به معنای Rendering اپلیکیشن تحت وب توسط مرورگر و جاوا اسکریپت، این عملیات بعد از دانلود اپلیکیشن شامل فایل های (html، css، js) ، توسط مرورگر و به کارگیری این فایل ها برای پرکردن وب پیج ها استفاده می شود.مهم ترین لایبرری ها برای ساخت کلاینت ساید اپلیکیشن ها React, Vue, Angular است.مهم ترین مزایای اپلیکیشن های CSRاستفاده راحت و مستقیم از Api های مرورگر.سرعت توسعه بالا ، ساخت و نگه داری راحت تر نسبت به تکنولوژی SSR.تجربه کاربری قوی نسبت به تکنولوژی های گذشته (یکی از دلایل آن وجود HMR در تکنولوژی csr است).مهم ترین معایب اپلیکیشن های CSRاپ های CSR نسبت به SSR یا تکنولوژی های گذشته ، Load Time بالاتری دارند این موضوع برای کاربران با اینترنت ضعیف تر بیشتر حس می شود همچنین زمانی که محتوا برای لود کامل نیاز به زمان دارد.اپ های CSR از مزیت SEO بی بهره یا کم بهره هستند، به دلیل نداشتن سورس کد html مناسب برای کرالر های سرچ انجین ها قابل ردیابی و ایندکسینگ نیستند و از قابلیت SEO برای محتوای سایت بی بهره می مانند.به دلیل بارگیری ناهمزمان محتوای جاوااسکریپت در مرورگر (مثلا به دلیل سرعت اینترنت کند) امکان مشاهده صفحه بدون محتوا در CSR وجود دارد.نحوه کار وب سایت CSR به صورت خلاصهSSR Server Side Renderingشما میتوانید در نظر بگیرید که در اپلیکشن های SSR عملیات Rendering در سمت سرور اتفاق می افتد و در زمان درخواست صفحات توسط مرورگر به ازای هر صفحه html آماده شده به سمت مرورگر ارسال میشود و به صورت آنی در صفحه نمایش داده میشود به خاطر اینکه این فایل ها نیازی به Rendering ندارند و آماده Paint شدن در صفحه هستند و سرعت دریافت و نمایش صفحات وب پیج نسبت به CSR بالاتر است به دلایل مختلف یکی اینکه شما مجبور به دریافت فایل های زیادی از سرورها نیستید به جایش html های آماده شده، دریافت میکنید دیگر اینکه این فایل های نیازی به Rendering توسط مرورگر ندارند. البته جزئیات دیگری هم وجود دارد ولی اصل مطلب همین بود.حالا مزیت های SSR نسبت به تکنولوژی CSR شما Load Time سریع تری داریددر SSR شما SEO بهتری دارید زیرا محتوای html دریافتی از سرور ها کاملا قابلیت ردیابی و خوانش توسط کرالر های موتور های جستجو را دارند.امنیت بالاتر در اپ های SSR ، زیرا رندر شدن html توسط سرور ریسک مشکلات امنیتی را کاهش میدهد، این به دلیل این است که SSR منطق اپلیکیشن را در سمت کلاینت اجرا نمیکند هسته پیاده سازی جزئیات برنامه در سمت سرور باقی میماند و این رویکرد به ما اجازه میدهد تا از دیتا های حساس کاربران محافظت کنیم.مشخصا تجربه کاربری بهتری نیز میدهد زیرا در حالت سرور ساید دیگر شاهد لودینگ اولیه برای دریافت فایل ها یا نمایش Skeleton برای دریافت محتوا ها (شامل عکس فیلم یا متن) نیستید.نهایتا این حالت مصرف دیتا کاربران را کاهش میدهد زیرا مرورگرها در پشت زمینه مدام درخواست دیتا نمیکنند.معایب SSRیکی از بزرگ ترین معایب SSR این است که هزینه های سرور شما به خاطر مصرف شدید منابع سرور بالا میرود. این امر به دلیل رندر مداوم اپلیکیشن و ارسال فایل ها پس درخواست اتفاق می افتد مخصوصا در زمان ترافیک بالای وب سرور و رندر صفحات پیچیده .ممکن است در موارد نادری به مشکل تاخیر در تعامل با وب سایت یا مسائل ریسپانسیو بخورید این امر زمانی رخ میدهد که عناصر تعاملی مانند فرم ها یا آپدیت های Real-Time هنوز نیاز دارند که مرورگر دیتاهارا از سرور دریافت و در کلاینت ساید اجرا کند و نتیجه آن مقدار TTI (Time To Interactive) پایین تر میشود. محصوصا زمانی که کد کلاینت ساید سنگین بوده و زمان بیشتری برای دریافت نیاز دارد.پیچیدگی توسعه اپلیکیشن SSR هم از دیگر معایب آن به شمار میرود.SSG Static Site Generationدرواقع یک تکنیک است که در بخش های خاصی از وب سایت به کار میرود مزیت اصلی این تکنیک سرعت بالاتر نسبت به حالت SSR است درست شنیدید میتوان از با استفاده از SSG از حالت SSR سریعتر هم شد اما باید بدانید که این حالت برای صفحات معمولا Static که معمولا آپدیت نمیشود یا به صورت هر چند وقت یک بار آپدیت میشود، استفاده میشود جریان از این قرار است که سیستمی که SSG را ساپورت می کند مانند Next Js Gatsby یا Nuxt در زمان گرفتن بیلد وب سایت صفحات html که به صورت SSG ساخته میشوند را میسازد و در بیلد پروژه ذخیره میشود در زمان درخواست این صفحات مثلا توسط مرورگر کاربران بدون عملیات رندر مجدد این صفحات، فایلهای html ذخیره شده ارسال میشود این یعنی در زمان درخواست کاربر هیچ پردازشی برای ساخت صفحه اتفاق نمی افتد و فایلی که در زمان بیلد ذخیره شده به کاربر ارسال میشود.این یعنی شما با بالاترین حد سرعت می توانید صفحات را به کاربران نمایش دهید اما معمولا این حالت وقتی کاربرد دارد که صفحه شما به صورت مداوم آپدیت نمیشود که این حالت می تواند در بعضی صفحات خاص کاربردی باشد.ISR Incremental Static Regenerationحال میرسیم به تکنیک آخر یعنی ISR که مفهوم آن در نسخه 14 Next js معرفی شده و بسیار کارآمد به نظر می آید.به زبان ساده شما میتوانید ترکیبی از SSR و SSG را برای ساخت و رندر صفحات خود پیاده سازی کنید.این یعنی صفحات استاتیک شما که با استفاده از تکنولوژی SSG ساخته شده اند با یک مکانیزم داخلی که در nextjs پیاده شده است به صورت خودکار با زمان داده شده در سرور آپدیت شوند.در پایین نمونه کدهای Data Fetching در این سیستم ها را با فریم ورک nextjs 14 میبینیماین یک نمونه ساده دریافت دیتا در ری اکت است : حالت CSRاین مثال برای Data Fetching در حالت استفاده از SSR لازم به ذکر است که nextjs در سرور کامپوننت ها fetch api را Customize کرده و قابلیت های بیشتری به آن اضافه کرده استدر مثال بعدی به Data Fetching در سیستم SSG می پردازیمدر مثال بعدی به Data Fetching در سیستم ISR می پردازیماگر این مقاله برای شما مفید بود لطفا لایک کنید 👍اگر نظر پیشنهاد یا سوالی داشتید خوشحال میشم تو کامنت ها مطرح کنید🙏

آموزش Utility Type ها در Typescript

Mahdi Robatjazi — Sun, 01 Sep 2024 17:33:26 +0330

برای تسهیل کار با تایپ ها در تایپ اسکریپت امکانات ویژه ای وجود دارد که تایپ اسکریپت آن را utility type مینامد.شما ممکن است توسعه دهنده سطح مبتدی باشید یا قبلا با تایپ ها کار نکرده باشید و سری به پروژه های ناشناخته گیت هاب بزنید یا در شرکتی که استخدام هستید نگاهی به کد های آن بیندازید و متوجه نشوید معنای این موارد چیست و چرا تایپ ها را درون این ها قرار میدهند مثلا:PartialRequiredReadonlyRecordPickOmitExcludeExtractاین موارد و حتی بیشتر از این ها در این لینک توضیح داده شده اند، اما من سعی دارم مهم ترین utility type ها را که در بالا ذکر کردم با بیانی ساده و قابل فهم در این مقاله توضیح دهم، با فهمیدن utility type ها تایپ اسکریپت لذت بخش تر میشود و آسان تر به نظر میرسد بی وقفه به سراغ اصل مطلب میرویم :می دانیم که دو راه اصلی برای تعیین تایپ وجود دارد: Interface , Typeدر چند مورد این دو با هم تفاوت و شباهت دارند به دلیل اینکه این مقاله درمورد این نیست به صورت خلاصه از آن رد میشویم ولی میتوانید در مورد این هم تحقیق کنید:1. هر دو را می توان برای توصیف شکل یک شی یا یک امضای تابع استفاده کرد. اما سینتکس متفاوت است2. معمولا اینترفیس برای تعریف شکل یک شئ یا فانکشن نوشته می شود اما در تایپ شما میتوانید به صورت primitive یا tuple یا union هم از آن استفاده کرد پس گستره استفاده بالایی دارد3. نحوه Extend شدن این دو متفاوت است اما می توانند هم دیگر را Extend کنند4. نحوه implement شدن هر کدام برای کلاس ها شبیه هم هستند5. برخلاف تایپ ها ، اینترفیس ها میتوانند چندین بار تعریف شوند و به طور جالبی با هر بار تعریف شدن با یکدیگر مرج میشوند اگر شما هم موارد دیگری میدانستید داخل کامنت ها ذکر کنید من این مقاله را آپدیت میکنمحالا بریم سراغ اصل مطلب utility type ها با کمی تمرین میتوانید به خوبی به تایپ ها و نحوه کار با آنها مسلط شوید: Partialتمام تایپ و پراپرتی های آن را به صورت Optional در نظر میگیرد ، مثلا به این شکل:به این مثال دقت کنید:شما با این روش میتوانید در بعضی موارد مشکل خود را حل کنید مثلا زمان دریافت پارامتر های ورودی یک فانکشن یا وقتی که میخواهید آبجکت خود را از یک تایپ بنویسید اما همه ی ورودی های تایپ را احتیاج نداریدRequiredبرعکس مثال بالا یعنی پارشیال، Required تمام فیلد ها به صورت اجباری در نظر میگیرد حتی فیلد هایی که به صورت دستی اختیاری تعریف شده اند در مثال پایین فانکشن تعریف شده به ران تایم ارور میخورد زیرا تمام الزامات آن به عنوان آرگومان ارسال نشدهReadonlyدر زبان جاوااسکریپت کلمه کلیدی const باعث ایجاد یک ثابت میشود و شما دیگر نمیتوانید مقدار دیگری را به این ثابت کنید اما در رفرنس تایپ ها یا مثلا حالت آبجکت این متفاوت است شما میتوانید مقدار داخلی آبجکت را تغییر دهید در utility type به نام Readonly شما میتوانید جلوی این مسئله را بگیرید به طوری که مقادیر داخل آبجکت تغییر نکندRecordاین مورد یک مقدار تمرین بیشتری میخواهدزمانی که شما یک دیتا تجمیع شده دارید ومی خواهید به ازای key , value به آن تایپ دهید می توان از رکورد استفاده کنید بهترین مثالی که از این تایپ پیدا کردم مثال خود سایت تایپ اسکریپت بود در مثال بالا ما با آبجکتی از آبجت ها طرف هستیم و میخواهیم به آن تایپ بدهیم، تمام کلیدهای آبجکت را در یک union type به نام CatName ذخیره شده است و یک اینترفیس برای value این مثال به نام CatInfo تعبیه شده است و برای تایپ دهی به دیتا های تجمیع شده از Record Utility Type استفاده شده استPickیک utility ساده است ، زمانی که شما یک تایپ داری و میخواهید تایپ جدیدی بسازید که بعضی از تایپ های اول را به اصطلاح pick کنید. ساده وکاربردیOmitاین یکی تقریبا می توان گفت بر عکس قبلی است در اینجا شما تایپی را دارید و میخواهید تایپ جدیدی بسازید و میخواهید تمام موارد تایپ اول را داشته باشید به غیر از بعضی موارد خاص Exclude< UnionType, ExcludedMember >در این تایپ شما میخواهید از union type بعضی موارد را کم کنیدExtractدر این تایپ شما مواردی که احتیاج دارید را از یونیونق تایپ اول بیرون میکشید خوب به انتهای مقاله رسیدیم این 8 تا به نظر من مهم ترین موارد در utility type ها است که در پروژه های مختلف بیشتر به چشم میخورد برای مشاهده لیست کامل utitlity type ها به این لینک مراجعه کنیددر صورتی که این مقاله برای شما مفید بود 🙏🙏🙏 LIKE , SHARE, COMMENT, SUBSCRIBE🙏🙏🙏

توضیحی در مورد فانکشن reduce جاوااسکریپت. بخش اول

Mahdi Robatjazi — Sun, 17 Apr 2022 21:17:51 +0430

سلام مهدی رباط جزی هستم و قصد دارم در این مقاله مختصر با هم با Higher Order Function Reudce در جاوااسکریپت یه مقدار کار کنیم تا کمی با کار برد های فراوان این فانکشن قدرتمند آشنا شویم. این تابع بر روی آرایه ها اعمال میشود و توانایی هایی بسیار گسترده دارد ، البته باید اقرار کنم که در زمان یاد گیری ، درک و به کاربردن آن در کد ها یه مقدار بدقلق است اما بعد از یادگیری کار را بسیار ساده میکند "روش یادگیری فقط تمرین مستمر" خوب بریم سراغ یک مثال بسیار ساده برای به دست آوردن جمع اعضا آرایه :const myArray = [1,2,3,4,5,6] const sumArrayNumbers = ( accumulator , val ) =>{ console.log(" acc => " , accumulator) console.log(" val => " , val) return accumulator + val } const result = myArray.reduce(sumArrayNumbers) console.log(result) // result : 21 در این مثال فانکشن reduce توانست بدون هیچ احتیاجی به تعریف متغیری مثل let sum = 0 جمع مقادیر این آرایه را بدست آورد ، فانکشن sumArrayNumbers را داریم که معمولا به صورت callback نوشته میشود اما در این مثال ما به صورت فانکشن جدا نوشتیم.مقادیر ورودی آن یک انباشته کننده <> و یک مقدار جدید است <> اگر این کد را خودتان بنویسید و لاگ های درون فانکشن sumArrayNumbers را ببینید میتوانید متوجه نحوه کارکرد reduce شویدمیتوانید از سایت programiz.com برای تست استفاده کنیدهمانطور که میبینید reduce یک حلقه ایجاد میکند و جمع مقادیر را هر دفعه داخل انباشت کننده "accumulator" میریزد و دفعه بعد accumulator برابر جمع مقادیر قبلی خواهد بودمثال دوم : پیدا کردن بزرگ ترین مقدار یک آرایه اعداد ساده.const myArray = [ 25 , 27 , 13 , 44 , 51 , 16 const maximum = ( accumulator , val ) => { if ( val > accumulator ) { accumulator = val ; } return accumulator; } const result = myArray.reduce ( maximum ) console.log(result) همانطور که در مثال قبل دیدیم مقدار خروجی فانکشن پاس داده شده به reduce ، مقدار بعدی accumulator خواهد بود فقط اینبار یک شرط وجود دارد اگر accumulator کم تر از مقدار val بود مقدار جدید درون acc خواهد رفت در غیر این صورت acc برابر با مقدار قبلی خواهد بود نکته بعدی این است که reduce همانند فانکشن هایی مثل map یا filter همیشه آرایه برنمیگرداند و این یک نقطه قوت برای این متد قدرتمند است .مثال پیدا کردن بزرگترین مقدار یک آرایهمثال سوم : پیدا کردن کوچک ترین مقدار یک آرایه ای از اعداد این بار با استفاده از callbackconst myArray = [ 25 , 27 , 13 , 44 , 51 , 16] ; const result = myArray.reduce ( ( accumulator , val ) => { if ( val < accumulator ) { accumulator = val ; } return accumulator; } ) console.log(result)این مثال بسیار شبیه به مثال دوم است اما این بار به دنبال کوچک ترین عدد میگردد و با استفاده از کال بک نوشته شد. نحوه کارکرد:فانکشن reduce قابلیت های بسیار بیشتری دارد که در مقاله های بعدی میبینیم این مثال های بسیار ساده برای شروع کار و آشنایی شما با فانکشن reduce بود وگرنه شما می توانستید برای مثال 2 و 3 از این روش استفاده کنید ، بسیار سریع تر با Math Object const myArray = [ 25 , 27 , 13 , 44 , 51 , 16] console.log(Math.max(...myArray)) console.log(Math.min(...myArray))اگر این مقاله را دوست داشتید خوشحال میشم که با لایک و کامنت انرژی بفرستید