Microfrontends

afsaneh alizadeh — Sun, 27 Aug 2023 19:34:32 +0330

Microfrontends (singular: microfrontend) is a front-end web development pattern in which a single application may be built from disparate builds. It is analogous to a microservices approach but for client-side single-page applications written in JavaScript. The only difference between microservices and microfrontend is that we don't need to have a main user interface for our project.This means: Microfrontends is an architectural and organizational style (NOT a specific technology!!!) in which the front-end of the app is decomposed into individual, loosely coupled “micro apps” that can be built, tested, and deployed independently. Just like in the world of microservices where the backend is chopped into individual services.?Why Microfrontends ,What's the Difference? The image below shows the difference between the microfront end and other structures. I can't say that using the micro frontend is the best method, but without a doubt, This is a much simpler structure, Independent of the type of technology in JavaScript frameworks, Easy development and creation of independent groups. The architecture used in Microfrontend is Domain-Driven.?On the other hand, In the final meeting, the group determines the main structure of the project, and the teams must follow that structure so that rewriting in the code or code optimization does not decrease.If I want to give an example in this regard: Team 1 uses font awesome icons and Team 2 uses Icon Material.How to Use Microfrontendsng add @angular/elements.Import Injectors in constructor in AppComponentWe need a function?Sample code in Ts:?

NPM

afsaneh alizadeh — Sat, 28 Mar 2020 13:26:20 +0430

Npmبا سلام و عرض ادب خدمت تمامی دوستان عزیزمبرای من چند وقت پیش در مورد NPM سوال پیش اومده بود ولی تو اینترنت مطلب فارسی مناسبی پیدا نکردم به همین دلیل تصمیم گرفتم اطلاعات جمع آوری خودم را در اختیار سایر دوستانم قرار بدم.NPMیک کتابخانه‌ی بزرگ است که یک نصاب و Package Manager به حساب می‌آید.این کتابخانه Open source و رایگان می‌باشد.NPM : node packet manager به معنای یک نرم‌افزار مدیریت بسته node.js است.اگر از node.js‌ اطلاعی ندارید نگران نباشید. به طور خلاصه، node.js یک محیطی برای اجرای کدهای جاوا اسکریپت در سمت سرور است.به طور معمول کدهای جاوا اسکریپت در سمت کاربر و در مرورگر اجرا می‌شوند. اما محیط node.js شرایطی را فراهم می‌کند که می‌توان از کدهای جاوا اسکریپت در سمت سرور هم استفاده کرد.در حین برنامه‌نویسی گاهی لازم است در پروژه، از یک یا چند کتابخانه استفاده کنیم.در گذشته لازم بود حتماً این کتابخانه‌ها را دانلود و به پروژه اضافه می‌کردیم.گاهی وابستگی یک کتابخانه به چند فایل یا کتابخانه‌ی دیگر کارکردن را بسیار پیچیده می‌کرد. زیرا باید تمام آن فایل و کتابخانه‌های وابسته را نیز به پروژه اضافه کنیم!از این رو ابزاری به نام Package Manager ایجاد شد تا اعمالی مثل نصب، بروزرسانی و حذف کتابخانه‌ها را به صورت خودکار انجام دهد.از مزایای استفاده از Package Managerها این است که نیازی نیست به فکر اضافه کردن فایل‌های جانبی و وابسته به کتابخانه‌ی اصلی باشیم. این ابزار قادر است این کتابخانه‌ها را دانلود و نصب نماید.نصب npmبرای نصب این ابزار محبوب به نصب Node.js نیاز دارید. یعنی شما باید از طریق آدرس https://nodejs.org/en ابتدا node.js را نصب کنید تا npm همراه آن نصب شود.بعد از نصب node.js‌ برای اطمینان از نصب npm کافیست cmd ویندوز را باز کنید و دستور npm --v را تایپ کنید تا ورژن آن نمایش داده شود.1. Npm init :میاد براتون فایل packet.json یا به قولی Repositiry میسازهکار packet.json چیه ؟یک لیستی از پکیچ های مورد نیاز پروژه رو در خودش ذخیره میکنهکه شامل Version , Nameحالا به چه درد میخوره؟؟؟ وقتی بخوایم پروژه رو در اختیار کسی قرار بدیم فایل ها حجم بالایی دارن برای همون پکیچ هارو براش نمیفرستیم و فقط کافیه package.json براش بفرستیم و اون کافیه در CMD بیاد دستورNpm installبزنه تمام پکیچ ها براش نصب میشه .حالا اگر بخوایم پکیج ها سراسری نصب بشه روی سیستممون باید از دستورNpm install type script --gاستفاده کنیم .میدونید اگر پکیج ها به صورت سراسری نصب بشن به چه معنیه؟؟یعنی به جای اینکه بیاد روی پروژه package هارو نصب کنه میاد روی سیستمت نصب میکنه و توی کش سیستمتون میمونه. به همین دلیل برای پروژه های که دفعه بعدی میخوای بسازی بهتره پکیج ها رو به صورت سراسری نصب کنی.دستور updateNpm Update --gاز این دستور برای آپدیت کردن ورژن های پکیج و همچنین اگر تغییری که خودمون توی package.json داده باشیم میتونیم از این دستور استفاده کنیم و تغییرات مورد نظرمون رو اعمال کنیم .دستور listما میتوانیم npm install کنیم یا به صورت global از دستور npm install global پکیج های مورد نظرمون رو روی پروژه نصب کنیم .اگر به صورت global نصب کنیم و بخوایم بدونیم فایل های پروژه کجاست (شاید نیاز به تغییر در package.json باشه ) و بخواهیم فایل ها رو بدونیم کجاست از دستورNpm list --g استفاده میکنیم این دستور در cmd بصورت درخت اطلاعات براتون نمایش میدهد در خط اول آدرس پکیج های global و در ساختار درختی هم پکیج ها ، نام ،ورژن رو نمایش میدهد.حذف :Npm uninstall Npm uninstall --save --ddNpm --g uninstall --saveداخل package.json علاوه بر اینکه نام و ورژن و.... 7 تا آپشن که هنگام ساخت package.json بهش میدیم .Dependencies , dev dependencies داریم هنگامی که توی دستورات comment line به طور مثالNpm install رو میزنیم در آخر دستورات --save رابزنیم یعنی برو توی package.json در قسمت dependencies ذخیره کن .اگر save --dev-- برو در قسمت devdependencies در package.json اون فایل هارو اضافه کن .و در آخر save --optional-- از وابستگی های اختیاری حذف میشود .بعنی ما زمانیکه package رو install میکنیم اگر دستورsave-- optional-- رو بزنیم در package.json میاد یه قسمتی به اسم optionalDependencies میسازه.که اونجا فایل هایی که به صورت optional تعریف کردیم ذخیره میکنه . و در صورت حذف اون فایل ها باید از دستور save --optional-- استفاده کرد .در npm دستوری به اسم config وجود دارد .Config1. Set2. Get3. List4. Delete5. edit

نوشته های afsaneh alizadeh

Microfrontends

NPM