STACK = FE Glossary

1. Event-driven

JS = [1] single thread programming, [2] non-blocking by the event-driven mechanism.

Batch programming language	Multi-thread programming	Event driven
executes codes line by line		event loop, continuously check which event is triggered.
debug easier	race condition	used in OS

	event-loop is single thread.

3 elements in event-loop

1. event queue

2. event loop

3. event handler

Action	Scenario
1. Events, like click and type, will be accumulated in the queue.
2. The loop detects events and sends one to the handler. Then, the control is passed to the handler.
3. The handler processes the event, and returns the control back to the loop.
Repeat 2
Repeat 3

Process & thread

• process has many threads.

• Threads in a process share memory via sockets.

Stack & Heap

Stack	Heap
static memory	dynamic memory, determined at run time
variable	function, pointers
	slower, but memory efficient.

2. Async pattern

2.1 callback hell

const jcampPeaks = () => {
 setTimeout(() => {
   console.log('1. Read a JCAMP file.')
   setTimeout(() => {
     console.log('2. Extract XYDATA.')
     setTimeout(() => {
       console.log('3. Peak pickings.')
       setTimeout(() => {
         console.log('4. Send peaks back.')
       }, 500);
     }, 500);
   }, 500);
 }, 500);
};

jcampPeaks();
console.log('This is a JCAMP peak-picking process.')

2.2 Promise

// define a CB return promise
const asyncAction = (lIdx, str) => {
 const idx = lIdx + 1;
 const promise = new Promise((resolve, reject) => {
   setTimeout(() => {
     console.log(`${idx}. ${str}`);
     resolve(idx);
   }, 500);
 });
 return promise;
};

2.2.1 then / catch

const jcampPeaks = () => {
 const idx = 0;
 asyncAction(idx, 'Read a JCAMP file.')
   .then(idx => asyncAction(idx, 'Extract XYDATA.'))
   .then(idx => asyncAction(idx, 'Peak pickings.'))
   .then(idx => asyncAction(idx, 'Send peaks back.'))
   .catch(err => (
     console.error(err)
   ));
};

jcampPeaks();
console.log('This is a JCAMP peak-picking process.');

2.2.2 async / await

const jcampPeaks = async () => {
 const idx0 = 0;
 const idx1 = await asyncAction(idx0, 'Read a JCAMP file.');
 const idx2 = await asyncAction(idx1, 'Extract XYDATA.');
 const idx3 = await asyncAction(idx2, 'Peak pickings.');
 const idx4 = await asyncAction(idx3, 'Send peaks back.');
};

jcampPeaks();
console.log('This is a JCAMP peak-picking process.');

2.2.3 generator

function* jcampPeaks() {
 const idx0 = 0;
 const idx1 = yield asyncAction(idx0, 'Read a JCAMP file.');
 const idx2 = yield asyncAction(idx1, 'Extract XYDATA.');
 const idx3 = yield asyncAction(idx2, 'Peak pickings.');
 const idx4 = yield asyncAction(idx3, 'Send peaks back.');
}

const co = require('co');
co(jcampPeaks);
console.log('This is a JCAMP peak-picking process.');

3. Middleware

extend functionality without modifying the code.

4. HOF / HOC

4.1. HOF

• A function that accepts and/or returns another function is called a higher-order function. (reusability)

• remember local scope.

• ex: map, reduce, filter.

const add = (x) => (y) => x + y;
result = add(10)(20);

const add10 = add(10);
result = add10(20);

4.2. HOC

const Decoration = (props) => (
  <div className="card-decoration">
    {props.children}
  </div>
);

const ButtonWithDecoration = () => (
  <Decoration>
    <button>Save</button>
  </Decoration>
);

5. React & Redux

react: one-way data binding.

redux-action: plain object

redux-reducer: pure function without side effect

state = reducer(action, state)

5.1. Why immutable

side effects = [1] less predictable [2] harder to test.

5.2. Functional programming

• stateless

• immutable