This document contains the slides from a presentation on JavaScript Essentials for Ember Development. The presentation introduces the speaker and their background in Ember development. It recommends attendees understand ES6 features like string interpolation, lambda expressions, and default parameters. It advocates using high-order functions over imperative code and promises in Ember. The presentation also covers closures, computed macros, and other JavaScript tips.

1. JavaScript Essentials for
Ember Development
Leo Hernandez
@leojh
@leojh

2. A little about me...
● I work at Third Wave http://thirdwave.it
● I live in South Florida
● I remember when JavaScript was the redheaded stepchild
● Most of my career has been in .Net
● Been focusing heavily on Ember development for the past
year
● I mentor others at ThirdWave on JavaScript and Ember
@leojh

3. This Talk is Mostly for
Ember or JavaScript
beginners
@leojh

4. For the Rest of you… it’ll
probably be Old Hat
@leojh

5. If there is one thing that you should get
from this talk ….
@leojh

6. If there is one thing that you should take
from this talk ….
Use
@leojh

7. If there is one thing that you should take
from this talk ….
Use Use
two
@leojh

8. Why ES6?
@leojh

9. Essentially modernizes JavaScript
@leojh

10. Essentially modernizes JavaScript
String Interpolation
Namespacing
Lambda Expressions
Nice var scoping
Default parameters
Iterators
Classes
… and more
@leojh

11. ES5 - String Formatting
confirmPerson = function(name, state) {
var message = "Please confirm that your name is: " + name + "rn";
message += "and that you live in: " + state + "rn";
message += "and that you are not a robot.";
return confirm(message);
};
confirmPerson('Leo', 'Florida');
@leojh

12. ES6 - String Formatting
var confirmPerson = function(name, state) {
var message = `Please confirm that your name is: ${name}
and that you live in: ${state}
and that you are not a robot.`;
return confirm(message);
};
confirmPerson('Leo', 'Florida');
@leojh

13. ES6 - Lambda Expressions
let square = x => x * x;
[1,2,3,4,5].map(num => num * num);
[1,2,3,4,5].forEach(num => {
console.log(num);
})
//Important to note that 'this' keyword is preserved
@leojh

14. ES6 - Use const / let over var
// Use let var and const over var
// var is function scopes
// let/const are blocked scope
function() {
for (var i=0; i<=10; i++) {
var l = i;
}
console.log(l);
};
@leojh

15. ES6 - Default parameters
function sayMsg(msg='This is a default message.') {
console.log(msg);
}
sayMsg();
sayMsg('This is a different message!');
@leojh

16. Let’s talk about ...
@leojh

17. Use high-order functions
Use lambda expressions
Eschew imperative code
@leojh

18. Before we proceed, let’s review Closures
function outerFunc() {
var name = "Mozilla";
function innerFunc() {
alert(name);
}
return innerFunc();
};
In Brief:
Closures are a language in which variables scoped in an outer/parent function are
available to the child/inner function
@leojh

19. Eschew imperative code
Stop using:
Switch Statements
For loops
While loops
… and general imperative programming
… find the right high order function to be succinct in your code
@leojh

20. Use High Order functions instead of imperative code
.forEach() - iterates over a set
.map() - projects a set
.filter() - narrows down a set based on the predicate
.find() - returns first match in a set based on the predicate
.any() - returns true if match is found based on the predicate
.every() - returns true if match is found for all elements in the set (predicate also)
Ember gives us some additional nifty functions so we can avoid the predicate f()
@leojh

21. Nifty High Order Functions in Ember
.mapBy() - pass in name of a field
.filterBy() - pass in value name of field and value to match
.findBy() - pass in value name of field and value to match
.isAny() - pass in value name of field and value to match
.isEvery() - pass in value name of field and value to match
@leojh

22. Something even more nifty - Computed Macros
Allow you to use common High Order Functions as observables in your Ember
objects.
import Ember from 'ember';
export default Ember.Service.extend({
items: Ember.computed.alias('model')
subTotal: Ember.computed.sum('items.price'),
});
@leojh

23. Promises …
@leojh

24. You should really understand promises
A large part of the Ember framework is based on Promises
When you Provide a model to a Route - That’s a promise
Anytime you go fetch data from the server on Ember Data - That’s a promise
Promises let you circumvent Callback Hell
Sometimes you need to create your own Promises
@leojh

25. If you’re asking what Callback Hell Is
@leojh

26. Ember.RSVP
Become Familiar with the Ember.RSVP namespace
Read the Docs for the RSVP lib https://github.com/tildeio/rsvp.js/
ES6/RSVP syntax for creating a Promise
var promise = new Ember.RSVP.Promise(resolve, reject => {
// do your async work
//if it succeeds, call:
resolve(value);
//if it fails, call:
reject(error);
});

27. Other Tips
//Use truthy/falsey
let leo = null;
if (leo === null) {}
if (leo === typeof("undefined")) { }
if (leo) {}
//Coerce to boolean
let hasLength = "12345".length; //will return length
let hasLength = !!"12345".length; //will return true
//Defaults
let name = this.get('name') ? this.get('name') : 'No Name';
let name = this.get('name') || 'No Name';
@leojh

28. Thank you!
@leojh