How start application with an ember js .

1. Ember
Build an ambitious application
By : Chandrasekar.G

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

3. 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.

4. 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 shuffle when application state change.
In the previous programming development business logics and
presentation logics are tightly coupled in the codes of JSP and
JS files .
Disadvantages

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

6. 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

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

8. 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.

9. MVC Good Explanation
This explanation found on stackoverflow.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

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

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

12. Understanding Ember
Template
In Ember, Template concept is used to define 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 defines properties , structure and behaviour of the data.
Controller
Ember controllers usually consist the code to execute the tasks.
Core concept of Ember

13. 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
flexibility 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

14. 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.

15. Using handlebars JS
Defining 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

16. 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

17. 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

18. 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

19. 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”
});

20. Debug configuration
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 specified layer
{{log controller}}
List of properties are available for logging

21. 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.

22. 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 ");
}
});

23. Defining 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

24. Application
Router
Resource Route

25. 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 : Defining view

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

27. 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

28. Controller
Ember JS controllers provides developer to write and present data with display logics .
Defining 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

29. Basics ends here