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!!
Result is Beautiful

What is Ember?
A JavaScript Framework
Based on Model, View, Controller or MVC Pattern
openSource::ofCourse!

“
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

Why Ember?
Focus on ambitious web applications
Ember sets out to provide a wholesale solution to the
client-side application problem
More productiveout of the box
type less achieve more
Stability without stagnation
backward compatibility
The future is here
Convention over Configuration
Don't Repeat Yourself (DRY)

It all starts with…
Well, with something
If app doesnot have url, it’s not web app
Let us start with url

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

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>

Controllers
It defines Interactivity
export default Ember.Controller.extend({
displaying: false, // defines a property
actions:{
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}}

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 web@jyaasa.com
Questions?
Thank You!!

Presentation on Ember.js

More Related Content

What's hot (20)

Similar to Presentation on Ember.js (20)

More from Jyaasa Technologies (20)

Recently uploaded (20)

Presentation on Ember.js