ECMAScript
Today, Tomorrow, and Beyond
Who is Paxata?
- Adaptive Information Platform
- Self-Service Data Prep Application
Who are we
- Engineering Teams in San Francisco and Columbus
What's ECMA?
Es2015 Features
Frameworks
Paxata UI
Agenda
ECMAScript
The standard for JavaScript ... also ActionScript and JScript
There are 8 versions
ES2015 first update since 2011
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.
So how do we handle browsers with different implementation schedules?
Transpiling
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 (ver. 6)
Defaults
Let / Const.
Template Literals
Arrow Functions
Promises
Modules
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 Experience Upgrading from Ng1 to Ng2
AKA How I learned to love the bomb
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/