微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

2018年,前端开发者需要学习哪些东西?

2018-04-07 21:37 奚甜甜 译

作者|Kamran Ahmed
译者|奚甜甜

在过去的 5 年里,我一直在做全栈开发,现担任 tajawal 的总工程师。因工作需要,我必须身兼多职。这不仅是我的爱好,也是我的工作职责之一。因此我可以密切地关注这一行业的发展趋势,并确保其他工程师也能紧跟趋势。在紧跟趋势这一问题上,我发现无论是初学者,还是那些有着丰富经验的工程师,都会觉得很困惑。

2017 年,有很多朋友写邮件来问我,如果他们想要从事这一职业,他们应该学习些什么。为了帮助他们,我准备了这些图表,并分享给大家。如果以后有人有相同类型的疑惑,我可以将这些图表分享给他们,这便是我制作这些图表的初衷。

最开始,他们都想要我给他们推荐一些合适的工具,但是昨天我决定应该制定一个详细的学习大纲,让大家更好地了解应该按照什么顺序去学习。我仍然在研究后端和 DevOps 的内容,但是前端的部分已经准备就绪,请继续往下阅读。

在开始介绍这份大纲之前,请让我先做一份免责声明:

这份大纲的目的是让你了解 JavaScript 的发展趋势,如果你对接下来要学习的东西感到困惑,它能够给你一份专业的指导,而不会鼓励你去学习那些炒的比较火热的东西。记住,并不是当下流行的工具都适合用在所有的项目中。你应该了解哪些工具适合用在哪些项目中。

接下来让我们开始吧——你可以看到下面这张图片,它已经很详尽地画出了相关内容,当然,在文中我还是会逐一解释大纲中的每一个步骤。

首先你要做的是学习一些基础的知识,包括 HTML、CSS 的基础知识,并熟悉 JavaScript 的语法。

学习基本的 HTML

HTML 用来组织网页的结构,就像人类的骨架一样。首先你要做的是学习它的语法以及与它相关的所有内容。重点要学习的内容如下:

  • 学习基础知识及如何编写语义化的 HTML。

  • 了解页面的各个部分,并且学会如何正确地构建 DOM。

任务——学习完 HTML 的基础知识后,请至少动手编写 5 个 HTML 页面。我的建议是可以选择任何网站的页面,例如可以尝试去编写任何一个 Github 配置页面或者 Twitter 的登录页面,而且要确保结构是正确的。虽然完成的页面看起来很丑,但是暂时还不用着急,现阶段的重点是学会编写正确的结构。

学习一些 CSS 知识

既然我们已经学会了如何编写页面的结构,现在我们可以开始给页面添加一些修饰,让它看起来更漂亮。CSS——层叠样式表就是用来给你的 HTML 页面添加效果的。

  • 首先你需要学习 CSS 的语法以及常见的属性。

  • 了解盒子模型以及如何使用 Grid 和 Flexbox。

  • 完成以上操作后,还需要学会如何使用媒体查询来编写响应式网页。

在掌握了 CSS 的基础知识以后,你可以在上一阶段完成的 HTML 页面中添加 CSS 样式。例如,如果你编写了一个 Github 配置页面,就可以添加 CSS 代码让你编写的页面看起来就跟真实的 Github 页面一样。按照这个步骤给上一个阶段编写的 5 个 HTML 页面都加上 CSS 样式。

学习 JavaScript 基础知识

JavaScript 可以让你的 HTML 页面更具有交互性。当我们不用加载整个页面,而只加载部分内容,这时出现的滑块,弹窗和吐司消息等都是由 JavaScript 完成的。在这一个阶段,你将学习 JavaScript 的基础知识并会开启你真正的旅程:

  • 学习 JavaScript 语言的语法和基础结构。

  • 学习如何通过 JavaScript 来操作 DOM 对象。例如,通过 JavaScript 删除页面中的某些元素、添加一些元素、操作类名、应用 CSS 样式等等。

  • 学习并理解作用域、闭包、变量提升和事件冒泡等。

  • 学习如何使用 XHR 或者 Ajax 发送 HTTP 请求。Ajax 可以让你在不重新加载页面的情况下执行某些页面操作。

  • 完成上面的内容后,可以去学习 ES6+ 中所有的新功能。ES6 是 JavaScript 的一个版本,它提供了很多有趣的更新。例如类、多种声明变量的方式、新的数组方法、字符串连接等。但是一些旧版的浏览器还不支持 ES6,你可以在网上找一些文章,它们会教你如何使用 Babel 将 ES6 转换为老版的 JavaScript。不用担心不了解 Babel,你只要理解这些概念,并在支持 ES6 语言的浏览器中实践它即可。稍后我们将重新讨论 ES6。

现在你应该会觉得 JavaScript 更贴近生活了。如果你是一个人在坚持学这些内容,给自己一个赞!这些是你刚刚学到的最重要的东西。

我应该学习 JQuery 吗?

曾有一度,几乎所有人都为 jQuery 而疯狂,因为它太好用了。JQuery 是一个功能强大的库,它封装了 JavaScript 常用的功能代码,并实现了高兼容性,使用它你可以更加方便地操作页面。但是那些辉煌已经过去了,对于很多新项目来说,它并没有太多用处,但仍然有人在使用它。你不必学习它,但是它非常简单,如果你想了解一下,也是非常好的。

实践时间

关于这个部分我说了很多,但是在这里我还是要再说一次,如果没有实际操作,你什么都学不会。可能有时候你会觉得你理解了那些内容,但是如果没有实际操作的话,你很快就会忘掉它们。所以当你遵循这份大纲的时候,请尽可能多做一些练习。

接下来你可以做一些响应式网站并使用 JavaScript 添加交互功能。你可以照着编写任何你感兴趣的网页,但要尽可能地利用你学过的内容。

一旦你完成了一些网页的创建,就可以开始尝试做真正的项目了。你可以去 Github 上搜索一些开源项目。以下是查找项目的一些建议:

  • 增强 UI,尝试编写一些响应式网站或改善 UI 设计;

  • 查看任何你可以解决的问题;

  • 重构任何你认为可以改进的代码。

关于 Github 的部分,你可能需要去学习一些 Git 知识,但这个不是必需的。在你开始使用 Github 之后,你会打开新世界的大门——只要你提问,就会有很多人愿意帮助你,你会因此感到诧异。

现在你已经掌握了基本的知识。如果你认真学的话,现在已经可以去找一份相关的兼职或者全职的工作了。但是,革命尚未成功,如果想拥有更好的工作,同志仍需努力。

包管理器

在此之前,如果你需要使用一些外部的库或者任何插件,你都需要手动下载相应的 JavaScript 和 CSS 文件,然后把它们放进项目中。但是如果这些库或者插件发布新版本的话,你也得在项目中做出相应的更新,这样管理项目是非常麻烦的。包管理器帮助你解决了这个麻烦,它们可以帮助你自动地将外部库和插件引入到项目中,这样你就不必专门手动更新外部文件了。包管理器有 yarn 和 npm,两者几乎相同,都只有安装的功能。你可以选择其中的任何一个,一旦学会使用其中的一个,另一个也就会了。

学以致用

当你对包管理器有了基本的了解之后,就可以在你制作的网页中引入一些外部库。例如你可以安装一些 Toast 插件,当用户点击按钮的时候,用 Toast 插件向他们显示信息;或者你可以创建一个登陆表单,利用一些表单验证库来进行表单验证。可以学习如何使用不同的库,并了解如何安装不同的版本。

CSS 预处理器

预处理器让 CSS 的功能更加丰富。CSS 预处理器有 Sass、Less、 Stylus 等。如果让我选择的话,我最喜欢 Sass。最近比较流行的 CSS 预处理器是 PostCSS, 它的作用相当于 CSS 的解析器,了解它的使用也是很不错的。它可以单独使用,也可以配合 Sass 使用。我的建议是先学会 Sass,如果你有时间的话可以再研究 PostCSS.

CSS 框架

你不需要再学习 CSS 框架,当然如果你想学习的话,也有很多选择。我最喜欢的 CSS 框架是 Bootstrap、Materialize 和 Bulma。但是结合现在的市场需求来说,我会选择 Bootstrap。

CSS 文件管理

随着项目的复杂程度增加,CSS 也会开始变得混乱而无法维护。我们也有很多方式可以更好地构建 CSS,以实现可伸缩性。例如 OOCSS、SMACSS、SUITCSS、Atomic 和 BEM。你可以了解下它们之间的不同,我个人更喜欢 BEM。

构建工具

构建工具可以帮助你构建、打包和开发 JavaScript 应用程序。这里包括校验工具、自动化构建工具及打包工具。

自动化构建工具有 npm、gulp、grunt 等。但是现在 Webpack 已经能够实现 Gulp 的很多功能,所以,现在通常都只使用 npm 来配合 webpack 完成任务自动化。你不必学习 Gulp,当然以后如果你有时间的话,也可以了解一下,看看它是否适用于你的项目。

校验工具有 ESLint、JSLint、JSHint 和 JSCS,但是目前大部分人都使用 ESLint。

打包工具有 Parcel、Webpack、Rollup、Browserify 等。如果必须选择一个的话,请毫不犹豫地选择 Webpack。Rollup 也很常用,但是建议将它用在库里面。在开发 app 的时候,请使用 Webpack。所以,现在请开始自学 Webpack,如果你愿意的话,了解一下 Rollup 也可以。

实践时间

恭喜你,你现在几乎已经可以自称为 JavaScript 开发者了!请继续用你学过的知识来开发一些东西吧。你可以创建一些 Sass 和 JavaScript 库。然后使用 Webpack 将 Sass 转换为 CSS,然后用 Babel 转换 ES6 代码。完成后,你可以把代码上传到 Github 和 npm 上面。

选择一个框架

我之前将框架这一部分放在基础知识的后面,但是现在我把它放到了 Sass、构建工具和包管理器的后面。因为框架要用到以上所有的知识,如果不先了解它们的话,可能根本看不懂框架。

框架也有很多选择,最近流行的是 React、Vue 和 Angular,而且 React 越来越火。但是,你选择它们中的任何一个都可以。对我个人来说,我更喜欢 React 和 Angular。作为初学者,你可能会发现,相对来说,Angular 会比较容易学,可能是因为它几乎支持所有常用的功能。例如支持懒加载的路由器、支持拦截器的 HTTP 客户端、依赖注入、CSS 封装组件等等。有了它,你可以不用再引入其他库了。但是从社区的讨论来看,React 更具优势,Facebook 的团队也一直在努力改进它。不要因为更流行而跟风,多多了解比较,你肯定会发现哪种框架更适合你。

我会在另一篇文章里给出我的对比分析和个人经验。这篇文章的重点是学习以及如何找到 Angular 和 React 的学习曲线。

下面所给出的学习曲线是有一定前提的,要求对 TypeScript 和 Rx.JS 有基本的了解。图表中的曲线并不意味着 React 不好,它们都有自己的特点,以后的文章中会具体介绍。

同样,需要你都做了解,并找到合适自己的。

选择好框架以后,你就需要学习一些关于该框架的知识。假如你选择了 React,你需要学习状态管理要用到的 Redux 或者 Mobx,学习哪一个取决于你的项目大小。Mobx 适用于中小型应用程序,Redux 更适合大型应用程序。如果项目允许的话,你可能并不需要使用它们,就用 React 本地的状态管理就可以了。

如果你选择了 Angular,你需要学习 TypeScript(开发 Angular 项目的时候也可以不使用它,但通常建议使用) 和 Rx.js,就算不用于 Angular 项目,也可以学习一下 Rx.js。因为它是一个非常强大的库,也可以用来进行函数式编程。

如果你选择了 Vue.js,需要学习 Vuex,它与 Redux 类似,但是是用于 Vue 的。

需要注意的是,Redux、Mobx 和 Rx.js 不是仅用于这些框架的,你也可以在普通的 JavaScript 项目中使用它们。另外,如果你选择了 Angular,请学习 Angular2+,而不要学习 Angular1+。

实践时间

现在你几乎了解了构建一个现代的 JavaScript 项目所需的一切知识。继续使用你选择的框架增加一些功能吧。你可以在 ideas 目录中获取一些灵感,随便选择一项就可以开始了!

完成这些后,可以开始了解如何衡量并提高性能。例如可以关注下交互时间,页面加载速度,测试分数等。

当你完成了上面所有的步骤,请了解下后端人员是如何使 web 应用程序运行起来的。

测试你的应用程序

不同的工具作用不同。我常用的工具包括 Jest, Mocha, Karma 和 Enzyme。如果你想选择一个新的工具,最好先了解不同的测试类型,查看所有的可用选项并使用最适合你需求的那一个。

静态类型检查器

静态类型检查器可以帮助你将类型检查添加到 JavaScript 中。你不一定需要学习这些东西,但是如果你能花几小时学会并保持使用它们的话,它们会让你如有神助。主要的静态类型检查器有 TypeScript 和 Flow。我更喜欢 TypeScript。你们选择自己喜欢的即可。

服务端渲染

前面所掌握的技能足以让你获得任何“前端工程师”的职位,但是不要停留在这一步。

了解服务端是怎样渲染框架的。框架不同,选择也不同。如果你使用的是 React,特别要注意 Next.js 和 After.js,Angular 是通用的,Vue.JS 的是 Nuxt.js。

以上大纲中可能还有不足,但它基本上包含了“前端工程师”所需的全部知识。其实最主要的还是要尽可能的多练习。开始的时候,你可能会觉得非常困难,感觉抓不住任何关键点。但是这种感觉是正常的,随着经验的增加,你会越来越熟练。如果你遇到问题,记得寻求帮助,你肯定会为有很多人愿意帮助你而感到惊讶。

  英文原文

https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流,共享一线技术,欢迎关注。

  活动推荐

PWA、Web 框架、UI 与动画、Node... 大前端的下一站在哪里?前端工程师的价值和成长路径是什么?GMTC2018 上,来自 Google、Facebook、BAT 等 60+ 国内外一线前端大牛,将与你面对面探讨大前端领域最新技术趋势和实践,想要升职加薪就快来吧!扫描下方二维码或点击“阅读原文”了解更多大会详情!

目前大会 8 折热销中,团购更优惠,购票咨询:18514549229(同微信)

 
前端之巅 更多文章 前端每周清单:TensorFlow.js,深入了解wasm-bindgen 在AI横行的时代,你为什么还要固守大前端? PWA登陆iOS了,但它还有这些缺陷 前端全栈什么鬼?K型人才什么鬼? 前端每周清单: D3 5.0,深入 React 事件系统,SketchCode
猜您喜欢 Halo 让你的工具更友好 也许这样理解 HTTPS 更容易 程序员面试的标准答案并不标准 nice服务端架构重构与演进 Linux 内核数据结构:位图(Bitmap)