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

Link: https://youtu.be/k1DlUfiPp9Y

Github: https://github.com/hemanhp/waiter-menu

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

Django REST Project - پیاده سازی سرویس

ابتدا به تعریف مساله پرداختیم و گفتیم هدف ساخت یک تالار گفتمان ساده است که کاربر بتواند موضوع جدیدی ایجاد نماید و یا موضوعات قبلی را لایک و دیسلایک کند. ابتدا دیتا مدل لازم را ایجاد کردیم و سپس برای به دست آوردن اطلاعات لازم برای خروجی سرویس تفاوت annotate و aggregate در Django را شرح دادیم و یک بار با استفاده از annotate داده های لازم رو جمع آوردی کردیم و سپس گفتیم در بعضی سناریوهای برای کاهش هزینه دیتابیس، بایستی اطلاعات را دنرماله کرد و به سمت Eventual Consistency برویم. سپس همان سرویس را با استفاده از سیگنال بازطراحی کردیم و بعد از پیاده سازی سایر سرویس ها، مستندات را از طریق Swagger به سرویس ها اضافه کردیم تا برنامه نویس کلاینت درک درستی از سرویس ها داشته باشد

link: https://youtu.be/J83fum4nIGk
〰️〰️〰️〰️〰️
© @microfrontend_ir

شیوه فکر کردن و حل مساله در Angular چگونه است؟

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

Link : https://youtu.be/3tneRCUpd8E

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

چگونه 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