Babel

Use next generation JavaScript, today.

Transpiler

Kompilacja

function hello () {
  console.log("hello World");
}

00001010100110101010011

Transpilacja

(defn hello [] 
  (print "Hello World!"))

function hello() {
  console.log("Hello world!");
}

ES2015

"This Ecma Standard defines the ECMAScript 2015 Language. It is the sixth edition of the ECMAScript Language Specification"

http://www.ecma-international.org/ecma-262/6.0/

Co nowego?

Klasy

class Animal {
  constructor(type) {
    this.type = type;
  }
  makeSound(sound) {
    console.log(sound);
  }
}

class Cat extends Animal {
  contructor() {
    super('cat');
  }
  makeSound() {
    return super.makeSound('meow');
  }
}

var cat = new Cat();
cat.makeSound(); // logs 'meow'

Deklaracje zmiennych let i const

function varA() {
  var a = 1;
  if (true) {
    var a = 2;
  }
  return a;
}

function letA() {
  let a = 1;
  if (true) {
    let a = 2;
  }
  return a;
}

function constA() {
  const a = 1;
  if (true) {
    const a = 2;
  }
  return a;
}

function constA() {
  const a = 1;
  if (true) {
    a = 2; // error
  }
  return a;
}

Moułowość

import {Animal, Cat} from './animals';
import AnimalLogger from 'AnimalLogger';

const logger = new AnimalLogger(Animal);
const catLogger = new AnimalLogger(Cat);

export default logger;
export catLogger;

Wyrażenia destruct

const object = {
  key: 'abba',
  song: 'Money money'
}

const {key, song} = object


function getKey({key}) {
  return key;
}

getKey(object); // returns 'abba'

const array = [1, 2, 3, 4];

const [first, second, ...rest] = array

var object = {
  key: 'abba',
  song: 'Money money'
}

var key = object.key;
var song = object.song;

function getKey(object) {
  return object.key;
}

getKey(object); // returns 'abba'

var array = [1, 2, 3, 4];

var first = array[0];
var second = array[1];
var rest = array.splice(2);

Pluginy

/* @flow */
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

hello.js:5:5,19: string
This type is incompatible with
  hello.js:3:10,15: number

JSX

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

var Form = MyFormComponent;

var App = React.createElement(
  Form,
  null,
  React.createElement(
    Form.Row,
    null,
    React.createElement(Form.Label, null),
    React.createElement(Form.Input, null)
  )
);

ES 7

@Injectable
class BasicView {
  constructor() { }

  @permission('template')
  getTemplate() {
    return this.template;
  }
}

O babelu

• 6to5
• konkurencja dla traceur
• Babel 6

Stwórz babela

Dostań pracę w facebooku