WEB TECHNOLOGY ASSIGNMENT-1

FEATURES OF EMBER JS

THIS ASSIGNMENT HAS BEEN MADE BY:

AKASH BHAT 01FB16ECS038 SECTION:A

AKASH BHAT
What is Ember.js?
Ember.js is an open source, free JavaScript client-side
framework used for developing web applications. It
allows building client side JavaScript applications by
providing a complete solution which contains data
management and an application flow.

The original name of Ember.js was SproutCore MVC

framework. It was developed by Yehuda Katz and initially
released on in December 2011. The stable release of
Ember.js is 2.10.0 and this was released on November 28,
2016.

2
Why Ember.js
• Ember.js is an open source JavaScript framework
under MIT license.
• It provides the new binding syntax using
the HTMLBars template engine which is a superset of
the Handerlbars templating engine.
• It provides the Glimmer rendering engine to increase
the rendering speed.
• It provides the Command Line Interface utility that
integrates Ember patterns into development
process and focuses easily on the developer
productivity.
• It supports data binding to create the link between
two properties and when one property changes, the
other property will get upgraded with the new
value.

3
Features of Ember.js
• Ember.js is used for creating reusable and
maintainable JavaScript web applications.
• Ember.js has HTML and CSS at the core of the
development model.
• It provides the instance initializers.
• The routes are core features of the Ember.js which
are used for managing the URL's.
• Ember.js provides Ember Inspector tool for
debugging Ember applications.
• Ember.js uses templates that help to automatically
update the model, if the content of applications gets
changed.

4
The diagram below illustrates how routes,
controllers, views, templates and models
interact with each other.

5
These are some of the most
important features of Ember JS:

1. Binding
2. Object Modelling
3. Routing
4. Templates
5. Components
6. Models
7. Controllers
8. Enumerables
9. Testing
10.Ember CLI

6
BINDING:
Unlike most other frameworks that include some sort of
binding implementation, bindings in Ember.js can be
used with any object. That said, bindings are most often
used within the Ember framework itself, and for most
problems Ember app developers face, computed
properties are the appropriate solution.

Note that bindings don't update immediately. Ember

waits until all of your application code has finished
running before synchronizing changes, so you can
change a bound property as many times as you'd like
without worrying about the overhead of syncing
bindings when values are transient.

7
ROUTER:

Router is a core feature of EmberJs which translates an

URL into a series of templates and represents the state
of an application.The Ember uses the router to map the
URL to a route handler. The router matches the current
URL to other routes which are used for loading data,
displaying the templates and to set up an application
state.
Route handler performs some actions such as −
• It provides the template.
• It defines the model and it will be accessible to the
template.
• If there is no permission for user to visit the
particular part of an app, then router will redirect
to a new route.

8
OBJECT MODELLING:
JavaScript objects don't support the observation of
property value changes. Consequently, if an object is
going to participate in Ember's binding system you may
see an Ember.Object instead of a plain object.

Ember.Object also provides a class system, supporting

features like mixins and constructor methods. Some
features in Ember's object model are not present in
JavaScript classes or common patterns, but all are
aligned as much as possible with the language and
proposed additions.

Ember also extends the JavaScript Array prototype with

its Ember.Enumerable interface to provide change
observation for arrays.

Finally, Ember extends the String prototype with a

few formatting and localization methods.

9
TEMPLATES:
A template is used to create a standard
layout across multiple pages. When you change a
template, the pages that are based on that
template automatically get changed. Templates
provide standardization controls.

Ember uses the Handlebars templating library to power

your app's user interface. Handlebars templates contain
static HTML and dynamic content inside Handlebars
expressions, which are invoked with double curly
braces: {{}}.
Dynamic content inside a Handlebars expression is
rendered with data-binding. This means if you update a
property, your usage of that property in a template will
be automatically updated to the latest value.

10
COMPONENTS:
Ember components consist of two parts: some
JavaScript and a HTMLBars template. The JavaScript
component file defines the behavior and properties of
the component.

The behaviors of the component are typically defined

using actions. The HTMLBars file defines the markup for
the component's UI.

The Ember.js components uses the W3C web component

specification and provides true encapsulation UI widgets.
It contains the three main specification
as templates, shadow DOM and custom elements. The
component is declared within the data-template-name
which has a path name instead of a plain string and are
prefixed with "components/".

11
MODELS:
Models are objects that represent the underlying data
that your application presents to the user. Different apps
will have very different models, depending on what
problems they're trying to solve.

Model is a class that extends the functionality of the Ember

Data. When a user refreshes the page, the contents of
page should be represented by a model. In Ember.js, every
route has an associated model. The model helps to
improve the performance of application. The Ember Data
manipulates the stored data in the server and also works
easily with streaming APIs like socket.io and Firebase or
WebSockets.

Models tend to be persistent. That means the user does

not expect model data to be lost when they close their
browser window. To make sure no data is lost, if the user
makes changes to a model, you need to store the model
data somewhere that it will not be lost.
Typically, most models are loaded from and saved to a
server that uses a database to store data.

12
CONTROLLERS:
Controllers behave like a specialized type of Component
that is rendered by the router when entering a Route.

The controller receives a single property from the Route

– model – which is the return value of the Route's model
() method.
To define a Controller, run:
1 ember generate controller my-controller-name

The value of my-controller-name must match the name

of the Route that renders it. So, a Route named blog-
post would have a matching Controller named blog-post.

You only need to generate a Controller if you want to

customize its properties or provide any actions. If you
have no customizations, Ember will provide a Controller
instance for you at run time.

13
ENUMERABLES:
In Ember.js, an Enumerable is any object that contains a
number of child objects, and which allows you to work
with those children using the Ember.Enumerable API.

The most common Enumerable in the majority of apps is

the native JavaScript array, which Ember.js extends to
conform to the Enumerable interface.

By providing a standardized interface for dealing with

enumerables, Ember.js allows you to completely change
the way your underlying data is stored without having to
modify the other parts of your application that access it.
For example, you might display a list of items from
fixture data during development. If you switch the
underlying data from synchronous fixtures to an array
that fetches data from the server lazily, your view,
template and controller code do not change at all.

14
TESTING:
Testing is a core part of the Ember framework and its
development cycle.
Let's assume you are writing an Ember application which
will serve as a blog. This application would likely include
models such as user and post. It would also include
interactions such as login and create post.

There are two different classifications of tests that you

will need: Integration and Unit.

INTEGRATION TESTS:
Integration tests are used to test user interaction and
application flow.

UNIT TESTS:
Unit tests are used to test isolated chunks of
functionality, or "units" without worrying about their
dependencies.

15
EMBER-CLI:
Ember and Ember-CLI are two different things entirely,
but neither would be totally whole without the other.
Ember-CLI is a command line utility that comes along
with the Ember framework’s software stack. For the
non-developer, a CLI, or a command line interface, is a
simple visual interface that lets humans interact with a
computer’s operating system. Ember-CLI is a productivity
rocket ship, with support for tools like CoffeeScript,
Handlebars, LESS, and Sass. Ember also comes with the
option to use other components of its software stack
including Ember Data, a data library, and Ember
Inspector, a testing extension for debugging apps.

16