presentation on ember.js

http://jyaasa.com

Presentation on Ember.Js

Copyright 2015. Jyaasa Technologies.

Ms. Prativa Devkota Mr. Shishir Sapkota

Ember-cli

http://jyaasa.comCopyright 2015. Jyaasa Technologies.

You need no cli

Immediate::reaction=>:what?

Assert: “true”

Ember-cli


Hi! It’s me Ember!!

http://jyaasa.com

Result is Beautiful


http://jyaasa.com

What is Ember?

A JavaScript Framework

Based on Model, View, Controller or MVC Pattern

openSource::ofCourse!


“

http://jyaasa.com

Ember.js is an open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework. - Wikipedia


http://jyaasa.com

Why Ember?

Focus on ambitious web applicationsEmber sets out to provide a wholesale solution to the client-side application problem

More productiveout of the boxtype less achieve more

Stability without stagnationbackward compatibility

The future is hereConvention over ConfigurationDon't Repeat Yourself (DRY)


http://jyaasa.com

It all starts with…

Well, with something

If app doesnot have url, it’s not web appLet us start with url


http://jyaasa.com

Hello Router

Router.map(function() {this.resource('posts', {path: '/'}); this.route('about'); this.resource('contact', function(){

this.resource('phone'); this.resource('email');

}); });


http://jyaasa.com

Templates

.handlebars or .hbs<div class = "row">

<h1>Contacts</h1> <div class = 'col-sm-6'> <li>

{{#link-to 'phone'}}Phone {{/link-to}}</li> <li>

{{#link-to 'email'}}Email {{/link-to}}</li>

</div> <div class = 'col-sm-6'>

{{outlet}}</div>

</div>Copyright 2015. Jyaasa Technologies.

Controllers


It defines Interactivity

export default Ember.Controller.extend({displaying: false, // defines a propertyactions:{showPhoto: function() {this.set('displaying', true)},hidePhoto: function(){this.set('displaying', false)}

}});

View

{{#if displaying}}<p><button {{action 'hidePhoto'}} class='btn btn-primary'>Hide Picture</button>

</p><p><img src="http://www.nature.com/nature/journal/v489/n7416/images/489372b-f1.2.jpg">

</p>{{else}}

<button {{action 'showPhoto'}} class= 'btn btn-primary'>Show Picture</button>

{{/if}}


http://www.nature.com/nature/journal/v489/n7416/images/489372b-f1.2.jpg




Model

App.Blogger = DS.Model.extend({name: DS.attr(„string’), gender: DS.attr(),address: DS.attr(),

martial_status: DS.attr()});


Cli: „I am Back’

Hey, did you forget that cli?

That suffix does all of the mundane work

It is supposed to be your best friend

It wants you to spend your time being productive

Use it, and never look back!

emberdata

A library that integrates tightly with Ember.js

It makes it easy to retrieve records from a server, cache them for performance, save updates back to the server, and create new records on the client

Without andy configuration, Ember Data can load and save records and their relationships served via a RESTfulJSON API, provided it follows certain conventions



Review

Simplicity

Productivity

Maintainability

Readability

Creativity


Where to go now...

Do not reinvent the wheelEmber.js

Strong convention results:strong_convinction=>”DIY”

DIY.Resolves :Do_IT_YOURSELF

I see no limit to Sky

Tweet us @jyaasa

or email us [email protected]

Questions?


Thank You!!

mailto:[email protected]

mailto:[email protected]

presentation on ember.js

Software