مروری بر EmberJS

Ember.js یک فریم‌ورک‌ رایگان، سمت کاربر و متن‌باز جاوا اسکریپت است که باهدف توسعه وب اپلیکیشن به کار گرفته می‌شود. این فریم‌ورک‌ از طریق فراهم آوردن یک راهکار کامل که شامل مدیریت داده و application flow می‌شود، امکان ساخت اپلیکیشن جاوا اسکریپت سمت کاربر را را می‎‌دهد.

اسم اصلی Ember.js فریم‌ورک‌ SproutCore MVC بود. این فریم‌ورک‌ توسط Yehuda Katz توسعه یافت و برای اولین بار در دسامبر ۲۰۱۱ منتشر شد. نسخه پایدار Ember.js در ۲۸ نوامبر ۲۰۱۶ و با نام Ember.js ٢.١٠.٠ به بازار عرضه شد.

چرا از Ember.js استفاده کنیم؟

برای درک کاربرد گسترده Ember.js بهتر است به نکات زیر توجه کنید:

•  Ember.js یک فریم‌ورک‌ جاوا اسکریپت متن باز تحت لیسانس MIT است.
• Ember.js با استفاده از موتور نمونه‌های پیش‌ساخته HTMLBar که از مجموعه‌های اصلی موتور نمونه‌های پیش‌ساخته Handerlbars است، ساختار برنامه‌نویسی یکپارچه تازه‌ای را فراهم می‌سازد.
•  Ember.js موتور رندرینگ Glimmer را برای افزایش سرعت رندرینگ فراهم می‌سازد.
• این فریم‌ورک‌ قابلیت Command Line Interface را فراهم می‌آورد. قابلیت مذکور الگوهای Ember را با فرآیند توسعه یکپارچه می‌کند و به‌راحتی بر بهره‌وری توسعه‌دهنده متمرکز می‌شود.
• Ember.js از قابلیت جفت‌سازی داده (Data Binding) برای ایجاد لینک بین دو مؤلفه پشتیبانی می‌کند و هرگاه یک قابلیت تغییر کند، قابلیت دیگر نیز با ارزش تازه روزآمد می‌شود.

ویژگی‌های Ember.js

برخی ویژگی‌های مهم Ember.js به شرح زیر هستند:

• Ember.js برای خلق ابزارهای کاربردی جاوا اسکریپت که نگهداشت پذیر و دارای قابلیت استفاده مجدد هستند، استفاده می‌شود.
• فریم‌ورک‌ Ember.js در بطن مدل توسعه دارای HTML و CSS است.
• این فریم‌ورک‌ شامل تولید نمونه می‌شود.
• مسیرها از ویژگی‌های اصلی Ember.js هستند و برای مدیریت URL ها به کار گرفته می‌شوند.
• Ember.js ابزار Ember Inspector را برای رفع مشکل ابزارهای کاربردی Ember در اختیار کاربر قرار می‌دهد.
• این فریم‌ورک‌ جاوا از نمونه‌های پیش‌ساخته‌ای استفاده می‌کند که به به‌روزرسانی خودکار مدل درصورتی‌که محتوای ابزارها تغییر کند، کمک می‌کنند.

نصب Ember.js

نصب کردن Ember.js در سیستم کامپیوتری بسیار ساده است. با استفاده از (Ember CLI (Command Line Interface، می‌توانید پروژه‌های Ember را ایجاد و مدیریت کنید. Ember CLI با انواع متفاوت مدیریت ابزار مانند الحاق، حذف و کاهش موارد غیرضروری و ساخت نسخه‌های جدید سروکار دارد و همچنین ابزارهای تولیدی را برای تولید اجزا، مسیرها و غیره فراهم می‌آورد.

برای نصب کردن Ember CLI باید ملزومات زیر را داشته باشید:

• Git- که یک سیستم کنترلی متن باز برای ردیابی تغییرات ایجادشده در فایل‌هاست. برای کسب اطلاعات بیشتر در مورد این برنامه می‌توانید به وب‌سایت Git مراجعه کنید.
• Node.js و npm: Node.js یک برنامه متن باز است که برای توسعه ابزارهای کاربردی شبکه‌سازی و سمت سرور به کار می‌رود و همچنین به زبان جاوا اسکریپت نوشته شده است. Npm هم یک ابزار مدیریت بسته‌بندی گره است که برای نصب، به اشتراک‌گذاری و مدیریت متعلقات پروژه به‌کاربرده می‌شود. Ember CLI از زمان راه‌اندازی Node.js  و npm برای به دست آوردن متعلقات استفاده می‌کند.
• Bower برای مدیریت اجزایی مانند HTML، CSS، جاوا اسکریپت، فایل‌های تصویری و غیره استفاده می‌شود و می‌توان با استفاده از npm آن را نصب کرد.
• Watchman یک افزونه اختیاری است که می‌توان از آن برای زیرنظر گرفتن فایل‌ها یا دایرکتوری‌ها و انجام عملیات بعد از تغییر در فایل ها یا دایرکتوری ها، استفاده کرد.
• PhantomJS یک افزونه دیگر است و می‌توان از آن برای اجرای آزمون‌های واحد مبتنی بر مرورگر به‌منظور ارتباط با صفحه وب بهره گرفت.

نصب Ember CLI

Ember CLI الگوهای Ember را با فرآیندهای توسعه یکپارچه می‌کند و به‌راحتی بر بهره‌وری توسعه‌دهنده متمرکز می‌شود. Ember CLI با Ember.js و Ember Data برای ایجاد ابزارهای کاربری Ember مورداستفاده قرار می‌گیرد.

شما می‌توانید Ember را با استفاده از npm و طبق دستور زیر نصب کنید.

npm install -g ember-cli
			

برای نصب نسخه بتا، از دستور زیر استفاده کنید.

npm install -g ember-cli@٢.١٠

برای بررسی نصب موفقیت‌آمیز Ember نیز می‌توانید از دستور زیر استفاده کنید.

ember -v

بعد از اجرای فرمان بالا، خروجی مانند زیر را دریافت خواهید کرد

ember-cli: ٢.١٠.١

node: ٠.١٢.٧

os: win٣٢ ia٣٢

مفاهیم پایه Ember.JS

• روتر
• نمونه‌های پیش‌ساخته
• مدل‌ها
• Components
• روتر و نگه‌دارنده مسیر

با واردکردن آدرس در قسمت آدرس بار، برنامه اجراشده و کاربر روی لینکی در درون برنامه کلیک خواهد کرد. فریم‌ورک‌ Ember از روتر برای جایگذاری URL نگه‌دارنده روتر استفاده می‌کند. روتر URL موجود را با مسیری که بعداً برای بارگذاری داده‌ها، نمایش دادن نمونه‌های پیش‌ساخته و برقراری حالت کاربردی برنامه هماهنگ می‌سازد.

نگه‌دارنده روتر اعمال زیر را انجام می‌دهد:

نمونه پیش‌ساخته را فراهم می‌سازد.

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

اگر کاربر اجازه دسترسی و بازدید از بخش خاصی از برنامه را نداشته باشد، روتر مسیر جدیدی را فراهم می‌سازد.

نمونه‌های پیش‌ساخته

نمونه‌های پیش‌ساخته، رابط‌های کاربری قوی برای استفاده‌کنندگان نهایی هستند. نمونه پیش‌ساخته Ember ظاهر رابط کاربری خاصی را در اختیار استفاده‌کننده قرار می‌دهد که از ساختار محتوایی نمونه‌های پیش‌ساخته Handlebar استفاده می‌کند. این فریم‌ورک‌ ابزار کاربردی front-end را می‌سازد که بسیار شبیه HTML رایج است. همچنین این فریم‌ورک‌ از حالت ظاهری رایج پشتیبانی می‌کند و به‌صورت پویا آن‌ها را روزآمد می‌سازد.

مدل

نگه‌دارنده‌های مسیر مدلی را ایجاد می‌کنند که اطلاعات را برای سرور وب حفظ می‌کند. این مدل داده‌های ذخیره‌شده در پایگاه داده را دست‌کاری می‌کند.

مدل یک کلاس ساده است که میزان کاربردی بودن Ember Data را افزایش می‌دهد. Ember Data یک کتابخانه است که به‌خوبی با Ember.js برای دست‌کاری داده‌های ذخیره‌شده در پایگاه داده همکاری می‌کند.

Components

Components رفتار رابط کاربر را کنترل می‌کنند و دارای دو بخش هستند:

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

می‌توانید به‌راحتی Ember.js را روی سیستم خود راه‌اندازی کنید.

ساخت ابزار کاربردی

اگر می‌خواهید با استفاده از Ember.js یک برنامه ساده بسازید، ابتدا یک پوشه را در آدرسی که ابزارهای کاربردی خود را می‌سازید، ایجاد کنید. برای مثال، اگر پوشه «emberjs-app» را ساخته‌اید به این فولدر به شکل زیر مسیر بدهید.

درون پوشه فوق یک پروژه جدید با استفاده از دستور زیر ایجاد کنید.

وقتی‌که پروژه را ایجاد کردید، دستور جدید ساختار دایرکتوری زیرا را با فایل‌ها و دایرکتوری‌ها فراهم می‌سازد.

• app- پوشه‌ها و فایل‌های مربوط به مدل‌ها، مسیرها، اجزاء، نمونه‌های پیش‌ساخته و سبک‌ها را مشخص می‌کند.
• bower_components / bower.json- برای مدیریت اجزائی مانند HTML, CSS, JavaScript، فایل‌های تصویری و غیره به کار می‌رود و می‌توان  basics Overviewبا استفاده از npm آن را نصب کرد. دایرکتوری bower_components حاوی تمامی اجزاء Bower است و json هم شامل فهرست وابسته‌هایی است که توسط Ember، لایه‌های Ember CLI و QUnit نصب می‌شوند.
• Config- شامل دایرکتوری js است که برای راه‌اندازی تنظیمات یک ابزار به‌کاربرده می‌شود.
• Dist- شامل فایل‌های خروجی است که هنگام ساختن اپلیکیشن آرایش بندی می‌شوند.
• node_modules / package.json- NPM یک مدیر بسته‌بندی گره برای js است که به‌منظور نصب، به اشتراک‌گذاری و مدیریت وابسته‌های پروژه به کار می‌رود. فایل package.json شامل وابسته‌های کنونی npm ابزار کاربردی و بسته‌های فهرست بندی شده و نصب‌شده در دایرکتوری node_modules است.
• Public- شامل مواردی مثل تصاویر، فونت‌ها و غیره است.
• Vendor- یک دایرکتوری است که در آن وابسته‌های front-end مانند جاوا اسکریپت و CSS توسط Bower کنترل نمی‌شوند.
• tests / testem.js- آزمون‌های خودکار در زیرپوشه‌های آزمون‌ها ذخیره‌شده و راه‌انداز آزمون testem از Ember CLI در js مرتب می‌شود.
• Tmp- شامل فایل‌های موقتی Ember CLI می‌شود.
• ember-cli-build.js- نحوه ساخت ابزار کاربردی با استفاده از Ember CLI را مشخص می‌سازد.