2017年值得关注的JavaScript框架与主题

  • Webpack:%20最著名的模块打包工具之一,有不少优秀的模板配置奥,譬如Webpack2-React-Redux-Boilerplate。

  • Atom,%20VSCode,%20or%20WebStorm%20+%20vim:%20你需要为自己选择合适的编辑器来辅助你快速开发。Atom与VSCode都是非常优秀的JavaScript编辑器,WebStorm也不错但是它是收费版本。如果你打算直接在服务端开发的话,Vim是个不错的选择。

  • ESLint:%20ESLint能够帮助开发者更快地发现语法错误与样式问题,在Code%20Review与TDD之后这是个不错的减少Bug的方法。

  • Tern.js:%20基于编辑器插件的标准JavaScript类型推导工具,不需要任何编译步骤或者注解支持。

  • Yarn*:%20类似于NPM的工具,不过安装起来更为可靠快速。

  • TypeScript*:%20JavaScript的静态类型支持,不过需要特别注意的是,除非你在学习Angular%202,不然我觉得你如果要选用Angular%202的话还是要慎重考虑。我个人很喜欢TypeScript,也很钦佩他们团队的优秀工作,不过任然有很多的权衡,可以参阅%20“The%20Shocking%20Secret%20About%20Static%20Types”%20&%20“You%20Might%20Not%20Need%20TypeScript”.

  • Flow*:%20JavaScript静态类型检测工具,可以阅读%20“TypeScript%20vs%20Flow”%20来对于这二者有个大概的了解,如果你打算Flow的话也是推荐我的编辑器%20Nuclide。

  • React

    React%20是个专注于构建用户视图层的JavaScript库,其基于单向数据流的设计思想,也就意味着:

    • React%20以Props的形式将参数传入Components,并且在数据发生变化的时候选择性重渲染部分DOM。在重渲染阶段发生的数据变化并不会立刻触发重渲染,而是在下一个绘制阶段的时候才会进行重渲染。

    • 渲染完毕之后,就进入了事件处理,React使用特殊的合成事件帮助开发者监听与响应事件,将所有的节点上的事件交托单一事件监听器处理以获得更好的性能体验。你可以在这些事件的监听函数中通过外部传入的回调重新设置Props或者直接修改内部State。

    • 对于数据的任何变化都会重复步骤1。

    这种单向数据流与当时以Angular%201%20/%20Knockout为代表的双向数据绑定形成对比,双向数据绑定中如果发现绑定的数据发生变化则会立刻触发重渲染,而无论当前是否处于渲染流程中,这一点也就导致了Reflows与Repaints的性能表现非常差。React并没有预置专门的数据管理系统,不过官方推荐基于Flux的解决方案。React%20的单向数据流的概念借鉴了很多函数式编程的设计思想,并且对于不可变数据结构的应用也在很大程度上改变了我们对前端框架的认识。如果你希望了解更多关于React与Flux架构的知识,推荐阅读%20“The%20Best%20Way%20to%20Learn%20to%20Code%20is%20to%20Code:%20Learn%20App%20Architecture%20by%20Building%20Apps”。

    • create-react-app*:%20官方出品的快速脚手架搭建工具。

    • react-router*:%20方便的React路由解决方案。

    • Next.js*:%20非常简单的通用React应用开发框架。

    • velocity-react*:%20非常不错的React动画辅助库。

    Redux

    Redux%20为应用提供了事务式的,确定性的状态管理支持。在Redux中,我们仅可以通过Action来修改当前的应用状态。如果你希望深入了解为啥这么做,可以参阅%20“10%20Tips%20for%20Better%20Redux%20Architecture.”%20或者跟着%20Dan%20Abramov的官方课程:

    • “Getting%20Started%20with%20Redux”

    • “Building%20React%20Applications%20with%20Idiomatic%20Redux”

    实际上即使你不使用Redux,也很推荐学习Redux的设计思想,它可以给你很多关于状态管理的最佳实践,告诉你纯函数的价值所在,以及告诉你何谓Reducers,何谓General-Purpose函数。在Redux的工程实践中,对于异步Action的处理也是值得讨论的:

    • redux-saga*:%20A%20synchronous-style%20side-effect%20library%20for%20Redux.%20Use%20this%20to%20manage%20I/O%20(such%20as%20handling%20network%20requests).

    Angular%202*

    Angular%202