Na froncie bez zmian?

Kuba Waliński

Kuba Waliński

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

JavaScript?!

But one day I got it...

Follow prophet Douglas

 JavaScript: The Good Parts

An inconvenient API

The Theory of the DOM

https://www.youtube.com/watch?v=Y2Y0U-2qJMs

by Douglas Crockford

jQuery to the rescue

This is awesome!

I know css, so I can now program in JavaScript!

Today we already know that

You Might Not Need jQuery

node.js

JavaScript front and back

Knockout.js

promising beginnings

Angular.js

the elephant in the room

You have ruined JavaScript

by Rob Ashton

aka MS Build Hero

And then...

all hell broke loose

as JavaScript popularity went through the roof

React

Angular 2
 Aurelia

etc. etc.

Yet Another JS Framework was released today

And I am OK with that

https://debuggerdotbreak.wordpress.com/2015/01/26/yet-another-js-framework-isnt-so-bad-after-all/

by Judah Gabriel Himango

The state of JavaScript

in 2015

by Jimmy Breck-Mckye

http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/

JavaScript a few years ago

JavaScript today

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

Classes

a welcome addition?

Classes

class Vehicle {
    constructor(name) {
        this.kind = 'Vehicle';
        this.name = name;
    }

    printName() {
        console.log(this.name);
    }
}

class Car extends Vehicle {
    constructor(name) {
        super(name);
        this.kind = 'Car';
    }
}

Easier string manipulation

Template Strings

console.log(`In JavaScript '\t\t' is a couple of tabs.`);
// In JavaScript '         ' is a couple of tabs.
console.log(`In JavaScript this is
 not legal.`);
// In JavaScript this is
// not legal.

var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
// Hello Bob, how are you today?

var car = {
 make: "Mazda",
 model: "RX-8",
 production: [2007,2008,2009]
};
console.log(`Production started in ${car.production[0]}.`);
// Production started in 2007.

Destructuring

Destructuring

var [a, , b, c=4] = [1,2,3];
console.log(a,b,c); // 1 3 4

var {w,x,y,z:surprise} = {x:"this", y:"is", z:"amazing"}
console.log(w,x,y,surprise); // undefined 'this' 'is' 'amazing'

var getPerson = () => { return {name: "Kuba", company:"ABB"} };

var {name: myName} = getPerson();
console.log(myName); // Kuba

function g({name: x, surname}) {
    console.log(x, surname);
}
g({name: "Tom", surname: "Jones"}); // Tom Jones

More syntactic sugar

Default / Rest / Spread

function f(x, y=12, z=2*y) {
    console.log(x,y,z);
}
f(1,2,3); // 1 2 3
f(5,8); // 5 8 16
f(4); // 4 12 24


function g(x, ...y) {
    console.log(y);
}
g(3, "hello", true); // ["hello", true]


function h(x, y, z) {
    console.log(x + y + z);
}
h(...[1,2,3]); // 6

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

Thanks!

questions + feedback

Made with Slides.com