🔥Capsule
⚡️⚡️⚡️Flutter threads⚡️⚡️⚡️
1️⃣

❓آیا فلاتر single thread هست؟ 🤔

جواب این سوال هم آره هست و هم نه. 😳😳
ولی چرا اره و چرا نه.

بستگی داره از چه نظر به موضوع نگاه کنیم.

🔥اگه فقط کدهایی که خودمون داریم مینویسیم رو در نظر بگیریم و کار هایی ک framework فلاتر روی کدهای ما انجام میده به جواب آره میرسیم.

جهت یادآوری بگم که قبلن توی یه پست دیگه در مورد بخش های مختلف فلاتر توضیح دادیم و گفتیم که فلاتر از یه بخش به اسم framework که کلن با Dart نوشته شده و یه بخش دیگه به اسم engine که با c++ نوشته شده و ... تشکیل شده.

اینجا منظورمون از framework هم همون بخش نوشته شده با Dart هست.

✔️این جا یه thread داریم به اسم UI thread که تمام کدهایی که ما نوشتیم به علاوه کار هایی framework انجام میده، داخلش انجام میشه.

❓حالا کار هایی که framework انجام میده چیه؟
بحث کردن راجب این موضوع خیلی مفصله ولی به طور کلی و خیلی ساده framework کدهای ما (ویجت ها) رو به ی سری painting commands تبدیل میکنه که بعدن اون رو تحویل engine بده و engine هم اون رو روی صفحه نمایش بده.

همچنین کارهای دیگه ای هم framework انجام میده از جمله دریافت event هایی مثل touch یا click های کاربر از engine و پردازش اون ها و هدایت کردن اون touch ها به سمت object های هدف.

کارهای framework به این موارد خلاصه نمیشن....

همه این کارها در یک thread انجام میشه(یک isolate که یک thread داره)

🔥پس نکته مهمی که این جا مطرح هست block نشدن این thread هست.

یعنی باید جوری کد بنویسیم که این thread قفل یا block نشه که اگه این اتفاق بیوفته نتیجش افت frame و لگ توی برنامه (به خصوص موقع اجرای انیمیشن ها خواهد بود)

🔥برای جلوگیری از block شدن این thread میتونیم برای پردازش های سنگین ، isolate های دیگه ای بسازیم.


✔️در مورد جواب ،،نه،، این سوال هم توی پست بعدی صحبت میکینم. ☺️
#capsule
#advanced
#single_thread

🔥Capsule
⚡️⚡️⚡️Flutter threads⚡️⚡️⚡️
2️⃣

❓آیا فلاتر single thread هست؟ 🤔

خب بریم در مورد جواب ،، نه،، سوال بالا صحبت کنیم.

گفتیم که همه کدهای ما به علاوه پردازش های framework توی یه thread به اسم UI thread انجام میشه. و در نهایت یک سری painting command ها تولید میشن

❓.ولی این command ها به چه دردی میخورن ؟
🔥این ها به یه thread دیگه ای تحویل داده میشن که مسئولیتش ارتباط برقرار کردن با پردازشگر و درنهایت نمایش تصویر روی نمایشگر هست.

پس یه thread دیگه هم وارد کار شد که اسمش raster thread هست.

🔥همون طور که گفتیم کار Raster thread که بهش GPU thread هم میگن، دریافت painting command ها از UI thread و نمایش اون ها هست (این کار توسط engine که به زبان c++ نوشته شده انجام میشه)

🔥این دو thread یعنی UI و raster نقش اصلی در پرفرمانس اپ رو ایفا میکنن.

🔥ما به raster thread دسترسی نداریم ولی کدهایی که مینویسیم تاثیر مستقیم توی کار اون و پرفرمانسش داره.
پس اگه اپتون با افت فریم مواجه شد دلیلش رو توی کدهای خودتون جستجو کنید و به raster thread یا... انگ نچسبونید 😂😂.

🔥یه thread مهم دیگه هم به اسم IO thread داریم که وظیفش هندل کردن تسک های سنگین هست.
خیلی از future هایی که استفاده میکنیم میره توی این thread و پردازش میشه و بعد از این که done شد برمیگرده و یه event توی UI thread اجرا میشه.

❓ایا thread های دیگه هم غیر از این سه تا داریم ؟
✔️UI
✔️Raster
✔️IO
✔️? 🤔

#capsule
#advanced
#single_thread

💊Capsule
⚡️⚡️Animation⚡️⚡️

❓حالا این تصاویر باید با چه فاصله زمانی پشت سر هم قرار بگیرن؟ 🤔

گفتم که پردازنده تصویر رو رندر میکنه و نمایشگر تصویر رو نمایش میده.
پس اینجا با ۲ واحد سخت افزاری سر و کار داریم که هر کدوم ویژگی های خودشون رو دارن.

🔥توی هر نمایشگر یه مفهومی داریم به اسم Refresh rate.

این برای هر نمایشگر با یه عددی بیان میشه که واحدش هرتز هست و میگه یه نمایشگر توی هر ثانیه چند بار میتونه تصویر خودش رو رفرش یا اپدیت کنه.

مثلن اگه ۶۰ هرتز باشه توی هر ثانیه ۶۰ بار میتونه تصویر خودش رو رفرش کنه یعنی تقریبن هر ۱۶/۳۳ میلی ثانیه یه بار.

ولی این کافی نیست و فقط به صرف اینکه یه نمایشگر ۶۰ هرتز داشته باشیم نمیتونیم بگیم که تصویر توی هر ثانیه ۶۰ بار رفرش میشه.

🔥 توی پردازنده یا GPU یه مفهومی داریم به اسم Frame rate.

این تعداد Frame هایی رو که پردازنده گرافیکی توی هر ثانیه میتونه تولید کنه رو بیان میکنه.
و واحدش fps یا Frame per Seconds هست.

وقتی میگیم 60 fps یعنی اینکه پردازنده این قابلیت داره که توی هرثانیه ۶۰ فریم یا ۶۰ تصویر جدید رندر کنه.

🔥حالا نکته مهمی که هست اینه که همیشه refresh rate نمایشگر با frame rate پردازنده برابر نیست.
یعنی ممکنه یه نمایشگر سرعت رفرشش بیشتر از سرعت تولید فریم توسط پردازنده باشه یا برعکس و اینجوری بین این دو ناهماهنگی بوجود میاد 🤦‍♂

❓راه حل چیه به نظرتون؟


#animation #capsule #advanced

💊Capsule
⚡️⚡️Dart threads⚡️⚡️
قبلن دوتا پست در مورد سینگل ترد بودن یا نبودن فلاتر داشتیم که میتونی با این تگ پیداشون کنی و بخونی
#single_thread

حالا یکم در مورد دارت صحبت کنیم.
آقا بعضیا میگن دارت سینگل ترد هست و به درد نمیخوره و فلان و....

این حرف از کجا در اومده؟ 😅😅🤦‍♂🤦‍♂

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

خب دارت هم همین جوره
هیچ فرقی نداره از این لحاظ
زبان های دیگه که خودشون هوشمند براتون ترد نمیسازن
اون جا هم اولش یه ترد هست و میتونید ترد های بیشتر اضافه کنید.

توی دارت هم همینه فقط اسمش شده isolate
تلفظش میشه : آیزولیت
معنیش میشه محصور (همچین چیزی 😅)

حالا چرا این اسم رو گذاشتن روش؟
مریض بودن ایا؟ 😅
خب میزاشتن همون ترد دیگ 🤦‍♂🤦‍♂

نه عزیزان دل مریض نبودن.

🔥هر آیزولیت که ساخته میشه یک ترد جدید ساخته میشه.
در واقع هر ایزولیت یک سینگل ترد داره و یک event loop که کد ها داخلش اجرا میشه.

ولی برخلاف زبان هایی مثل جاوا یا c++ که ترد های مختلف از یک Shared memory استفاده میکنه اینجا توی دارت هر کدومشون یک private memory دارن و مموری رو بین خودشون share نمیکنن و فقط با رد و بدل کردن message با هم ارتباط برقرار می کنن

به همین دلیل بهشون میگن isolate.

#single_thread #capsule #advanced

💊Capsule
⚡️⚡️Animation⚡️⚡️

🔥توی پست های قبلی در مورد اینکه معنی لغوی Animation چیه صحبت کردیم و متوجه شدیم که وقتی که داریم یه تصویر متحرک یا یه فیلم میبینم یا یه بازی کامپیوتری میکنیم در واقع داره چه اتفاقی میوفته.

🔥همچنین با دو تا مفهوم از مفاهیمی که سخت افزار های درگیر توی این قضیه باهاشون سر و کار دارن آشنا شدیم.

نمایشگر : refrash rate (هرتز)
پردازنده : frame rate (fps)

منظور از پردازنده هم بیشتر پردازنده گرافیکی یا GPU هست.

GPU : Graphics Processing Unit
CPU : Central Processing Unit

یه سوال هم مطرح کردیم که...

🔥حالا یه سوال دیگه این جا مطرح میشه که Flutter با کدوم یک از مفاهیم بالا بیشتر درگیره؟ با اولی یعنی refresh rate یا دومی یعنی frame rate.

#advanced #capsule #animation

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
1⃣

چند تا نکته که موقع استفاده از ListView ، GridView , CustomScrollView یا ویجت های مشابه که scrollable هستن میتونه به بهبود پرفرمانس کمک کنه :

🔥اگه ویجت مورد نظرتون یعنی ListView یا... قراره کل صفحه رو پوشش بده (تاکید میکنم کل صفحه) در این صورت پارامتر clipBehavior رو واسش روی حالت none بگذارید :
clipBehavior : Clip.none

🔥اگه قراره کل صفحه رو پوشش نده و یه قسمت خاصی از صفحه رو میگیره این پارامتر رو روی حالت زیر که پیش فرض خودش هم هست بگذارید :
clipBehavior : Clip.hardEdge

🔥مقادیر دیگه برای این پارامتر مثل
Clip.antiAlias
رو فقط در صورت نیاز ضروری و اگه واقعن میدونستید که دارید چکار میکنید قرار بدید.

نکات بعدی در پست های بعدی 😍😍

#advanced #capsule #scrollable #list_view #clip #performance

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
2⃣
این یکی قاتل پرفرمانسه
shrinkWrap = true
🔥شاید از این استفاده کنی و خیلی وقت ها تاثیری توی پرفرمانس هم نبینی ولی من بهت میگم که از این آپشن صرف نظر کن.

🔥وقتی که false باشه یعنی حالت پیش فرض scrollable مربوطه حداکثر فضایی رو که parent اش در اختیارش گذاشته رو میگیره.
یعنی خودش رو تا بزرگترین حد ممکن که parent اش بهش اجازه داده بسط میده.

🔥حالا بعضی وقت ها بعضی ویجت ها قیود مشخصی به child هاشون اعمال نمیکنن و اون ها رو محدود نمیکنن که سایز مشخصی داشته باشن (یا محدودشون نمیکنن که سایزشون توی یه بازه خاص باشه)

مثل column که child هاشو در راستای ارتفاع محدود نمیکنه و بهشون اجازه میده که از 0 تا infinity هر سایزی که دلش خواست بگیره و بعدن اگه مجموع سایز child هاش از سایز مجاز خودش بیشتر شده اون ها رو clip میکنه.

این که چرا مثلن column رفتارش اینجوریه و مث آدم از اول child ها رو محدود نمیکنه بماند. 😅

ولی خب توی همچنین شرایطی scrollable widget ما چون که قیود مشخصی (constraints) بهش اعمال نشده نمیدونه که باید چه سایزی بگیره.

🔥حالا توی همچین شرایطی این آپشن یعنی shrinkWrap به کار میاد و با true کردنش به جای اینکه ویجت خودش رو تا حداکثر اندازه مجاز بسط بده به اندازه بچهاش سایز میگیره.

🔥ولی در این حالت اتفاقاتی میوفته که به شدت روی پرفرمانس تاثیر میذاره.

🔥پس همیشه یه راه دیگه برای حل این مشکل پیدا کنید و از پارامتر استفاده نکنید مگر اینکه انقد حرفه ای بودید که میدونستید که توی اون حالت خاص که دارید استفاده میکنید و با شرایطی که ویجت های parent دارن این مورد خیلی قضیه رو حاد نمیکنه. 😍

من میگم استفاده نکنید. اختیار با خودتون 😁
#capsule #advanced #list_view #performance #shrinkwrap

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
4⃣

addAutomaticKeepAlives

🔥این پارامتر به صورت پیش فرض true هست.

🔥اگه قرار نیست هیچ کدوم از آیتم های scrollable widget مورد نظر کش بشه( در واقع اگه لازم نیست هیچ کدوم از آیتم ها بعد از اینکه با اسکرول کردن از حالت ویزیبل خارج شدن زنده بمونن و استیت شون حفظ بشه) بهتره این این پارامتر رو روی false بگذارید.

🔥ساده تر بگم اگه هیچ کدوم از آیتم ها (یا نوادگانشون) رو با AutomaticKeepAliveClientMixin میکس نکردین این پارامتر رو روی false بگذارید.

#capsule #advanced #performance #list_view

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
6⃣

ListView itemExtent

🔥موقع ساخت ListView اگه :

✔️توی حالت vertical scrolling همه آیتم ها height برابر دارن

یا اگه :

✔️توی حالت horizontal scrolling همه آیتم ها width برابر دارن

به جای تعیین کردن اندازه توی خود آیتم ها، پارامتر itemExtent توی ListView رو مقدار بدید.

🔥در این حالت اگه ListView افقی باشه همه آیتم ها مجبورن width شون برابر این مقدار باشه.
و اگه ListView عمودی باشه height همه آیتم ها اجبارن همین مقدار میشه.

🔥این حالت نسبت به اینکه اندازه داخل خود آیتم ها تعیین بشه پرفرمانس بالاتری داره.

😍😍اینم هدیه پرفرمانسی من به شما 😍😍

#advanced #list_view #capsule #performance

💊Capsule
⚡️نکات طلایی scrollable ویجت ها⚡️
7⃣

توی این پست میخوام یکم پیشگویی کنم و از آینده بگم 😂😂🤪

توی پست شماره ۵ در مورد PageStorageKey توضیح دادم و بهتون گفتم که از این نوع key میتونیم برای ذخیره موقعیت اسکرول یه scrollView استفاده کنیم.

🔥این روش توی ورژن های آینده فلاتر منسوخ میشه (دقیق نمیدونم چه ورژنی) ولی یکی از ToDo های فلاتر منسوخ کردن این روش هست.

🔥توی پست های بعدی در مورد روش جایگزین بهتون میگم که بعد از منسوخ شدن این روش هم خیالتون راحت باشه 😍

#capsule #list_view #advanced #local_key

🟢<type>(<scope>): <subject>

✔️type : required
✔️scope : optional
✔️subject: required

✅scope

🔥این پارامتر اختیاری هست

🔥کاملا قراردادی هست و بستگی داره به پروژه ای که انجام میدین و توی پروژه باید مشخص کنید که این پارامتر چه مواردی رو میتونه در بر بگیره .

❌پس دنبال موارد از پیش تعیین شده نباشید

🔰برای نمونه توی یه پروژه ای که لایه های مختلف مثل presentation, data, logic داره .
این ها میتونن به عنوان scope در نظر گرفته بشن

🔰یا پروژه ای که سرویس های مختلف داره...

🔰ریپوزیتوری bloc روی گیت هاب که خودش از پروژه های مختلف مثل bloc, fluttet_bloc, ... تشکیل شده، هر پروژه رو به عنوان یه scope در نظر گرفته.

✅پس کاملا قراردادیه.

✅مثل مورد قبلی یعنی type, ابتدای پروژه باید یه لیستی رو مشخص کنید و قرارداد کنید و از اون پیروی کنید ( البته در طول پروژه میتونه بروزرسانی بشه)

#advanced
#capsule

🟢<type>(<scope>): <subject>

✔️type : required
✔️scope : optional
✔️subject: required

✅subject

🔥برای این مورد از یک جمله کوتاه برای شرح دادن commit مورد نظر استفاده کنید.

جمله باید :

✔️زمان حال ساده باشه.
✔️امری باشه.
✔️با حروف کوچک شروع بشه.
✔️تهش نقطه نباشه

✅update the folan thing
❌Update the folan thing
❌update the folan thing.
❌updated the folan thing
❌the folan thing is updated
❌the folan thing was updated
❌the folan thing has been updated

#capsule
#advanced

🔥Challenge

ابسترکشن (abstraction) رو توضیح بدید.


❌کلاس abstract و interface و از این جور داستان ها مد نظر نیست.

✅مفهومش توی دنیای واقعی چیه (دنیای واقعی، خارج از برنامه نویسی)

میتونید با مثال هایی مفهومش رو توی دنیای واقعی بیان کنید و بعد بگید که برنامه نویس ها چطوری از این مفهوم الگو گرفتن .

و بعد از تحلیلتون به این سوال پاسخ بدید

❓آیا abstraction فقط فقط مخصوص OOP یا برنامه نویسی شی گرا هست؟ یا بقیه پارادایم های برنامه نویسی هم دارن از این مفهوم استفاده میکنن؟ چرا و چگونه؟

#challenge
#advanced

💊Capsule
🔥Key
1⃣

🟢دو نوع Key توی فلاتر داریم :

✅GlobalKey
✅LocalKey

✔️هر دو subclass کلاس Key هستن.

✅تفاوت اول و مهم این دو در این هست که GlobalKey باید توی کل اپ unique باشه.

یعنی اگه به یه ویجت توی یک فریم یه GloablKey دادید، دیگه نمیتونید از اون GlobalKey برای ویجت دیگه و توی همون فریم استفاده کنید.

❌استفاده از یک GlobalKey یکسان برای دو ویجت متفاوت در یک فریم یکسان ممنوع.

ولی LocalKey ها اینطور نیستن و شما میتونید برای دو ویجت متفاوت و در یک فریم از یک LocalKey یکسان استفاده کنید.

🔥به شرطی که :

✔️اون دو ویجت فرزند مشترک یک ویجت پدر نباشند.

مثلا هر دو نباید فرزند مشترک یک column یا یک stack باشن.

🔥علاوه بر اون اگه از Navigator 2 استفاده میکنید باید به page هاتون LocalKey بدید و نمیتونید از یک LocalKey یکسان برای دو page مختلف استفاده کنید.

#capsule
#advanced

💊Capsule
🔥GlobalKey
2⃣

🟢اولین کاربرد مهم GlobalKey برای این هست که به context یک ویجت و همچنین به state اون (در صورتی که ویجت استیت فول) باشه، در بقیه قسمت های اپ دسترسی داشته باشیم.

✅با استفاده از دو variable به نام های
✔️currentContext
✔️currentState
میتونیم به این منظور برسیم.

🔥علت اینکه توی نام از current استفاده شده چون که این موارد میتونن در طول lifetime یک GlobalKey تغییر کنن.

مثال)
✅با دادن GlobalKey به نویگیتور به جای استفاده از
Navigator.of(context).push
میگیم
navigatorKey.currentState.push

🔥این کار از لحاظ پرفرمانس عملکرد بهتری داره.

🟢به همین صورت میتونید به ویجت مورد نظر GlobalKey بدید و در بقیه قسمت های اپ به state اون دسترسی پیدا کنین و متد های داخل state اش رو کال کنید (مثل نویگیتور)
یا به contextاش دسترسی پیدا کنید.

❌بیش از اندازه استفاده نکنید (مطابق نیاز)

#capsule
#advanced