JavaScript Essentials for Ember development

JavaScript Essentials for
Ember Development
Leo Hernandez
@leojh
@leojh

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

This Talk is Mostly for
Ember or JavaScript
beginners
@leojh

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

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

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

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

Essentially modernizes JavaScript
@leojh

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

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

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

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

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

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

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

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

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

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

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

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

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

If you’re asking what Callback Hell Is
@leojh

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);
});

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

JavaScript Essentials for Ember development

Recommended

More Related Content

What's hot (20)

Similar to JavaScript Essentials for Ember development (20)

More from Leo Hernandez (12)

Recently uploaded (20)

JavaScript Essentials for Ember development