Welcome to weblogs.com.pk Sign in | Join | Help

Hello Ember-CLI

Ember is a MVC JavaScript library and is one component of a complete front end stack built and supported by Ember Core Team. The other components of the stack are Ember CLI, Ember Data, Ember Inspector, Fastboot and Liquid Fire. Ember Inspector is a Chrome plugin for debugging, Fastboot allows to run Ember apps in Node and Liquid Fire provides animation support for Ember applications. Ember Data is client side ORM and Ember CLI is the build tool. We can use Ember.js similar to other JavaScript libraries embedding into some web application or we can use Ember CLI to build complete web application. We will be using Node to install Ember CLI. Once you have Node for Windows installed; you can launch Node.js command prompt from Start Menu; change the directory to where you want to create the Ember projects

  • Its recommend to use some short path for the projects; say C:\src\Ember; I am using C:\Users\You\Ember

In the Node.js command prompt give following commands

>npm install ember-cli –g
>npm install bower -g
>bower install ember
>ember new HelloEmber

  • We installed ember-cli and bower using Node Package Manager; -g is for global; if you have already installed them; you may skip these
  • We installed ember using bower
  • Using ember we created a HelloEmber web application (it will be created in C:\Users\You\Ember\HelloEmber)

You must have noted; its downloading lots of stuff; and plethora of files are being generated; to improve the system performance open Node.js command prompt with Run As Administrator and navigate to your Ember projects folder (C:\Users\You\Ember); issue the following commands

>color 4f
>npm install ember-cli-windows -g

As our web app has already been created and next we need to run some sort of web server and try the created app; Ember CLI has it covered and its recommended that you run the Ember server from the Administrative command prompt as well. So from the same Administrative Node.js command prompt go to your HelloEmber created folder and issue these commands

>cd HelloEmber
>ember server

By default it will run the server at 4200 and you can navigate to it at http://localhost:4200 using your preferred browser! Lets now add an ember resource; open another Node.js command prompt and navigate to C:\Users\You\Ember\HelloEmber and issue ember generate resource command there; if you open this folder in “Visual Studio Code” you will notice it will add/change six files; adding route in app\router.js and resources.js file app\routes, the model in app\models and its associated view (handlebars based template) in app\templates. Also note that we don't have to restart the server, it picks the file changes and if needed recompile the things. Here’s what I did!

  • Notice that I opened Explorer and from there selected the folder and used Open in Visual Studio Code from the context menu
  • I issued >ember generate resource invoices customer:string invoiceNumber:string createDate:date posted:boolean amount:number; that generated the required model, route and template
  • If we review Changes; we will learn that
  • it changed app\router.js adding the route so that our "invoices router" gets invoked; think of it as the ASP.NET MVC's route table entry; instead of one magical entry that does class name matching and invoke accordingly; we need to add entries in Ember individually
  • it created app\models\invoices.js; the js file for our model with the attributes that we specified on the command line; notice the use of DS.attr('type'); if we want to we can add more attributes there or make necessary changes
  • it created app\routes\invoices.js; this is where we will write required code for the OURAPP/invoices route; think of it as the ASP.NET MVC's Controller
  • it created app\template\invoices.hbs; the template / the view for the said route; this is where we can add our view HTML and can bind our model (if we pass it on in the router / controller) using the HTMLBars; think of HTMLBars has HTML plus the Handlebars; we will cover how to pass model and use data binding in the next post !
  • It also created two test files; not covering for the sake of simplicity

  • Note that controller (router), model and view are in three different locations; if you are not liking this convention; you can postfix --pod in the ember generate command and it will create router and associated template in single folder

You might say that its very daunting; and doing lot of things; yes it is; but its doing things in convention over configuration style; and its a complete front end MVC based stack. Typical modern ASP.NET MVC web app has Visual Studio tooling (ability to right click folder Add Controller and things like that), MVC back end (View / Controller), mostly Entity Framework (Model) and Web Apis to use with some JavaScript libraries. If you think of Ember CLI + Ember.js as Visual Studio plus ASP.NET MVC replacement; it all starts to make sense! We will still need REST based Web Apis for our Ember web app back end!

Stay tuned for the next part in Ember series!

Published Thursday, February 25, 2016 3:33 PM by khurram
Filed under: ,


No Comments

New Comments to this post are disabled