Create an application with ember

Ember
Build an ambitious application
By : Chandrasekar.G

What is Ember ?
Ember is an open source javascript framework.
Collection of libraries that are written in pure MVC architectural pattern.

Why Ember ?
Avoid boilerplate codes .
Creates a standard application architecture .
Designed and developed to create and manage large web applications.
Dynamic data bindings.
Ember follows pure MVC Architectural pattern that 
Improves application testability . 
Keeps application codes modular.

Previous development
In a Software Application , User interface get change often
more than logics and data. Application might be have several
parts / state ,So each state of application may have different
layout , data displaying styles. So each time user navigate
these things are get shufﬂe when application state change.
In the previous programming development business logics and
presentation logics are tightly coupled in the codes of JSP and
JS ﬁles .
Disadvantages

New development
In the new development data logics , business logics and
presentation logics are get separated with modular
programming pattern.
One the main beneﬁt of the decoupling is application will have
ability to develop an independent presentation application .

Architectural pattern
Architectural pattern is a solution to solve design problem .
Architectural pattern which gives the clear pictures about application
system.
It describes the subsystems and components of the application and
relation between them.
In software world which used to address different kind of issues such as :- 
Performance  
Security

Architectural patterns
Model - View - Controller
Model - View - Adapter
Model - View - View Model
Some list of architectural patterns which used in software applications.

MVC Overview
Model 
The model component covers the list application parts :- 
Data. 
Set of rules to store data in structure.  
Logics and functions.
View 
View component represents the model in different types such as  
Chart  
Pivot  
User customised view
Controller 
The Controller component behaves like a mediator which sends the commands to  
View and Model.
MVC software design pattern has divided as three components Model, View Controller.

MVC Good Explanation
This explanation found on stackoverﬂow.com.
View : "Hey, controller, the user just told me he wants item 4 deleted."
Controller : "Hmm, having checked his credentials, he is allowed to do that...  
Hey, model, I want you to get item 4 and do whatever you do to delete it."
Model : "Item 4... got it. It's deleted. Back to you, Controller."
Controller : "Here, I'll collect the new set of data. Back to you, view."
View : "Cool, I'll show the new set to the user now." 
 
 
By : Andres Jaan Tack

Software design layer
Book for special offer
Name
Contact
Address
Submit Cancel
ViewModel Controller
Reset Form
Update Form
Cancel

Starting with Ember
Requirements  
jquery.js 
ember.js 
handlebars.js 
ember-data.js

Understanding Ember
Template 
In Ember, Template concept is used to deﬁne user interface of the application
Router 
Router is an Ember class which manages the application state .
View / Components  
View class is responsible for data binding with support of templates. 
One more option which provides that developer can implement DOM events for the
user interactions .
Model 
Model is a class that deﬁnes properties , structure and behaviour of the data.
Controller 
Ember controllers usually consist the code to execute the tasks.
Core concept of Ember

Template
Template is basically a rear surface of model or presentation.
One of the advantage of using template library is when the model get change
template also get change automatically.
Template engines are written in UI data binding software design pattern.
Ember supports handlebars template engine by default , though which provides
ﬂexibility to use other templates engine such emblem and etc… .
Dynamic UI data binding
Some example Client side template engines  
Emblem 
Underscore JS template  
Mustache JS 
EJS 
Dust JS

Handlebars
Handlebars JS takes the given HTML string and It’s own language syntax
codes and compiles them to the javascript method.
Handlebars JS is an extension of Mustache JS template engine and
developed to supersede mustache JS.
Logic-less template engine.

Using handlebars JS
Deﬁning simple handlebar template
<script id=“template” type=“text/x-handlebars”>
Welcome, <b> {{user.name}} </b>
</script >
“ {{ }} ” expression represents template  
model data as HTML
Example : Simple handlebar template
<script>
var context = {
user : { name : "Jack Sparrow"}
}
var templatecontent = $("#template").html(); 
var template = Handlebars.compile(templatecontent);
$('body').append(template(context));
</script>
Getting template by ID
Compiler makes template function
Passing the data as parameter in
the template function

Handlebars Helpers
Block Helpers 
Handlebars JS provide predefined block level expressions such as conditional 
statements and loops.
Custom Helper 
Handlebars JS allows developer to create their own helper with option of resister helper
Actions Helpers 
Handlebars actions helpers are mainly implemented to handle DOM events.  
Actions related codes will be maintain in the controllers.
View Helper 
View helper is used to define template with help of view class .. will be cover on ember view
Template Helpers 
There are three expression “ template “, “ partial ” and “render” which are used to includes  
specific template in the context .
Outlet 
Outlet helper tells to render the route related template and allows to render child templates.
Handlebars JS has some expressions for dynamic data binding

Using Block helpers 
<div class={{#if alreadyVisited}} "alreadyVisited"{{/if}} "notVisited">
{{name}}
</div>
Example : Conditional statements
Conditional statements If, else, unless
Each
{{#each bookmarks}}
!
{{/each}}
<div class="visitedUsers">
<br> <b> Visited user</b> :
{{#unless visitedUser.length}}
No one visited yet this site
{{else}}
{{visitedUser}}
{{/unless}}
</div>
Note : Else if conditions are not supported
Example : Each in Handlebar

with
with is a block helper which helps to change the context of the template .
Example : "with" Block helper
{{#with otherActivities}}
{{sports}}
<br>
{{music}}
{{/with}}
Custom Helpers
Handlebars.registerHelper("createController", function (string){
return string+"Controller = Em.Controller.extend({})";
});
Example : Custom Block helper
Following below codes will create a new helper called creteController  
so developer can use In that template

Ember Application
var App = Em.Application.create();
Creating Application
Following code will create the instance of ember application. Application provides some
default package of components.
!
We can implement application view with the help of handlebar like following code
!
<script type=“text/x-handlebars” >
HTML code goes here
</script>
!
If we don’t mention any ID in It will render the application view .
Basically It makes the body element as ember application .Instead of body element
We can specify the Application view element with option of rootElement.
var App = Em.Application.create({
rootElement : “main”
});

Debug conﬁguration
LOG_STACKTRACE_ON_DEPRECATION : true,
LOG_BINDINGS : true,
LOG_TRANSITIONS : true,
LOG_TRANSITIONS_INTERNAL : true,
LOG_VIEW_LOOKUPS : true,
LOG_ACTIVE_GENERATION : true
{{debugger}}
Following code will throw the error in template
Get logs of speciﬁed layer
{{log controller}}
List of properties are available for logging

Router
Ember router class store the application state in browser’s URL.
Ember creates router object on application loads named App.Router.
Routes classes are generates with ember UpperCamelCase
convention.
Application router comes by default with the set of route objects
called IndexRoute and ApplicationRoute.
ApplicationRoute will load in the all resource by default.

Router in Action
App.Router.map(function(){});
App.Router loads IndexRouter and ApplicationRoute
We can create routes with the option of “resource” and “route”.  
We can override IndexRouter and ApplicationRouter to make more functionality to the application. 
App.IndexRoute = Em.Route.extend({
init : function() {
console.log("Index Route loading ");
}
});
App.ApplicationRoute = Em.Route.extend({
init : function() {
console.log("Application Route loading ");
}
});

Deﬁning Route
App.Router.map(function(){
this.resource("users");
this.resource(“user",{path:"users/:id"});
});
This code will create users route
This code will create dynamic segments
Example : Route and Dynamic route
So the generated routes are would be UsersRoute, UserRoute , So the
application states are would be access through the URL  
 
1. http://app/users/
2. http://app/users/ 1

Application
Router
Resource Route

View
On Application load ember creates Application view and parallel application template by default. 
Creating View
App.CustomView = Em.View.extend({
classNames: [‘customView']
tagName : “span”
click : function (){
}
});
This code will create View class instance
{{#view App.CustomView}}
Custom View
{{/view}}
Rendering template view helper
Example : Deﬁning view

Ember Application view lifecycle
Application
Views
Container
Ember -Handlebar
Handlebar compiler
Metamorph
<script >
handlebars
Renders HTML

Model
Defining Ember model
App.Info = DS.Model.extend({}); This code will create the model instance
Defining attributes
App.Info = DS.Model.extend({ 
name : DS.attr('string'),
version : DS.attr('number'),
author : DS.attr('string'), 
hasReleased : DS.attr(‘boolean’ , {defaultValue: false}) 
});
Defining data key and It’s type
Setting default
Example : Example model

Controller
Ember JS controllers provides developer to write and present data with display logics .
Deﬁning action using controller
28
App.PipeController = Em.Controller.extend({
title : "Manage your pipes",
actions : {
pipeNow : function (){
console.log("You can pipe now ",this.get('pipeNow'));
}
},
});
Here the logic codes go
Example :
Example of Controller
action

Create an application with ember

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Create an application with ember (20)

Recently uploaded (20)

Create an application with ember