چگونه React را یاد بگیریم؟

در این ویدیو شیوه فکر کردن و حل مساله در React و اساسا چگونه React را یاد بگیریم را بررسی میکنیم. برای این کار مثالی را که در این پلی لیست مطرح کردیم را با React پیاده سازی می‌کنیم. سپس در ویدیوهای بعدی با Angular و Vue هم پیاده میکنیم و در نهایت آنهارا با هم مقایسه میکنیم. ابتدا سعی کردیم در ساده ترین شکل کامپوننت ها را بسازیم و پس از درک کلی یک بار دیگر برنامه را با نگاه Redux و با استفاده از Context پیاده کردیم.

Link: https://youtu.be/6V2gozZWsDU

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-


〰️〰️〰️〰️〰️
© @microfrontend_ir

پلی لیست آموزش TypeScript
https://youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK

پلی لیست آموزش 14 Angular
https://youtube.com/playlist?list=PLJ9zDGwhhsBwA1y5Ojwxwp9jfzFnT5WId

پلی لیست آموزش 18 React
https://youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

پلی لیست آموزش Vue.js 3
https://youtube.com/playlist?list=PLJ9zDGwhhsByA6Ac9YftRJf-dDpy30DyV


پلی لیست مقایسه عملی Angular و React و Vue
https://youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-

〰️〰️〰️〰️〰️
© @microfrontend_ir

PostCSS چیست؟

در اولین ویدیو از پلی لیست آموزش Tailwind CSS به معرفی ابزار بسیار مهم PostCSS پرداختیم و گفتیم که PostCSS چیست و چگونه کار می‌کند.ابتدا گفتیم که PostCSS چگونه یک API جاوا اسکریپتی برای ترانسفورم کدهای CSS به ما ارایه می دهد و چگونه با بهره گیری از پلاگین ها می‌توانیم منطق خود را بر روی آنها اجرا کنیم.

Link: https://youtu.be/mcVz-qwPvvA

〰️〰️〰️〰️〰️
© @microfrontend_ir

Tailwind CSS چیست؟

در این ویدیو به این سوال پاسخ می‌دهیم که Tailwind CSS چیست؟ ابتدا ابزارهای مرتبط با CSS را در سه گروه preprocessors مانند Less و Sass و فریمورک های مبتنی کامپوننت مانند bootstrap و Utility first ها مانند Tailwind دسته بندی کردیم و گفتیم هرکدام چگونه کار میکنند و مقایسه کردیم. سپس دلایل استفاده ابزارهایی Tailwind CSS را مخصوصا در پروژه های جاوا اسکریپتی مطرح کردیم


Link: https://youtu.be/QDOVogmZjws

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBzNRzQmVENfCPU1umUYm1pk

〰️〰️〰️〰️〰️
© @microfrontend_ir

چگونه Vue.js را یاد بگیریم؟

در این ویدیو شیوه فکر کردن و حل مساله در Vue.js و اساسا چگونه Vue.js را یاد بگیریم را بررسی میکنیم. برای این کار مثالی را که در این پلی لیست مطرح کردیم را با Vue پیاده سازی می‌کنیم. سپس در ویدیوهای بعدی با Angular و React هم پیاده میکنیم و در نهایت آنهارا با هم مقایسه میکنیم.

Link: https://youtu.be/J0mIsMnVYdo

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-


〰️〰️〰️〰️〰️
© @microfrontend_ir

مقایسه Angular و React و Vue - کدام بهتر است؟

در این ویدیو به جمع بندی این پلی لیست می‌پردازیم و مختصر مقایسه ای بین Angular و React و Vue انجام می‌دیم و می‌گوییم کدام بهتر است؟ ابتدا برخی از تجربیات شخصی خودم رو در استفاده ازاین ابزارها بررسی کردم. سپس نتیجه پرفورمنس هرکدام از این ابزارها در js benchmark بررسی کردیم. سپس سایز باندل خروجی را مقایسه و در مرورگر حافظه استفاده شده و تست Lighthouse را اجرا و مقایسه کردیم.

Link: https://youtu.be/hBasrGvBVPk

Source Code : https://github.com/hemanhp/django-ng-react-vue

Playlist:https://youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-

〰️〰️〰️〰️〰️
© @microfrontend_ir

آموزش React - اجرای اولین برنامه بدون JSX

در دومین ویدیو پلی لیست آموزش React - اجرای اولین برنامه بدون JSX را بررسی می‌کنیم. برای این منظور ابتدا یک تکه کد را با استفاده از HTML میسازیم و سپس معادل آن را در React و با استفاده از element ها پیاده میکنیم

Link: https://youtu.be/kUdKfetGLrg

Playlist: https://youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️
© @microfrontend_ir

JSX چیست ؟

در سومین ویدیو پلی لیست آموزش React بررسی کردیم که JSX چیست‌؟ برای این منظور ابتدا به بررسی مفهوم و ساختار JSX پرداختیم و بعد مثال جلسه قبلی را با استفاده از JSX باز نویسی کردیم.
همچنین برخی از اصول و قواعد JSX را مطرح و دلیل استفاده از Fragment را شرح دادیم.


Link: https://youtu.be/jMrxVapepsE

Playlist: https://youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️
© @microfrontend_ir

جلسه چهارم: تاریخچه ابزارهای Frontend
https://youtu.be/1RUq8gAut0g

جلسه پنجم: ساخت پروژه ریاکت با Webpack
https://youtu.be/pO1JxsRyGD8

جلسه ششم: ساخت پروژه با Parcel و Vite و CRA
https://youtu.be/_7zlouzkVxg

Playlist: https://youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️
© @microfrontend_ir

آموزش TailwindCSS و Vite

در ادامه آموزش TailwindCSS در این ویدیو اولین گام ساخت پروژه مبتنی بر TailwindCSS را ابتدا به صورت ساده بررسی کردیم و در ادامه برای بهبود محیط و بهره وری از ابزار Vite برای ساخت پروژه استفاده کردیم

Link: https://youtu.be/aE9lckQip2Y

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBzNRzQmVENfCPU1umUYm1pk

〰️〰️〰️〰️〰️
© @microfrontend_ir

انواع کامپوننت ها در React

در این ویدیو از پلی لیست آموزش React کامپوننت را تعریف و میگوییم React Component چیست؟ سپس انواع کامپوننت ها را در ریاکت تعریف و بررسی کردیم و در نهایت یک کامپوننت ساده ریاکت ایجاد کردیم.

Link: https://youtu.be/1Q6bvttNRMU

Playlist: https://youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️
© @microfrontend_ir

Flutter State چیست؟

در اولین ویدیو از سری آموزش State Management در Flutter به این سوال پاسخ می‌دهیم که Flutter State چیست؟ و فلاتر چگونه تفکر Reactive و برنامه نویسی Declarative را ترکیب و یک پلتفرم جذاب برای طراحی واسط کاربری ارایه داده است. در ادامه ابزارهای دیگری که برای مدیریت State در فلاتر وجود دارد را مطرح کردیم.


Link: https://youtu.be/0lM6YPK6GwQ

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

Flutter Stateful Widget vs Stateless Widget

در دومین ویدیو از سری آموزش State Management در Flutter به این سوال پاسخ می‌دهیم که ویجت‌ها در فلاتر چند نوع هستند و چه تفاوتی با هم دارند؟ برای این کار ابتدا Widget Tree در فلاتر را شرح.و بعد انواع ویجت های Stateful و Stateless را ایجاد کردیم و lifecycle ویجت را بررسی کردیم.

Link: https://youtu.be/-R4FPPJiUXk

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

۴ نکته مهم در مورد استفاده از setState در Flutter

در سومین ویدیو از سری آموزش مبانی State Management در Flutter به سراغ متد setState رفتیم. ابتدا مکانیزم رندرینگ در فلاتر را بررسی و سپس سورس کد متد setState را مطالعه و نکات مهم و کمتر گفته ای شده ای در مورد این متد را بررسی کردیم


Link: https://youtu.be/SZ8DUwVAxdM

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

استفاده از Callback در Flutter

در چهارمین ویدیو از سری آموزش مبانی State Management در Flutter رویکرد استفاده از Callback در Flutter برای انتقال دیتا از child به parent را بررسی کردیم.

Link: https://youtu.be/rrrCzcpYb_8

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

Flutter Key چیست و چه کاربردی دارد؟

در پنجمین ویدیو از سری آموزش State Management در Flutter به این سوال پاسخ می‌دهیم که Flutter Key چیست و چه کاربردی دارد؟ برای این کار مثالی را مطرح کردیم که در آن لیستی از آیتم ها داریم و و میخواهیم ترتیب آنها را عوض کنیم. وقتی از Stateful Widget استفاده میکنیم بدون استفاده از Key ترتیب به درستی عوض نمی‌شود. دلیل این اتفاق را از طریق توضیح مکانیزم داخلی فلاتر بررسی کردیم و سپس انواع Key ها در شرح دادیم.


Link: https://youtu.be/Bg9OL5Zt8ZQ

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

کاربرد InheritedWidget در Flutter

در ششمین ویدیو از سری آموزش State Management در Flutter به بررسی کاربرد InheritedWidget در Flutter پرداختیم. یکی از اصلی ترین روش‌هایی که State Management در فلاتر Lift up کردن State است. به این معنی که State را به بالاترین سطح مورد نیاز خود بالا بکشیم و آن را با تمام فرزندان درخت یا یا بخشی از درخت به اشتراک بگذاریم. فلاتر این امکان را از طریق InheritedWidget به برنامه نویس ارایه می‌دهد. درک InheritedWidget کلید درک سایر رویکردهای State Management در اکوسیستم فلاتر است.


Link: https://youtu.be/sfqfkTCFQ1A

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

استفاده از State در Flutter InheritedWidget

در هفتمین ویدیو از سری آموزش State Management در Flutter به بررسی شیوه استفاده از State در Flutter InheritedWidget پرداختیم. یکی از اصلی ترین روش‌هایی که State Management در فلاتر Lift up کردن State است. به این معنی که State را به بالاترین سطح مورد نیاز خود بالا بکشیم و آن را با تمام فرزندان درخت یا یا بخشی از درخت به اشتراک بگذاریم. فلاتر این امکان را از طریق InheritedWidget به برنامه نویس ارایه می‌دهد. درک InheritedWidget کلید درک سایر رویکردهای State Management در اکوسیستم فلاتر است. در این ویدیو و در ادامه ویدیو قبلی سعی میکنیم یک وبجت فلاتری بسازیم که در آن یک StatefulWidget را از طریق InheritedWidget در درون درخت ویجت ها به اشتراک بگذاریم.

Link: https://youtu.be/sKvNs82QLfE

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

بهینه سازی فلاتر با InheritedModel

مهمترین مساله و معضل با InheritedWidget این است که به ازای هر تغییری تمام ویجت هایی که از آن ارث گرفته‌اند بایستی مجددا build شوند. InheritedModel کلاسی است که از InheritedWidget ارث گرفته است و امکانی را ارایه می‌دهد که از طرق مفهوم aspect بین ویجت‌های که نیاز به build دارند و ویجت هایی که نیاز ندارند فرق گذاشت و به ازای تغییر صرفا ویجت هایی build شوند که نیاز دارند.


Link: https://youtu.be/qNzzVTsKnkw

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwoDOzFdlHBa6H7w8ExoeKV
〰️〰️〰️〰️〰️
© @microfrontend_ir

پیاده سازی Django Soft Delete

چندی پیش خبری منتشر شد که در توییتر حذف داده‌ها به درستی انجام نمی‌شود. واقعیت این است که در اغلب نرم‌افزارهای مدرن داده‌ها به صورت فیزیکی حذف نمی‌شوند و صرفا برچسپ حذف شده می‌گیرند. در این ویدیو با هدف آشنایی بیشتر با مدل‌های abstract و proxy در جنگو و همچنین ایجاد Custom Queryset و Custom Manager و Custom Admin Action مدلی را طراحی کردیم که در صورت ارث بری از آنها داده‌ها با دستور حذف به صورت فیزیکی پاک نشوند و در صورت لزوم برگردانده شوند. برای توضیح بیشتر نیز به جنگو ادمین یک اکشن اضافه کردیم که داده‌هایی که حذف شده اند را برکردانیم


Link: https://youtu.be/I_23u4xj1Ws

PlayList: https://youtube.com/playlist?list=PLJ9zDGwhhsBwdrfdaoOqbYev3_ocuBOfv

〰️〰️〰️〰️〰️
© @microfrontend_ir

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

سوال :
Vessal Daneshvar
برای فیلد های یونیک هم میشه راهنمایی بکنید که soft delete چجوی باشه بهتره ، معمولا یه مقدار پیچیدگی ایجاد میشه موقع پیاده سازی کردن مواردی که باید یونیک باشن و حذف شده اند و مجدد میخوان ایجاد بشن

جواب:
میدونید که یونیک در واقع یک کانستراینت و ایندکس سمت دیتابیسه. یکی از ویژگی های بسیار مهم و جذابی که ارایه میده تعریف conditional constraint که مثلا تو سناریو این ویدیو میتونید بگید ایندکس یونیک صرفا رو مواردی که is_deleted فالس هست اعمال شوند. مثلا به این صورت
UniqueConstraint(fields=['user'], condition=Q(status='DRAFT'), name='unique_draft_user')
جزییات کاملتر تو داکیومنتیشن اینجاست.
https://docs.djangoproject.com/en/4.1/ref/models/constraints/#condition


پی نوشت: از منظر مدیریت ایندکس و کانستراینت‌ها به جرات میتونم بگم جنگو یه سر و گردن از سایر ORM ها مثل لاراول بالاتره.البته دلیلش خود جنگو یا لاراول نیست. دلیلش فرهنگ حاکم بر کامیونیتشونه. تو کامیونیتی php انتخاب اول دیتابیس عموما MySQL و مشتقاتشه اما تو پایتون معمولا انتخاب اول PostgreSQL هستش و نکته اینجاست که مای اس کیو برای ایندکس تمرکزش بر ایندکس های مبتنی بر درخته و خیلی خوب این کارو میکنه. تو پستگرس علاوه بر ایندکس های مبتنی بر درخت، طیف گسترده ای از ایندکس ها شامل expression و partial رو ساپورت میکنه