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

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

　　点击关注▲一灯科技

　　知识|经验|资讯|资料四大版块

　　中国专业的Web前端高端培训机构

　　

　　原文：#.wjdqwi2hr

　　

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

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

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

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

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

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

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

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

　　JavaScript & DOM 基础

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

　　工具React

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

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

　　事件处理阶段 — DOM渲染之后，React*敏*感*词*事件, 将事件委托到DOM树的根节点上的一个单独*敏*感*词*器 （为了更好的性能）。 你可以*敏*感*词*这些事件并响应更新数据。

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

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

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

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

　　Redux

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

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

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

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

　　Angular 2*

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

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

　　这个更简单, 以及……

　　这十分受欢迎，并且有许多相关职位 (当然 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主题

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

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

　　

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

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

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

　　越来越多的人开始学React，而不是Angular。

　　在用户体验上，React领先Angular。

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

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

　　观察中的框架下一步

　　现在你已经研究了所有的热点技术

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

　　

　　快扫描二维码，与志佳老师来聊聊吧～～