Ember.js - introduction

‘A framework for creating ambitious web applications’

Ember users in Production

For more users http://emberjs.com/ember-users/

Ember.js: What

• Frontend JavaScript web application framework• Based on model-view-controller (MVC)• Used to write complex front-end heavy web apps• Designed for Single Page Applications • Gives you an organized structure, conventions and built-in ways• Like Angular, backbone & knockout, now ember to help developers build

great front end application• Key Developers: Yehuda Katz, Tom Dale

Ember : why• Logical code organization• Convention similar to Rails background

• Easy persistence• Saving or deleting object is easier

• Auto-updating templates(Two way binding)• {{ myProperty }}

• Helpful Object API’s• Build-in methods• Ember has Array object with methods like contains, filterBy, sortBy, etc

• Debugging : The Ember inspector for Firefox and Chrome

History

MVC

Ember-cli• Ember CLI aims to be one such Ember.js command line utility that we can use to build, develop and ship

ambitious SPA• Includes fast asset pipeline broccoli

• Draws heavy inspiration from Rails asset pipeline• Runs on node.js and independent of backend platform• Figures out which files have changed and only rebuilds those that were modified• Assets supported by Broccoli like Handlebars, Emblem, LESS, Sass, Compass, Stylus, CoffeeScript, EmberScript,

Minified JS and CSS• Every Ember-cli project will contain a file called Brocfile.js present at the root of the project. This is the

definition file and contains build specific instructions of the project. (In latest version of Ember-cli, file renamed to ember-cli-build.js)

• Ember CLI uses bower as the default tool to manage the dependencies of our application and lets us to easily manage and keep frontend dependencies up-to-date

• Ember CLI uses npm(Node Package Manager) to manage its internal dependencies.• Ember CLI comes with content security add on, this guards from XSS attacks

Pre-requisites(To set up application)• Node(npm)• from https://nodejs.org

• Ember-cli(ember-cli)• via npm install –g ember-cli

• Bower(bower)• via npm install –g bower

• PhantomJS(phantomjs)• via npm install –g phantomjs

App Folder Structure

• Creating a new application• Cmd: ember new my-first-ember-app

• Folder Structure

• app/components• All components of our application like reusable components used for view or models

• app/controllers• Contains the controller modules of our application

• app/helpers• Contain all the handlebars helpers for view

• app/models• Contain all the ember-data model modules

• app/routes• Contains all application routes

• app/styles• Contains stylesheets

• app/templates• Contains all the handlebars/HTMLBars templates

• app/views• Contains all our application views

• app/router.js• Contains our route configuration• Routes defined here are resolved from the modules defined in app/routes/

App Folder Details cont..• app/app.js• Main entry point of our application and contains configuration applies to our

Ember.js application• Have default generated code which exports our Ember.js application inherits

from Ember.Application class

• app/index.js• main file for the Single Page web Application.• has the structure of our application, includes js and css files• Includes certain hooks like {{content-for 'head'}}, {{content-for 'head-footer'}},

{{content-for 'body'}}, {{content-for 'body-footer'}}

Supporting Files and Folder• bower_components

• Contains all dependencies which Ember CLI installs via bower• bower components are listed in bower.json configuration file

• config/environment.js• Placeholder of our application configuration• Supports different configurations for different configuration for our application, by default it has created configurations for

development, test and production environments

• node_modules• Contains the node dependencies used by Ember CLI

• public• Contains assets that should be copied as they are to the root of the packaged application

• vendor• This folder should contains libraries which cannot be installed using bower or npm• The libraries in vendor should then be imported into the broccoli asset pipeline by adding in Brocfile.js/ember-cli-build.js

• test• Contains helpers and resolver to run unit and integration tests using the Ember testing module• Cmd: ember test or http://localhost:4200/test in browser• Ember Cli uses Qunit as its testing library

Supporting Files and Folder cont…• brocfile.js/ember-cli-build.js:• Build instructions for broccoli asset pipeline• Additional libraries included if we import the files

• Eg: app.import(‘bower_components/bootstrap/dist/css/bootstrap.css’);

• bower.json• Configuration file for bower and contains the dependencies of our application

that need to installed via bower

• package.json• Configuration file for npm and contains node.js dependencies required by our

application

Running the application• Cmd : ember server

• By default runs on 4200 port

• For different port • Cmd: ember server –port 4300OrAdd configuration in .ember-cli by adding {“port”: 4300}

• Ember.js strongly relies on naming conventions. So, if you want the page /foo in your app, you will have the following:• a foo template,• a FooRoute,• a FooController,• and a FooView.

Components• Router/Route• Controller• Model• View/Component• Templates

Concepts Map

The router • Routes are the root of all other concepts in Ember • The router drives the rest of the gears in ember router.js eg:- this.route(‘users’); Route class • Sets up the model (data) and the controller• Will take actions/events that bubble up it from the controller

Models • Defines the data you need • Uses attributes for defining the data type: number, boolean, string,

etc. • Also uses relational mapping for defining relationship between

models: hasMany, belongsTo, etc.

Controller• Takes the model from the route • Model can be an object or an array/collection • Is responsible for: • Mutating the model • User interaction • Page logic • Can define observable and computed properties

Template(Handlebars markup)• Uses Handlebars as the rendering language• Mostly plain old HTML• Hooks to controller - provides the logic• Hooks to the model - provides the data

View • A class for when doing DOM manipulation is necessary • If you need to do DOM manipulation, you should ask yourself what

you may be doing wrong • Should not be used often

Components • Reusable parts • Your own HTML tags/elements • Any part of your application that repeats is a candidate for a

component • Ember comes with a bunch of these: • Input box helpers, dropdown menu, links, etc.

Adapter

If caching happens

Architecture overviewFor a new Record

Note on coupling- In Ember.js, templates get their properties

from controllers, which decorate a model.- templates know about controllers and controllers know

about models, but the reverse is not true. A model knows nothing about which (if any) controllers are decorating it, and a controller does not know which templates are presenting its properties.

- For example, if the user navigates from /posts/1 to /posts/2, the PostController's model will change from store.findRecord('post', 1) to store.findRecord('post', 2). The template will update its representations of any properties on the model, as well as any computed properties on the controller that depend on the model.

Example for routes and its components

Few Codes

• To define a new Ember class, call the extend() method on Ember.Object• Eg:-

• Person = Ember.Object.extend({ say(thing) { var name = this.get('name'); alert(name + " says: " + thing); } });

• RETRIEVING A SINGLE RECORD• var post = this.store.findRecord('post', 1); // => GET /posts/1 • var post = this.store.peekRecord('post', 1); // => no network request

• RETRIEVING MULTIPLE RECORDS• var posts = this.store.findAll('post'); // => GET /posts• var posts = this.store.peekAll('post'); // => no network request

• QUERYING FOR MULTIPLE RECORDS• var peters = this.store.query('person', { name: 'Peter' }); // => GET to /persons?name=Peter

FewNotes• EMBER.OBJECT

• Ember implements its own object system. The base object is Ember.Object. All of the other objects in Ember extend Ember.Object.• user = Ember.Object.create()• user = Ember.Object.create({ firstName: hari', lastName: c' })• Getter

• user.firstName or user.get(‘firstName’)

• CLASSES • var Person = Ember.Object.extend({ say: function (message) { alert(message); } }); • var bob = Person.create(); bob.say('hello world'); • // alerts "hello world"

• Ember-Data• Ember-Data is a library that lets you retrieve records from a server, hold them in a Store, update them in the browser

and, finally, save them back to the server. The Store can be configured with various adapters • RESTAdapter interacts with a JSON API• LSAdapter persists your data in the browser’s local storage

Resources• http://guides.emberjs.com/• http://emberwatch.com/tutorials.html• https://en.wikipedia.org/wiki/Ember.js• Ebook: Ember.js Web development with Ember CLI – Suchit Puri• Ebook: Ember-cli-101: An Ember.js book with ember-cli• Lynda.com, codeschool• Youtube tutorials• Dockyard.com ember tutorial