لیزی لودینگ (Lazy Loading) چیست ؟ 🦥

لیزی لودینگ تکنیکی است که به بارگذاری تأخیری محتوای غیرضروری تا زمانی که کاربر به آن نیاز داشته باشد کمک می‌کند. به جای اینکه همه منابع (تصاویر، ویدیوها یا کامپوننت‌های سنگین) به‌صورت همزمان با بارگذاری اولیه صفحه، بارگذاری شوند، این منابع فقط زمانی که کاربر به آن‌ها اسکرول کند یا نیاز داشته باشد، بارگیری می‌شوند.

✅ ویژگی‌های کلیدی لیزی لودینگ

➊ افزایش سرعت بارگذاری اولیه
با بارگذاری محتوای ضروری، صفحات سریع‌تر لود می‌شوند.

➋ کاهش استفاده از پهنای باند
چون محتوای غیرضروری به‌صورت همزمان لود نمی‌شود، مصرف داده کاهش می‌یابد.

➌ بهبود تجربه کاربری
کاربران تجربه بهتری از سرعت و عملکرد صفحه خواهند داشت.

چجوری از لیزی لودینگ استفاده کنیم ... ⁉️😁

🔸 برای استفاده از لیزی لودینگ، می‌تونید از اتریبیوت HTML5 زیر برای تصاویر استفاده کنید.

<img src="image.jpg" alt="Sample Image" loading="lazy" />

با استفاده از اتریبیوت loading با مقدار lazy، مرورگر تصویر را تنها زمانی که کاربر به آن نزدیک می‌شود یا به آن نیاز پیدا می‌کند (مثلاً وقتی اسکرول می‌کند) بارگذاری می‌کند.

🔸 در فریم‌ورک‌هایی مانند React.js، می‌تونید با استفاده از تکنیک‌هایی مثل React.lazy و Suspense کامپوننت‌های غیرضروری زو به‌صورت لیزی لود کنید

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

این کد با استفاده از React.lazy کامپوننت را به‌صورت لیزی لود می‌کند و با کمک Suspense تا زمان بارگذاری کامل، یک پیام یا محتوای موقت (مثل "Loading...") را نمایش می‌دهد.

برای اطلاعات بیشتر در مورد لیزی لودینگ و نحوه استفاده از این تکنیک توی شرایط مختلف پیشنهاد میکنم دو تا مقاله زیر رو مطالعه کنید 💥👇

🌐 article

🌐 article 2

#️⃣ #WhatsThat #lazyloading #javascript

🚀 @coolycode

💎 آشنایی با ORM‌ها، چی هستد و به چه کاری میان 💎

کلمه ORM و یا همون Object-Relational Mapping ابزاریه که به شما این امکان رو میده تا با استفاده از زبان های برنامه‌نویسی شی‌گرا، به راحتی با دیتابیس کار بکنید.

یعنی دیگه نیازی نیست خودتون به صورت دستی به نوشتن کوئری‌های پیچیده با sql خام بپردازید و میتونید تمرکز بیشتری رو روی منطق برنامه‌نویسی داشته باشید 💥

✅ مزایای ORM‌ها

➊ کاهش کد نویسی

با استفاده از ORM، نیاز به نوشتن کد SQL کاهش پیدا میکنه و عملیات دیتابیس به صورت خودکار انجام می‌شه

➋ افزایش خوانایی کد

کد ORM بیشتر به زبان برنامه‌نویسی شما نزدیکه و فهم اون ساده‌تره.

➌ قابلیت‌های جابجایی

با ORM میتونید به سادگی از یک دیتابیس به یک دیتابیس دیگه منتقل شد.

➍ مدیریت خودکار ریلیشن‌ها

با ORM ها مدیریت روابط ( ریلیشن‌ها ) بین جداول مختلف خیلی ساده تر میشه

❌ معایب ORM‌ها

➊ عملکرد کمتر

برای برخی از عملیات‌های پیچیده مثل گذارش گیری ها ممکنه کارایی کمتری نسبت به نوشتن کد SQL خالص داشته باشن.

➋ پیشرفته بودن برای مبتدیان

درک کامل عملکرد ORM و چگونگی کارکرد اون می‌تونه برای برخی از دولوپر‌های تازه‌کار سخت تر باشه.

➌ محدودیت‌های عملکردی

برای سناریوهایی با نیازهای خاص و پیچیده، ممکنه ORM همه نیازهای مارو برآورده نکنه.

💯 بهترین ORM ها برای Node.js

1. Sequelize

یک ORM قدرتمند برای Node.js و دیتابیس های SQL با پشتیبانی از تعریف مدل، روابط پیچیده، و Migration.

2. TypeORM

به شخصه typeorm رو‌ برای NestJS توصیه میکنم چون فوق‌العاده مناسب برای TypeScript هستش که از database های SQL و NoSQL پشتیبانی میکنه.

3. Mongoose

این یکی برای MongoDB به‌کار می‌ره و درواقع ODM هستش که با Schema‌ها، Middleware و قابلیت Validation، مدیریت دیتای NoSQL رو براتون اسون تر میکنه.

4. Prisma

یک ORM مدرن و TypeScript-friendly برای دیتابیس های SQL با تمرکز بر سرعت، Type-Safty کوئری‌ها.

#️⃣ #lazyloading #javascript

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣