cherryvenus

2017年,你需要学习的JavaScript框架和主题

cherryvenus · 2017-01-14翻译 · 1928阅读 原文链接

随着JavaScript的普及,应运而生了一个非常活跃的集技术,框架和库为一体的生态圈。由于这个充满多样性的和活力的生态圈,因此大家非常困惑。应该学习哪种技术?

你应该投资哪一种技术才能获得最大的收益?公司现在最需要招的人最需要哪一种技术堆栈?哪一个发展空间最大?

现在最需要了解的是哪个技术?这篇文章高度概括了你所需要了解的内容,同时附上了链接,你可以自行了解。

记住,当你正在实验一些新的代码,你可以在Codepen.io上玩玩,如果你在学习ES6,那么你可以看看如何使用Babel REPL编译。

这个学习的列表很长,但是你不用感到灰心。你可以做到的!如果你在研究这列表,担忧该如何学习这一切,如何创建现代APP,移步阅读“为什么我该感谢JavaScript疲劳”。然后开始认真学习,动起来。

选择性学习的一个注意事项

有些内容是完全可选的,也就是说,如果你对我推荐东西此感兴趣,或者工作需要,但是你不能感觉是被迫学的。每一个打了星号(*)的(比如 example* )就是可选的。

没有打*的,都是必须学的,但是并不是所有的都是一定要学透的,你需要熟悉每一样内容。你需要了解可选的内容,但是你完全没有必要精通所有的。

JavaScript & DOM 基础

在你找到JavaScript的工作之前,你需要掌握JavaScript的基础:

  • 固定方法: 标准数据类型的学习方法(特别是 数组对象字符串, 和数字)。

  • 函数 & 纯函数: 可能你觉得已经很好地掌握了函数,但是JavaScript经常事与愿违,你需要学会纯函数以掌握函数编程。

  • 闭包: 学习JavaScript函数作用域是如何运行的.

  • 回调: 回调是当另一个函数运行结束的时候,发出信号调用函数。可以这么说,“做你自己的事,做完了再叫我”。

  • Promises: promise是处理终值的方法。当一个函数返回一个promise,你可以用.then()方法添加回调,在promise完成之后运行。终值会传入你的回调函数中。比如 doSomething().then(value => console.log(value));

工具

  • Chrome Dev Tools: DOM inspectJS debugger: 最好用的调试器,尽管在我看来, Firefox也有一些你会非常想尝试而且很酷的工具。

  • npm: JavaScript的标准语言开源包存储库。

  • git GitHub: 分布式版本管理——与你的源代码的每次改变保持一致。

  • Babel: 用于编译ES6,使之可以兼容过时版本浏览器。

  • Webpack: 最受欢迎的用于标准JavaScript的打包工具,通过简单的启动工具包/样例配置案例,让东西快速运行。

  • Atom, VSCode, 或者 WebStorm + vim: 你需要一个编辑器。 Atom和VSCode是现在最受欢迎的 JS编辑器。Webstorm是另一个解决方案,稳健维护的优质工具。 我推荐学习vim, 或者至少记录cheat sheet,你迟早会用到, 因为会需要在服务器上编辑文件的, 并且这是最方便的方法——vim在每个Unix兼容的操作系统都有安装,并且在SSH终端链接上运行得很好。

  • ESLint: 尽早捕获语法错误和样式问题。 代码审查和TDD之后, 第三件你能做的事就是在代码中减少bug。

  • Tern.js: 标准 JavaScript的类型诊断工具, 并且是我最近最爱用于JavaScript的类型相关工具——没有编译步骤 或者注释。我尝试了所有的此类工具, 发现Tern.js大部分的优点都提供,并且给JS使用静态类型系统,几乎没有成本。

  • Yarn*: 和npm类似, 但是他的安装行为是决定论的, 并且Yarn以比npm快为目标。

  • TypeScript*: JavaScript的静态类型。除非你在学习Angular2,不然这完全可选。 如果你没有在用Angular 2, 在选择TypeScript之前需要仔细评估一下。我很喜欢它的,并且我敬佩TypeScript团队的出色工作, 但是你还是需要了解一些权衡。必读: “静态类型,令人震惊的秘密”以及“你可能不需要TypeScript”.

  • Flow*: JavaScript静态类型检查器。 查看“TypeScript vs Flow”,以获得深刻的理解和客观的对比。记住,我有一些困难需要Flow给我好的IDE反馈,即使使用Nuclide

React

React 是一个由Facebook创建的用于构建用户接口的JavaScript库。 这是一个基于单向数据流的概念,意味着对于每次周期更新:

  1. React将输入变成组件作为props,然后如果特定的Dom部分的数据发生了改变,那么就会只重新渲染满足条件的部分。在这个阶段更新的数据,直到下一次渲染阶段都不能重新触发渲染。

  2. 事件处理阶段 — DOM渲染之后,React监听事件, 将事件委托到DOM树的根节点上的一个单独监听器 (为了更好的性能)。 你可以监听这些事件并响应更新数据。

  3. 数据的任何改变,步骤重新从第一步开始。

这和双向绑定形成了对比,双向绑定是DOM的改变会改变数据(比如,Angular 1 和Knockout)。使用双向绑定,当DOM渲染的时候(在Angular 1中称之为digest cycle),DOM的改变可能会在渲染完成前重新触发渲染阶段,导致重新载入DOM和重绘——降低了性能。

React没有规定一个数据管理系统, 但是Flux-based方法是推荐的。 React的单向数据流方法,借鉴了函数编程和不可变的数据结构,改变了我们眼中的前端框架架构。

想了解更多关于React和Flux架构, 请阅读 “学习编程最好的方法就是开始编程: 从创建App中学习App架构”.

  • create-react-app*: 最快了解React的方法。

  • react-router*: React的超级简单的路由(rotuer)。

  • Next.js*: 超简单的全局渲染,和 用于Node和React的路由.

  • velocity-react*: React动画——你可以使用VMD bookmarklet在您的页面上做交互视觉动态设计。

Redux

Redux给你的APP提供了事务处理的(transactional), 确定性(deterministic)状态管理。在Redux中,我们通过迭代大量的操作对象,以减少当前应用程序状态。想知道为什么这个很重要, 更多请看“给更好的Redux架构的10个建议.”。想要开始使用Redux, 学习Redux的创建者Dan Abramov的极佳教程:

Redux对于生产项目是强制学习的,即使你从未用过Redux

为什么?因为它给了你大量的练习,教会你纯函数的价值,以及教会你新的思考reducers的方式, 这是迭代数据集和从中获取数据的通用的函数。 reducers 如此实用,以至于Array.prototype.reduce都被加入了JS规范。

Reducer不仅仅对于组数(array)是重要的,并且学习用Reducer的新方式处理问题,本身就十分有价值。

  • redux-saga*:Redux的处理同步方式副作用的库。使用这个去处理I/O(比如处理网络请求)。

Angular 2*

Angular 2是继来自谷歌的广受欢迎的Angular之后的框架。因为这太受欢迎了, 这会让你的简历看上去十分高大上——不过我建议还是先学React。

与Angular 2相比,我更爱React,因为:

  1. 这个更简单, 以及……

  2. 这十分受欢迎,并且有许多相关职位 (当然 Angular 2也是的)

因为这个原因,我推荐学习React, 但是我认为 Angular 2 完全是可选的*。 如果你非常喜欢Angular 2, 那么就换过来. 先学Angular 2,将React列为可选。 每一个对你的简历来说都是受益匪浅的。

无论你选哪一个,试着集中精力学习至少半年到一年,之后再去学习另一个。这需要时间,你才能真正熟练掌握。

RxJS*

RxJS是JavaScript的一些响应式编程工具。可以当作Lodash中的流。响应式编程已经正式登陆JavaScript的舞台。ECMAScript的Observables提案是阶段一的初稿, 而RxJS 5+是Observables权威标准的实现。

尽管我非常爱RxJS, 但是如果你一次性加载所有的包 你的包会膨胀地很厉害 (这里有许多操作)。为了控制包的大小, 不要加载所有的内容。请使用补丁加载:

使用补丁加载能够将你的包对于rxjs依赖减少大约200k。这真的非常划算。这会让你的app变得更快

EDIT: 为什么你不列出 ?

许多人问我,为何不列出他们喜欢的框架。我评判框架的其中一个标准就是“这真的会在工作上用到?”。

是的,有一个框架的人气投票。但是当你决定耗费时间专注学习一个框架,这是否会脱颖而出是个非常重要的考虑因素。

为了回答这个问题,我看了一些关键指标。首先,谷歌趋势(Google Trends)。如果你想要重现这个谷歌趋势图表,记得要选择主题(topic),而不是关键字(keyword),因为这些词会过滤掉许多错误信息。换句话说,这些是主题趋势,而不是关键字搜索

谷歌趋势上的JS主题

这个告诉我们在不同项目中的相对兴趣。如果人们搜索他们,那么很有可能在探索他们的选择,或者查找帮助或文档。这是相对使用水平的一个非常不错的指标。

另一个数据的有效来源是Indeed.com,这个集合了来自大量不同渠道的职位表数据。职位投递热点最近急速下降,但是他们依然收集足够的数据,来做有效的相对对比,从而告诉你在生产项目中人们真正使用的框架。从职位中:

想要重现这些发现,搜索javascript,然后工作地点保持空白。你就可以清晰看到:

Angular和React占领绝对优势:没有可以与之相提并论的。 (除了 在网站中具有巨大份额的jQuery——不包括app——因为它用于所有的遗留系统,包括受欢迎的CMS系统,比如WordPress)。

在这些列表中,与React相比,Angular具有绝对优势。那么为什么我推荐先学React? 因为:

  1. 越来越多的人开始学React,而不是Angular。

  2. 在用户体验上,React领先Angular。

换句话说, React赢得了思维占有率和用户满意度的竞争,并且如果按照过去几年的趋势,只需要按照一半的程度继续下去,React完全有可能超越Angular作为主要的前端框架。

Angular 2也有可能扭转战局,,因此Angular也有可能东山再起,但是到目前为止, React确实打了一场漂亮的仗.

观察中的框架

  • Vue.js*拥有大量的GitHub的星星和下载量。如果这样持续下去,它在2017年会表现地非常好,但是我不认为它在未来的一年内会挤走React或者Angular(这两者都成长地非常快)。你学好了React或者Angular之后再学这个吧。

  • MobX* 是一个很赞的数据管理库,它已经是Redux的一个非常受欢迎的替代品。这也成长地很快, 我预期它会在2017年有所表现。我喜欢给所有的app使用Redux,但是在有些特定的情况下,Mobx是个更好的选择。比如,如果在你的页面上有成百上千的动态DOM对象, Mobx可能会表现更好。 同样, 如果你的app工作流都是简单的操作,并且你不需要事务(Transactional)和可确定状态(Deterministic State),你完全就不需要使用Redux。MobX绝对是一个更简单的解决方案。 不过,你学会Redux之后再来学这个吧。

下一步

现在你已经研究了所有的热点技术,请阅读“在5步内,获得你的第一个开发工作”.

提升你的JavaScript游戏。 如果你不是其中一员,你会错过的。


Eric Elliott “Programming JavaScript Applications” (O’Reilly)和 “Learn JavaScript with Eric Elliott”的作者. 他将他的软件经验贡献给了 Adobe Systems, Zumba Fitness The Wall Street Journal ESPN BBC, 以及顶级唱片人包括 Usher Frank Ocean Metallica等等。

他和世上最美的女人常年居住在旧金山港湾区。

相关文章