JavaScript Essentials for Ember development

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