写点什么

2018 年,现代的前端开发者应该学习哪些东西?

2018 年 4 月 18 日

在文章开始之前,先简单的介绍一下我自己以及文中所提及的学习大纲。过去的 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 应用程序

当你完成了上面所有的步骤,请了解下后端人员是如何使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

感谢无明对本文的审校。

2018 年 4 月 18 日 17:4510542

评论

发布
暂无评论
发现更多内容

架构师训练营—第十一周学习总结

Geek_shu1988

架构师训练营 1 期第 11 周:安全稳定 - 总结

piercebn

极客大学架构师训练营

架構師訓練營 week11 作業

ilake

第七周-作业

Geek_0b0f83

软件设计的设计模式

简简单单

架构师训练营 2 期 - 第六周总结

Geek_no_one

极客大学架构师训练营

架构师训练营第十一周作业

月殇

极客大学架构师训练营

架构师训练营 2 期 - 第 6 周命题作业

Geek_no_one

极客大学架构师训练营

Week7总结

lggl

总结

架构师训练营 2 期 - 第 7 周命题作业

Geek_no_one

极客大学架构师训练营

你真的理解什么是创新么?|技术人应知的创新思维模型 (1)

Alan

创新 思维模型 技术人应知的创新思维模型 28天写作

软件开发人员的软实力之一:精细度

boshi

职业 随笔

架构师训练营 3 期 第二周作业

ihiming

11周作业

橘子皮嚼着不脆

Week7-作业

lggl

作业

Gson 中的一个坑

Rayjun

Gson

性能优化总结

幸福小子

性能优化

性能压测的时候,随着并发压力的增加,系统响应时间和吞吐量如何变化

幸福小子

性能分析

第7周作业

Rocky·Chen

压力测试

十一周总结

orchid9

架构2期-第七周作业(1)

浮生一梦

极客大学架构师训练营 第七周 2组

架构师训练营第七周学习笔记

李日盛

笔记

造车失败后投身机器人和AI,我笑戴森太疯癫,戴森笑我看不穿

脑极体

第十一周作业

fmouse

极客大学架构师训练营

第二周学习总结

简简单单

回溯解决电话拨号字母组合,swift:Subscripts下标的花式玩法,swift5 Auto Layout入门,John 易筋 ARTS 打卡 Week 29

John(易筋)

ARTS 打卡计划 回溯算法 autolayout swift5 xcode 快捷键

架构师训练营—第十一周作业

Geek_shu1988

第十一周总结

fmouse

极客大学架构师训练营

架構師訓練營 week11 總結

ilake

架构师训练营 - 第十一周 - 作业一

行者

第七周学习总结

晴空万里

InfoQ 极客传媒开发者生态共创计划线上发布会

InfoQ 极客传媒开发者生态共创计划线上发布会

2018年,现代的前端开发者应该学习哪些东西?-InfoQ