之前写JavaScript都是用create-react-app创建好项目再开始写，什么ES6的语法，JSX的语法都是直接写，并没有碰到过什么问题，连语法高亮都很完美，直到最近想尝试用Karma搭建测试的环境，才感受到了没有配置Babel的痛苦。都怪create-react-app太给力，不然早就该研究Babel这些东西了~

Why Babel?###

因为我们想更优雅地使用最新的JavaScript特性来写代码而不用苦苦等待编译器来支持。

因为我们想单纯地写代码而不用考虑兼容性的问题。

因为…

JavaScript和前端就是有这么多恶心人的问题，而Babel就是创造出来帮助我们屏蔽掉这些问题的那个巴别塔。

最近帮同事部署Python开发环境碰到一个OpenSSL相关的问题，最后发现是由于他使用的MacOS自带的Python，而对应的自带的OpenSSL版本过低导致的。解决方法也不难，就是重新安装最新的OpenSSL以及Python，但是排查问题和安装确实花费了不少时间。想来现在Python已经广泛使用的virtualenv虽然已经解决了很大一部分开发环境的问题，但很多系统级别的依赖包产生的问题却是它无法解决的（比如不同的Python版本以及上面提到的问题）。

随后联想到现在很火的容器技术，如果把整个开发环境全部打包，岂不是就不会再因此而头疼了？

事实上，就连Pycharm都已经支持使用Docker的image来作为Python编译器远程debug了（因为是remote debugging，使用时感觉会有一些卡顿）！具体设置可以参考官方的文档。因此我们只需要在我们原先写requirements.txt的位置添加一个Dockerfile，其中使用现成的安装好Python编译器以及所需系统依赖的镜像作为基础镜像，再添加一层来pip install requirements.txt里面的package即可。（感觉做一个tool来做这件事情会🔥啊，也可能已经有人在做了！）

随着CI/CD的发展，什么都在往Code上靠，像Configuration as Code、Infrastruction as Code、Pipeline as Code等等概念层出不穷。对于这些概念，我是持双手赞成的，因为这些都变成Code之后，虽然要写的代码变多了，但是长远来看却是降低了代码的维护成本（比如突然换了一个人来维护代码也能迅速部署好开发环境）。因此，将整个开发环境全部打包也许在不久的将来就会成为软件开发的标准做法吧。

之前研究过了JavaScript中是怎么处理异步的操作的，现在我们再来看看放到一个具体的框架中，该如何应对异步的操作。这里主要探讨Redux框架下一个React应用中的异步请求操作。

原生React中的异步操作##

在讲Redux之前，先看一看原生的React app中是如何处理异步的操作的。

直接上例子：

var RepoList = React.createClass({
  getInitialState: function() {
    return {
      loading: true,
      error: null,
      data: null
    };
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
        return (
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

ReactDOM.render(
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.getElementById('example')
);

这是react-demos中的一个例子，该组件会发送一个请求来获取Github上面JavaScript类别的热门Repo。这个请求操作就是一个异步的操作，可以看到这里是直接将一个Promise对象传递到了组件的promise属性中，在组件加载好后通过调用this.props.promise.then来定义请求成功后的操作：将请求的结果更新到组件的状态中，从而可以重新渲染组件来展现请求结果。

简单分析下，可以得到这样一个模式来处理异步的操作：

将回调函数接口传递给组件 => 组件加载时定义回调函数，该回调函数会更新组件状态 => 回调函数在异步操作结束时被调用 => 组件根据状态的改变来重新渲染

回调函数

我们知道JavaScript和其他语言很大的一点区别就在于其中存在大量的异步函数。所谓异步是指一个函数可能调用它的语句已经执行结束了，但函数内部的语句依然还没有执行，即函数的调用仅仅是一个trigger。比如下图中的getAccount函数作为异步操作被调用后，紧接着fetchGreetings被调用，它们内部语句的执行几乎是在同时并发进行的。如果我希望fetchGreetings函数能在getAccount函数执行完成之后再开始执行（比如前者的需要后者的返回结果作为输入），并且仍保持getAccount函数是异步的，要怎么办？

一个最直接了当的方式就是回调，即把fetchGreetings函数本身作为一个参数传递给getAccount函数，当getAccount内部语句执行完成后，由它去调用fetchGreetings函数。

Time travel###

想当初决定入Redux的坑是因为看到了下面这张神图，当时感觉：哇塞好厉害，整个页面的状态说切换就切换，而且可以瞬间切换到之前的任意一个时间节点！

入了坑之后，发现其实也没那么神奇啦。Redux之所以可以进行时光穿梭正是因为所有的reducer函数都是纯函数，从而保证了每次状态的改变都会生成一个全新的state对象。你可以把不同时段的每个state对象都记录下来，这样你想展现什么时间段的状态，只需要切换到那个时间段的state对象即可。这也是Redux的devtools做的事情，知道了这些上面这张神图也就没那么神乎了吧。