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

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


转载地址:http://www.infoq.com/cn/articles/modern-frontend-developer-in-2018?utm_source=articles_about_Front-end&utm_medium=link&utm_campaign=Front-end#

阅读更多
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭