Code Quest

Intro to Ember.js [Getting Started]

10 Oct 2015

#What is Ember.js

  • Client side JavaScript framework loosely based on MVC
  • Optionated MVVM Framework

#Single Page Application

  • Great User Experience
  • Fast, More Responsive and Interactive
  • Better Separation of UI Code from Backend Code

#Why Ember

  • Scale (Development, Architecture)
  • Routing
  • Components Based

#Getting Started

###Installation

npm install -g ember-cli
npm install -g phantomjs2
ember -v

###Ember-CLI Ember CLI is a command line tool used for

  • Asset Management (Dependency Management for Node Packages, Bower Packages)
  • Code Generator (Helpful for creating Controller, Routes, Models, etc..)
  • Provide Test Harness

###Initializing New Application

  • Creating new ember application using ember-cli
ember new FirstEmberApp

###Ember Application Folder Structure

├── README.md
├── app
├── bower.json
├── bower_components
├── config
├── ember-cli-build.js
├── node_modules
├── package.json
├── public
├── testem.json
├── tests
└── vendor

Under /app following folders are created. All application related files are being created /app which includes- components, controllers, templates, helpers, models, routes, styles.

├── app.js
├── components
├── controllers
├── helpers
├── index.html
├── models
├── router.js
├── routes
├── styles
└── templates

##MVC Flow

Everything Starts with a URL

URL Maps to Route

Route instantiates the Model

Route prepares the Controller

Controller is shoved into Template

The Router instantiates a Model and sets it in a Controller. The Router renders the Template. The Template gets its properties from the Controller, which acts as a decorator for the Model. The Template doesn’t know where a property it displays is defined, the controller will provide it by itself or through its Model.

![Ember MVC Flow] (https://www.dropbox.com/s/aucbynfvzoe8uk8/ember-mvc.png?raw=1)

Related Posts