JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?
你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?
现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。
课程内容大纲 | 开篇:一线大公司对中高级前端工程师的要求
- 1 JavaScript 测试基础
- 2 JavaScript 难点选讲
- 3 异步流程控制
- 4 模块化
- 5 模板引擎
- 6 webpack
- 7 学会性能测试对比
- 8 基于缓存的前端性能优化
- ......
记住,当你在学习一些实际的代码时,您可以在 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 的优秀课程:
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? 因为:
换句话说,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