Create a Babel stack to transpile/polyfill ES6 code

Allen May 8/5/2015

+

+

Who is this?

  • A leading scientist from Hitachi
  • President of Ecma International 

Mr. K. Yamashita

  • Ecma International is responsible for over 19 standards, including...

ECMA-262 – ECMAScript Language Specification 

Ecma International

Often referred to as...

  • Ecma International is an industry association founded in 1961, dedicated to the standardization of information and communication systems.

Javascript

Javascript

  • Version 5 - Approved 2009
  • Version 5.1 - Approved 2011
  • Formal name: ECMAScript 5.1
  • Also known as...

Javascript

(usable version)

(Lots of green lights)

ECMAScript 5.1 (ES5)                           Compatability

Newest Javascript

  • 6th edition of Javascript
  • Approved June 2015 
  • Formal name: ECMAScript 2015
  • Also known as:
  • ES6
  • ES2015
  • Javascript

(uh... not so usable)

ECMAScript 2105 (ES6)              Compatability

(Lots of red lights)

Yeah!... So what.

What can we do with ECMAScript 2015?

  • Arrow functions
  • Modules
  • Destructing
  • Generators
  • Promises
  • Template literals
  • Spread operator
  • New object literal features 
  • let and const
  • Rest parameters

(Twitter survey)

NOTE: Any of these topics would be a great Dayton Web Developers presentation

Arrow Functions

Arrows are a function shorthand using the => syntax.

They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. 

Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. 

Templates

Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. 

Who's gonna give a Dayton Web Developers presentation on these topics?

Let's Build Something!

Source: Start Coding ES6 With Babel - tuts+ and Jason Green

When finished we'll have:

  • The ability to use ES6 code in production
  • An ES6 test framework
  • A transpile tool
  • A skeleton Gulp stack

Let's Build Something!

ASSUMPTIONS: 
NodeJS & NPM are installed

In a new folder run:

  • npm init
  • npm install —save-dev babel
  • npm install —save-dev babelify
    (transform for Browserfiy and Babel)
  • npm install —save-dev browserify
    (so code can be written in NodeJS)
  • npm install —save-dev gulp
    (build tool)
  • npm install —save-dev vinyl-source-stream
    (allows modules to work with Gulp)

Let's Build Something!

Some more structure:    

 Create folders:

  /client
  /client/app
  /client/app/utils


Create base files:

  /client/index.html
   (the base HTML)
  /client/app/utils/index.js
   (our ES6 code)
  /client/app/main.js
   (our ES5 code)

(demo)

Let's verify it works.

Thank you.

Allen May

@AllenHMay

AllenHMay@gmail.com

DWD: Bebel for ES6 Features

By Allen May

DWD: Bebel for ES6 Features

A Dayton Web Developers Lightning Talk presentation (8/5/2015). "Create a Babel stack to transpile/polyfill ES6 code"

  • 1,539