Modern JavaScript

Package managers

Why do we need a package manager? Atomicity, repeatability, compartmentalisation. There are a options: npm, bower; but they're often conflated into apt-get, composer (PHP projects), pip, gems. Bower devs are planning to EOL it and replac it with npm.

mkdir new-project
cd new-project
npm init
npm install left-pad
ls
ls node_modules
npm install left-pad --save  # adds deps to package.json
rm node_modules -rf
npm install  # installs dependencies locally.

ES6

ECMAScript 6. ECMA = European Computer Manufacturers' Association. Microsoft used ECMA to rubber-stamp their "standards", since ISO and IETF actually required some standardisation and collaboration effort.

History

Sep 1995: Netscape releases Mocha/LiveScript/JavaScript
Jun 1997: ECMA Script 1
Jun 1998: ECMA Script 2
Dec 1999: ECMA Script 3
Oct 2008: ECMA Script 4 never published. Microsoft not interested in advancing ECMA Script, due to Silverlight.
Dec 2009: ECMA Script 5: Microsoft finally gives up after 10+ years of resisting advances to JavaScript. Adds map, filter, reduce. Browsers today (Q2 2016)
Jun 2015: ECMA Script 6: Not yet implemented, but can use babeljs to "compile" it into ES5 code.

React

JSX - markup in the Javascript, e.g.

import ReactDOM from 'react-dom';
ReactDOM.render(
  <h1>Hello world!</h1>,
  document.getElementById("container")
);

More interesting:

import React from 'react';
import ReactDOM from 'react-dom';

 class MyPage extends React.Component {
   constructor(props){
     super(props);
     this.addCounter = this.addCounter.bind(this);
     this.state = {counter:1};
   }
   render(){
     return <div onClick={this.addCounter}>
              {this.state.counter}
            </div>;
   }
   addCounter(e){
     this.setState({
       counter: this.state.counter + 1
     })
   }
 }
 
 ReactDOM.render(
   <MyPage/>,
   document.getElementById("container")
 );

Redux: for propagating "state" around; can monitor state and trigger React to re-render the DOM.

React has one-way data binding, like Angular 2 and unlike Angular 1.x (two-way). React has a virtual DOM which updates the Browser DOM as efficiently as possible.

Future:

preact = faster, ¼ codebase
future-react-ui = keep the cascading out of your widget's CSS
redux-saga = yield operator (Python)