تفاوت npm و yarn و pnpm - مقایسه Node Package Managers


در این ویدیو به مقایسه Node Package Managers پرداختیم و تفاوت npm و yarn و pnpm را از منظر ساختاری و فنی بررسی کردیم. ابتدا به معرفی مفهوم پکیج و ماژول پرداختیم و چالش هایی که یک پکیج منیجر با آن سروکار دارد را معرفی کردیم. سپس به تاریخچه و مکانیزم npm و yarn classic و yarn berry و pnpm پرداختیم.در نهایت برای هرکدام یک نمونه ساده ساختیم و مطالب گفته شده را بررسی کردیم


Link: https://youtu.be/fqMLtuMBPAc


PlayList : https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK

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

آموزش TypeScript و برنامه‌نویسی مبتنی بر Type - ناجی برنامه‌نویسان از فجایع

در این ویدیو ابتدا به معرفی و ضرورت آموزش TypeScript و برنامه‌نویسی مبتنی بر Type پرداختیم و گفتیم اساسا چرا به type در برنامه نویسی نیازمندیم و سپس سعی کردیم تعریف دقیقی از Type، Type System ،Type Checking و Type Checker ارایه کنیم. سپس به معرفی انواع تایپ سیستم ها پرداختیم. ابتدا Dynamic Type و Static Type را مقایسه کردیم و مفهوم duck typing را شرح دادیم سپس Weak type و Strong Type ها را باهم مقایسه کردیم و نهایتا مفهوم type inference را شرح دادیم. در نهایت مزایای برنامه نویسی مبتنی بر Type را مطرح کردیم.

Link: https://youtu.be/zCeDfPQuE9s

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK


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

آموزش TypeScript - کار با اعداد

در سومین ویدیو از پلی لیست تایپ اسکریپت، نوع داده عدد را در این زبان بررسی کردیم. با این پرسش آغاز کردیم که چرا 0.1+0.1+0.1 برابر 0.3 نمی‌شود. سپس به بررسی ویژگی‌های کلی نوع عدد در زبان‌های برنامه نویسی پرداختیم و width و encoding را بررسی کردیم و مفاهیم overflow و underflow راه‌های کنترل آن را معرفی کردیم.
در نهایت فرمت binary64 از انکدینگ IEEE 754 که برای اعداد در جاوا اسکریپت و بسیاری از زبان‌های برنامه نویسی استفاده می‌شود را توضیح و راه‌های مقایسه مطمن اعداد اعشاری و صحیح را در جاوا اسکریپت شرح دادیم


Link: https://youtu.be/tlpbs0MGYS0

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK


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

نوع داده boolean در TypeScript

در این ویدیو به معرفی نوع داده boolean در TypeScript و بررسی مفهوم short circuit در ارزیابی عبارات بولی خواهیم پرداخت. سپس در ادامه با چند مثال مفهوم type coercion در جاوا اسکریپت را که منشا بسیاری از رفتارهای ناخواسته در برنامه نویسی به این زبان است را مطرح کردیم و در نهایت شیوه های تبدیل مقادیر به بول را شرح دادیم.


Link: https://youtu.be/bBo5MnTlbEA

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK

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

PyScript چیست؟

در این ویدیو خیلی مختصر به این سوال پاسخ داده شد که PyScript چیست؟
برای این منظور ابتدا ساختار کلی و مولفه های آن را بررسی و چند مثال ساده را بررسی کردیم


Link: https://youtu.be/LK_ZOd-87Uc

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

آموزش Angular - چرا و کی باید انگولار رو یاد بگیریم و از آن استفاده کنیم؟

در اولین ویدیو از پلی لیست آموزش Angular به این سوال پاسخ دادیم که چرا و کی باید انگولار رو یاد بگیریم و از آن استفاده کنیم؟ ابتدا به معرفی تاریخچه angular پرداختم و روند شکل گیری نسخه‌های آن را بررسی کردم. سپس رویکرد برنامه نویسی مبتنی بر component را مطرح و مزایای آن را شرح دادیم و در نهایت گفتیم که چرا و چه زمانی مناسب است که از انگولار استفاده کنیم.

Link: https://youtu.be/UmAvTClU-_U

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

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

ویژگی‌های جدید در Angular 14

در این ویدیو به معرفی ویژگی‌های جدید در Angular 14 پرداختیم و برخی از موارد اضافه شده به انگولار را با مثال مطرح کردیم. standalone component مهمترین ویژگی اضافه شده به این نسخه است که می‌تواند شیفت مهمی در توسعه انگولار به حساب بیاید. کنترل نوع در فرم ‌های انگولار هم امکان مهمی است که امکان نوشتن فرم‌های قدرتمندتر و قابل اتکاتری را به برنامه نویس می‌دهد.

Link: https://youtu.be/Tvfn97wgsVk

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

آموزش React 18 - چرا و کی باید ریاکت رو یاد بگیریم؟

در اولین ویدیو از آموزش React 18 به این سوال پاسخ دادیم چرا و کی باید ریاکت رو یاد بگیریم؟ ابتدا به بررسی تاریخچه شکل گیری ریاکت پرداختیم و سپس Reactive Programming را مطرح کردیم و مزایای آن را برای توسعه واسط کاربری توضیح دادیم. تفکر مبتنی بر کامپوننت و فلسفه ریاکت را بررسی کردیم و گفتیم که virtual dom چگونه کارایی برنامه های مبتنی بر ریاکت را بالا برده است.

Link: https://youtu.be/2pCqmMLsLEE

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

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

آموزش Vue.js 3 - چرا و کی باید ویو رو یاد بگیریم؟

در اولین ویدیو آموزش Vue.js 3 به این سوال پاسخ می‌دهیم که چرا و کی باید ویو رو یاد بگیریم؟ ابتدا به معرفی جذابیت های ویو و کامیونیتی آن پرداختیم. سپس زمینه های شکل گیری آن را بررسی کردیم، بعد MVVM که رویکرد استفاده شده در vuejs است را شرح دادیم. در نهایت به معرفی Virtual DOM و سایر مزیت های ویو جی اس پرداختیم و در نهایت برخی از پکیج های اکو سیستم ویو را معرفی کردیم.

Link: https://youtu.be/Rdmtawlf9xE

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

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

ويژگی‌های جدید React 18

در این ویدیو به بررسی ويژگی‌های جدید React 18 پرداختیم. ابتدا به بررسی چالش‌ها و مشکلاتی که در نسخه های قبل ریاکت وجود داشت پرداختیم و سپس گفتیم که Concurrent Rendering چگونه این مشکلات را حل کرده است. سپس توضیح دادیم که این ویژگی چگونه عمل می‌کنند و سپس با استفاده از یک مثال ساده شیوه استفاده از Suspense و سایر ویژگی های ریاکت ۱۸ را شرح دادیم و در نهایت hook های جدیدی که با این نسخه ارایه شده است را معرفی کردیم.


Link: https://youtu.be/IqCM3g2EVV4

〰️〰️〰️〰️〰️
@microforntend_ir

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

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