Ember - introduction

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

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 Folder Details• 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 4300
Or
Add 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

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 overview
For 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

Ember - introduction

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Ember - introduction (20)

Recently uploaded (20)

Ember - introduction

Editor's Notes