Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[译]2017年需要学习的javascript框架和技术点 #4

Open
xuheng opened this Issue Dec 14, 2016 · 1 comment

Comments

Projects
None yet
2 participants
@xuheng
Copy link
Contributor

commented Dec 14, 2016

image

Javascript的流行给各类技术,架构和函数库带来了很大的影响,随着它的流行,衍生出了特别多新的东西,那什么才是你应该去关注的呢?

哪些技术在你投入精力后能得到最大的回报?哪种技术被公司广泛的使用?哪类技术今后的潜力最大?

什么是现在最应该知道的技术?本文高度概括了这些内容,每个内容都提供了链接方便大家学习。

当你想要去编写并尝试一些代码,别忘了你可以在Codepen.i上编译它们。如果你也在学习ES6,你可以看看它是怎么被Babel REPL 转换的。

接下来就是一份很长的清单,不要灰心,你可以看完的。当你在看这份列表时,考虑一下怎么把所学到的东西用在你将开发的APP上,然后看看这片文章”Why I thankful for Javascript Fatigue“,就可以全心全意的去工作了。

要选择性的学习

本文中的一些内容可以作为选修,选择性学习的。如果你真的对它感兴趣或者在工作中会用到它,那么我会推荐它们。千万别觉得所有内容你都有必要掌握。列表中标星号(*)的,就是可以选择学习的内容。

没有标*的属于“必修内容”,但不要认为你一定要把所有的内容都学完。大家对“必修内容”应有自己的衡量标准,没有必要在每一个领域上都成为专家。

JavaScript & DOM 基础

在你决定用JavaScript开始工作前,你需要对相关的基础知识非常了解:

内嵌内容:需要学习一些标准数据类型(尤其是arraysobjectsstringsnumbers)。

函数与纯函数:可能你觉得自己已经非常熟悉各种函数了,但在使用JavaScript的过程中,还存在很多小技巧。同时,你需要学习纯函数从而真正掌握函数式编程。

闭包:了解JavaScript中的函数是怎么工作的。

回调:回调是指一个函数被另外一个函数使用,并且在另一个函数完成工作后作出标记。就像对另外一个函数说“干你的活,干完了叫我。

Promises: promise 是用来处理随后到来的数据的方法,当函数返回promise,你可以在promise完成后加上.then()来进行回调,返回的值会传入你回调函数中。例如:doSomething().then(value=>console.log(value));

const doSomething = (err) => new Promise((resolve, reject) => {
  if (err) return reject(err);

  setTimeout(() => {
    resolve(42);
  }, 1000);
});

const log = value => console.log(value);

// Using returned promises
doSomething().then(
  // on resolve:
  log, // logs 42
  // on reject (not called this time)
  log
);

// remember to handle errors!
doSomething(new Error('oops'))
  .then(log) // not called this time
.catch(log); // logs 'Error: oops'

Ajax & server API calls:大部分有趣的应用都需要连接网络,你应该知道如何使用API通信。

ES6:JavaScript目前最新的版本是ES2016(ES7),但很多开发者还在使用那些过时的旧版本。

Classes:(参考:Avoid class inheritance,具体请看:How to Use Classes and Sleep at Night

函数式编程的基础知识:函数式编程通过结合各种数学函数来实现,从而避免了分享状态和可变数据。距离上一次我看到没有使用过多函数式编程的JavaScript应用产品已经过去了太久,现在是时候来回归基础了。

Generators & 异步/等待:我认为编写异步程序的最高境界就是它看起来是同步的。要达到这个目标可能会遇到瓶颈。但只要你搞清楚了这个过程,相关的代码会读起来非常简单。

性能RAIL——你可以从这两个地方学起“PageSpeed Insights”“WebPageTest.org”

PWAs(Progressive Web Applications):详见“Native Apps are Doomed”“Why Native Apps Really Are Doomed”

Node & Express:通过Node,你可以在服务器上运行JavaScript,这意味着你的用户可以在云端存储数据,并且能在任何地方读取他们。Express 可以说是目前最为流行的Node框架。

Lodash:一个很好的模块化、高效JavaScript工具库,由函数式编程组成。可以通过lodash/fp进入相关功能模块。

工具类

Chrome Dev ToolsDOM inspect&JS debugger:算是最好的调试器了。但是Firefox也有一些挺新奇的工具,你可能会想要尝试一下。

npm :为JavaScript提供的一个标准的开源的包管理工具。

git&Github: 分布式版本管理工具——始终保持对会变更源码的监控。

Babel:作用是使ES6在低版本的浏览器上运行。

Webpack:对于JavaScript来说最为流行的打包工具,它会寻找一些简单的配置样本来加快运行的速度。

AtomVSCodeWebStorm+vim:你一定会需要一个编辑器,Atom和VSCode是目前最火的JS 编辑器。WebStorm是另外一个选择,它支持很多高质量的工具。我推荐学习Vim,或者至少将它保存在书签页,因为迟早你会在服务器上编辑文件,而它就是最简单的方法。Vim已经被安装在各种Unix兼容的操作系统上,并且在SSH终端连接上有很好的表现。

ESLint:让你更早的发现语法错误和样式问题,在结束了代码核对和TDD(测试驱动开发)之后,第三件事最好就是使用ESLint就是减少代码中的bug。

Tern.js:一个为JavaScrip设计的代码分析引擎,也是我目前这一类中最喜欢的,它省略了编辑的步骤和注释请求。我已经不再使用别的类似工具,因为Tern.js自身已经足够好了,并且它几乎可以毫无成本的为JS使用静态系统。

Yarn*:与npm类似,但是必须要经过经过安装,它致力于实现比npm更快。

TypeScript*:JavaScript的静态版,这个完全是可选择学习的内容,除非你正在学习Angular 2。如果你没有在学习Angular 2,你应该在选择使用TypeScript之前好好权衡一下。我个人很喜欢使用它,并且非常欣赏他们团队开发的一些绝妙的项目。有一些关于它的事情你可能还是需要看看这两篇文章“The Shocking Secret About Static Types”“You Might Not Need TypeScript”

Flow*: 为JS提供静态检验,从这“TypeScript vs Flow”,可以看到一些很有用的信息,包括针对这两者客观的比较。值得一提的是,我在使用Flow去给IDE做反馈的时候遇到了一些困难,甚至都用到了Nuclide

React

React
React是一个由Facebook开发的,构建用户界面的JacaScript库。它的想法基于单向的数据流动,也就是说,对于每个升级周期,都有以下特点:

  1. React将组建的输入看作一个道具,并且只有在DOM中特殊的部分发生了改变,才会有条件的渲染>DOM的更新。数据的更新将不再进一步出发渲染,直到下一个过程中。
  2. 时间处理阶段——在DOM被渲染后,React会监听所有的事件,并且会授权一个事件变成DOM tree根>目录下唯一的监听者(目的是做到更加高效)。你可以在反馈中监听到所有的事件和更新数据。
  3. 如果出现了数据变更,重复第一步。

这个是在与双向数据捆绑做对比,指的是那些对DOM的小调整会直接进行数据更新的方式(例如,使用Angular 1和Knockout)。双向数据捆绑的例子中,在DOM渲染过程,对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*:过时了的简单通用渲染,路由的节点以及React。
Velocity-react*:React动画——允许用户以>更好的视觉交互为目的,在页面上使用VMD的书签。

Redux

Redux为你的应用提供事务处理与决定性状态管理机制。在Redux中,我们对活跃对象的数据流进行迭代,从而减轻当前应用的状态。想了解为什么这么做,移步:“10 Tips for Better Redux Architecture”。如果想开始学习Redux,请参考Redux创始人Dan Abramov的相关课程:

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

即使你从没在你的项目中用过Redux,那它也是值得学习的。

至于原因,是因为它会为你提供很多练习的机会,并且告诉你使用纯函数的价值,以及让你对Reducers产生新的看法。这新的看法指的是使用通用功能函数对数据进行迭代和提取。当Array.prototype.reduce加入JS的规则中,Reducers通常都会起到作用。

Reducers的重要性堪比数组,所以学会使用Reducers是至关重要的。

Redux-saga*:是一个同步的,有副作用的Redux库,可以用它来管理I/O(例如处理网络请求)。

Angular 2*

Angular 2可以被看作是Google Angular框架的继承者,它现在实在是太流行了,或许你已经想要重新使用它了,但是我个人还是推荐先学习React。
在我这里React的优先级之所以比Angular 2高,主要因为:

  1. React更简单;
  2. React也非常流行,而且用于很多的项目中(Angular 2 也是)。

所以我推荐React,但是我也将Angular 2作为高级选项可供选择。如果你更想学习并使用Angular 2,这当然没问题,你可以先学习Angular 2,然后在考虑React。两者不管用哪个都有百利而无一害。

不论你选择使用哪个,最好能坚持六个月到一年。然后再学习另一个,毕竟要精通某个技术,需要投入大量的精力。

RxJS*

RxJS是JavaScript的一个响应式编程工具,可以将它比作Lodash之于数据流。响应式编程已经正式登陆了JacaScript的场景中。ECMAScript Observables在第一阶段的草案中提议,RxJS 5+ 将会被作为一个标准典型来开发实现。

就像我喜欢使用RxJS一样,如果你总是将所有的东西一次性的输入,那真的会造成包的膨胀。为了解决这个膨胀的问题,千万不要一次性输入太多。用补丁的方式输入:

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));

使用补丁的方式输入可以为依赖RxJS的包减少大概200K的空间,这已经很多了。同时他也会让你的应用更快

结语

现在的你应该了解了几乎所有的热门技术,你可以去看看这篇文章了“How to Land Your First Development Job in 5 Simple Steps”

后面是原作者在为JavaScript课程打广告,就不多翻译了,有兴趣的同去可以去看看原文的最后一段。

原文地址:https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.97bax2u1q

译者:Jia Shi

@xuheng xuheng changed the title 2017年需要学习的javascript框架和技术点 [译]2017年需要学习的javascript框架和技术点 Dec 24, 2016

@xuheng xuheng closed this Dec 24, 2016

@wufenfen

This comment has been minimized.

Copy link

commented Jan 14, 2017

I recommand you to read this version of translation. http://qkxue.net/info/199673/2017-JavaScript-2017. I am not advertising, coz i have nothing to do with this website.

@xuheng xuheng reopened this Jan 17, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.