European

Computer

Manufacturers

Association

hckr.news

• First well-adopted version was ES3
• ES6 was way behind schedule but is finally getting adoption
• For now they have switched to Year based releases as a step toward feature based releases.

What is a Transpiler

• Converts code from one language, to another.
• Unlike compiler - it is when the target language is the same level of abstraction as the original language.
• Allows us to take any version of ECMAscript (or a feature) and make it compatible with another
• This typically happens server side in the build tooling

coffeescript.org

Transpile Example

ES2015 - Defaults

ES2015 - Defaults

ES2015 - Let / Const.

ES2015 - Let / Const.

ES2015 - Let / Const.

ES2015 - Template Literals

ES2015 - Template Literals

ES2015 - Arrow Functions

mdn

ES2015 - Arrow Functions

mdn

ES2015 - Promises

http://adrianmejia.com/

ES2015 - Promises

http://adrianmejia.com/

ES2015 - Modules

CommonJS

Asynchronous Module Definition(AMD)

ES2015 - CommonJS

ES2015 - AMD

ES2015

How Does ES6+ Effect Frameworks?

React

React - Class

babeljs.io

React - Arrow Functions

babeljs.io

React - Arrow Functions

babeljs.io

React - Template Literals

babeljs.io

Angular

Angular - Modules

Angular - Modules

Our current UI Ecosystem

• Started being built about 4 years ago
• Build is grunt based
• Built on Angular 1 and CoffeeScript
• HTTP Requests for:
  • Images, Less, Fonts, etc.
• Massive amounts of complexity

Current Struggles

• Outdated libraries with new dependencies
  • jQuery 3 and plugins
• Followed 4 year old patterns (John Papa)
• Dependencies put on global
• Caching issues
• No shadow dom 

Running Ng1 and Ng2

• Angular 2 natively supports working parallel to Angular 1
• Upgrade Adaptor vs Platform Browser Dynamic
• Not huge performance hit (maybe?)

https://github.com/jrgleason/coffee-ng1-ts-ng2-demo/