前端框架和技术

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 代码:

1. const doSomething = (err) => new Promise((resolve, reject) => {
2. if (err) return reject(err);
3.  
4. setTimeout(() => {
5. resolve(42);
6. }, 1000);
7. });
8.  
9. const log = value => console.log(value);
10.  
11. // 使用返回的 promises
12. doSomething().then(
13. // 当 resolve 时:
14. log, // logs 42
15. // 当 reject 时(resolve 时不会调用)
16. log
17. );
18.  
19. // 记得处理错误哦!
20. doSomething(new Error('oops'))
21. .then(log) // not called this time
22. .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。
  • (转)