前端框架和技术

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。
  • (转)