Difference between revisions of "Modern JavaScript"

From Jon's Wiki
Line 66: Line 66:
 
  ); </nowiki>
 
  ); </nowiki>
  
Redux: for propagating "state" around.
+
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.
 
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.

Revision as of 03:54, 20 June 2016

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)