Ember.js is a JavaScript framework for building web applications. It provides conventions and architecture to make applications more organized and testable. Key aspects of Ember.js include Ember objects, computed properties, templates powered by Handlebars, routes for navigation, and a data modeling layer using Ember Data. Components are also used to build reusable isolated views. Ember follows a "data down, actions up" pattern where data flows from parent to child components and user actions bubble up through the components.

1. INTRO TO
EMBER.JSSandino Núñez
@sandinosaso
https://github.com/sandinosaso

2. YES, ANOTHER JAVASCRIPT
FRAMEWORK

3. EMBER.JS

4. WHAT IS
EMBER.JS
➤ A framework for creating ambitious web application
➤ Built for productivity (provides architecture)
➤ Opinionated (sometimes perceived as difficult to learn)
➤ Convention over Configuration
(besides awesome!)

5. EMBER IN
THE WILD
http://emberjs.com/ember-users/

6. Simple apps can use
simple tools

7. APPS
NEEDS
➤ Keep it organized
➤ Modularize your code
➤ Separate concerns
➤ Establish conventions for smooth
teamwork
➤ Keep it testable
ARCHITECTUREBIG

8. EMBER CORE
CONCEPTS
➤ Classes and Instances
➤ Computed Properties
➤ Bindings
➤ Templates
➤ Route
➤ Models
➤ Components
➤ Data Down - Actions Up
➤ Lots of other features - we’ll just barely scratch the surface in
today’s session

9. EMBER
OBJECT➤ Base “class” that almost every object should inherit from
➤ Contains …

10. EMBER
OBJECT1 import Ember from 'ember';
2
3 let Person = Ember.Object.extend({
4 say(message) {
5 alert(message);
6 }
7 });
8
9 let Bob = Person.create();
10 Bob.say('Hello World');
11 // alerts "Hello World"
12
13 let Man = Person.extend({
14 say(message) {
15 message += ', says the man.';
16 this._super(message);
17 }
18 });
19
20 let Tom = Man.create();
21 Tom.say('Hello World');

11. EMBER
OBJECT
➤ Obj.create() instead of new instances
➤ Obj.extend() for single inheritance (mixins exists as well)
➤ this._super() calls overridden implementation
➤ Obj.reopen() to edit class definition
➤ Obj.get(‘key’) and Obj.set(‘key’)
➤ Allows dynamically created property values
➤ Object can listen for properties changes
➤ Use of .setProperties({ key: value }) for multiple at time.

12. COMPUTED
PROPERTIES➤ Used to build a property that depends on other properties
➤ Provide any property key you access and the property value
will be recomputed if change
➤ Should not contain application behavior, and should generally
not cause any side-effects when called.
1 import Ember from 'ember';
2
3 let Person = Ember.Object.extend({
4 firstName: '',
5 lastName: '',
6
7 fullName: Ember.computed('firstName', 'lastName', function() {
8 return this.get('firstName') + ' ' + this.get('lastName');
9 })
10 });
11
12 let bob = Person.create({
13 firstName: 'Bob',
14 lastName: 'Esponja'
15 });
16
17 bob.get('fullName');
18 // "Bob Esponja"

13. COMPUTED
PROPERTIES
(advanced usage)
1 export default Ember.Component.extend({
2 selectedTodo: null,
3
4 todos: [
5 Ember.Object.create({ isDone: true }),
6 Ember.Object.create({ isDone: false }),
7 Ember.Object.create({ isDone: true })
8 ],
9
10 // Custom
11 incomplete: Ember.computed('todos.@each.isDone', function() {
12 var todos = this.get('todos');
13 return todos.filterBy('isDone', false);
14 }),
15
16 // Using defined macro
17 incomplete: Ember.computed.filterBy('todos', 'isDone', false),
18
19 indexOfSelectedTodo: Ember.computed('selectedTodo', 'todos.[]', function() {
20 return this.get('todos').indexOf(this.get('selectedTodo'));
21 })
22 });

14. BINDINGS
➤ Unlike most other frameworks that include some sort of binding
implementation, bindings in Ember can be used with any object.
➤ A one-way binding only propagates changes in one direction, using
computed.oneWay()
1 wife = Ember.Object.create({
2 householdIncome: 80000
3 });
4
5 Husband = Ember.Object.extend({
6 householdIncome: Ember.computed.alias('wife.householdIncome')
7 });
8
9 husband = Husband.create({
10 wife: wife
11 });
12
13 husband.get('householdIncome'); // 80000
14
15 // Someone gets raise.
16 wife.set('householdIncome', 90000);
17 husband.get('householdIncome'); // 90000

15. TEMPLATES
➤ Uses Handlebars + Ember helpers
➤ Ember adds partial, render, view and control helpers
➤ Each template is backed by a model
➤ They include helpers such as: other templates, if else, loops,
formatting helpers, expressions like {{model.firstName}},
outlets (which are placeholders), components
1 <div id="main">
2 <div class="container-fluid">
3
4 {{outlet}}
5
6 </div>
7 </div>

16. ROUTES
➤ Url representation of your application’s objects, telling the template
➤ The router.js file defines the mapping between routes/urls
1 import Ember from 'ember';
2 import config from './config/environment';
3
4 const Router = Ember.Router.extend({
5 location: config.locationType
6 });
7
8 Router.map(function() {
9 this.route('login');
10
11 this.route('patients', function() {
12 this.route('new');
13 this.route('edit', { path: 'edit/:id' });
14 this.route('view', { path: 'view/:id' });
15 this.route('audit', { path: 'audit/:id' });
16
17 this.route('activities', { path: '/activities/:patient_id' }, function() {
18 this.route('new', { path: 'new' });
19 this.route('view', { path: 'view/:id' });
20 });
21
22 this.route('events', { path: '/events/:patient_id' }, function() {
23 this.route('new', { path: '/new/:eventType' });
24 this.route('view', { path: '/view/:id' });
25 });
26
27 });
28 });
29
30 export default Router;

17. 1 import Ember from 'ember';
2
3 export default Ember.route.extend({
4
5 model: function() {
6 return [
7 {
8 title: “London Palace"
9 },
10 {
11 title: "Eiffel Tower"
12 }
13 ];
14 }
15 });
ROUTING(implementation of a base route)
The model usually is a
record. The result of a query
to ember-data store
1 import Ember from 'ember';
2
3 export default Ember.route.extend({
4
5 model(params) {
6 var url = 'https://api.github.com/repos/' + params.repo_id;
7 return Ember.$.getJSON(url);
8 }
9 });
The model can be a POJO
1 import Ember from 'ember';
2
3 export default Ember.route.extend({
4
5 model: function(params) {
6 return this.store.find('myModel', params);
7 },
8
9 setupController: function(controller, model) {
10 controller.set('model', model);
11 }
12 });
The result of an ajax call

18. ROUTING(returning multiple models)
1 import Ember from 'ember';
2
3 export default Ember.route.extend({
4
5 setupController(controller, model) {
6 controller.setProperties({
7 patient: model.patient,
8 products: model.products
9 });
10
11 set(controller, 'isLoading', false);
12 },
13
14 model(params) {
15 return RSVP.hash({
16 patient: this.store.findRecord('patient', params.id),
17 products: this.store.findAll('product')
18 });
19 }
20 });

19. ROUTES
➤ The route queries the model and makes it available in the controller and
templates
➤ When the template or models being shown to the user changes, Ember
automatically keeps the url in the browser’s address bar up-to-date
➤ This means that at any point, users are able to share the URL of your app
➤ Ember Add-on for Chrome and Firefox let you inspect routes / data / promises
➤ error and loading routes automatically created and used on model loading and
error states

20. MODELS
➤ Define a mapping to the application data
➤ Has default types: string, number, boolean, date. Supports customs types
1 import Ember from 'ember';
2 import Model from 'ember-data/model';
3 import attr from 'ember-data/attr';
4 import { belongsTo, hasMany } from 'ember-data/relationships';
5
6 const { computed } = Ember;
7
8 export default Model.extend({
9 'name': attr('string'),
10 'surname': attr('number'),
11 'is_admin': attr('boolean'),
12
13 'roles': hasMany('roles', { embedded: 'always'}),
14 'office': belongsTo('office', { async: 'true' }),
15
16 fullName: computed('name', 'surname', () => {
17 return this.get('name') + ' ' + this.get('surname');
18 }),
19
20 roleList: computed('roles.@each', () => {
21 return this.get('roles').map((role) => {
22 return role.get('name');
23 })
24 })
25 });

21. MODELS
➤ In the first case the data comes from backend in the model itself (payload)
➤ In the second case the model only contains the ‘ID’ of the related model
and is loaded asynchrony with an specific call when required.
13 'roles': hasMany('roles', { embedded: 'always'}),
14 'office': belongsTo('office', { async: 'true' }),
(relationships)
You can also define custom attr options, for example (readOnly):
16 'entityId': attr('string', { readOnly: true }),
17 'entityType': attr('string', { readOnly: true }),

22. MODELS
➤ You can define custom types to fit any kind of data
➤ Makes it easy to maintain as you only need to change in one place
1 // app/transforms/utc.js
2 import DS from 'ember-data';
3 import moment from 'moment';
4
5 export default DS.Transform.extend({
6 serialize(value) {
7 let formatedDate = moment.utc(value).format('YYYY-MM-DDTHH:mm:ss', 'en');
8 return formatedDate;
9 },
10
11 deserialize(value) {
12 return value;
13 }
14 });
1 export default Model.extend({
2 'productId': attr('number'),
3 'eventTypeID': attr('number'),
4 'reasonSVID': attr('string'),
5 'notes': attr('string'),
6
7 'eventDate': attr('utc', { defaultValue: () => new Date() })
8 }

23. ADAPTER /
SERIALIZER➤ By default ember-data uses JSON-API format
➤ You can override default behavior either application level or for particular models
(fit any backend data even legacy one !!)

24. ➤ In Ember Data, the Adapter determines how data is persisted to a
backend data store, such as the URL format and headers for a
REST API.
➤ You can change default functionality (if your backend conventions
differ from ember-data assumptions) by extending it
ADAPTER(customization example)
1 import Ember from 'ember';
2 import DS from 'ember-data';
3
4 export default DS.JSONAPIAdapter.extend({
5 host: 'https://api.example.com',
6 namespace: 'api',
7
8 session: Ember.inject.service('session'),
9
10 headers: Ember.computed('session.authToken', function() {
11 return {
12 'API_KEY': this.get('session.authToken'),
13 'ANOTHER_HEADER': 'Some header value'
14 };
15 })
16 });

25. ➤ In Ember Data, serializers format the data sent to and
received from the backend store.
SERIALIZER(customization example)

26. ADAPTER /
SERIALIZER
(customization/ methods)

27. COMPONEN
TS➤ A completed isolated view that has no access to the surrounding context
➤ A great way to build reusable components for your application
➤ routable-components will be the future

28. DATA DOWN!
ACTIONS UP!➤ DDAU - single data flow (hence unidirectional)
➤ Apps easier to reason about
➤ Improves performance
(GoodBye MVC)

29. DEMO -
SHOWCASE - TIME