آشنایی با ساختار اپلیکیشن Ember.js

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

همانطور که مطرح کرده بودیم پس از نصب ember cli پیاده سازی پروژه ember بصورت زیر انجام میشه :

ember new yourProjectName

همچنین ما اپلیکیشن رو توسط دستور زیر اجرا می کنیم :

ember server

درنهایت خروجی با پورت 4200 در مرورگر به نمایش در میاد :

حالا ما یک پروژه بنام yourprojectname داریم. بیایید اسم پروژه رو MailBox بگذاریم. الان میتونیم بیشتر درمورد معماری اپلیکیشن بحث کنیم.

معماری اپلیکیشن Ember

معماری پیشفرض اپلیکیشن ember به صورت تصویر زیر هست :

داخل پروژه MailBox ما میتونیم فایل های پیکربندی زیادی شامل package.json ببینیم. جدا از این فایل ها چند پوشه هم وجود دارند که در ادامه بهشون می پردازیم :

• node_modules : این پوشه شامل ember add-ons هست که نصب شدند. همانطور که میدونید ember add-ons چیزی جز ماژول های node نیستند.
• bower_components : شما میتونید کامپوننت های bower رو به پروژه ember بیافزایید. ember cli فایل bower.json رو چک میکنه و اپ رو برای کامپوننت های جدید ری استارت میکنه.
• vendor : ممکنه بخواهید از کتابخانه ای استفاده کنید که در ember add-on یا bower موجود نیستند, باید اون رو در پوشه vendor قرار بدید. به یاد داشته باشید وقتی ember-cli-build.js رو مدیریت می کنید فقط asset های داخل bower_component یا vendor رو وارد کنید.
• public : اگر این یک asset سوم شخص نیست, اون رو در پوشه public پروژه قرار بدید. مثلا favion, font, robot.txt.
• tests : همانطور که از اسمش پیداست این پوشه برای تست کردن بکار میاد. شما میتونید از طریق مستندات ember در این مورد بیشتر بدانید.
• config : پیکربندی میتونه در این پوشه پیدا یا افزوده بشه. یک فایل بنام enviroment.js از ابتدا وجود دارد که شامل پیکربندی مربوط به اپلیکیشن هست.
• tmp : شما بعد از یکبار اجرای اپلیکیشن این پوشه رو در مسیر پروژه مشاهده می کنید. وقتی اپلیکیشن در حال اجراست, فایل هایی بصورت خودکار اینجا ایجاد می شوند.
• dist : وقتی build تمام شد, خروجی تولید شده داخل این پوشه ذخیره میشه. برای داشتن این پوشه حداقل باید یکبار اپلیکیشن رو اجرا کنید.
• app : این مهم ترین پوشه هست که شامل تمام کامپوننت های اپلیکیشن شماست. همانطور که می بینید تعداد زیادی فایل و پوشه داخل پوشه app وجود دارد. فایل app.js نقطه آغاز اپلیکیشن شماست. در فایل router.js شما نقشه مسیر اپ رو پیدا می کنید و در فایل resolver.js قابلیت کامپایل ES6 به ES5 وجود دارد.
• ember-cli-build.js : شما میتونید فایل های بیشتری رو اینجا وارد کنید تا شامل ساخت نهایی پروژه شما بشوند. فراموش نکنید این ها باید یا از bower_components و یا از vendor باشند.

چگونگی عملکرد

فایل app.js 

import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

این فایل در پوشه app یک bootstraper هست. این فایل به Ember.Application چند ویژگی اضافه کرده. modulePrefix و prodModulePrefix چیزی شبیه نام پروژه هستند که در ساخت ماژول ها استفاده می شوند. Resolver کمک می کند ماژول های AMD را داشته باشیم. ember-resolver بصورت پیشفرض کار تبدیل ES6 به ES5 رو با استفاده از babel انجام میده. ember-load-initializers کمک می کنه تا مقادیر اولیه بارگذاری شوند. دو نوع intializer داریم یکی برای اپلیکیشن یکی هم application instance. 

Ember یک بستر ابتدایی رو میسازه, پس حتی اگر چیزی در کنترلرها و مسیرها و template ها مشاهده نکردید, ember در حقیقت یک کنترلر, مسیر و template به اسم اپلیکیشن ساخته اما در دیسک ذخیره نشده. بهرحال شما میتونید اونها رو بازنویسی کرده و برای خودتون بسازید.

ساخت یک اپلیکیشن Hello World

اگر اپلیکیشن شما در حال اجرا نیست میتونید با استفاده از دستور ember s اون رو اجرا کنید.

همانطور که گفتیم یک قالب پیشفرض بنام application ابتدا ساخته شده پس برای اینکه اون قالبی که در localhost:4200 اجرا میشه رو عوض کنیم کافیه دستور زیر رو وارد کنیم :

ember generate template application

بعد از اجرای این دستور شما فایل application.hbs رو در مسیر app/templates مشاهده می کنید. کد زیر رو داخل این فایل قرار داده و localhost:4200 رو چک کنید :

<h1>Hello World</h1>

برای معرفی یک کنترلر از دستور زیر استفاده می کنیم :

ember generate controller application

بعد از اجرای اون فایل application.js در مسیر app/controllers ساخته میشه بصورت زیر تغییر بدید:

import Ember from 'ember';
export default Ember.Controller.extend({
    myVal: "Void Canvas"
});

یک تغییر کوچکم در application.hbs انجام بدید :

<h1>Hello World {{myVal}}</h1>

حالا نتیجه رو مشاهده کنید.

منبع