Ember.js is an open-source JavaScript web framework designed for creating ambitious web applications using the MVC pattern. It emphasizes productivity through features like integrated templates, a CLI, and a well-defined conventions approach, making it easier for developers to focus on unique aspects of their applications. Key concepts include object models, routing, models, services, and components, with various advantages like an add-on ecosystem and developer-friendly APIs.

2. About
Original author: Yehuda Katz
a member of the jQuery and Ruby on Rails core teams
Developers: Ember Core Team
Initial release: 8 December 2011
Stable release: 2.4.3 / March 17, 2016
License: MIT License
Ember.js is an open-source JavaScript web framework,
based on the model–view–controller (MVC) pattern.

3. More productive out of the box.
Write dramatically less code with
Ember's Handlebars integrated
templates that update
automatically when the
underlying data changes.
Don't waste time making trivial
choices. Ember.js incorporates
common idioms so you can focus
on what makes your app special,
not reinventing the wheel.
Ember.js is built for productivity.
Designed with developer
ergonomics in mind, its friendly
APIs help you get your job done
—fast.
A framework for creating ambitious web applications.

4. Major users

5. How to start
• Console :)
• Node JS
• npm
You should have on your PC:

6. Main advantages
• Ember CLI and generators
• Similarity with Backend frameworks
• Convention Over Configuration
• Add-on ecosystem
• Ember Inspector

7. Main advantages
• Ember CLI and generators
• Similarity with Backend frameworks
• Convention Over Configuration
• Add-on ecosystem
• Ember Inspector

8. Main advantages
• Ember CLI and generators
• Similarity with Backend frameworks
• Convention Over Configuration
• Add-on ecosystem
• Ember Inspector

9. Main advantages
• Ember CLI and generators
• Similarity with Backend frameworks
• Convention Over Configuration
• Add-on ecosystem
• Ember Inspector

10. Main advantages
• Ember CLI and generators
• Similarity with Backend frameworks
• Convention Over Configuration
• Add-on ecosystem
• Ember Inspector

11. Concepts

12. 1. The Object Model
Plain Javascript objects lack the ability to observe
when properties change.
Object Model augments Javascript objects with
observers, computed properties, inheritance, mixins
and other useful functions.
Concepts

13. Concepts
2. Routing
Ember is URL-driven so it always starts at the URL.
Router send us to route where we can get data.
Based on Convention over configuration.

14. 3. Models
Plain objects, Ember objects for sync calls and
Promises for async calls.
Concepts

15. 4. Services
An Ember.Service is a long-lived object (singleton)
used to provide services to other Ember objects. It
directly extends Ember.Object but uses its own class
name to encourage the services architecture pattern.
Concepts

16. 5. Components
Components consist of two parts: a Javascript
component file (behavior) and its accompanying
template file (view).
Components are isolated by design. They are not
aware of their surrounding context, but they have
input through their attributes and can send messages
up to the route.
Concepts

18. Not clear yet?..

19. run!
ember new todo-app

21. Cheatsheet
• ember new todo-app
• ember generate route todos
• ember generate component todo-widget

22. // app/routes/todos.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return [
{ text: "Create Ember app" },
{ text: "Read Ember Igniter" },
{ text: "Master Ember" }
]
}
});

23. {{! app/templates/todos.hbs }}
{{todo-widget todos=model}}

24. {{! app/templates/components/todo-widget.hbs }}
<ul>
{{#each todos as |todo|}}
<li>{{ todo.text }}</li>
{{/each}}
</ul>

25. • ember generate component add-todo

26. {{! app/templates/components/add-todo.hbs }}
<form {{action "submit" on="submit"}}>
{{input value=text}} <button type="submit">OK</button>
</form>

27. // app/components/add-todo.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
submit() {
const text = this.get('text');
this.get('onAdd')(text);
}
}
});

28. {{! app/templates/components/todo-widget.hbs }}
{{add-todo onAdd=(action 'addTodo')}}
<ul>
{{#each todos as |todo|}}
<li>{{ todo.text }}</li>
{{/each}}
</ul>

29. // app/components/todo-widget.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
addTodo(text) {
this.get('todos').pushObject({ text: text });
}
}
});

30. // app/components/add-todo.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
submit() {
const text = this.get('text');
this.get('onAdd')(text);
this.set('text', "");
this.$('input').focus();
}
}
});

31. {{! app/templates/application.hbs }}
<h2 id="title">TO-DO list</h2>
<ul>
<li>
{{#link-to "index"}}
Mainpage
{{/link-to}}
</li>
<li>
{{#link-to "todos"}}
Todos
{{/link-to}}
</li>
</ul>
{{outlet}}

32. OK

33. Patterns
• MVC (MV*)
• Observer
• Adapter
• Template method
• Singleton

34. Patterns
• MVC (MV*)
• Observer
• Adapter
• Template method
• Singleton

35. Patterns
• MVC (MV*)
• Observer
• Adapter
• Template method
• Singleton

36. Patterns
• MVC (MV*)
• Observer
• Adapter
• Template method
• Singleton

37. Patterns
• MVC (MV*)
• Observer
• Adapter
• Template method
• Singleton

38. Other frameworks
Ember
vs
Angular
vs
Backbone

40. Google Search Statistic

42. Questions?

43. Links
• http://emberjs.com/
• http://emberigniter.com/new-to-ember-cli-start-here-2016-tutorial/
• http://airpair.com/js/javascript-framework-comparison
• http://emberigniter.com/5-essential-ember-2.0-concepts/
• http://emberjs.com/ember-users/
• http://ryantablada.com/post/why-i-chose-ember-js
• https://www.airpair.com/js/javascript-framework-comparison
• http://emberigniter.com/new-to-ember-cli-start-here-2016-tutorial/
• https://www.codeschool.com/blog/2015/10/26/7-reasons-to-use-ember-js/
• https://www.airpair.com/js/javascript-framework-comparison