PS: 本文相关Javascript名词翻译都使用犀牛书的翻译
Warning：这篇文章很长，End也不会有懒人包。
JS的受欢迎程度让它变成了一种科技，一种生态系还有一种Libraries，但是它的多元程度还有它的生态系的活力让大多数的人相当困扰，到底哪项技术我该关心的呢？
到底把时间投资在哪项技术会让我得到最多的利益？哪种技术人员是现在的公司们所需要的，哪种技术是最有成长潜力的？
哪种技术是你现在最需要知道的？这篇文章概括了介绍你所知道的一切东西，还附上连结。
记得一件事，如果你还在学著实验一些code，Codepen.io会是你的好朋友，如果你还在学习ES6，你可以学著用线上转译器Babel REPL
这篇文章会是一个很长的清单，但是不要太沮丧。你办得到的，如果你现在正在看这个清单，而且很烦恼如何利用你所知道的一切来建立一个现代化的应用，请读“Why I’m Thankful for JavaScript Fatigue”，然后下定决心的开始工作吧。
建议学习但不是必须的符号＊
如题，有些技术严格来说只是建议学习的，换句话说，如果你有兴趣的话，我会推荐这些技术，或是如果你会需要为了工作而学它。但是不用觉得学习它是一种义务。任何名词加上*号(ex:”example*”)就会是建议学习
所有没有加上星号的名词就是你应该要学的。但是一样，不需要觉得学习这些东西是一种义务。你必须了解这些名词是必须要学习的事物，但是你不用成为所有技术的专家。
Javascript & DOM的基本
当你要开始把JS当饭吃的时候，你应该要把这些JS的基础掌握得很好:
- 内建的方法：
学习这些标准的资料型态(特别是矩阵，物件，字串还有数字) - 函式还有纯函式(Function
& pure functions)：
你可能已经觉得你已经掌握函式掌握得很好了，但是JS有一些不为人知的小技巧，而且你需要学习纯函式来掌握Functional Programming - 闭包(Clourses)：
学习Javascript的函式作用域的行为 - 回呼(Callbacks)：
回呼函式是一只用来表示其他支函式的结果已经准备好的函式，它说”黑，做好你的工作，做完（到了）叫我（咦?” - Promise(不知道怎么翻，所以决定不翻)：
一个Promise物件是一种处理未来尚未发生的结果的方式，当一个function回传了一个Promise，你可以利用 .then() 方法在Promise resolve (Promise.resolve是一个静态方法，所以我就不翻译了)之后执行你的callback，resolved value会传进你的callback function中
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(Application Interface 应用程式介面)沟通 - ES6：
现在最新版本的JS已经是ES2016了（又叫做ES7)，不过很多开发者都还没好好的学习ES6 - 类别：(note: Avoid class inheritance. See How to Use Classes and Sleep at Night.)
- 函式型程式设计(Functional
Programming)：
Functional Programming是由许多数学函式所组成，避免了共用的状态跟可改变的资料。我上一次见到没有使用大量的Functional Programming的JS app已经是一年多之前了，是时候要精通这些基础了。 - Generators & async/await：
我个人的意见，这是让你的非同步程式码看起来像是同步原始码的最好的方式，它需要花时间学习，但是你学完之后，会让你的原始码更容易阅读。 - 效能: RAIL?—?从这里开始 “PageSpeed Insights” & “WebPageTest.org”
- Node
& Express：
Node让你在server端使用JS，Express是Node最受欢迎的框架 - Lodash：
一个很棒，模组化的JS工具，把funcitonal programming的好处都包了进去，Import the data-last functional modules fromlodash/fp.(这句不知道怎么翻我就放上原文了)
工具
- Chrome Dev Tools: DOM
inspect & JS debugger:
最好的除虫工具，虽然你可能也会想试试看Firefox的一些很棒的工具 - npm:
原本是Node.js的套件管理工具，现在已经变成了一套开源的JS套件管理工具 - git & GitHub:
分散式的版本管理系统，让你总是可以追朔你的原始码的改变。 - Babel:
用来在一些比较旧的浏览器上转译你的ES6 - Webpack:
目前最受欢迎的打包工具，当你要创建一些简单的范例的时候，方便你设定。 - Atom, VSCode,
or WebStorm + vim:
如果你需要一个编辑器， Atom and VSCode是目前最受欢迎的JS编辑器。Webstorm也是其中之ㄧ。我推荐学习vim，或是至少把相关的小抄(cheat sheet)加入你的浏览器书签，因为早晚你都会需要用它来编辑在伺服器上的档案，而这是最简单的方式。vim 被安装在所有Unix相容的作业系统上，而且利用SSH远端连线操作起来相当方便。 - ESLint:
提早把语法以及格式错误抓出来。排名在Code review跟TDD(Test Driven Development)之后，第三佳的方式让你减少你原始码的bug - Tern.js(我没用过所以我就保持原文了，怕翻错): Type inference tools for standard JavaScript, and currently my favorite type related tool for JavaScript?—?no compile step or annotations required. I’ve kicked all the tires, and Tern.js delivers most of the benefits, and virtually none of the costs of using a static type system for JS.
- Yarn*:
跟npm很像，但是安装的行为却是确定性的，而且Yarn看起来比npm还快。 - TypeScript*(一样没用过我就不翻译了): Static types for JavaScript. Completely optional unless you’re learning Angular 2. If you’re not using Angular 2, you should evaluate carefully before choosing TypeScript. I like it a lot and I admire the TypeScript team’s excellent work, but there are tradeoffs you need to know about. Required reading: “The Shocking Secret About Static Types” & “You Might Not Need TypeScript”.
- Flow*: Static type checker for JavaScript. See “TypeScript vs Flow” for an impressively informed and objective comparison of the two. Note that I’ve had some difficulty getting Flow to give me good IDE feedback, even using Nuclide.
React
React 是一个用来建立使用者介面的框架，由Facebook所创建，它的理念建立在於单向资料流，意思是所有的资料更新循环会是：
(我也没用过React所以不确定的我就不乱翻译了)
- React takes inputs to components as props and conditionally renders DOM updates if data has changed for specific parts of the DOM. Data updates during this phase can’t retrigger the render until the next drawing phase.
- Event handling phase?—?after the DOM has rendered, React listens for and events, delegating events to a single event listener at the root of its DOM tree (for better performance). You can listen to those events and update data in response.
- Using any changes to the data, the process repeats at 1.
这是一个跟双向资料绑定相反的方式，让DOM的改变直接更新资料(举例像是Angular 1还有Knockout)。使用双向绑定的话，如果在DOM渲染过程中DOM又有改变的话(在Angular 1中叫做digest 循环)可能会在这个渲染过程还没结束前又触发另一个渲染过程，会让效能变慢。
React 并没有规定资料管理系统，不过Flux是强力推荐的，React的单向资料流借用了Function programming还有immutable data structure的想法，改变了我们对于前端框架结构的想法。
以下是更多相关资料
For more on React & Flux architecture, read “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.
- create-react-app*: 最快开始建立一个React App的方法
- react-router*: 简单到死的React router
- Next.js*: Dead simple Universal render & Routing for Node & React.
- velocity-react*: Animations for React?—?allows you to use the VMD bookmarklet for interactive visual motion design on your pages.
Redux
Redux 为你的应用提供了一个交易性(transactional)的，决定性的状态管理方式。我们呈现了一个action物件来减少现有应用程式的状态，要知道为什么它很重要“10 Tips for Better Redux Architecture.” To get started with Redux, check out the excellent courses by the creator of Redux, Dan Abramov:
Redux是必学的
Redux是必学的
Redux是必学的
很重要所以说三次，就算你从来没过它
为什么呢？因为他会让你练习而且教你使用 pure functions 的价值，并且教你新的思考 reducers 的方式，像是用来产生资料丛集的共用的函式 (general-purpose functions)并且从这中间提取一些资料。Reducers 是如此的重要以致于 Array.prototype.reduce 被加入到JS的标准中。
(以下这段很难翻所以我也保留原文)
Why? Because it will give you lots of practice and teach you the value of using pure functions and teach you new ways to think about reducers, which are general-purpose functions for iterating over collections
of data and extracting some value from them. Reducers are so generally useful that Array.prototype.reduce was added to the JS specification.
Reducers 的重要性远大于一个阵列，而且学习新的Reducer工作方式是相当有价值的。
- redux-saga*(没用过就不翻了): A synchronous-style side-effect library for Redux. Use this to manage I/O (such as handling network requests).
Angular 2*
(其实我也没用过，就尽量翻翻看)
Angular 2 是Google 的超级受欢迎的框架?—?Angular 的大成。因为它的疯狂受欢迎的程度，所以放在你的履历上会很漂亮?—?不过我还是推荐先学React
我相当推荐先学React因为
- 简单
- 相当受欢迎而且很多工作都需要他(Angular 2 也是)
因为这些理由，所以我推荐先学React，不过我认为Angular 2 只是个建议学习的选项。如果你对它有强烈爱好，可以交换一下学习顺序，任何一个都会让你觉得受益。
不管你最后选了什么，在抛弃它学习另一个之前，请至少专注于使用它六个月到一年，要让它产生强大的效益需要时间，我想任何的学习都是一样的。
EDIT:你为什么不列出<你最喜欢的？>
有些人问我为何不列出他们最喜欢的框架，其中一个重要的原则是，我认为“这项技术在实际工作上是否有用？”
是的，这是一个欢迎程度的竞赛。不过有机会知道一个框架会开放是当你在考虑你要如何投资你的学习时间的时候一个重要的考虑因素。
为了回答上面的问题，我找了一些资料。首先是Google Trends。如果你想要重新产生这个Google Trends的图表，记得要选取by主题而不是by关键字。因为部分的字会产生负面结果。
这张图告诉我们的是这些不同的专案的相关关注程度。如果人们搜寻这些字，很有可能是他们正在探索他们的选项，或是寻找帮助或是技术文件。这是一个相当适合表示相关专案的使用程度的图表。
另一个很好的资源是 Indeed.com，它是一个有大量且多样资源的求职网站。虽然各项技能的受欢迎程度已经渐渐不能表示什么了，但是他们仍然收集了足量的资料来告诉你现在人们正在用来产生实际专案的框架。
要重新产生这个图表，你可以搜寻framework name in JS然后让location 这一栏空白，结果就如你所见。
Angular and React 支配了整个生态圈:甚至没有可以望其项背的其他选项。 (jQuery 例外，因为它是被用来应用在所有网站，也包含非app类?—?因为它被几乎所有 legacy system，包括热门的CMS系统像是 WordPress)
你可能会发现Angular 有一个显著的领先，但是为什么我推荐React呢？
- More people are interested in learning React than Angular
- React significantly leads Angular in user satisfaction
换句话说，React是赢在mindshare还有使用者体验上。而如果这个趋势在往后延个一年或一年半，React会非常有机会成为主宰的前端框架。
Angular 2 有机会翻盘，不过目前React是表现相当的好
RxJS*
(没用过，相关资料)
is a collection of reactive programming utilities for JavaScript. Think of it as Lodash for streams. Reactive programming has officially arrived on the JavaScript scene. The ECMAScript Observables proposal is a stage-1 draft, and RxJS 5+ is the canonical standard implementation.
如果要使用，别引入整包RxJS，可以分批次使用，让你的app少了大概200k以上，会让你的app加快不少。
下一个阶段
Now that you’ve studied up on all this hot tech, read “How to Land Your First Development Job in 5 Simple Steps”.
Level up your JavaScript game. If you’re not a member, you’re missing out.
翻了三个小时，眼睛都快脱窗了。有错误请不吝惜指教䁖