Post on 14-Apr-2017
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
Why ES6?
@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 + "\r\n";
message += "and that you live in: " + state + "\r\n";
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 Expressionslet 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 parametersfunction sayMsg(msg='This is a default message.') {
console.log(msg);
}
sayMsg();
sayMsg('This is a different message!');
@leojh
Let’s talk about ...
@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 codeStop 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 MacrosAllow 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
Promises …
@leojh
You should really understand promisesA 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.RSVPBecome 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
Thank you!
@leojh