Where does JS Community go?

Front end is very fast come and go, and defeating each other.

Now there is another fight...

ES 6 brought OOP ideas

http://qnimate.com/javascript-class-keyword/

feedback was not so good..

• ES6 classes are a virus.
• ES6 classes are not awesome.
• How to use classes and still sleep at night.

Why?

the JavaScript community is shifting towards a more functional programming style

var Note = Backbone.Model.extend({

  initialize: function() { ... },

  author: function() { ... },

  coordinates: function() { ... },

  allowedToEdit: function(account) {
    return true;
  }

});

Backbone.js

The rise of functional programming

Many developers with a background on FP languages have started to work on SPA frameworks and today we can enjoy libraries like React, Redux, Cycle.js, MobX, Ramda or Immutable.js in our JavaScript applications. Some of these libraries have a more FP style API than others but they all share one thing:

they try avoid OOP style on their APIs.

JS Conf 2016 

https://www.youtube.com/watch?v=e-5obm1G_FY

https://slidr.io/vakila/learning-functional-programming-with-javascript#1

How much of functional programming can I learn by learning AngularJS?

https://www.quora.com/How-much-of-functional-programming-can-I-learn-by-learning-AngularJS

Little to none. But, if you pick up React/Redux, you'll actually encounter key functional concepts at the core of what you learn. Namely pure functions and immutability.

All of these frameworks involve the passing around of functions, of course, but that's hardly enough to be considered "real" fp.

React + Redux

What is Redux?

• A predictable state container for javascript apps
• Flux implementation with a few differences
• Not just for react, can be useful for any Single Page App
• Created by Dan Abramov
• http://redux.js.org/

http://blog.wolksoftware.com/the-rise-of-functional-programming-and-the-death-of-angularjs

Could Angular 2 be successful?

Here is example code to use Redux

export default function applyMiddleware(...middlewares) {
  return (next) => 
    (reducer, initialState) => {
      var store = next(reducer, initialState);
      var dispatch = store.dispatch;
      var chain = [];
      var middlewareAPI = {
        getState: store.getState,
        dispatch: (action) => dispatch(action)
      };
      chain = middlewares.map(middleware =>
                    middleware(middlewareAPI));
      dispatch = compose(...chain, store.dispatch);
      return {
        ...store,
        dispatch
      };
   };
}

https://medium.com/@meagle/understanding-87566abcfb7a#.4nich5ucp

var greet = function(x) { return `Hello, ${ x }` };
var emote = function(x) { return `${x} :)` };
var compose = function(f, g) {
  return function(x) {
    return f(g(x));
  }
}
var happyGreeting = compose(greet, emote);
// happyGreeting(“Mark”) -> Hello, Mark :)

Composing Functions

https://medium.com/@meagle/understanding-87566abcfb7a#.4nich5ucp

var curriedAdd = function(a) {
    return function(b) {
        return a + b;
    };
};
var addTen = curriedAdd(10);
addTen(10); //20

Currying

var a = {a: 'aaa', b: 'bbb'};

var b = a;
b.b = 'bbbb';

var c = (function (item) {
  item.c = 'ccc';
  return item;
})(b);


console.log(a);
console.log(b);
console.log(c);

JS syntax

var a = {a: 'aaa', b: 'bbb'};

var b = a;
b.b = 'bbbb';

var c = (function (item) {
  item.c = 'ccc';
  return item;
})(b);


console.log(a);
console.log(b);
console.log(c);

JS syntax

// all of console.log() will become {a: 'aaa', b: 'bbbb', c: 'ccc'}

import * as Todo from '../constants/Todo';

const initialState = {
  todoList: [],
  id: 0,
  didCount: 0,
};

export default function todo(state = initialState, action) {
  const todoList = [].concat(state.todoList);
  const actionId = action.id;

  switch (action.type) {
    case Todo.ADD_TODO:
      const { name, dueTo } = action.todo;
      const stateId = state.id + 1;
      todoList.push({stateId, name, dueTo, did: false});
      return Object.assign({}, state, {
        todoList,
        id: stateId,
      });
    case Todo.DEL_TODO:
      const filteredList = todoList.filter(item => item.id != actionId);
      return Object.assign({}, state, {
        filteredList,
      });
    case Todo.CHANGE_DID_FLAG:
      const targetIndex = todoList.findIndex(item => item.id == actionId);
      if (targetIndex != -1) {
        return state;
      }

      const flag = action.flag;
      const didCount = flag ? state.didCount + 1 : state.didCount - 1;
      todoList[targetIndex].did = flag;
      return Object.assign({}, state, {
        todoList,
        didCount,
      });
    default:
      return state;
  }
}

all of them are immutable (Reducer)