ES6 & Rails
http://slides.com/ianqueue/es6-rails
What is ES6?
- First major update to Javascript since 2009
- Currently being integrated in modern browsers
- New Features!
Why should you care? You've Read about the good parts. (ES5)
- Community
- Workflow
- Support Modern Front End
- Modular Practices / Reusable
- Maintainability / Readability
- Better Performance
Rails Support
- Babel & Sprockets 3+ ( ES6, TypeScript, JSX )
- Browserify & NodeJS (commonJS modules)
- JSPM ( build step, System polyfil )
- Gulp ( replace asset pipeline )
- Webpack ( asset bundler module loader )
- more...
Modules
- Code Organization
- Eliminate Global Namespace Conflicts
- Promotes Code Reuse
Global
A common practice is to create a global namespace reference in order to organize and share code while keeping a decent separation of concerns. ( Angular, React, jQuery etc. all do this. )
Require JS
One of the first mainstream module systems for Javascript that includes asynchronous loading and a build system.
Uses the asynchronous module definition specification ( AMD ).
Angular
Has it's own module system like require, but doesn't have a lazy/async loading system. Also known as Direct Injection or DI.
Angular also defines different types of modules trying to add an opinionated design pattern to your application.
CommonJS
Another module standard.
ES6 Module
The ES6 standard. Most flexible.
const
- prevent reassignment ( immutable )
- great for class or method references
Example
let
- block scope
- good for iteration
- doesn't "hoist"
Example
We see in the second example that the variable 'i' does not get hoisted and is not accessible to the rest of the function.
Promise
- Asynchronous Process Handling
- Kind of like a Callback ( but way better )
- Native Support
- Flat Code Structure
- Chaining
- Distributed
Callback Hell
Ultimately does the job, but can become a nightmare to maintain and test.
Reject / Resolve
A promise can be invoked and our code can respond once it is resolved or rejected.
A promise that never resolves will never finish code execution.
Distributed
As long as we have a reference to the promise, different sections of our code can respond to the resolution.
WeakMap
- New Data Structure
- Maps an object -> object
- Garbage Collected
- Is not enumerable
Example
WeakMaps have the following methods... set, get, delete and has.
class
- reminiscent of coffescript
- constructor()
- shortened function syntax
Example
=>
Javascript is functionally scoped, so the reference keyword `this` changes with it's context. Fat arrow cleans this up a bit.
Template Strings
- String interpolation has always been a pain
Example
Angular
An interesting use of WeakMap, class, =>, and multi-line string interpolation with Angular Controllers...
And much more...
- enhanced object literals
- destructuring
- default + rest + spread
- iterators + for..of
- generators
- unicode
- math ( new features, Epsilon, etc.)
- binary and octal literals
- module loaders ( System )
- map
- set
- weakset
- proxies
- symbols
- subclassable built-ins
- tail calls
- reflect api
Conclusion
- Take a look at new ES6 language features
- Quickly gaining adoption in modern browsers
- Can use transpilers to get support today
- Promotes more modular vanilla JS
- Will be harnessed more in Angular 1 & 2, React, Ember, etc.
- Take advantage of the open source community
Thanks!
babel.io
browserify
jspm.io
MDN
Resources
Code Example
http://code.livingsocial.net/iquattlebaum/mobile/tree/babel-demo
ES6 & Rails
By ianqueue
ES6 & Rails
- 636