Turn ES6 code into ES5

compliant code

• Supports almost all ES6 features except for Proxies
• Experimental support for some ES7 features
• Full integration with most today's systems:
  • Grunt, Gulp, Broccoli, Gobble task runners
  • Backbone, Meteor, Ember plugins
  • RequireJS, CommonJS and Browserify module loaders
  • Support for Node.JS and Ruby
• ​Supports sourcemaps

What about 3rd-party libraries?

• 3rd party libraries can be required as soon as they are in node_modules and with a package.json 
• No more bower install; npm install is the new thing!
  (you can still use bower if you prefer using the global scope...)
• Most popular 3rd parties libraries come with CommonJS support by default: Angular, lodash, Moment...

But what about the others? Not all libraries are in npm...

Solution: napa

napa allows installation of non-npm modules without package.json"

{
  "scripts": {
    "install": "napa"
  },
  "napa": {
    "angular": "angular/angular#v1.3.15",
    "backbone": "jashkenas/backbone#master",
    "jquery": "jquery/jquery"
  }
}

package.json :

Main entry point:

var angular = require('angular'),
    Backbone = require('backbone'),
    $ = require('jquery/dist/jquery'); 
// packages that don't have a package.json need to be specified their "main file".

Note: Requiring 3rd-party libraries also mean that they will be included in your app bundle. Make sure to minify your sources!

Modular structure

• Organize your angular modules into folders
• Each folder has an index.js that you import from outside

import '../config';
import '../services';

import User from "./User.js";
import Recommendations from "./Recommendations.js";

export default angular.module('discover.models', [
  'ionic',
  'LocalStorageModule',

  'discover.config',
  'discover.services'
])
  .service('User', User)
  .service('Recommendations', Recommendations)
;

// Add modules
import './config';
import './models';
import './services';
import './views';

import run from './run';

// The app modules
var modules = [
  // ng templates
  , 'templates'

  // app modules here
  , 'discover.config'
  , 'discover.models'
  , 'discover.services'
  , 'discover.views'

];

export default angular.module('discover', modules)
  .run(run);

main.js

Example service

// Save deps as closures
var $http, SERVER, $localStorage;

// Every service is a class
class User {

  // Inject deps into constructor (I use angular-mocks _ hack)
  constructor (_$http_, _SERVER_, _localStorageService_) {

    // Services and constants
    $http = _$http_;
    SERVER = _SERVER_;
    $localStorage = _localStorageService_;

    // ... properties
  }

  // methods...
}

// We could also write "export default User" and use ng-annotate...
export default ['$http', 'SERVER', 'localStorageService', User];

Everything is a class

• Use the new class syntax to declare your services/controllers/filters/directives...
• Make use of inheritance (extends)
• Shorthand and dynamic properties
• Forget about the $scope!
• Export single methods
• Public dependencies in the instance, privates in a closure

// Still need to import MainController to extend it... which we cannot do prior to ES6!
import {MainController} from '../../MainController';

// Private deps
var $timeout, AudioPlayer;

// Export the controller without its list of deps
export class DiscoverController extends MainController {

  constructor (_$timeout_, _User_, _Recommendations_, _AudioPlayer_) {
    // Call super controller
    super();
    
    // Private deps
    $timeout = _$timeout_;
    AudioPlayer = _AudioPlayer_;

    // Public deps
    this.User = _User_;
    this.Recommendations = _Recommendations_;

    // Public properties
    this.currentSong = angular.copy(this.songs[0])
  }

  // Use ES5 getter to get a binding to "Recommendations.queue" and not a copy.
  get songs () {
    return this.Recommendations.queue;
  }

  // Shorthand syntax
  nextSong() {
    // $log is a property of MainController
    this.$log('Playing next song');

    this.isPlaying = false;
    this.Recommendations.nextSong();
  }

}

export default ['$timeout', 'User', 'Recommendations', 'AudioPlayer', DiscoverController];

Example Usage

import {MainController} from '../../MainController';
// Import single methods, not the whole service (bonus: alias)
import {auth as authenticate} from '../../models/User"

export class SplashCtrl extends MainController {
  constructor () {
    super();
    this.username = '';
    this.isSignUp = false;
  }

  submitForm () {
    authenticate(this.username, this.isSignUp)
      .then(() => {
        // on success change state
        super.$state.go('tab.discover');
      })
      .catch((error) => {
        this.error = error;
      })
  }
}

export default SplashCtrl;

Exemple requiring single methods

But it's probably better to stick to DI principles and inject the whole service.

Destructure isolate scope/attributes

• Array/Object destructuring simplifies access to the isolate scope/attributes in directives
• Allow assignment of default values to the isolate scope optional properties
• Simplifies the use of configuration objects, such as
  <myDirective options="options">

function minMax () {

  return {
    restrict: 'EA',
    scope: {
      min: '@',
      max: '@'
    },
    replace: true,
    template: `<p>min is ${min}, max is ${max}</p>`,
    controller: ['$scope', function ($scope) {
      // Default destructuring values
      var {min = 0, max = 100} = $scope;
      console.log('min is %d, max is %d', min, max);
    }],
    link: function(scope, elem, attrs) {
      var {timeout, title, foo, bar} = attrs.options;
      // Do something with that
    }
  }
};

export default minMax;