1. Front End Workshops
EmberJS - In Depth
Marc Torrent & Mario García
mgarcia@visual-engin.com
mtorrent@visual-engin.com

2. In previous workshops of
EmberJS...

3. Remember the
BIG PICTURE
ember-cli Router
Routes
application.js
Models
Templates
Components
Ember-Data
Controllers
S
E
R
V
I
C
E
S

4. Ember Data - Adapters &
Serializers

5. Ember Data
Application
Route/Controller/Component
Can be thought as a read-through cache
Single store - Central repository of models in your application
Beware of cache-backend desynchronization!
Ember Data

6. Communication with backend
How we access data
DS.Adapter
DS.Serializer
As of Ember Data 2.0, the default Adapter and Serializer follow JSON API format.
REST API
Ember
Ember Data
Format of the data

7. JSON API Specification
Content-Type: application/vnd.api+json
Top level attribute “data”
Attribute names are dasherized
Attribute “type” should be pluralized
It’s about the data...

8. JSON API Specification
..but also about the end points!
Action HTTP Verb URL Response status*
Find GET /articles/123
200 - Successful
404 - Not found
Find All GET /articles
200 - Successful
404 - Not found
Update PATCH /articles/123
200 - Successful
204 - No Content
Create POST /articles
201 - Created
204 - No Content
Delete DELETE /articles/123
200 - Successful
204 - No Content
*More response statuses are possible. See the complete specification at http://jsonapi.org/format/

9. Adapters
Extend/build your own adapters to fit your needs!
Priority rules apply between adapters!
DS.Adapter
DS.JSONAPIAdapter
DS.RESTAdapter
How to communicate with backend

10. Customize your adapter (1 of 3)
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
host: 'https://api.example.com',
namespace: 'api/v1'
});
store.findRecord('post', 1) GET request to http://api.example.com/api/v1/posts/1
Host customization - Endpoint path customization
store.findAll('person') GET request to http://api.example.com/api/v1/people
store.findAll('user-profile') GET request to http://api.example.com/api/v1/user-profiles

11. Customize your adapter (2 of 3)
Type path customization
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
pathForType(type) {
return Ember.String.underscore(type);
}
});
store.findRecord('post', 1) GET request to /post/1
store.findAll('person') GET request to /person
store.findAll('user-profile') GET request to /user_profile
Headers customization
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
headers: {
'API_KEY': 'secret key',
'ANOTHER_HEADER': 'Some header value'
}
});

12. Customize your adapter (3 of 3)
Pluralization customization
Ember Inflector at your rescue!
Allows definition of irregular and uncountable pluralizations
Houston...
Our API REST serves at the following endpoints:
➔ /formulae (instead of the regular form /formulas)
➔ /advice (instead of the pluralized form /advices)
...do we have a PROBLEM?

13. Serializers
DS.Serializer
DS.JSONAPISerializer
DS.JSONSerializer
DS.RESTSerializer
Extend/build your own serializers to fit your needs!
Priority rules apply between serializers!
Define the format of the data

14. Serializing data sent to backend
Customize your serializer (1 of 4)
// JSON generated by Ember Data
{
"data": {
"attributes": {
"name": "Product",
"amount": 100,
"currency": "SEK"
},
"type": "product"
}
}
// But server expects...
{
"data": {
"attributes": {
"name": "Product",
"cost": {
"amount": 100,
"currency": "SEK"
}
},
"type": "product"
}
}
Change the format of the data sent to backend with the serialize() hook.

15. Normalizing data received from backend
Customize your serializer (2 of 4)
// Server response
{
"id": "1",
"body": "A comment!",
"date": {
"offset": "GMT+0200 (CEST)",
"value": "Tue Apr 05 2016"
}
}
// But Ember Data expects...
{
"id": "1",
"body": "A comment!",
"offset": "GMT+0200 (CEST)",
"value": "Tue Apr 05 2016"
}
Change the format of the data received from backend with the
normalizeResponse() hook.

16. Identifier
Customize your serializer (3 of 4)
Specify your resource identifier key
through primaryKey property
export default DS.JSONSerializer.extend({
primaryKey: '_id'
});
Attribute names
If the JSON payload does not match your Ember model attribute names...
// app/models/person.js
export default DS.Model.extend({
lastName: DS.attr('string')
});
// app/serializers/person.js
export default DS.JSONAPISerializer.extend({
attrs: {
lastName: 'lastNameOfPerson'
}
});

17. Custom transforms
Customize your serializer (4 of 4)
Use custom transforms if the server sends data that does not fit any Ember Data
built-in attributes (string, number, boolean and date)
A custom transform should implement the serialize() and deserialize()
Once implemented, it can be used as a regular type of attribute

18. Routing and Navigation

19. Routing - Implicit routes
ember g route users
ember g route users/edit
application
application-loading
application-error
index
index-loading
index-error
users users-error
users/index
users-loading
users/edit
*All routes have its .hbs associated templates
loading
error
users/edit-error
users/edit-loading
users/index-loading
users/index-error
users/loading
users/error

20. Routing - Serve more than one model
Promises, promises, promises!
Ember.RSVP.hash resolves when all its promises parameters resolve
Be extra careful when using hash in the model() hook in cases where the hook
is not executed*
*See http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route
Alternatively, you can use route nesting to load multiple models
More info in http://emberigniter.com/load-multiple-models-single-route/

21. Routing - Rendering a specific template
// app/routes/posts/new.js
export default Ember.Route.extend({
renderTemplate() {
this.render('posts/form');
}
});
It is possible to render a specific template through the renderTemplate()
hook.
DRY*!!!!!
*Don’t Repeat Yourself
// app/routes/posts/edit.js
export default Ember.Route.extend({
renderTemplate() {
this.render('posts/form');
}
});

22. Routing - Preventing and retrying transitions
Invoke transition.abort() to immediately abort the current transition
Store the transition object and re-attempt invoking transition.retry()
Every transition attempt fires the willTransition action on the current active
routes, starting with the leaf-most route
Ember Router passes a transition object to various hooks on the involved routes
export default Ember.Route.extend({
beforeModel(transition) {},
model(params, transition) {},
afterModel(model, transition) {}
});

23. Routing - Loading routes
When navigating to /users route, Ember will try to find loading templates*:
users-loading
loading or application-loading
The router pauses transitions until the promises returned from beforeModel,
model and afterModel hooks fulfill
An intermediate transition into a loading substate happens immediately
The URL won’t be updated on the loading transition
*See https://github.com/emberjs/ember.js/issues/12367
A loading event will be fired on that route

24. Routing - Error routes
When an error occurs navigating to /users, Ember will try to find templates*:
users-error
error or application-error
Analogous approach to loading substates in the case of errors
An intermediate transition into an error substate happens in case of thrown
error or rejected promise
The URL won’t be updated on the error transition
*See https://github.com/emberjs/ember.js/issues/12367
An error event will be fired on that route

25. Routing - Query params
{{#link-to "episodes" (query-params filter="simp")}}Episodes{{/link-to}}
transitionTo('episodes', { queryParams: { filter: 'simp' }});
Query params are declared on route-driven controllers
Use controller’s queryParams property to bind query params and URL
Query params to backend
Query params in frontend
transitionTo
link-to helper
store.query('episodes', { filter: 'simp' });

26. Templates

27. ➢ Data Binding in template attributes
➢ Links
➢ Actions
➢ Input Helpers
➢ Write your own helpers

28. Data Binding in Templates
Controller’s Properties
<div class=”_tomster”>
<img src={{tomster.img}}
width=100>
</div>
DOM Attributes
<div class=”_tomster”>
<input type=”checkbox”
disabled={{tomster.disabled}}>
<img src={{tomster.img}}
width=100>
</div>
Collections
{{#each cartoons as |cartoon|}}
<div class=”_cartoon”>
<input type=”checkbox”
disabled={{cartoon.disabled}}>
<img src={{cartoon.img}}
width=100>
</div>
{{/each}}

29. Links: {{#link-to }}
A helper for links in our application without the need of using anchors and
href.
Router.map( function() {
this.route(‘about’);
this.route(‘cartoons’, function() {
this.route(‘cartoon’, {path: ‘/:cartoon_id’});
});
});
<ul>
{{#each model as |cartoon|}}
<li>{{#link-to "cartoons.cartoon"
cartoon}}{{cartoon.name}}{{/link-to}}
</li>
{{/each}}
</ul>
<ul>
<li><a href="/cartoon/1">Columbus Tomster</a></li>
<li><a href="/cartoon/2">LTS Tomster</a></li>
</ul>

30. Links: {{#link-to }} - Multiple Segments
We pass the model to the most inner nested route. The model() hook won’t be
called on routes where we specify the model through the link-to.
Router.map( function() {
this.route(‘cartoons’, function() {
this.route(cartoon, {path: ‘/:cartoon_id’},
function() {
this.route(‘specs’);
this.route(‘spec’, {path: ‘/specs/:
spec_id’});
});
});
});
<ul>
{{#each cartoons as |cartoon|}}
{{#each cartoon.specs as |spec|}}
<li>{{#link-to "cartoons.cartoon.
spec" spec}}{{spec.name}}{{/link-to}}
</li>
{{/each}}
{{/each}}
</ul>

31. Links: The Route that went away… (I)
Be careful with the structure of the templates and routes and beware of
models that you pass into the routes

32. Links: The Route that went away… (II)
Be careful with the structure of the templates and routes and beware of
models that you pass into the routes
Keep an eye on how you distribute your outlets and the relation between
index.hbs and the current template in our nested route.
Let’s see it in action!
Now you tell me what should I
place in the router - routes -
templates and link-to

33. Actions
1. Template helper for binding a DOM Event with a
Controller/Route/Component.
2. It can accept parameters such as Ember.Objects, Models or basic data
structures.
3. You can also specify the type of event by using the “on” option
4. By default, actions prevent the default browser action on a DOM Element.
To turn down this behavior, pass the option preventDefault=false

34. Input Helpers {{input}} {{textarea}}
1. Template helper for <input> and <textarea> DOM Elements.
2. Forget about actions with inputs and use the the input helpers as EmberJS
provides out of the box 2-way data-binding
3. Pass HTML and HTML5 attributes
4. Use it also with radio and checkboxes

35. Write Your Own Helpers
Custom template helpers for your own needs. Keep an eye on addons to see if
someone else has already written the helper you need.
ember generate helper
i18n
That file should export a function
wrapped with Ember.Helper.
helper()
The function receives a bundle
destination as string as the first
parameter (params[0]) and the key
to look for as the second parameter
(params[1])
To pass multiple arguments to a
helper, add them as a space-
separated list after the helper name
Use named Parameters to make
behavior of helpers configurable
export function i18n([bundle, key], {lang,
toUpperCase}) {
let resource = dictionary[bundle][key],
translation = lang? resource[lang] :
resource[DEFAULT_LANG];
return toUpperCase? translation.
toUpperCase() : translation;
}
export default Ember.Helper.helper(i18n);
<p>{{i18n "catalog" "category"
lang="es"}}</p>
<p>{{i18n "catalog" "category"}}</p>
<p>{{i18n "catalog" "category"}}</p>
<p>{{i18n "catalog" "product"
toUpperCase="true"}}</p>

36. Services

37. Routes
Controllers
Components
Helpers
...
Service
Persistent Object that can be
accessed for all the application
modules though:
Ember.inject.service()

38. Services - For What?
Services are useful for features that require shared state or persistent connections.
User/session authentication
Geolocation
Web Sockets
Server-sent events or notifications
Server-backed API calls that may
not fit Ember Data
Third-party APIs
Logging
Internationalization

39. Services - and How can I use it?
Create the Service:
ember generate service i18n
Services must extend the
Ember.Service base class:
Ember.Service.extend({});
Basic Service Advanced Service
Use the service in an Ember Object or
inherited:
i18n: Ember.inject.service()
The Service will be injected by the same
name we are assigning to a variable (i18n)
USE YOUR IMAGINATION, EVERYTHING
IS POSSIBLE!

40. Components

41. LA JOYA DE LA CORONA
AND ROUTABLE COMPONENTS ARE COMING!!

42. Components: Definition
➢ A reusable partial view (template with Handlebars) with controller that
can be combined with other components and contain other components.
❖ Components are used in route templates.
❖ They have a specific life cycle and can handle actions of their template and
also pass actions to their containing components, routes and controllers.
❖ At this moment components are not routable but soon they will become
routable and then, controllers will disappear.
❖ At this moment, EmberJS 2.4.0, All components need to be included inside
a template route that, by definition, has a Shim Controller.
❖ You can think of Components as widgets that are reusable through all our
application and that expose a template helper per usage.
ember generate component my-component
→ components/my-component.js
→ templates/my-component.hbs
<ul>
<li>{{my-component}}</li>
</ul>

43. Components: Passing Properties
➢ Pass Properties TOP - DOWN to components. Always from route
templates or other components to the destination component.
export default Ember.Route.extend({
model() {
return this.store.findAll('actor');
}
});
<ul>
{{#each model as |actor|}}
<li>{{actor-component actor=actor}}</li>
{{/each}}
</ul>
<div>{{actor.name}}<span {{action "toggleSection"}} style="margin-left: 5px;">{{more}}
</span></div>
{{#if showImage}}
<div><img src="{{actor.img}}" width="200px"></div>
{{/if}}

44. Components: Wrapping Content
➢ Let the developer use your component by passing custom content into it.
○ The template using your component will pass an html block inside the
component
○ The component MUST define the {{yield}} expression in its template
○ The component MUST be used in block form: {{#my-component}}...
{{/my-component}}
<div>{{yield}}<span {{action
"toggleSection"}}>{{more}}</span>
</div>
{{#if showImage}}
<div>
<img src="{{actor.img}}" width="200px">
</div>
{{/if}}
<ul>
{{#each model as |actor|}}
<li>{{#actor-component actor=actor}}
<p>{{actor.name}}</p>
{{/actor-component}}
</li>
{{/each}}
</ul>

45. Components: LifeCycle
➢ Access to hooks when the component is going to be rendered or
destroyed.
➢ It enables you to:
○ Direct DOM manipulation
○ Listening and responding to browser events
○ Using 3rd party JavaScript libraries in your Ember app
Initial Rendering:
1 init
2 didReceiveAttrs
3 willRender
4 didInsertElement
5 didRender
Re-Rendering:
1 didUpdateAttrs
2 didReceiveAttrs
3 willUpdate
4 willRender
5 didUpdate
Component Destroy:
1 willDestroyElement
2 willClearRender
3 didDestroyElement
6 didRender

46. Components: Data Down - Actions Up
➢ Keep the idea that state (properties) always travels in one direction:
TOP - DOWN.
➢ Instead, event handling (actions) always travel in the opposite direction:
BOTTOM-UP.
➢ Components and Controllers can handle actions from their contained
Components. See it as a data synchronization hub.
export default Ember.Component.extend({
actions: {
toggleSection() {
this.toggleProperty('showImage');
this.get('onSelected')(this);
}
}
export default Ember.Controller.extend({
actions: {
sectionShown(selectedActor) {
this.set('selectedActor', selectedActor);
}
}
});
{{actor-component actor=actor onSelected=(action "sectionShown")}}

47. Components: Transversal Communication
➢ In some situations components can not be on the same parent.
➢ We need a data-layer and a BUS using Pub-Sub
➢ For this purpose, use a Service extending Ember.Evented
export default Ember.Component.extend({
Appointment: Ember.inject.service(),
actions: {
complete() {
this.get(‘appointment’).trigger(‘complete’);
}
}
});
export default Ember.Component.extend({
appointment: Ember.inject.service(),
willRender() {
this.get(‘appoinment’).on(‘complete’,
this, ‘onComplete’);
},
onComplete() {
// Do Something
}
});

48. Integration with 3rd party
libraries

49. Integrate into the Ember using the asset manifest file ember-cli-build.js
Integration with 3rd party libraries
If an Ember addon exists... Install via Ember CLI and you are ready to go!
Front-end dependencies can be installed through Bower Package Manager
Other assets can (and should) just be placed in the vendor folder of the project
app.import({
development: 'bower_components/moment.js',
production: 'bower_components/moment.min.js'
});
app.import('vendor/amd.js', {
exports: {
'amd': ['raw', 'request']
}
});
Globals AMD Modules

51. Remember the
BIG PICTURE
ember-cli Router
Routes Models
Templates
Components
Ember-Data
Controllers
S
E
R
V
I
C
E
S

53. Thanks for your time!
Do you have any questions?