ðŸ—Ģïļ JavaScript

Syntax

✔ Variables (let, const, var)
✔ Loosely types (Number, String, Boolean, Object ðŸĪ”, ...)
✔ -, +, *, /, >, <
✔ if, for, switch, ...
✔ functions (async, generators)
✔ classes ðŸĪ”

😎 first-class functions

let hello = function() {
  console.log('Hey!');
}

function myApp(f) {
  f();
}
myApp(hello);

Async

Callbacks

const MongoClient = require('mongodb').MongoClient;

MongoClient.connect('...', (err, db) => {
  if (err) throw err;
  console.log("Connected to MongoDB!");
  db.close();
});

ðŸĪŠ

doSomething((err, res) => {
  if (err) throw err;
  doSomethingAgain((err2, res2) => {
    if (err2) throw err2;
    doSomethingAgainAndAgain((err3, res3) => {
      if (err3) throw err3;
      ...
    });
  });
});
doSomethingAsync(params)
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.error(err);
  });

async/await

async function logic() {
  try {          
    const result = await doSomethingAsync(params);
    return result.total;
  } catch(err) {
    // ...
  }
}

logic().then(total => {
  console.log(total);
});

Generators

function* formatAnswer() {
  const answer = yield 'foo';
  return `The answer is ${ answer }`;
}

const generator = formatAnswer();
console.log(generator.next());
// {value: "foo", done: false}
console.log(generator.next(42));
// {value: "The answer is 42", done: true}

ðŸ‘ķ ðŸ‘Ļ ðŸ‘ī
Inheritance

prototype

const Animal = function() {}
Animal.prototype.run = function() {
  console.log('I am running');
}

const dog = new Animal();
dog.run();
const Animal = function() {}
Animal.prototype.run = function() {
  console.log('I am running');
}
const Dog = function () {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {
  console.log('woff woff');
}

const dog = new Dog();
dog.run();
dog.bark();

ECMAScript 2015 Classes

class Animal {
  run() {
    console.log('I am running');
  }
}

class Dog extends Animal {
  bark() {
    console.log('woff woff');
  }
}

const dog = new Dog();
dog.run();
dog.bark();

Composition

function Animal() {
  return {
    run() { console.log('I am running'); }
  }
}
function Dog(parent) {
  return {
    ...parent,
    bark() { console.log('woff woff'); }
  }
}

const dog = Dog(Animal());
dog.run();
dog.bark();

code that we write
↓
⚙ïļðŸ”Ĩ🔊🎀⚒ïļ
↓
code that we ship

Transpilation

Code → AST → Magic 💍 → Modified AST -> Prod Code

async function request() {
  const res = await Service.go();
  return res.value;
}

Transpilation
↕

  • Polyfills
  • Optimization
  • Innovation
const { name } = user;
var _user = user,
name = _user.name;
// faster.js

// input
const arr = [1, 2, 3];
const results = arr.map(e => 2 * e);

// output
const arr = [1, 2, 3];
const results = new Array(arr.length);
const _f = (e => 2 * e);
for (let _i = 0; _i < arr.length; _i++) {
  results[_i] = _f(arr[_i], _i, arr);
}
          
for (;;) {
  ...
  switch (ch) {
    case charCodes.lessThan:
    case charCodes.leftCurlyBrace:
      if (this.state.pos === this.state.start) {
        if (ch === charCodes.lessThan && this.state.exprAllowed) {
          ++this.state.pos;
          return this.finishToken(tt.jsxTagStart);
        }
        return super.getTokenFromCode(ch);
      }
      out += this.input.slice(chunkStart, this.state.pos);
      return this.finishToken(tt.jsxText, out);

    case charCodes.ampersand:
      out += this.input.slice(chunkStart, this.state.pos);
      out += this.jsxReadEntity();
      chunkStart = this.state.pos;
      break;

    default:
      if (isNewLine(ch)) {
        out += this.input.slice(chunkStart, this.state.pos);
        out += this.jsxReadNewLine(true);
        chunkStart = this.state.pos;
      } else {
        ++this.state.pos;
      }
  }
}

Transpilation
↕

  • Polyfills
  • Optimization
  • Innovation

🍧ðŸĻðŸĶ Flavors







           Plain JavaScript

ES6

  • Plain JS + Extras (by spec)
  • Transpilation ❓

CoffeeScript

  • New language ✅
  • Compilation ✅

TypeScript

  • Plain JavaScript + Types
  • Compilation ✅

Elm, ClojureScript

  • New language ✅
  • New paradigm ✅
  • Compilation ✅

âœĻ Thank you.

@KrasimirTsonev

me@krasimir.dev