2017年，你需要学习的JavaScript框架和主题
yr4560
8年前
<p><img src="https://simg.open-open.com/show/dafed9beb64ed8125d63f73b377501b1.jpg"></p> <p>随着JavaScript的普及，应运而生了一个非常活跃的集技术，框架和库为一体的生态圈。由于这个充满多样性的和活力的生态圈，因此大家非常困惑。应该学习哪种技术？</p> <p>你应该投资哪一种技术才能获得最大的收益？公司现在最需要招的人最需要哪一种技术堆栈？哪一个发展空间最大？</p> <p>现在最需要了解的是哪个技术？这篇文章高度概括了你所需要了解的内容，同时附上了链接，你可以自行了解。</p> <p>记住，当你正在实验一些新的代码，你可以在 <a href="/misc/goto?guid=4958539547061522984" rel="nofollow,noindex">Codepen.io</a> 上玩玩，如果你在学习ES6，那么你可以看看如何使用 <a href="/misc/goto?guid=4959627182050544791" rel="nofollow,noindex">Babel REPL</a> 编译。</p> <p>这个学习的列表很长，但是你不用感到灰心。你可以做到的！如果你在研究这列表，担忧该如何学习这一切，如何创建现代APP，移步阅读 <a href="/misc/goto?guid=4959734885788310517" rel="nofollow,noindex">“为什么我该感谢JavaScript疲劳”</a> 。然后开始认真学习，动起来。</p> <p>选择性学习的一个注意事项</p> <p>有些内容是 <strong>完全可选的</strong> ，也就是说，如果你对我推荐东西此感兴趣，或者工作需要，但是你不能感觉是被迫学的。每一个打了星号(*)的（比如 <strong>example*</strong> ）就是可选的。</p> <p>没有打*的，都是必须学的，但是并不是所有的都是一定要学透的，你需要熟悉每一样内容。你需要了解可选的内容，但是你完全没有必要精通所有的。</p> <h3>JavaScript & DOM 基础</h3> <p>在你找到JavaScript的工作之前，你需要掌握JavaScript的基础：</p> <ul> <li> <p>固定方法:标准数据类型的学习方法（特别是 <a href="/misc/goto?guid=4958865410363408717" rel="nofollow,noindex">数组</a> ， <a href="/misc/goto?guid=4958876160267422098" rel="nofollow,noindex">对象</a> ， <a href="/misc/goto?guid=4959674389988273827" rel="nofollow,noindex">字符串</a> ， 和 <a href="/misc/goto?guid=4959734885979492734" rel="nofollow,noindex">数字</a> ）。</p> </li> <li> <p>函数 & <a href="/misc/goto?guid=4959729721849033066" rel="nofollow,noindex"> <strong>纯函数</strong> </a> <strong>:</strong> 可能你觉得已经很好地掌握了函数，但是JavaScript经常事与愿违，你需要学会纯函数以掌握函数编程。</p> </li> <li> <p><a href="/misc/goto?guid=4959729721941278352" rel="nofollow,noindex"><strong>闭包</strong> </a> <strong>:</strong> 学习JavaScript函数作用域是如何运行的.</p> </li> <li> <p>回调： 回调是当另一个函数运行结束的时候，发出信号调用函数。可以这么说，“做你自己的事，做完了再叫我”。</p> </li> <li> <p><a href="/misc/goto?guid=4959729722021326133" rel="nofollow,noindex"><strong>Promises</strong> </a> <strong>:</strong> promise是处理终值的方法。当一个函数返回一个promise，你可以用 .then() 方法添加回调，在promise完成之后运行。终值会传入你的回调函数中。比如 doSomething().then(value => console.log(value)); 。</p> </li> </ul> <p><img src="https://simg.open-open.com/show/086a66a24d437e05f8b750db4f78bb37.jpg"></p> <ul> <li> <p><a href="/misc/goto?guid=4959007486484251452" rel="nofollow,noindex"><strong>Ajax & 服务器API调用</strong> </a> <strong>:</strong> 大多数有趣的应用最终都是联网的。你需要知道如何与API交互。</p> </li> <li> <p><a href="/misc/goto?guid=4959729722203690244" rel="nofollow,noindex"><strong>ES6</strong> </a> <strong>:</strong> 最新版本的JavaScript版本是ES2016 (或者是ES7)，但是大多数开发者依然没有掌握ES6。然而这已经是过去时了。</p> </li> <li> <p><a href="/misc/goto?guid=4958972612389441616" rel="nofollow,noindex"><strong>类</strong> </a> (注意： <a href="/misc/goto?guid=4959652741009243293" rel="nofollow,noindex"> <strong>避免类的继承</strong> </a> 。 请看 <a href="/misc/goto?guid=4959729722398405172" rel="nofollow,noindex">类的正确打开方式，然后晚上安心入眠</a> 。)</p> </li> <li> <p><a href="/misc/goto?guid=4959729722515270250" rel="nofollow,noindex"><strong>函数编程基础</strong> </a> <strong>:</strong> 函数编程通过编译数学函数创建程序，避免分享状态和可变数据。我已经好几年没有看到一个大量使用函数编程的JavaScript应用作品。现在是时候掌握这个方法了。</p> </li> <li> <p><a href="/misc/goto?guid=4959729722611315465" rel="nofollow,noindex"><strong>生成器</strong> </a> <strong>和</strong> <a href="/misc/goto?guid=4959729722714961931" rel="nofollow,noindex"> <strong>异步/等待</strong> </a> <strong>:</strong> 在我看来，写异步代码最好的方法是看上去是同步的。这里有一个学习曲线，但是一旦你学会了，那么代码的阅读会变得简单。</p> </li> <li> <p>性能: <a href="/misc/goto?guid=4959729722818575587" rel="nofollow,noindex"> <strong>RAIL</strong> </a> <strong>——</strong> 从 <a href="/misc/goto?guid=4958854485248259878" rel="nofollow,noindex">“网页响应速度观察”</a> 和 <a href="/misc/goto?guid=4959729722969861872" rel="nofollow,noindex">“WebPageTest.org”</a> 开始。</p> </li> <li> <p>渐进式Web应用程序 (PWAs)：请看 <a href="/misc/goto?guid=4959729723072280484" rel="nofollow,noindex">“原生应用是必然的”</a> 和 <a href="/misc/goto?guid=4959729723170590957" rel="nofollow,noindex">“为什么原生应用是必然的”</a> 。</p> </li> <li> <p><a href="/misc/goto?guid=4959729723286882828" rel="nofollow,noindex"><strong>Node & Express</strong> </a> <strong>:</strong> Node让你在服务器上使用JavaScript，意味着你的用户能够在云中存储数据然后在任何地方都可以使用它。Express是Node具有压倒性优势的欢迎程度的框架。</p> </li> <li> <p><a href="/misc/goto?guid=4958871496205746239" rel="nofollow,noindex"><strong>Lodash</strong> </a> <strong>:</strong> 一个极佳的用于JavaScript的，由函数编程模块化功能打包而成的模块化功能包。从 lodash/fp 从引入data-last函数模块。</p> </li> </ul> <h3>工具</h3> <ul> <li> <p><a href="/misc/goto?guid=4959637675583151052" rel="nofollow,noindex"><strong>Chrome Dev Tools</strong> </a> <strong>:</strong> <a href="/misc/goto?guid=4959729723477965398" rel="nofollow,noindex">DOM inspect</a> 和 <a href="/misc/goto?guid=4959729723595603168" rel="nofollow,noindex">JS debugger</a> ： 最好用的调试器，尽管在我看来, Firefox也有一些你会非常想尝试而且很酷的工具。</p> </li> <li> <p><a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex"><strong>npm</strong> </a> <strong>:</strong> JavaScript的标准语言开源包存储库。</p> </li> <li> <p><a href="/misc/goto?guid=4959623112065163570" rel="nofollow,noindex"><strong>git</strong> </a> <strong>和</strong> <a href="/misc/goto?guid=4958183584851817768" rel="nofollow,noindex"> <strong>GitHub</strong> </a> <strong>:</strong> 分布式版本管理——与你的源代码的每次改变保持一致。</p> </li> <li> <p><a href="/misc/goto?guid=4958877845976897237" rel="nofollow,noindex"><strong>Babel</strong> </a> <strong>:</strong> 用于编译ES6，使之可以兼容过时版本浏览器。</p> </li> <li> <p><a href="/misc/goto?guid=4958977348404680831" rel="nofollow,noindex"><strong>Webpack</strong> </a> <strong>:</strong> 最受欢迎的用于标准JavaScript的打包工具，通过简单的启动工具包/样例配置案例，让东西快速运行。</p> </li> <li> <p><a href="/misc/goto?guid=4958832861167207492" rel="nofollow,noindex"><strong>Atom</strong> </a> <strong>,</strong> <a href="https://code.visualstudio.com/d?utm_expid=101350005-35.Eg8306GUR6SersZwpBjURQ.3&utm_referrer=https%3A%2F%2Fwww.google.com%2F" rel="nofollow,noindex"> <strong>VSCode</strong> </a> <strong>, 或者</strong> <a href="/misc/goto?guid=4958865832660050715" rel="nofollow,noindex"> <strong>WebStorm</strong> </a> <strong>+</strong> <a href="/misc/goto?guid=4959729724257233531" rel="nofollow,noindex"> <strong>vim</strong> </a> <strong>:</strong> 你需要一个编辑器。 Atom和VSCode是现在最受欢迎的 JS编辑器。Webstorm是另一个解决方案，稳健维护的优质工具。 我推荐学习vim, 或者至少记录cheat sheet，你迟早会用到, 因为会需要在服务器上编辑文件的, 并且这是最方便的方法——vim在每个Unix兼容的操作系统都有安装，并且在SSH终端链接上运行得很好。</p> </li> <li> <p><a href="/misc/goto?guid=4958870940891400873" rel="nofollow,noindex"><strong>ESLint:</strong> </a> 尽早捕获语法错误和样式问题。 代码审查和TDD之后, 第三件你能做的事就是在代码中减少bug。</p> </li> <li> <p><a href="/misc/goto?guid=4959729724426909941" rel="nofollow,noindex"><strong>Tern.js:</strong> </a> 标准 JavaScript的类型诊断工具, 并且是我最近最爱用于JavaScript的类型相关工具——没有编译步骤 或者注释。我尝试了所有的此类工具， 发现Tern.js大部分的优点都提供，并且给JS使用静态类型系统，几乎没有成本。</p> </li> <li> <p><a href="/misc/goto?guid=4958999003582682021" rel="nofollow,noindex"><strong>Yarn</strong> </a> <strong>*:</strong> 和npm类似, 但是他的安装行为是决定论的, 并且Yarn以比npm快为目标。</p> </li> <li> <p><a href="/misc/goto?guid=4958989889583944253" rel="nofollow,noindex"><strong>TypeScript*:</strong> </a> JavaScript的静态类型。除非你在学习Angular2，不然这 <em>完全可选</em> 。 如果你没有在用Angular 2， 在选择TypeScript之前需要仔细评估一下。我很喜欢它的，并且我敬佩TypeScript团队的出色工作, 但是你还是需要了解一些权衡。 <strong>必读:</strong> <a href="/misc/goto?guid=4959729724633383708" rel="nofollow,noindex">“静态类型，令人震惊的秘密”</a> 以及 <a href="/misc/goto?guid=4959729724752612579" rel="nofollow,noindex">“你可能不需要TypeScript”</a> .</p> </li> <li> <p><a href="/misc/goto?guid=4959714402765517148" rel="nofollow,noindex"><strong>Flow*:</strong> </a> JavaScript静态类型检查器。 查看 <a href="/misc/goto?guid=4959729724915263588" rel="nofollow,noindex">“TypeScript vs Flow”</a> ，以获得深刻的理解和客观的对比。记住，我有一些困难需要Flow给我好的IDE反馈，即使使用 <a href="/misc/goto?guid=4959729725042942288" rel="nofollow,noindex">Nuclide</a> 。</p> </li> </ul> <h3>React</h3> <p><a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex"><strong>React</strong> </a> 是一个由非死book创建的用于构建用户接口的JavaScript库。 这是一个基于单向数据流的概念，意味着对于每次周期更新：</p> <ol> <li> <p>React将输入变成组件作为props，然后如果特定的Dom部分的数据发生了改变，那么就会只重新渲染满足条件的部分。在这个阶段更新的数据，直到下一次渲染阶段都不能重新触发渲染。</p> </li> <li> <p>事件处理阶段 — DOM渲染之后，React监听事件, 将事件委托到DOM树的根节点上的一个单独监听器 （为了更好的性能）。 你可以监听这些事件并响应更新数据。</p> </li> <li> <p>数据的任何改变,步骤重新从第一步开始。</p> </li> </ol> <p>这和双向绑定形成了对比，双向绑定是DOM的改变会改变数据（比如，Angular 1 和Knockout）。使用双向绑定，当DOM渲染的时候（在Angular 1中称之为digest cycle），DOM的改变可能会在渲染完成前重新触发渲染阶段，导致重新载入DOM和重绘——降低了性能。</p> <p>React没有规定一个数据管理系统, 但是Flux-based方法是推荐的。 React的单向数据流方法，借鉴了函数编程和不可变的数据结构，改变了我们眼中的前端框架架构。</p> <p>想了解更多关于React和Flux架构, 请阅读 <a href="/misc/goto?guid=4959729725207039411" rel="nofollow,noindex">“学习编程最好的方法就是开始编程: 从创建App中学习App架构”</a> .</p> <ul> <li> <p><a href="/misc/goto?guid=4958996917562467082" rel="nofollow,noindex"><strong>create-react-app*:</strong> </a> 最快了解React的方法。</p> </li> <li> <p><a href="/misc/goto?guid=4959729725361071324" rel="nofollow,noindex"><strong>react-router*:</strong> </a> React的超级简单的路由（rotuer）。</p> </li> <li> <p><a href="/misc/goto?guid=4958999007763604188" rel="nofollow,noindex"><strong>Next.js*:</strong> </a> 超简单的全局渲染，和 用于Node和React的路由.</p> </li> <li> <p><a href="/misc/goto?guid=4959652752832580129" rel="nofollow,noindex"><strong>velocity-react*:</strong> </a> React动画——你可以使用VMD bookmarklet在您的页面上做交互视觉动态设计。</p> </li> </ul> <h3>Redux</h3> <p><a href="/misc/goto?guid=4959672803167376147" rel="nofollow,noindex"><strong>Redux</strong> </a> 给你的APP提供了事务处理的（transactional）, 确定性（deterministic）状态管理。在Redux中，我们通过迭代大量的操作对象，以减少当前应用程序状态。想知道为什么这个很重要, 更多请看 <a href="/misc/goto?guid=4959729725607925240" rel="nofollow,noindex">“给更好的Redux架构的10个建议.”</a> 。想要开始使用Redux, 学习Redux的创建者 <a href="/misc/goto?guid=4959729725720706193" rel="nofollow,noindex">Dan Abramov</a> 的极佳教程:</p> <ul> <li> <p><a href="/misc/goto?guid=4959007488744343835" rel="nofollow,noindex"><strong>“开始使用Redux”</strong> </a></p> </li> <li> <p><a href="/misc/goto?guid=4959716569182169503" rel="nofollow,noindex"><strong>“用地道的Redux创建React应用吧！”</strong> </a></p> </li> </ul> <p>Redux对于生产项目是强制学习的，即使你从未用过Redux。</p> <p>为什么？因为它给了你大量的练习，教会你 <strong>纯函数</strong> 的价值，以及教会你新的思考 <strong>reducers</strong> 的方式, 这是迭代数据集和从中获取数据的 <strong>通用的函数</strong> 。 reducers 如此实用，以至于 Array.prototype.reduce 都被加入了JS规范。</p> <p>Reducer不仅仅对于组数（array）是重要的，并且学习用Reducer的新方式处理问题，本身就十分有价值。</p> <ul> <li><a href="/misc/goto?guid=4959729725915493563" rel="nofollow,noindex"><strong>redux-saga*:</strong> </a> Redux的处理同步方式副作用的库。使用这个去处理I/O（比如处理网络请求）。</li> </ul> <h3>Angular 2*</h3> <p><a href="/misc/goto?guid=4958866372165218034" rel="nofollow,noindex"><strong>Angular 2</strong> </a> 是继来自谷歌的广受欢迎的Angular之后的框架。因为这太受欢迎了， 这会让你的简历看上去十分高大上——不过我建议还是先学React。</p> <p><a href="/misc/goto?guid=4959729726065001355" rel="nofollow,noindex">与Angular 2相比，我更爱React</a> ，因为:</p> <ol> <li> <p>这个更简单, 以及……</p> </li> <li> <p>这十分受欢迎，并且有许多相关职位 (当然 Angular 2也是的)</p> </li> </ol> <p>因为这个原因，我推荐学习React, 但是我认为 Angular 2 <strong>完全是可选的*</strong> 。 如果你非常喜欢Angular 2， 那么就换过来. 先学Angular 2，将React列为可选。 每一个对你的简历来说都是受益匪浅的。</p> <p>无论你选哪一个，试着集中精力学习至少半年到一年，之后再去学习另一个。这需要时间，你才能真正熟练掌握。</p> <h3>RxJS*</h3> <p><a href="/misc/goto?guid=4958978078564672477" rel="nofollow,noindex"><strong>RxJS</strong> </a> 是JavaScript的一些响应式编程工具。可以当作Lodash中的流。响应式编程已经正式登陆JavaScript的舞台。ECMAScript的Observables提案是阶段一的初稿, 而RxJS 5+是Observables权威标准的实现。</p> <p>尽管我非常爱RxJS, 但是如果你一次性加载所有的包 <strong>你的包会膨胀地很厉害</strong> （这里有许多操作）。为了控制包的大小, 不要加载所有的内容。请使用补丁加载：</p> <p><img src="https://simg.open-open.com/show/8b10db30d7acea9a15e0e9bbbaa48012.jpg" alt="2017年，你需要学习的JavaScript框架和主题" width="40" height="40"></p> <p>使用补丁加载能够将你的包对于rxjs依赖减少大约200k。这真的非常划算。这会让你的app变得 <strong>更快</strong> 。</p> <h3>EDIT: 为什么你不列出 ?</h3> <p>许多人问我，为何不列出他们喜欢的框架。我评判框架的其中一个标准就是“这真的会在工作上用到？”。</p> <p>是的，有一个框架的人气投票。但是当你决定耗费时间专注学习一个框架，这是否会脱颖而出是个非常重要的考虑因素。</p> <p>为了回答这个问题，我看了一些关键指标。首先，谷歌趋势（Google Trends）。如果你想要重现这个谷歌趋势图表，记得要选择主题（topic)，而不是关键字（keyword），因为这些词会过滤掉许多错误信息。换句话说，这些是主题趋势， <strong>而不是关键字搜索</strong> 。 <img src="https://simg.open-open.com/show/e4c8395feed9b9687f9a7863d7a599cd.png"></p> <p>谷歌趋势上的JS主题</p> <p>这个告诉我们在不同项目中的相对兴趣。如果人们搜索他们，那么很有可能在探索他们的选择，或者查找帮助或文档。这是相对使用水平的一个非常不错的指标。</p> <p>另一个数据的有效来源是Indeed.com，这个集合了来自大量不同渠道的职位表数据。职位投递热点最近急速下降，但是他们依然收集足够的数据，来做有效的相对对比，从而告诉你在生产项目中人们真正使用的框架。从职位中：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/66bb9765ed8729fbb66aff21e160437c.png"></p> <p>想要重现这些发现，搜索javascript，然后工作地点保持空白。你就可以清晰看到：</p> <p>Angular和React占领绝对优势：没有可以与之相提并论的。（除了 在网站中具有巨大份额的jQuery——不包括app——因为它用于所有的遗留系统，包括受欢迎的CMS系统，比如WordPress）。</p> <p>在这些列表中，与React相比，Angular具有绝对优势。那么为什么我推荐先学React？ 因为：</p> <ol> <li> <p><a href="/misc/goto?guid=4959729726223265765" rel="nofollow,noindex">越来越多的人开始学React，而不是Angular。</a></p> </li> <li> <p><a href="/misc/goto?guid=4959729726223265765" rel="nofollow,noindex">在用户体验上，React领先Angular。</a></p> </li> </ol> <p>换句话说， <strong>React赢得了思维占有率和用户满意度的竞争，</strong> 并且如果按照过去几年的趋势，只需要按照一半的程度继续下去，React完全有可能超越Angular作为主要的前端框架。</p> <p>Angular 2也有可能扭转战局,，因此Angular也有可能东山再起，但是到目前为止， React确实打了一场漂亮的仗.</p> <p>观察中的框架</p> <ul> <li> <p><a href="/misc/goto?guid=4959734887704549186" rel="nofollow,noindex"><strong>Vue.js</strong> </a> <strong>*</strong> 拥有大量的GitHub的星星和下载量。如果这样持续下去，它在2017年会表现地非常好，但是我不认为它在未来的一年内会挤走React或者Angular(这两者都成长地非常快)。你学好了React或者Angular <strong>之后</strong> 再学这个吧。</p> </li> <li> <p><a href="/misc/goto?guid=4958991392500314719" rel="nofollow,noindex"><strong>MobX</strong> </a> <strong>*</strong> 是一个很赞的数据管理库，它已经是Redux的一个非常受欢迎的替代品。这也成长地很快， 我预期它会在2017年有所表现。我喜欢给所有的app使用Redux，但是在有些特定的情况下，Mobx是个更好的选择。比如，如果在你的页面上有成百上千的动态DOM对象， Mobx可能会表现更好。 同样, 如果你的app工作流都是简单的操作，并且你不需要事务（Transactional）和可确定状态（Deterministic State），你完全就不需要使用Redux。MobX绝对是一个更简单的解决方案。 不过，你学会 <strong>Redux之后</strong> 再来学这个吧。</p> </li> </ul> <h3> </h3> <p>来自：http://www.zcfy.cc/article/top-javascript-frameworks-amp-topics-to-learn-in-2017-2212.html</p> <p> </p>