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