Microfrontend.ir

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

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

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

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


〰️〰️〰️〰️〰️
© @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

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

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

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

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

Link: https://youtu.be/k1DlUfiPp9Y

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

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

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

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


Link: https://youtu.be/IqCM3g2EVV4

〰️〰️〰️〰️〰️
@microforntend_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 به این سوال پاسخ دادیم چرا و کی باید ریاکت رو یاد بگیریم؟ ابتدا به بررسی تاریخچه شکل گیری ریاکت پرداختیم و سپس Reactive Programming را مطرح کردیم و مزایای آن را برای توسعه واسط کاربری توضیح دادیم. تفکر مبتنی بر کامپوننت و فلسفه ریاکت را بررسی کردیم و گفتیم که virtual dom چگونه کارایی برنامه های مبتنی بر ریاکت را بالا برده است.

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

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

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

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

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

Link: https://youtu.be/Tvfn97wgsVk

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

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

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

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

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

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

PyScript چیست؟

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


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

〰️〰️〰️〰️〰️
@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

آموزش 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

آموزش 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

تفاوت 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

نصب و مدیریت نسخه های Node.js با NVM یا Volta

اگر برنامه نویس node.js توسعه دهنده front-end هستید قاعدتا هر روز در حال استفاده از نود جی اس در پروژه های مختلف هستید. مدیریت نسخه های Node.js با NVM یا Volta به شما این امکان را می‌دهد که به ازای هر پروژه و یا به صورت دستی نسخه node و ابزارهای دیگر جاوا اسکریپت را مشخص کنید.

در این ویدیو ابتدا فرایند نسخه دهی در Node.js را بررسی و ضرورت استفاده از ابزارهای مدیریت نسخه را مطرح و سپس دو ابزار شناخته شده در این محیط را بررسی و مقایسه کردیم. ابتدا از NVM و کاربردهای آن صحبت کردیم و سپس از ابزار Volta استفاده کردیم و مزیت های آن را شرح دادیم.


Link: https://youtu.be/MbYIAEB_or0

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


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

دوره: آموزش تایپ اسکریپت به منظور بررسی فنی Type Systems
ویدیو اول : TypeScript چیست؟ چرا تایپ اسکریپت‌ ؟

در اولین ویدیو از سری آموزش TypeScript به این سوال پاسخ دادیم که TypeScript چیست و چرا تایپ اسکریپت تکنولوژی مهمی است و أینده شغلی برنامه نویس را تضمین می‌کند. در آغاز به معرفی تاریخچه‌ای مختصر از جاوا اسکریپت و زمینه‌های شکل گیری آن صحبت کردیم معضلات آن برای برنامه نویسی پرداختیم. سپس به تحول و اوج گیری وب و به طبع آن جنگ مرورگرها را مطرح کردیم. در ادامه به زمینه های پیدایش TypeScript و مسایلی که حل کرده پرداختیم و در نهایت مولفه های دیگری که سعی کرده‌اند کارکری مشابه TypeScript داشته باشند را بررسی کردیم.

link: https://youtu.be/X9lsmXq5Ie4

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

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

اجرای اولین برنامه WebAssembly

در این ویدیو به اجرای اولین برنامه WebAssembly خود در محیط های خط فرمان، Node.js و مرورگر می‌پردازیم. در این ویدیو ابتدا به مفهوم پرتابل بودن پرداختیم و مکانیزم های مبتنی بر ماشین مجازی را برای این رویکرد شرح دادیم. در ادامه برنامه ساده ای به صورت WebAssembly Text Format نوشتیم و با استفاده از ابزارهای وب اسمبلی آن را تبدیل به باینری فرمت کردیم و در مفسر WASM3 از طریق خط فرمان اجرا کردیم و نهایتا همین باینری را در محبط Node.js و مرورگر اجرا کردیم.

link: https://youtu.be/hyXK5GNM5IY

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBy65DpNohbFt8za6smAdy4v

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

اگر بخواهید خودرو بدون راننده بخرید کدام یک را انتخاب می‌کنید؟ آنکه اولویتش حفظ جان شماست یا آنکه به گونه‌ای طراحی شده است که جان‌های بیشتری را نجات دهد؟

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

https://www.goodreads.com/book/show/43726517-hello-world

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

WebAssembly چیست؟

در این وبدیو به این سوال پاسخ می‌دهیم
که WebAssembly چیست؟ و کجا کاربرد دارد. وب اسمبلی نتیجه تلاشی است چند ساله برای اجرای چیزی غیر از جاوا اسکریپت در مرورگر و در حال حاضر به صورت استاندارد در همه مرورگرهای مدرن قابل استفاده است. ابتدا به معرفی تکنولوژی و مزیت های آن پرداختیم و گفتیم که اتودسک، گوگل و فیگما چگونه از وب اسمبلی برای پروژه های خود استفاده میکنند و در نهایت تلاش های قبل از WebAssembly را معرفی کردیم

link: https://youtu.be/BjMJAXQmCic

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBy65DpNohbFt8za6smAdy4v

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

Single Responsibility Principle چیست؟

در این ویدیو به این سوال پاسخ می‌دهیم که Single Responsibility Principle چیست؟ SRP نخستین اصل از اصول طراحی SOLID است که می‌گوید هر ماژول یا المان داخل ماژول بایستی تنها و تنها یک دلیل برای تغییر داشته باشد. برای تشریح این موضوع ابتدا Coupling و Cohesion را در معماری نرم‌افزار مطرح سپس در مورد مفهوم تغییر در سیستم اجایل صحبت کردیم و در نهایت یک مثال ساده از SRP را تشریح کردیم.

Link: https://youtu.be/veQJ_jD7T8o

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxUIWhfp9euGlbBIrQUhm2Q

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