نوشته های سمانه باسمه چی

Edge-Side Includes (ESI)

سمانه باسمه چی — Mon, 09 Sep 2024 21:44:47 +0330

تو بحث میکروفرانت اند برای طراحی این معماری، بخشی داشتیم تحت عنوان پیاده سازی لایه Composition:این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.گفتیم برای طراحی Server Side باید از تکنیک ESI استفاده کنیم.حالا این تکنیک چی و چطوری باید اینکار رو انجام بدیم؟نحوه کار ESI:این تکنیک به سرورها و کش‌های محتوا (Content Delivery Networks - CDNs) این امکان را می‌دهد که صفحات وب را به قطعات کوچکتر تقسیم کنند و به صورت جداگانه کش کنند.این تکنیک به شما اجازه می‌دهد تا بخش‌های مختلف صفحه را به طور مستقل بارگذاری کنید و تغییرات داینامیک را به صورت سریع و مستقل از بخش‌های ثابت نمایش دهید.مثال عملی:فرض کنید شما یک وب‌سایت خبری دارید که شامل یک نوار جستجو، اخبار ، و فوتر است. شما می‌خواهید که نوار جستجو و فوتر از کش شده و تنها اخبار به صورت داینامیک بارگذاری شوند. News Website هنگامی که کاربر به وب‌سایت را باز میکند، کش یا سرور ESI محتوای نوار جستجو و فوتر را از کش‌های موجود بارگذاری می‌کند، در حالی که اخبار را به صورت داینامیک از سرور بارگذاری می‌کند.البته توجه کنید این کار نیاز به پیکربندی CDN دارد.امیدوارم این مقاله براتون مفید واقع بشه :)

Module Federation

سمانه باسمه چی — Mon, 09 Sep 2024 19:37:39 +0330

تو بحث میکروفرانت اند برای طراحی این معماری، بخشی داشتیم تحت عنوان پیاده سازی لایه Composition:این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.گفتیم برای طراحی Client Side باید از تکنیک Module Federation استفاده کنیم.حالا میخوایم بگیم Module Federation اصلا چیه و یعنی چی؟در واقع Module Federation یک ویژگی از Webpack5 است که این امکان رو میده که کدهای جاوااسکریپت رو بین اپ های مختلف در معماری میکرو فرانت اند به اشتراک بگذارید این ویژگی به صورت اختصاصی برای معماری میکروفرانت اند طراحی شده اما می‌تواند در سایر سناریوهای نیازمند به اشتراک‌گذاری ماژول‌ها هم از آن استفاده کنید.با استفاده از این ویژگی اپ ها میتوانند کد های خود را در برنامه به اشتراک بگذارند بدون اینکه نیاز به کپی یا تکرار کد باشد.با استفاده از این ویژگی شما میتوانید ماژول های مختلف را از اپ های مختلف دانلود و استفاده کنید.برای استفاده از این ویژگی باید دو پیکر بندی را در Webpack اعمال کنید:Remote Application:این اپلیکیشن (یا Micro Frontend) اپلیکیشنی است که ماژول‌های قابل اشتراک‌گذاری را ارائه می‌دهد.پیکربندی آن شامل اطلاعاتی است که نشان می‌دهد کدام ماژول‌ها برای به اشتراک‌گذاری آماده هستند و از کجا در دسترس هستند.مثال:const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'remoteApp', filename: 'remoteEntry.js', exposes: { './Button': './src/Button', './Header': './src/Header' }, shared: ['react', 'react-dom'] }) ]};در این پیکربندی، remoteApp ماژول‌های Button و Header را برای به اشتراک‌گذاری در دسترس قرار می‌دهد.Host Application:این اپلیکیشن (یا Shell Application) اپلیکیشنی است که ماژول‌ها را دانلود و استفاده می‌کند.پیکربندی آن شامل اطلاعاتی در مورد ماژول‌هایی است که قصد دارد از آن‌ها استفاده کند. مثال:const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'hostApp', remotes: { remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js' }, shared: ['react', 'react-dom'] }) ]};در این پیکربندی، hostApp ماژول‌های remoteApp را از طریق آدرس مشخص شده بارگذاری می‌کند.حالا چطوری از این ماژول یا کامپوننت های مشترک استفاده کنیم؟import React from 'react';import ReactDOM from 'react-dom';import Button from 'remoteApp/Button'; function App() { return

چطوری معماری میکروفرانت اند رو طراحی کنم؟

سمانه باسمه چی — Mon, 09 Sep 2024 19:32:53 +0330

برای انجام این کار بهتره اول به درک صحیحی از این معماری برسیم.این معماری از معماری میکرو سرویس در بک اند الهام گرفته، به گونه ای که یک اپلیکیشن میتونه از اپ (یا ماژول) های کاملا مستقلی پیاده سازی بشه که هر کدوم از این میکروفرانت اند ها لزوما هم با یک کتابخانه یا فریم ورک نوشته نمیشن مثلا فرض کنید یک اپ فروشگاهی دارید در حالی که header آن با ریکت نوشته شده ، قسمت سبد خرید با انگولار نوشته شده و بخش محصولات با vue نوشته شده.این رو صرفا یک مثال در نظر بگیرید زیرا انتخاب کردن اینکه کدوم بخش اپ باید با کدام فریم ورک یا کتابخانه پیاده سازی بشه خودش نیازمند بحث فلسفی و منطقی است (به علاوه که لزوما هم قرار نیست از چند فریم ورک یا کتابخانه استفاده بشه میتونه حتی همه میکروفرانت اند ها انگولاری باشند، این ها رو فقط نیازمندی مشخص میکنه).در عین حال فرض کنید هر تیم در شرکت قراره روی یکی از این میکروفرانت اند ها کار کنند.این معماری کمک میکنه تا هر تیم بتونه به صورت کاملا مستقل اپ خودش رو توسعه بده و هر زمان که لازمه بدون نیاز به دیپلوی کل پروژه ، میکروفرانت اند خودش رو بیلد و دیپلوی کند.در عین حال در UI نهایی فقط همان قسمت آپدیت شود.حالا که فهمیدیم این معماری قراره چطوری بهمون کمک کنه بریم سراغ اینکه چطوری آن را طراحی کنیم:در قدم اول باید بیزنس سازمان را به خوبی درک کرده و به آن مسلط باشید تا بتوانید نیاز مندی ها را به درستی شناسایی کنید و بتوانید بخش های مختلف را که باید به صورت مستقل توسعه یابند را تعیین کنید.قدم بعدی تصمیم‌گیری در مورد تکنولوژی‌ها و ابزارهای مورد استفاده است. ممکن است هر میکرو فرانت‌اند از تکنولوژی‌های مختلف استفاده کند (Angular, React, Vue.js).طراحی لایه های معماری یعنی:لایه Composition: که مسئول طراحی نحوه ترکیب و نمایش میکرو فرانت‌اندها درUI است.لایه Integration: که مسئول طراحی نحوه هماهنگی و ارتباط بین میکرو فرانت‌اندها است.پیاده‌سازی Composition Layer:این لایه تعیین میکند که در یک اپ میکروفرانت اند های مختلف باید از نظر UI ای کجای صفحه قرار بگیرند مثلا Header باید بالای صفحه قرار بگیرد یا مثلا وقتی کاربر وارد صفحه سبد خرید خود شد Card باید سمت راست صفحه قرار بگیرد.این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.برای طراحی Client Side باید از روش هایی مثل Module Federation برای بارگزاری و ترکیب میکروفرانت ها در مرورگر استفاده کند. خب همونطور که مشخصه هنگام لود شدن اپ میکروفرانت های صفحه جاری به همراه فایل های JS , Css خود لود میشوند و این فایل ها باید با هم ترکیب بشن تا بتونن به صورت یکپارچه در مرورگر نمایش داده بشن.برای طراحی Server Side، میتوانید از تکنیک‌هایی مانند Edge-Side Includes (ESI) برای ترکیب میکرو فرانت‌اندها در سمت سرور بهره ببریم. خب قاعدتا سرعت بارگزاری صفحه در این روش بیشتر است چون این ترکیب شدن در سمت سرور اتفاق میوفتد.سپس باید یک Shell Application طراحی و پیاده سازی کنید که مسئولیت بارگذاری و نمایش میکرو فرانت‌اندها را بر عهده دارد.سپس از Router برای مدیریت مسیریابی و بارگذاری میکرو فرانت‌اندهای مختلف استفاده کنید.پیاده‌سازی Integration Layer:همونطور که گفتیم این لایه مسئول طراحی نحوه هماهنگی و ارتباط بین میکرو فرانت‌اندها است.برای هماهنگی و ارسال و دریافت وضعیت و داده‌ها بین میکرو فرانت‌اندها میتوانید از State Management مانند Redux یا NgRx استفاده کنید.برای هماهنگی و ارسال و دریافت ایونت ها بین میکرو فرانت‌اندها هم میتوانید از ابزارهایی مانند Event Bus استفاده کنید.نکته دیگه که حتما باید به آن توجه کنید اینه که باید حتما یک DSL یا Design System Language برای یکپارچه شدن ظاهر اپلیکیشن داشته باشید.مورد دیگری که باید انجام شود اعمال سیاست‌های امنیتی است که مطمئن شوید هر میکروفرانت‌اند فقط به سورس های مجاز دسترسی داشته باشد. مانند URL Whitelisting و OAuth2 یا OpenID Connect و ... که باید به طور مفصل درمورد آنها مطالعه کنید.تهیه مستندات جامع برای هر میکرو فرانت‌اند، شامل نحوه استفاده، ساختار کد، و تعاملات با سایر میکرو فرانت‌اندها.امیدوارم این مقاله براتون مفید واقع بشه :)

آیا جاوااسکریپت با استفاده از Worker ها Multi Thread کار میکند؟

سمانه باسمه چی — Sat, 24 Aug 2024 20:22:37 +0330

وقتی از Worker در JS استفاده میکنیم، جاوااسکریپت Multi Thread کار میکند یا شبیه به Multi Thread کار میکند؟بهتره قبلش بگیم Thread چیه؟ یک مسیر از دستور العمل هاست که توسط CPU اجرا میشه در صورتی که CPU چند هسته ای باشد هر کدام از این Thread ها روی یک هسته اجرا میشن. آیا میشه چند Thread روی یک هسته در حال اجرا باشند؟بله میشه ، منتها در این حالت concurrency رخ میده یعنی CPU زمان را بین Threads تقسیم کرده و به نظر می‌رسد که پردازش‌ها به صورت موازی انجام می‌شوند.حالا بریم سراغ جاواسکریپت:جاوااسکریپت به طور ذاتی Single Thread است، اولین موردی که باید درموردش بدونیم اینه که :-اولا Thread رو مرورگر از طریق تعامل با سیستم‌عامل و CPU ایجاد میکند.-دوما JavaScript Engine فقط کد جاوااسکریپت را اجرا می‌کند و با مرورگر تعامل می‌کند. این موتور جاوااسکریپت مدیریت Threads را به سیستم‌عامل واگذار می‌کند.خود فایل های JS ما روی یک Thread اصلی یعنی Main Thread اجرا میشن. وظیفه‌ی این Thread هم اجرای کد جاوااسکریپت، مدیریت رویدادها، و به‌روزرسانی DOM هست.دومین نکته ای که لازمه بگم اینه که worker ها بخشی ازConcurrency Model and Event Loop در Web APIs مرورگر هستند بنابراین وقتی شما از worker استفاده میکنید مرورگر برای هر ورکر یک Thread جدا از Main Thread ایجاد میکنه.منتها این Thread ها به منابع Main Thread یعنی DOMو ... دسترسی ندارند و تبادل اطلاعات بین انها و Main Thread از طریق Message Passing اتفاق میوفتد یعنی شما باید از طریق ارسال و دریافت پیام‌ها به مرورگر این امکان را بدهید که اطلاعات بین Threads را تبادل کند. بنابراین مشکلاتی مثل Race Condition یا نیاز به Synchronization در سطح Threadها معمولاً به وجود نمی‌آید.حالا آیا این Thread ها روی یک هسته CPU اجرا میشن یا چند هسته؟بستگی به سیستم و CPU شما داره اگر CPU چند هسته‌ای باشد و مرورگر به درستی پیکربندی شده باشد، Threads می‌توانند به طور واقعی بر روی هسته‌های مختلف اجرا شوند. این حالت به Parallelism اشاره دارد، به این معنا که چندین Task به طور هم‌زمان در چندین Thread و هسته‌های جداگانه اجرا می‌شوند.اگر CPU تنها یک هسته داشته باشد، Threads روی همان هسته اجرا می‌شوند و مرورگر به صورت Concurrent آنها را اجرا می‌کند. در این حالت، Threads به طور نوبتی (زمانی) اجرا می‌شوند (به این صورت که بین تسک ها Context Switching انجام میده برای همین شما فکر میکنید که تسک ها دارن همزمان اجرا میشن)، به این معنا که CPU زمان را بین آنها تقسیم می‌کند. البته به این نکته توجه داشته باشید که مبحث concurrency لزوما فقط در این شرایط رخ نمیدهد کلا concurrency به معنی اجرای همزمان تسک هاست که در یک مقاله دیگه به طور کامل توضیحش میدم.و نکته نهایی اینه که پیاده‌سازی‌های مختلف مرورگرها ممکن است جزئیات متفاوتی در مدیریت Threads و منابع داشته باشند، بنابراین رفتار ممکن است در مرورگرهای مختلف کمی متفاوت باشد.امیدوارم با این مقاله تونسته باشم این مفاهیم رو تا حد خوبی توضیح بدم و شفاف کنم.