An introduction to modern JavaScript: ES6, modules...

Part 1: ES6 syntax

ES6 is the next version of JavaScript!

• 2009: ES5
• 2015: ES6
• 2016: ES7

With Babel transformer, we can use ES6 now!
Babel is included in react-rails gem.

Links

• ES6 overview
• ES5 VS. ES6 syntax comparison
• Airbnb JavaScript ES6 style guide
• Babel transformer

The arrow symbol =>

Useful in .jsx loops with .map() function and event handlers.
Benefits:

• compact! no function , no {}, no return
• No problem scope with this keyword

JSX Example 1: create table rows

BEFORE

          <tbody>
            { entries.map( function (entry, i) {
              return(<RestoreLogList.Entry
                entry={ entry }
                key={ i }
              />);
            }
            ) }
          </tbody>

AFTER

          <tbody>
            { entries.map( (entry, i) =>
              <RestoreLogList.Entry
                entry={ entry }
                key={ i }
              />
            ) }
          </tbody>

JSX Example 2: create a button toolbar

BEFORE

var self = this;

<div className="btn-group">
  { this.props.options.map(
    function (item, i) {
      return (<button
        key={ i }
        type="button"
        className={ 'btn' + (self.props.value == item ? ' active' : '')  }
        onClick={ function () { self.props.onChange(item); } }
      >
        { item }
      </button>);
    }
  )}
</div>

AFTER

<div className="btn-group">
  { this.props.options.map( (item, i) =>
      <button
        key={ i }
        type="button"
        className={ 'btn' + (this.props.value == item ? ' active' : '')  }
        onClick={ () => this.props.onChange(item) }
      >
        { item }
      </button>
  ) }
</div>

Destructuring

BEFORE

var x = data.x;
var y = data.y;
var z = data.z;

AFTER

let {x, y, z} = data;

Other nice features

• class
• let and const
• default parameter value
• ...

Coming soon: ES7 (ES2016) !

An example of feature: [decorators] (https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841)

Part 2: use JavaScript modules ?

1. Old JavaScript (everything is global)

my-component.jsx

//React is in the global namespace.

var MyComponent = React.createClass({

  handleSubmit: function(e) {
  },

  render: function() {
  }
});

my-page.jsx

//MyComponent is an object declared in the global namespace

<MyComponent />

2. CommonJS module system (used by node.js)

• require
• module.exports

my-component.jsx

var React = require('react');

var MyComponent = React.createClass({

  handleSubmit: function(e) {
  },

  render: function() {
  }
});

module.exports = MyComponent

my-page.jsx

var MyComponent = require('./path/to/my-component.jsx');

<MyComponent />

3. ES6 modules

• import
• export

my-component.jsx

import React from "react";

export default class MyComponent extends React.Component {

  handleSubmit(e) {
  }

  render() {
  }
}

my-page.jsx

import MyComponent from './path/to/my-component.jsx';

<MyComponent />

More details about ES6 class syntax: React on ES6+

Why use modules (instead of Rails sprockets) ?

• Code easier to read and maintain
• Code easier to test
• npm ecosystem power: more choice, librairies up-to-date...
• Decoupled architecture (Front-end application + Rails backend application, used to make API calls)

Blog entry and discussion: Rails with Webpack - Why and How

From rails-webpack-react-flux

Love the asset pipeline to death, but the lack of true modules definitely gets noticable with larger amounts of client side code.

How to use modules in our Rails application ?

We need to convert modules to plain JavaScript code.

• Browserify
• Webpack

Webpack can be used to require any file (JavaScript, CoffeeScript, JSX, css, sass) and generates a single bundle file.

A nice add-on : react-hot-reload
React hot loader automaically updates the browser when a .JSX file is updated, keeping the context (state and props).

Examples of Rails + Webpack integration

• rails-webpack-react-flux: Rails + CoffeeScript + Flux (Flummox) + csjx + Webpack
• react-webpack-rails-tutorial: Rails + ES6 + Flux (Alt) + Webpack
• FFRRIWB on Rails: Flux (Flummox), React, React Router, Immutable

Discussion

Single-Page-Application ("SPA") pros and cons

Pros:

• Fast (static assets pushed to a CDN, Rails only serves JSON data)
• Rich user experience
• Decoupled architecture: more flexible UI, easier to change
• Mobile application (native or hybrid) are possible

Cons:

• requires modern JavaScript skills!
• Building process
• in local environment, 2 servers are needed: a back-end server (Rails) + a front-end server that builds asset and serves static content (node.js)
• Too complicated ? (皆んなさん、どう思いますか？)

Coming soon, next 勉強会

• How to test (modern) JavaScript
• Flux architecture
• ...