نصب Ember.js در 5 دقیقه

نصب Ember.js در 5 دقیقه

چند وقتی است که درباره فریم ورک های مختلف جاواسکرپت (JavaScript) مثل، Angular, Ember, Backbone در اطراف بحث و گفتگو می شود. بعد از سالها که کدهای اسپاگتی و نشت حافظه در جاواسکریپت وجود داشت، این فریم ورک بسیاری از نقطه ضعف های خود را در ساخت برنامه های جاواسکریپت حل کرده است. حالا آنها به یک ابزار توسعه دهنده عالی تبدیل شده اند، که امکان ساخت وب سایت های واکنشی یا ریسپانسیو (Responsive) و یا برنامه های تک صفحه ای را فراهم می کنند. پس از کار با چند برنامه Backbone، من علاقه مند شدم که چگونه ember به خوبی کار می کند. در اینجا قصد داریم لحظه ای را با ember.js و Yeoman کار کنیم.

قبل از اینکه شروع کنیم، باید همانطور که می دانید باید node را نصب و به درستی تنظیم کرده باشید، اگر نصب نکرده اید پس برگردید نصب کنید و بعد ادامه این داستان را بخوانید.

 

Yeoman

yeoman مجموعه ای از ابزارهای هوشمند است که برنامه های جاواسکرپت را بدون دردسر می شود توسعه داد (یــا حداقل با کمترین دردسر). این چیزی است که به برنامه ما سرعت می بخشد: نصب نیازمندی های برنامه و اجرا کردن برنامه در سرور برای مشاهده آن.

علاوه بر این، ما ساخت و بهینه کردن برنامه (build / minify) را برای تولید پوشش می دهیم.

برای اطلاعات بیشتر می توانید به yeoman.io مراجعه کنید. یا نصب و راه اندازی yeoman را مطالعه کنید.

 

نصب Yeoman

برای نصب yeoman و ژنراتور برای برنامه های ember، به سادگی می توانید دستورات زیر را به ترتیب در خط فرمان ویندوز (CMD) یا برنامه (Git) وارد کنید:

این کار باعث می شود نسخه به روز yeoman و ژنراتور ember دانلود و نصب شود. عالیست! حالا آماده هستیم که کار را شروع کنیم.

 

ساخت یک برنامه با Ember.js

برای برنامه خود یک دایرکتوری ساخته و وارد آن شوید، و دستورات زیر را وارد کنید، توجه کنید که من برای وارد کردن دستورات از برنامه Git استفاده کرده ام:

حال با وارد کردن دستور yo در خط فرمان به شما فهرستی (menu) به صورت زیر می دهد:

yeoman_ember_generator_options

به گزینه خواسته شده جواب بله (Y) دهید:

  • آیا مایل هستید Twitter Bootstrap را برای Sass نصب شود؟

بعد از این کار، yeoman فایل ها و پوشه های برنامه ember شما را نصب می کند، و با استفاده از bower نیازمندی های برنامه را دانلود و نصب می کند. برای اطلاعت بیشتر می توانید به سایت bower یا آغاز به کار با bower را مطالعه کنید.

به محض این که مراحل قبل انجام شد، تنها کافی است دستور زیر را در خط فرمان وارد کنید:

این کار، برنامه را با مرورگر شما باز می کند، که خروجی شبیه به زیر است:

Yeoman_Ember_Starter_Kitعالیست! ما همین الان یک برنامه ساده ember اجرا کردیم. آسون نبود؟

 

عیب یابی

اگر شما در این آموزش با مشکلی روبرو شدید، مطمئن شوید که از آخرین نسخه از Yeoman و ember استفاده می کنید، به سادگی می توانید آپدیت کنید:

 

نتایج

شاید این ساده به نطر برسد، اما چند چیز جالب وجود دارد.

صفحه به صورت پویا توسط ember تولید می شود – نگاهی به فایل index.html در پوشه app بیندازید – ملاحظه می کنید که هیچ نشانه گذاری وجود ندارد، فقط دسته ای از اسکریپت های مورد نیاز است. اینجاست که جادو اتفاق می افتد.

اگر app/templates را مشاهده کنید، application.hbs و index.hbs مشاهده کنید. دو فایل دستور دهنده که ember می گویند که چه چیزی را ارائه دهد. سه نام رنگی که در صفحه می بینید در scripts/routes/application_route.js ذخیره شده اند.

 

application_route.js

می توانید نام رنگ ها را در صفحه Index مشاهده کنید که در قالب یک آرایه هستند. یک آیتم دیگر به آرایه اضافه کنید و خواهید دید که در صفحه index اضافه می شود:

 

 

index.hbs

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

 

نتیجه گیری

کار با ابزارهای Yeoman، Bower، و Grunt یک راه عالی برای سرعت بخشیدن به ساخت برنامه های جاواسکریپت است. شما کمتر از 5 دقیقه می توانید از هیچی یک چارچوب اساسی برای برنامه خود درست کنید.