2017年Node.js使用大调查，后端使用多于前端！
　作者: 田晓旭　编辑:
　　【IT168&评论】之前，就有网友针对“Node.js用在前端还是后端?”的问题进行讨论。近日，Node.js基金会发布了Node.js 2017用户调查，我们用数据说话，看看Node.js到底适用于哪些应用和开发环境?同时也看看全世界的程序员都是怎样用Node.js。　　本次调查于日在线上展开，主要的采访者是母语为英语和汉语、使用Node.js的程序员，并且收到了1405份有效调查，文章中的比例分配采取了四舍五入，所以有可能出现不是100%的情况。　　随着数字化的发展，Node.js已经发展成为了一个通用框架，线上有超过800万的Node.js实例，有四分之一的受访者表示在未来一年内有计划学习Node.js，而且中国已经成为除美国之外的学习Node.js人数最多的国家。　　据调查， 使用和部署Node.js已经成为用户开发的主要方式，且出现了很多与Node.js配套使用的工具和技术，Node.js已经成为程序员工具包中的重要组成部分，几乎程序员的一半开发时间都在使用。不过，Node.js程序员的开发时间却并不长，很多人不足两年。　　我们先来看一下Node.js用户“全家福”：　　企业和程序员是如何使用Node.js?　　从上面两张图中，我们可以看到Node.js被使用到后端情况更多，不过，这个数据只是说明一个大多数的情况，并不能确定到底是用于前端还是后端更好，因为这个有企业的实际需求在内的。　　Node.js是一个极具亲和力的产品　　Node.js可以和众多技术工具一起使用，例如数据库、前端框架、Node.js框架等等。▲过去一年中和Node.js搭配使用的技术和工　　对于不同领域的程序员来说，Node.js也有多种用途相对应：　　Node.js跨领域的开发类型：　　哪些场景会使用Node.js?　　首先，我们来看一看大家都会在哪里部署Node.js，在这里我们分成实际生产环境和开发环境两个部分来看。　　从中我们可以看出无论是实际生产环境还是开发环境，AWS都是云服务的首选，而且令人惊喜的是阿里云也在其中，且与其他云服务差距不大。　　在调查中60%的程序员使用LTS版本，37%的程序员使用Current，3%的程序员选择了。其中企业客户有66%使用LTS，基于后端的程序员中33%使用Current。　　如果要看，那么开发环境中46%的是在使用MacOS，实际生产中42%是使用Ubuntu，而无论是在哪个环境中，Windows的位置都有点尴尬。　　我们能从Node.js中获得什么?　　从整体的情况来说，Node.js帮助68%的程序员提高生产力，帮助65%的程序员增强安全性，58%的程序员节省开发成本，50%的程序员提升应用性能。当然，Node.js经验不同的程序员调查情况也会有所不同：　　Node.js与编程语言　　编程语言是程序员永远聊不完的话题，所以我们也来聊聊参加调查的程序员们都在使用哪些编程语言。该调查不仅调查了程序员在过去一年使用哪些编程语言，而且调查了他们在未来一年打算改学的编程语言。　　Stack Overflow对64000多名程序员进行了调查，并于2017年1月发布了报告，报告中JavaScript占据首位，获得了63%的支持，成为了唯一一个获得过半支持数的编程语言。
IT168企业级2017年值得关注的JavaScript框架a year ago赞赏还没有人赞赏，快来当第一个赞赏的人吧！81收藏分享举报文章被以下专栏收录我的技术世界，Web前端、服务端应用架构、数据挖掘推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&让知识在它该在的地方&,&permission&:&COLUMN_PUBLIC&,&memberId&:7301234,&contributePermission&:&COLUMN_PRIVATE&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&我的技术世界，Web前端、服务端应用架构、数据挖掘&,&urlToken&:&wxyyxc1992&,&id&:24518,&imagePath&:&v2-3cfe2e19.jpg&,&slug&:&wxyyxc1992&,&applyReason&:&0&,&name&:&某熊的全栈之路&,&title&:&某熊的全栈之路&,&url&:&https:\u002F\\u002Fwxyyxc1992&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:6693,&avatar&:{&id&:&v2-3cfe2e19&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-3cfe2e19_l.jpg&,&articlesCount&:134},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-3f4e940b21ad50c2b13589bbc519f2bd_r.jpg&,&lastUpdated&:,&imagePath&:&v2-3f4e940b21ad50c2b13589bbc519f2bd.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,],&summary&:&\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E2017年值得关注的JavaScript框架与主题\u003C\u002Fa\u003E翻译自\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Ftop-javascript-frameworks-topics-to-learn-in-b711%23.7cp7q9q0y\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETop JavaScript Frameworks & Topics to Learn in Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，从属于笔者的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FwxyyxcFWeb-Frontend-Introduction-And-Best-Practices\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWeb 前端入门与最佳实践\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。其他有关于2016年前端开发的总结包括\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F6924\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016 年前端工具使用度调研报告\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F3024\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016年里做前端是怎样一种体验\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F0440\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016前端学习…\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T22:15:30+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:1935760,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&2017年值得关注的JavaScript框架&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-3f4e940b21ad50c2b13589bbc519f2bd_r.jpg&,&author&:{&bio&:&王下邀月熊&,&isFollowing&:false,&hash&:&ed4cd6b92a003a0ce8e801ae74196e19&,&uid&:36,&isOrg&:false,&slug&:&wxyyxc1992&,&isFollowed&:false,&description&:&https:\\u002Fu\u002Fwxyyxc1992\n\nhttps:\\u002Fwxyyxc1992&,&name&:&王下邀月熊&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwxyyxc1992&,&avatar&:{&id&:&v2-a627d79d2ed03fe6f83a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:7301234,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:501319}],&title&:&2017年值得关注的JavaScript框架&,&author&:&wxyyxc1992&,&content&:&\u003Cblockquote\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E2017年值得关注的JavaScript框架与主题\u003C\u002Fa\u003E翻译自\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Ftop-javascript-frameworks-topics-to-learn-in-b711%23.7cp7q9q0y\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETop JavaScript Frameworks & Topics to Learn in Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，从属于笔者的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FwxyyxcFWeb-Frontend-Introduction-And-Best-Practices\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWeb 前端入门与最佳实践\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。其他有关于2016年前端开发的总结包括\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F6924\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016 年前端工具使用度调研报告\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F3024\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016年里做前端是怎样一种体验\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F0440\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016前端学习路线图\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。另外推荐\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fuxdesign.cc\u002Fux-trends-99e3d2%23.dtqo7m96b\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EThe State of UX in Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，作为开发者了解下设计的想法也是必需的。如果想及时了解一周优秀外文资料可以参考\u003Ca href=\&https:\u002F\\u002Fp\u002F?refer=wxyyxc1992\& class=\&internal\&\u003E某熊周刊系列:一周推荐外文技术资料(12.1)\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-dafed9beb64edb_b.jpg\& data-rawwidth=\&1600\& data-rawheight=\&1067\& class=\&origin_image zh-lightbox-thumb\& width=\&1600\& data-original=\&https:\u002F\\u002Fv2-dafed9beb64edb_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1600'%20height='1067'&&\u002Fsvg&\& data-rawwidth=\&1600\& data-rawheight=\&1067\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1600\& data-original=\&https:\u002F\\u002Fv2-dafed9beb64edb_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-dafed9beb64edb_b.jpg\&\u003E\u003Cp\u003EJavaScript的繁荣促生了很多优秀的技术、框架与工具库，这空前的繁荣也给很多人造成了困惑，无所适从。到底何者是值得投入，代表了未来的方向，而何者又是真正适合于当前项目，当前团队的？而本文即时作者基于自身实践的一些思考，与诸君共享。\u003C\u002Fp\u003E\u003Ch1\u003EJavaScript & DOM Fundamentals\u003C\u002Fh1\u003E\u003Cp\u003E工欲善其事，必先知其器。在我们准备了解使用其他JavaScript框架的时候，我们首先需要去了解JavaScript的语法要点与一些工程实践：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E内建方法:\u003C\u002Fstrong\u003E 我们需要了解标准数据类型 (特别是 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Earrays\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E, \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FObject\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eobjects\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E, \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Estrings\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E, 以及 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FNumber\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Enumbers\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E).\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E函数 & \u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fmaster-the-javascript-interview-what-is-a-pure-function-d1c076bec976\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E纯函数\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 或许你觉得自己已经很了解函数了，但是总有些小技巧是你没有接触过的。另外不仅仅是对于基本的函数的用法，我们还要对函数式编程的思想，譬如纯函数高阶函数等有所掌握。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fmaster-the-javascript-interview-what-is-a-closure-b2f0d2152b36\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EClosures\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 在学习闭包的过程中了解JavaScript传统的函数作用域。\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003ECallbacks:\u003C\u002Fstrong\u003E 回调是JavaScript异步编程的基本概念，某个回调函数会在某个异步操作结束后被调用，就好比领导对你说：好好干你的工作，做好了跟我汇报下。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fweb\u002Ffundamentals\u002Fgetting-started\u002Fprimers\u002Fpromises\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPromises\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E: \u003C\u002Fstrong\u003EPromise是处理将来值的方法之一，当某个函数返回的是Promise对象时，你可以调用该对象的then函数来获取异步传入的值。而调用者是通过传入的resolve回调来传值，譬如doSomething().then(value =& console.log(value));\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fmzabriskie\u002Faxios\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAjax & 服务端API调用\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 绝大部分有趣的应用都需要与服务端通过网络进行交互，你应该了解基本的HTTP Client知识。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fhow-to-learn-es6-47d9a1ac2620\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EES6\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E: \u003C\u002Fstrong\u003E最新的JavaScript版本为ES7，或者叫ES2016，不过很多人ES6还没用熟练，正在过渡期吧。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FClasses\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EClasses\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E (note: \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fthe-two-pillars-of-javascript-ee6f\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E避免类继承\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E. 参考 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F%40dan_abramov\u002Fhow-to-use-classes-and-sleep-at-night-9af8de78ccb4\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EHow to Use Classes and Sleep at Night\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.)\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fpremium-content\u002Fwebcast-the-two-pillars-of-js-introduction-to-functional-programming\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E函数式编程基础\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E: \u003C\u002Fstrong\u003E函数式编程基于数据函数的组合来构建业务逻辑，避免了共享状态与可变数据，这一点会避免很多的问题。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002F7-surprising-things-i-learned-writing-a-fibonacci-generator-10\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EGenerators\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E** & \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fthe-hidden-power-of-es6-generators-observable-async-flow-control-cfa4c7f31435\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Easync\u002Fawait\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E:** 个人观点，最好的异步代码的写法就是用写同步代码的方式去写异步代码。不可否认这些都存在学习曲线，不过磨刀不误砍柴工。\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EPerformance: \u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fweb\u002Ffundamentals\u002Fperformance\u002Frail\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ERAIL\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E** — **参考 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fspeed\u002Fpagespeed\u002Finsights\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“PageSpeed Insights”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E & \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fwww.webpagetest.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“WebPageTest.org”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EProgressive Web Applications (PWAs):\u003C\u002Fstrong\u003E 参考 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fnative-apps-are-doomed-acc0\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“Native Apps are Doomed”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E& \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fwhy-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“Why Native Apps Really Are Doomed”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fintroduction-to-node-express-90c431f9e6fd%23.gl2r6gcnn\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENode & Express\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E: \u003C\u002Fstrong\u003ENode允许你在服务端运行JavaScript程序，而Express则是目前最为流行的基于NodeJS的Web框架。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ELodash\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 一个非常好用的、模块清晰的JavaScript辅助工具，其也遵循了很多函数式编程的理念，你可以通过 lodash\u002Ffp导入。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch1\u003ETooling\u003C\u002Fh1\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fdevtools\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EChrome Dev Tools\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fdevtools%23dom-and-styles\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDOM inspect\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E & \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fdevtools%23debugging-javascript\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EJS debugger\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E: Chrome Dev Tools算是最为优秀的调试工具了，Firefox也有很多不错的扩展。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Enpm\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 官方开源的JavaScript包管理工具。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ftry.github.io\u002Flevels\u002F1\u002Fchallenges\u002F1\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egit\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E** & \u003Cstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EBuild software better, together\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EGitHub\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E:** 分布式版本管理系统，很适合团队协作。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fbabeljs.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EBabel\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 能够将ES6代码编译到ES5使之能够兼容老版本浏览器。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fwebpack.github.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWebpack\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E:\u003C\u002Fstrong\u003E 最著名的模块打包工具之一，有不少优秀的模板配置奥，譬如\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FwxyyxcFWebpack2-React-Redux-Boilerplate\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWebpack2-React-Redux-Boilerplate\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fatom.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAtom\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E, \u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fd%3Futm_expid%3D.Eg8306GUR6SersZwpBjURQ.3%26utm_referrer%3Dhttps%253A%252F%%252F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVSCode\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E, or \u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fwebstorm\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWebStorm\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E** + \u003Cstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVim Cheat Sheet - English\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fstrong\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Evim\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E:** 你需要为自己选择合适的编辑器来辅助你快速开发。Atom与VSCode都是非常优秀的JavaScript编辑器，WebStorm也不错但是它是收费版本。如果你打算直接在服务端开发的话，Vim是个不错的选择。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Feslint.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EESLint:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E ESLint能够帮助开发者更快地发现语法错误与样式问题，在Code Review与TDD之后这是个不错的减少Bug的方法。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fternjs.net\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETern.js:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 基于编辑器插件的标准JavaScript类型推导工具，不需要任何编译步骤或者注解支持。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EYarn\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E*:\u003C\u002Fstrong\u003E 类似于NPM的工具，不过安装起来更为可靠快速。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fwww.typescriptlang.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETypeScript*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E JavaScript的静态类型支持，不过需要特别注意的是，除非你在学习Angular 2，不然我觉得你如果要选用Angular 2的话还是要慎重考虑。我个人很喜欢TypeScript，也很钦佩他们团队的优秀工作，不过任然有很多的权衡，可以参阅 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fthe-shocking-secret-about-static-types-514d39bf30a3\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“The Shocking Secret About Static Types”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E & \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fyou-might-not-need-typescript-or-static-types-aa7cb670a77b\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“You Might Not Need TypeScript”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fflowtype.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EFlow*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E JavaScript静态类型检测工具，可以阅读 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fdjcordhose.github.io\u002Fflow-vs-typescript\u002Fflow-typescript-2.html%23\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“TypeScript vs Flow”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 来对于这二者有个大概的了解，如果你打算Flow的话也是推荐我的编辑器\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fnuclide.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENuclide\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch1\u003EReact\u003C\u002Fh1\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ffacebook.github.io\u002Freact\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 是个专注于构建用户视图层的JavaScript库，其基于单向数据流的设计思想，也就意味着：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EReact 以Props的形式将参数传入Components，并且在数据发生变化的时候选择性重渲染部分DOM。在重渲染阶段发生的数据变化并不会立刻触发重渲染，而是在下一个绘制阶段的时候才会进行重渲染。\u003C\u002Fli\u003E\u003Cli\u003E渲染完毕之后，就进入了事件处理，React使用特殊的合成事件帮助开发者监听与响应事件，将所有的节点上的事件交托单一事件监听器处理以获得更好的性能体验。你可以在这些事件的监听函数中通过外部传入的回调重新设置Props或者直接修改内部State。\u003C\u002Fli\u003E\u003Cli\u003E对于数据的任何变化都会重复步骤1。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E这种单向数据流与当时以Angular 1 \u002F Knockout为代表的双向数据绑定形成对比，双向数据绑定中如果发现绑定的数据发生变化则会立刻触发重渲染，而无论当前是否处于渲染流程中，这一点也就导致了Reflows与Repaints的性能表现非常差。React并没有预置专门的数据管理系统，不过官方推荐基于Flux的解决方案。React 的单向数据流的概念借鉴了很多函数式编程的设计思想，并且对于不可变数据结构的应用也在很大程度上改变了我们对前端框架的认识。如果你希望了解更多关于React与Flux架构的知识，推荐阅读 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fthe-best-way-to-learn-to-code-is-to-code-learn-app-architecture-by-building-apps-7ec029db6e00\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Ffacebookincubator\u002Fcreate-react-app\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ecreate-react-app*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 官方出品的快速脚手架搭建工具。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FReactTraining\u002Freact-router\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ereact-router*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 方便的React路由解决方案。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fzeit.co\u002Fblog\u002Fnext\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENext.js*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 非常简单的通用React应用开发框架。\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Ftwitter-fabric\u002Fvelocity-react\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Evelocity-react*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 非常不错的React动画辅助库。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch1\u003ERedux\u003C\u002Fh1\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Freactjs\u002Fredux\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ERedux\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 为应用提供了事务式的，确定性的状态管理支持。在Redux中，我们仅可以通过Action来修改当前的应用状态。如果你希望深入了解为啥这么做，可以参阅 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002F10-tips-for-better-redux-architecture-\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“10 Tips for Better Redux Architecture.”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 或者跟着 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fu\u002Fa3a8af6addc1\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDan Abramov\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的官方课程:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fegghead.io\u002Fcourses\u002Fgetting-started-with-redux\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“Getting Started with Redux”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fegghead.io\u002Fcourses\u002Fbuilding-react-applications-with-idiomatic-redux\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E“Building React Applications with Idiomatic Redux”\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E实际上即使你不使用Redux，也很推荐学习Redux的设计思想，它可以给你很多关于状态管理的最佳实践，告诉你纯函数的价值所在，以及告诉你何谓Reducers，何谓General-Purpose函数。在Redux的工程实践中，对于异步Action的处理也是值得讨论的：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fyelouafi\u002Fredux-saga\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eredux-saga*:\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E A synchronous-style side-effect library for Redux. Use this to manage I\u002FO (such as handling network requests).\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch1\u003EAngular 2*\u003C\u002Fh1\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fangular.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAngular 2\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 脱胎于风靡一时的Angular 1，鉴于当年疯狂的流行度，学会这个会是你简历上浓墨重彩的一笔，不过我还是推荐先学习React。我个人也认为React是优于Angular 2的,\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Fangular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact over Angular 2\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E because:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E它更简单\u003C\u002Fli\u003E\u003Cli\u003E社区很强大\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Ch1\u003ERxJS\u003C\u002Fh1\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FReactive-Extensions\u002FRxJS\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ERxJS\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 是JavaScript中一系列响应式编程工具的集合，就好比流处理领域的Lodash，它把响应式编程带入到了JavaScript的领域。ECMAScript Observables是stage-1阶段的草稿，RxJS 5+则是当前的标准实现。虽然我个人非常喜欢RxJS，但是如果你想在工程中使用RxJS的话还是需要考虑下，因为其内置了很多的Operators，其会增加你的包体尺寸。不过我们可以通过仅引入部分所需要的库来解决这个问题，最后大概只会使得包体增加200KB左右吧。\u003C\u002Fp\u003E\u003Ch1\u003E为什么没有提到其他框架？\u003C\u002Fh1\u003E\u003Cp\u003E有不少人问我为啥没有把他们喜欢的框架也列举进来，对于我而言我会先考虑：这个在真实的工作中会所有帮助吗？当然，这一点见仁见智，我也是打算从一些所谓的人气投票中一窥变化。首先，我会去Google Trends中查看各个框架关联关键词的被搜索情况: \u003Cbr\u003E\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e4c8395feed9b3d7a599cd_b.png\& data-rawwidth=\&1376\& data-rawheight=\&392\& class=\&origin_image zh-lightbox-thumb\& width=\&1376\& data-original=\&https:\u002F\\u002Fv2-e4c8395feed9b3d7a599cd_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1376'%20height='392'&&\u002Fsvg&\& data-rawwidth=\&1376\& data-rawheight=\&392\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1376\& data-original=\&https:\u002F\\u002Fv2-e4c8395feed9b3d7a599cd_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-e4c8395feed9b3d7a599cd_b.png\&\u003E\u003Cp\u003E另一个很有帮助的网站就是\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，会聚合不同站点上对于不同职位的开发者的需求信息，可以看出目前招聘上对于前端开发者技能需求的情况为: \u003Cbr\u003E\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-66bbfbb66aff21e160437c_b.png\& data-rawwidth=\&605\& data-rawheight=\&352\& class=\&origin_image zh-lightbox-thumb\& width=\&605\& data-original=\&https:\u002F\\u002Fv2-66bbfbb66aff21e160437c_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='605'%20height='352'&&\u002Fsvg&\& data-rawwidth=\&605\& data-rawheight=\&352\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&605\& data-original=\&https:\u002F\\u002Fv2-66bbfbb66aff21e160437c_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-66bbfbb66aff21e160437c_b.png\&\u003E\u003Cp\u003E在上图中，Angular（Angular 1+Angular 2）还是高于React的，不过我个人还是会推荐React，有如下几个原因吧：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F%40sachagreif\u002Fthe-state-of-javascript-front-end-frameworks-1a2d8a61510\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EMore people are interested in learning React than Angular\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F%40sachagreif\u002Fthe-state-of-javascript-front-end-frameworks-1a2d8a61510\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact significantly leads Angular in user satisfaction\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cp\u003E延伸阅读：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&https:\u002F\\u002Fwxyyxc1992\& class=\&internal\&\u003E知乎专栏：某熊的全栈之路\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&https:\u002F\\u002Fc_\& class=\&internal\&\u003E知乎专栏：前端当自强\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&https:\u002F\\u002Flotuc\& class=\&internal\&\u003Elotuc\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F?refer=wxyyxc1992\& class=\&internal\&\u003E2016-我的技术之路:编程知识体系结构\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F?refer=wxyyxc1992\& class=\&internal\&\u003E2016-我的前端之路:工具化与工程化\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E&,&updated&:new Date(&T14:15:30.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:25,&collapsedCount&:0,&likeCount&:81,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-3f4e940b21ad50c2b13589bbc519f2bd_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&React&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&}],&adminClosedComment&:false,&titleImageSize&:{&width&:600,&height&:400},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&activated&,&tipjarTagLine&:&大爷赏点呗~&,&sourceUrl&:&&,&pageCommentsCount&:25,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T22:15:30+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&&,&isFollowing&:false,&hash&:&0a3f5f7da7b3af3924d37a&,&uid&:254700,&isOrg&:false,&slug&:&sera-wu&,&isFollowed&:false,&description&:&&,&name&:&Morley&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fsera-wu&,&avatar&:{&id&:&v2-6c03ad515dad3b06a79f8a2744f40bef&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&47dbf8e9e31c4bcccd4f4c9cd8cc46b3&,&uid&:615000,&isOrg&:false,&slug&:&snowballer&,&isFollowed&:false,&description&:&&,&name&:&snowball&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fsnowballer&,&avatar&:{&id&:&v2-a4f119bee8c29cbe0c91d72ebc3f0d37&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一句话不能描述。&,&isFollowing&:false,&hash&:&9d89b1b67de3a6cdcaec52&,&uid&:76,&isOrg&:false,&slug&:&canada&,&isFollowed&:false,&description&:&我&,&name&:&yu ding&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fcanada&,&avatar&:{&id&:&c667a018dd14bbb2273fbc73b8028f51&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&b66e95bef23&,&uid&:04,&isOrg&:false,&slug&:&he-kai-58&,&isFollowed&:false,&description&:&&,&name&:&何凯&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fhe-kai-58&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&木叶飞舞之处 必会燃起火的意志&,&isFollowing&:false,&hash&:&7c1bd02a1ede7a7cf3f313&,&uid&:761660,&isOrg&:false,&slug&:&zhan-zhang-91-40&,&isFollowed&:false,&description&:&&,&name&:&Sunshine米线&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fzhan-zhang-91-40&,&avatar&:{&id&:&29bfe4fb&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002Fv2-dafed9beb64edb_200x112.jpg\& data-rawwidth=\&1600\& data-rawheight=\&1067\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002Fv2-dafed9beb64edb_r.jpg\&\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E2017年值得关注的JavaScript框架与主题\u003C\u002Fa\u003E翻译自\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fjavascript-scene\u002Ftop-javascript-frameworks-topics-to-learn-in-b711%23.7cp7q9q0y\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETop JavaScript Frameworks & Topics to Learn in Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，从属于笔者的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FwxyyxcFWeb-Frontend-Introduction-And-Best-Practices\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWeb 前端入门与最佳实践\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。其他有关于2016年前端开发的总结包括\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F6924\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016 年前端工具使用度调研报告\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F3024\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016年里做前端是怎样一种体验\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E、\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F0440\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E2016前端学习…\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:25,&likesCount&:81,&FULLINFO&:true}},&User&:{&wxyyxc1992&:{&isFollowed&:false,&name&:&王下邀月熊&,&headline&:&https:\\u002Fu\u002Fwxyyxc1992\n\nhttps:\\u002Fwxyyxc1992&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-a627d79d2ed03fe6f83a_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&wxyyxc1992&,&bio&:&王下邀月熊&,&hash&:&ed4cd6b92a003a0ce8e801ae74196e19&,&uid&:36,&isOrg&:false,&description&:&https:\\u002Fu\u002Fwxyyxc1992\n\nhttps:\\u002Fwxyyxc1992&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwxyyxc1992&,&avatar&:{&id&:&v2-a627d79d2ed03fe6f83a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&getui&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&searchHybridTabs&:&without-tabs&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&default&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}