This short presentation on Ember.js gives a short overview of Ember.js. About Authors: Both Ms. Prativa Devkota and Mr. Shishir Sapkota are Ruby on Rails trainees at Jyaasa Technologies. About Us: Jyaasa is a Ruby on Rails software development company for startups. We do Rails consulting, build custom apps & transform ideas into successful business products. For more information visit: http://jyaasa.com

1. http://jyaasa.com
Presentation on Ember.Js
Copyright 2015. Jyaasa Technologies.
Ms. Prativa Devkota
Mr. Shishir Sapkota

2. Ember-cli
http://jyaasa.comCopyright 2015. Jyaasa Technologies.

3. You need no cli
Immediate::reaction=>:what?
Assert: “true”
Ember-cli
http://jyaasa.comCopyright 2015. Jyaasa Technologies.

4. Hi!
It’s me
Ember!!
http://jyaasa.com
Result is Beautiful
Copyright 2015. Jyaasa Technologies.

5. http://jyaasa.com
What is Ember?
A JavaScript Framework
Based on Model, View, Controller or MVC Pattern
openSource::ofCourse!
Copyright 2015. Jyaasa Technologies.

6. “
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
Copyright 2015. Jyaasa Technologies.

7. http://jyaasa.com
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)
Copyright 2015. Jyaasa Technologies.

8. http://jyaasa.com
It all starts with…
Well, with something
If app doesnot have url, it’s not web app
Let us start with url
Copyright 2015. Jyaasa Technologies.

9. 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');
});
});
Copyright 2015. Jyaasa Technologies.

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

11. Controllers
http://jyaasa.comCopyright 2015. Jyaasa Technologies.
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)
}
}
});

12. 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://jyaasa.comCopyright 2015. Jyaasa Technologies.

13. http://jyaasa.comCopyright 2015. Jyaasa Technologies.
Model
App.Blogger = DS.Model.extend({
name: DS.attr(„string’),
gender: DS.attr(),
address: DS.attr(),
martial_status: DS.attr()
});

14. http://jyaasa.comCopyright 2015. Jyaasa Technologies.
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!

15. 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
http://jyaasa.comCopyright 2015. Jyaasa Technologies.

16. http://jyaasa.comCopyright 2015. Jyaasa Technologies.
Review
Simplicity
Productivity
Maintainability
Readability
Creativity

17. http://jyaasa.comCopyright 2015. Jyaasa Technologies.
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

18. Tweet us @jyaasa
or email us web@jyaasa.com
Questions?
http://jyaasa.comCopyright 2015. Jyaasa Technologies.
Thank You!!