Download - Create an application with ember
EmberBuild 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 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
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 .
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 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
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 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
TemplateTemplate 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
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
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
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
withwith 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 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
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 "); } });
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
Application
Router
Resource Route
ViewOn 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
Ember Application view lifecycleApplication
Views
Container
Ember -Handlebar
Handlebar compiler
Metamorph
<script >
handlebarsRenders 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
ControllerEmber 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
Basics ends here