Modern JavaScript - Revision history

Johnno at 04:00, 20 June 2016

2016-06-20T04:00:44Z

Johnno at 03:54, 20 June 2016

2016-06-20T03:54:42Z

Johnno at 03:49, 20 June 2016

2016-06-20T03:49:24Z

Johnno at 02:49, 20 June 2016

2016-06-20T02:49:53Z

Johnno: /* React */

2016-06-20T02:16:46Z

React

Johnno at 02:16, 20 June 2016

2016-06-20T02:16:00Z

Johnno: /* History */

2016-06-20T01:52:12Z

History

Johnno: Created page with "== 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..."

2016-06-20T01:39:19Z

Created page with "== 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..."

New page

== 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 ===

September 1995: Mocha/LiveScript/JavaScript
June 1997: ECMA Script 1
June 1998: ECMA Script 2
Dec 1999: ECMA Script 3
October 2008: Microsoft not interested in advancing ECMA Script, due to Silverlight. v4 fail
Dec 09: ECMA Script 5: Microsoft finally gives up. map, filter, reduce. Browsers today (Q2 2016)
June 15: ECMA Script 6: not implemented yet. Can get there using babeljs

← Older revision		Revision as of 04:00, 20 June 2016
Line 1:		Line 1:
−	~~__TOC__~~	+	__NOTOC__
	== Package managers ==		== Package managers ==

@@ Line 66: / Line 66: @@
   ); </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.

@@ Line 1: / Line 1: @@
 == Package managers ==
@@ Line 67: / Line 68: @@
 Redux: for propagating "state" around.
-React has one-way data binding, like Angular 2 and unlike Angular 1.x (two-way).
+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.

← Older revision		Revision as of 02:49, 20 June 2016
Line 64:		Line 64:
	document.getElementById("container")		document.getElementById("container")
	); </nowiki>		); </nowiki>
		+
		+	Redux: for propagating "state" around.
		+
		+	React has one-way data binding, like Angular 2 and unlike Angular 1.x (two-way).

@@ Line 41: / Line 41: @@
   import React from 'react';
   import ReactDOM from 'react-dom';
+  <nowiki>
   class MyPage extends React.Component {
     constructor(props){
@@ Line 63: / Line 63: @@
     <MyPage/>,
     document.getElementById("container")
-  );
+  ); </nowiki>

← Older revision		Revision as of 02:16, 20 June 2016
Line 26:		Line 26:
	* 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)		* 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.		* 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(
		+	<nowiki><h1>Hello world!</h1></nowiki>,
		+	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")
		+	);

@@ Line 19: / Line 19: @@
 === History ===
-September 1995: Mocha/LiveScript/JavaScript
+* Sep 1995: Netscape releases Mocha/LiveScript/JavaScript
-June 1997: ECMA Script 1
+* Jun 1997: ECMA Script 1
-June 1998: ECMA Script 2
+* Jun 1998: ECMA Script 2
-Dec 1999: ECMA Script 3
+* Dec 1999: ECMA Script 3
-October 2008: Microsoft not interested in advancing ECMA Script, due to Silverlight. v4 fail
+* Oct 2008: ECMA Script 4 never published. Microsoft not interested in advancing ECMA Script, due to Silverlight.
-Dec 09: ECMA Script 5: Microsoft finally gives up. map, filter, reduce. Browsers today (Q2 2016)
+* 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)
-June 15: ECMA Script 6: not implemented yet. Can get there using babeljs
+* Jun 2015: ECMA Script 6: Not yet implemented, but can use babeljs to "compile" it into ES5 code.