برنامه نویسی

Aurelia 2: برداشتی تازه از چارچوب های جاوا اسکریپت

اخیراً، نام‌های محبوبی مانند React (از لحاظ فنی یک کتابخانه)، Next.js، Svelte، Angular و غیره بر مکالمات در مورد چارچوب‌های جاوا اسکریپت غالب شده است.

همه اینها ابزارهای عالی هستند، اما آیا نام Aurelia 2 را شنیده اید؟
وقتی برای اولین بار با اورلیا روبرو شدم، واکنش من این بود: “این چیست؟” اما پس از 2 سال کار با آن، اکنون معتقدم که یکی از بهترین فریمورک های موجود است، اگر بهترین نباشد.

چرا اینطور فکر می کنم؟

بذار توضیح بدم من از React.js به Aurelia منتقل شدم و در ابتدا تصور کردم که این فقط یک چارچوب جاوا اسکریپت دیگر است. با این حال، همانطور که عمیق تر می کردم، شروع به درک پتانسیل و قدرت واقعی آن کردم.

این مقاله به عنوان مقدمه ای برای Aurelia 2 خدمت می کند، جایی که من برخی از مفاهیم قدرتمند آن و دلیل متمایز بودن آن را به نمایش خواهم گذاشت.

1. گردآوری رویداد

در ابتدا Event Aggregator است، مفهومی که اگر در اکوسیستم C# کار کرده باشید ممکن است با آن آشنا باشید، اما در اینجا نحوه عملکرد آن در Aurelia آمده است:

Event Aggregator مشابه الگوهای پیام‌رسانی مبتنی بر رویداد که معمولاً در سی شارپ استفاده می‌شود عمل می‌کند. این یک سیستم میخانه/فرعی است که به شما امکان می دهد رویدادهای سفارشی را در برنامه های Aurelia خود منتشر کرده و در آن مشترک شوید.

این امر ارتباط جدا شده بین بخش های مختلف برنامه شما را تسهیل می کند. درست مانند C#، که در آن از جمع‌آوری‌کننده‌های رویداد یا واسطه‌ها برای ساده‌سازی مدیریت رویداد استفاده می‌شود، گردآورنده رویداد Aurelia توسط خود چارچوب برای انتشار رویدادها در مراحل مختلف چرخه حیات برنامه و در طول اقدامات خاص مورد استفاده قرار می‌گیرد.

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با این کار، می‌توانیم بدون زحمت یک معماری مبتنی بر رویداد را پیاده‌سازی کنیم و سردردهای جفتی که اغلب در React و فریمورک‌های مشابه با آن مواجه می‌شوند را برطرف کرده و برطرف کنیم.

2. تزریق وابستگی

تزریق وابستگی (DI) یک الگوی طراحی است که ایجاد اشیا با وابستگی های مورد نیازشان را تسهیل می کند، بدون اینکه خود اشیا مسئول ایجاد این وابستگی ها باشند. این امر باعث تقویت اتصال آزاد بین کلاس‌ها و وابستگی‌های آنها می‌شود و ماژولار بودن و تست‌پذیری را افزایش می‌دهد.

Aurelia یک سیستم قدرتمند و انعطاف پذیر DI ارائه می دهد که فرآیند سیم کشی بخش های مختلف برنامه شما را ساده می کند. با Aurelia's DI، مدیریت و تزریق وابستگی ها یکپارچه می شود و منجر به کد تمیزتر و قابل نگهداری تر می شود.

علاوه بر این، این رویکرد توسعه تست محور (TDD) را آسان‌تر می‌کند، زیرا امکان تمسخر و آزمایش ساده اجزای جداگانه را بدون نیاز به تنظیمات پیچیده یا وابستگی‌های محکم می‌دهد.

3. ترکیب پویا

عنصر اورلیا ترکیب پویا نماها و مدل‌های نما را ممکن می‌سازد. مانند یک عنصر سفارشی عمل می کند، اما بدون نیاز به یک نام برچسب خاص، اجازه می دهد تا اجزای UI انعطاف پذیر و قابل استفاده مجدد.
در داخل مدل view که با استفاده می شود، شما به تمام رویدادهای چرخه حیات استاندارد Aurelia به همراه یک روش فعال سازی اضافی دسترسی دارید که می تواند برای مقداردهی اولیه یا ارسال پارامترها به مدل view استفاده شود.

با استفاده از عنصر در عمل:


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه کار می کند:

  • ترکیب پویا: ویژگی component.bind به صورت پویا DynamicComponent را به عنوان مدل view متصل می کند.

  • عبور پارامترها: ویژگی model.bind پارامترهایی را به متد activate در مدل view ترکیب شده به صورت پویا ارسال می کند.

تفکیک نگرانی ها

یکی از دلایلی که من Aurelia 2 را دوست دارم، جداسازی تمیز نگرانی ها از طریق الگوی MVVM (Model-View-ViewModel) است.

مشاهده کنید: ساختار رابط کاربری کاملاً از منطق جدا شده است. این به سادگی به ViewModel متصل می شود تا داده ها را نمایش دهد و تعاملات کاربر را ضبط کند.

ViewModel: اینجاست که تمام منطق اتفاق می افتد. این داده ها را کنترل می کند، قوانین تجاری را مدیریت می کند، و View را به روز می کند، بدون اینکه نگران نحوه نمایش آن باشد.

مدل: Aurelia داده های اصلی برنامه را از View و ViewModel جدا نگه می دارد و وضوح و تمرکز را حفظ می کند.

این جداسازی باعث می‌شود برنامه بسیار ماژولار، نگهداری آسان‌تر و آزمایش آن بسیار ساده‌تر شود و به کدهای انعطاف‌پذیرتر و مقیاس‌پذیرتر اجازه می‌دهد.

نتیجه گیری

در این پست، من فقط بر روی سه مفهوم قدرتمند از Aurelia 2 تمرکز کرده‌ام – Event Aggregator، Dependency Injection و Dynamic Composition – اما اینها تنها بخش کوچکی از آنچه چارچوب ارائه می‌کند است.

Aurelia 2 دارای ویژگی هایی است که به ساخت برنامه های کاربردی تمیز، مقیاس پذیر و قابل نگهداری کمک می کند.

برای دریافت تصویر کامل و غواصی عمیق‌تر در قابلیت‌های آن، شما را به کاوش در اسناد Aurelia 2 برای درک جامع‌تر تشویق می‌کنم.

PS: این اولین پست من است، و امیدوارم که آن را دوست داشته باشید!

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا