2017年最值得学习的前端框架和技术

来源：互联网发布：淘宝申诉海外代购小票编辑：程序博客网时间：2024/05/16 18:26

JavaScript 的普及造就了一个非常活跃的技术，框架和库的生态系统。这个生态系统不断涌现多式多样的框架和技术，对许多人来说都是高度的混乱。那么你应该关注什么样的技术呢？

你应该在哪里方面投入时间来获得最大收益呢？目前公司招聘哪些技术栈呢？哪些技术增长潜力最大呢？

现在最重要的技术是什么？这篇文章高度概括了你需要知道的内容，你可以通过文章中的链接了解所有关于它的一些信息。

记住，当你在学习一些实际的代码时，您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ，您可以看看如何使用 Babel REPL 进行转译。

这个列表很长，但不要气馁。你可以做到！在看这个清单列表时，如果你担心你将如何学习所有构建现代应用程序所需知识，那么建议你先阅读一下 “为什么我要感谢 JavaScript 疲劳” 。然后静下心来，开始学习和工作。

可选学习标记

有些东西严格的说是可选的* ，这意味着，如果您对他们感兴趣，我推荐它们，或者你的工作需要了解它们，但你不应该觉得必须去学习它们。任何标有星号的东西(例如:example*)都是可选的。

任何没有带 * 的东西都应该学习，但是不要觉得要学习一切或知道一切。应该有一个很好的认知，不一定需要成为一名各个领域都出众的专家。

JavaScript ＆ DOM基础知识

在尝试以 Javscript 为生，进行工作之前，您应该对 Javascript 的基础知识有深刻的了解：

ES6 ：当前最新版本的 JavaScript 是 ES2016（又名 ES7 ），但很多开发人员还没有正确学习 ES6 。是时候学习是 ES6 要点了： Arrow functions(箭头函数) ，rest(剩余参数) / spread(扩展操作符) ，default parameters(默认参数) ， concise object literals(对象字面量) ，destructuring(解构)，解构等等…
Closures(闭包) ：了解 JavaScript 函数作用域的基本特性。
函数和 pure functions(纯函数)：你可能以为你已经很好地掌握了函数，但是 JavaScript 有一些技巧，您需要了解纯函数来掌握函数式编程。
Functional programming basics(函数式编程基础) ：函数式编程通过组合数学中的函数来生成一个大的程序，避免共享状态和可变数据。多年以来，我还没有看到一个大量使用函数式编程的 JavaScript 应用程序。是时候掌握基本原理了。 (愚人码头注：可以看看知乎上的这个回答：https://zhihu.com/question/28292740/answer/40336090)
Partial application(局部应用) 和 Curry(柯里化)
Builtin methods(内置方法) ：学习标准的数据类型 (特别是 arrays ， objects ， strings ，和 numbers )。
Callbacks(回调): 回调是一个函数，当另一个函数有结果就绪时立即执行。就像你说，“做你的工作，做完后打电话给我。”
Promises ： promise 是处理未来值的一种方式。当函数返回 promise 时，您可以使用 .then() 方法附加回调，这个回调将在 promise resolves时运行。resolved 值被传递到你的回调函数中，例如：doSomething().then(value => console.log(value));

JavaScript 代码:
const doSomething = (err) => new Promise((resolve, reject) => {
  if (err) return reject(err);
 
  setTimeout(() => {
    resolve(42);
  }, 1000);
});
 
const log = value => console.log(value);
 
// 使用返回的 promises
doSomething().then(
  // 当 resolve 时:
  log, // logs 42
  // 当 reject 时(resolve 时不会调用)
  log
);
 
// 记得处理错误哦!
doSomething(new Error('oops'))
  .then(log) // not called this time
.catch(log); // logs 'Error: oops'

Ajax & server API calls (Ajax 和服务器API调用) ：那些有趣的应用程序最终需要与网络服务器通信。你应该知道如何与 API 进行通信。
Classes (注意: Avoid class inheritance(避免类继承)。查看 How to Use Classes and Sleep at Night(如何使用类才能晚上睡个好觉).)
Generators & async/await 在我看来，最好的异步代码的写法就是用写同步代码的方式去写异步代码。不可否认这些都存在学习曲线，但一旦你学会了，代码将更容易阅读。
Performance(性能)：RAIL — 从 “PageSpeed Insights”> & “WebPageTest.org” 开始，他们会给你一些建议
Progressive Web Applications (PWAs) ：查看 “Native Apps are Doomed” & “Why Native Apps Really Are Doomed”
Node & Express： Node 允许你在服务端运行 JavaScript ，这意味着您的用户可以将数据存储在云中并随时随地访问。而 Express 是 Node 社区最为流行的 Web 框架。
Lodash ：一个很好用的、模块化的 JavaScript 实用工具函数库，包含功能编程的好东西，你可以通过 lodash/fp 导入 data-last 功能模块。

工具

Chrome Dev Tools：DOM inspect & JS debugger: 最为好的调试工具，虽然 Firefox 也有很多非常酷的工具，你也可以去体验一下。
npm：JavaScript 语言公然的开源包仓库库。
git & GitHub ：分布式版本管理系统，随时跟踪你源代码的变化。
Babel ：用于将 ES6 代码转译到 ES5 以使之能够兼容老版本浏览器。
Webpack : 最流行的标准 Javascript打包工具，通过一个简单的配置文件，就能快速让项目运行。
Atom ，VSCode，或者 WebStorm + vim：你需要为自己选择一个合适的编辑器来辅助你快速开发。Atom 和 VSCode 是当今最流行的 JS 编辑器。 Webstorm 是另一种解决方案，它对质量工具的支持非常强大。我建议学习 vim ，或至少加入到你的收藏书签，因为迟早，你需要在服务器上编辑文件，掌握 vim 是最简单的方法 – vim 安装在几乎所有的 Unix 兼容的操作系统，通过 SSH 终端连接可以很好的运作。
ESLint:：尽早发现语法错误和代码风格问题。除了代码评审和TDD之外，这是你可以做的第三件事，尽量减少代码中的Bug。
Tern.js：标准 JavaScript 类型的推理工具，这是我目前最喜欢的类型相关的 JavaScript 工具 – 不需要编译步骤或注释。我踢掉了其他相关工具，Tern.js 提供了大部分的功能，并且几乎没有为 JS 使用静态类型系统的成本。
Yarn: 类似于npm，但是安装起来更为可靠快速。
*:：静态类型的JavaScript。除非你学习 Angular 2+，否则是完全可选的。如果你不使用 Angular 2+ ，你应该在选择学习之前要仔细评估。我非常喜欢它，我很钦佩 TypeScript 团队的出色工作，但是你需要知道一些权衡。必读：“关于静态类型的惊人秘密” 和 “你可能不需要 TypeScript” 。
Flow*:： JavaScript静态类型检测工具，可以阅读 “TypeScript vs Flow” 来对于这二者有个大概的了解，请注意，我让 Flow 来反馈给我的 IDE 有一些困难，即使使用Nuclide。

React

React 是个专注于构建用户界面的 JavaScript 库，由 Facebook 创建。它基于单向数据流的设计思想，也就意味着对于每个更新周期：

React 接受组件的输入作为 props，并有条件地渲染 DOM 更新，如果数据已经改变了 DOM 的特定部分。在重渲染阶段发生的数据变化并不会立刻触发重渲染，而是在下一个绘制阶段的时候才会进行重渲染。
事件处理阶段 – 在渲染 DOM 之后，React 侦听和事件，将事件委托给其 DOM 树根（为了更好的性能）的单个事件侦听器。你可以监听这些事件并更新响应中的数据。
对于数据的任何变化都会重复步骤1。

这种单向数据流与双向数据绑定形成对比，其中对 DOM 的改变可以直接更新数据（例如，如在 Angular 1和 Knockout 的情况下）。使用双向绑定，在 DOM 渲染过程（称为 Angular 1 中的摘要循环）中对 DOM的更改可能会在绘制完成之前重新触发绘图阶段，从而导致回流和重绘 – 从而降低性能。

React 没有规定数据管理系统，但推荐使用基于 Flux 的方法。 React 的单向数据流方法借鉴了函数式编程和不可变数据结构的思想，改变了我们对前端框架架构的思考方式。

有关React＆Flux架构的更多信息，请阅读 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”。

create-react-app *：开始使用 React 的最快方法。
react-router *：React 的简单路由。
Next.js *：简单的通用渲染和路由 Node ＆ React 。
velocity-react *：React的动画 – 允许您使用 VMD – bookmarklet 在页面上进行交互式视觉运动设计。

Redux

Redux 为应用程序提供事务性，确定性的状态管理支持。在 Redux 中，我们遍历操作对象流，以减少到当前应用程序状态。要了解为什么这很重要，请阅读 “10 Tips for Better Redux Architecture”。要开始使用 Redux，请查看 Redux 创建者 Dan Abramov 的优秀课程：

“Getting Started with Redux”
“Building React Applications with Idiomatic Redux”

Redux 是强制性学习，即使你从未使用 Redux 作为实际项目。

为什么？因为它会给你很多实践，并告诉你纯函数的价值所在，并教你如何将通用函数 reducers，这是一种通用的函数，用于遍历数据集合并从中提取一些值。Reducers通常是非常有用的，以至于Array.prototype.reduce已添加到 JS 规范。

Reducers 不仅仅对于数组是重要的，同时学习使用Reducers 的新方法本身也是有价值的。

redux-saga *：Redux 的同步样式的副作用库。使用它来管理I / O（例如处理网络请求）。

Angular 2*

Angular 2 是 Google 广受欢迎的 Angular 框架的继承者。因为它疯狂的人气，掌握它会使简历看起来很棒 —— 但我仍旧建议优先学习 React 。

我喜欢 React 超过 Angular 2+，因为：

React 更简单
React 很受欢迎，许多工作都需要它使用（Angular 2+也是）

为此，我推荐学习 React，但我认为 Angular 2+ 严格可选*。如果你对 Angular 2+ 有强烈的偏好，那么你可以随意选择 React 或者 Angular 2+。首先学习 Angular 2+，并考虑 React 可选。这两种情况都会让你受益，并且在你的简历上看起来很不错。

无论你选择哪一个，尽量将精力集中学习和使用你所选择的那个，至少6个月 – 1年后，再去学习另一个。真正掌握它们需要很多实践。

RxJS*

RxJS 是 JavaScript 的响应式编程实用程序的集合。就好比流处理领域的 Lodash 。它把响应式编程带入到了 JavaScript 领域。ECMAScript Observables 提案是第一阶段草案，而 RxJS 5+ 是规范标准的实现。

虽然我个人非常喜欢 RxJS ，如果你想在工程中使用使用整个 RxJS 的话，包体积可能很大（因为其内置了很多的 Operators ）。你可以使用部分引入来解决这个问题：

JavaScript 代码:
import { Observable } from 'rxjs/Observable';
// then patch import only needed operators:
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
 
const foo = Observable.from([1, 2, 3]);
foo.map(x => x * 2).subscribe(n => console.log(n));

使用部分导入可以将您的 bundle 中的 rxjs 依赖关系减小约 200k 。对于web项目来说这个减少已经很大了。这将使您的应用程序更快。

为什么没有列出你最喜欢的东西？

很多人问我，“为什么没有列举出他们喜欢的框架？” 因为其中一个重要标准是，“在工作中能被真正的用上”。

是的，这是一个人气竞赛，但当你在思考学习的时间投入在什么上时，了解一个框架的时机变得格外重要。

为了回答这个问题，我看了一些关键指标。首先，Google趋势。如果您想重现此Google趋势图，请记住按主题而不是关键字进行选择，因为其中几个字词会带来大量的假阴性。换句话说，这些是以主题为主的趋势，而不是关键字搜索：

这告诉我们人们对各个项目的相对兴趣度。如果人们正在搜索它们，那么它们很可能正在搜索他们选择的项目，或寻找帮助或文档。这是一个相对合理的评价指标。

另一个很好的数据来自 Indeed.com ，它聚合不同站点上对于不同职位的开发者的招聘信息。近几年招聘信息急剧下降，但他们仍然收集足够多的数据，可以看出目前招聘上对于前端开发者技能需求的情况为:

要重现这些发现，搜索 框架名称 javascript 即可。要重现这些发现，请搜索 javascript并将该位置留空。你可以清楚地看到：

Angular 和 React: 遥遥领先（除了jQuery，它用于所有网站 – 包括非应用程序的巨大份额 – 因为它被几乎所有的遗留系统使用，包括流行的 CMS 系统，如 WordPress）。
你可能会看到 Angular 在这些列表中比 React 有显着的优势。为什么我依然推荐优先学习 React？因为：

相对于 Angular 而言，更多的人有兴趣学习 React 。
React 在用户满意度方面显着高于 Angular 。

换句话说，React 赢得了社区活跃和用户体验度，如果过去一年半的趋势继续保持，React 有一个非常明显的机会，来代替 Angular 成为主导的前端框架。

Angular 2 拥有改变这个局面的机会，所以 Angular 可以卷土重来，但到目前为止，React 正在处于优势一面。

观察中的框架

Vue.js * 在 GitHub 上有大量的 stars 和下载。如果继续下去，它将在 2017 年能做得更好，但我认为在未来的一年左右的时间里，我不认为它不会超越 React 或 Angular（两者都快速增长）。建议学习了 React 或 Angular 后学习 Vue.js 。

MobX * 是一个很棒的数据管理库，已成为 Redux 的流行替代品。它也在快速增长，我预计在 2017 年会更好。对于大多数应用来说，我更喜欢Redux，但在某些情况下，MobX是更好的选择。例如，如果页面上有成千上万个动态 DOM 对象，MobX 可能会表现得更好。另外，如果你的应用程序工作流都很简单，而且你不需要事务性的、确定性的状态，那么你可能就不需要 Redux 了。MobX 无疑是一个更简单的解决方案。建议你在学习了 Redux 之后，再学习 MobX 。

原文链接：https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711

阅读全文

0 0