Angular

Kuba Waliński

Back to the Future

Kuba Waliński

  • kubawalinski@gmail.com
  • @kubawalinski
  • github.com/kubawalinski
  • blog.kubawalinski.com

Back to the future

What's the plan?

  • about a project...
  • ES2015
  • project structure
  • eslint
  • automation
  • testing
  • front to the future

Hurray! Greenfield project!

Which framework to use?

(Fat) Arrow Functions

Arrow Functions

console.log([1,2,3,4].map(x=>x*2));
//[2,4,6,8]

var square = x => x*x;

console.log(square); //[Function]
console.log(square(4)); //16
console.log(square(3)); //9

console.log([1,2,3,4].map(function(x) {
    return x * 2
}));
//[2,4,6,8]

var square = function(x){ return x*x; };

console.log(square(4)); //16
console.log(square(3)); //9

Solving "this" problems

#1 reason for facepalms in JavaScript

Arrow Functions

var name = "Bob";
var bob = {
    name: name,
    friends: ["John", "Tom"],
    printFriends: function() {
        this.friends.forEach(function(f)
        {
            console.log(this.name + " knows " + f);
        });
    }
};

bob.printFriends();
//TypeError: Cannot read property 'name' of undefined

var name = "Bob";
var bob = {
  name,
  friends: ["John", "Tom"],
  printFriends() {
    this.friends.forEach(f =>
    {
      console.log(this.name + " knows " + f);
    });
  }
};

bob.printFriends();
//Bob knows John
//Bob knows Tom

var name = "Bob";
var bob = {
    name: name,
    friends: ["John", "Tom"],
    printFriends: function() {
        var self = this;
        this.friends.forEach(function(f)
        {
            console.log(self.name + " knows " + f);
        });
    }
};

bob.printFriends();
//Bob knows John
//Bob knows Tom

Lexical this

Function scope and var

#2 reason for facepalms in JavaScript

let & const

function() {
  {
    console.log(x); //should throw a ReferenceError
    let x = "start";
    y = "start";
    console.log(x,y); // start start
    {
      const z = "permanent";
      //z = "can't touch this";
      x = "inner";
      var y = "works everywhere";
      console.log(x,y,z); // inner works everywhere permanent
    }
    //let x = "new value"; //illegal
  }
  //x = "end";
  y = "end";
  console.log(y); // end
}();

Modules

Modules

// lib/math.js
export function sum(x, y) {
    return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2pi = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2pi = " + sum(pi, pi));

Modules

// lib/math.js
export function sum(x, y) {
    return x + y;
}
export var pi = 3.141593;

// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.exp(x);
}

// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("e**pi + e = " + (exp(pi) + e) );

Transpiling on the fly with JSPM

What next?

Thanks!

questions?

Angular: Back to the Future

By Kuba Waliński

Made with Slides.com

Angular: Back to the Future

Presentation for IHS Tech Conference

  • 679

More from Kuba Waliński