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