跳到主要内容位置

2021年最新前端工程师学习路线

[文章更新于 2021年07月01日]

距离首次发表这篇文章,已经过去一年半左右的时间了,但是前端总体的学习路径和发展趋势没有太大的变化,有一点需要注意的是,有关智慧园区的项目有增多的趋势,对于 Web 3D 建模类的技术可能会趋向热门,例如 WebGL 和 Three.js 等,设计师也可能需要接触 Blender 这个 3D 建模工具。

这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始,然后一路升级到高级工程师该掌握的技能,层层相扣,让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。

caution

注意:这篇文章中有推广链接,对你的阅读体验并没有影响,不过如果你通过链接购买了商品,那么会帮助 UP 主恰饭,以支持 UP 创作更多优质的内容。谢谢支持🍙!

俗话说知己知彼百战不殆,要成为一名前端大神,首先知道它是做什么的。单纯从工作角度看,无非就是写写前端样式,连接下后台 api,解析解析数据,然后显示给用户,核心逻辑是这样没错,只是这中间掺杂着无数个边边角角的问题,比如框架选择、性能优化、兼容性调整、工程化等等。不过呢,这些并不需要一次性掌握,随着一次一次完成工作任务,解决 bug,这些自然而然就学会了~

在正式开始之前,咱们先把心态放平,就像玩游戏,游戏满级也不是一天两天的事,满级之后也才是一个新的开始。。。无尽的追求完美~。时间上,掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间(看自己的意志力和上进心),之后就是在工作实践中不断的提升自己,时刻关注业界新闻,保持在科技的最前沿。工作是一个长期的事情,咱们静下心来慢慢学。

完整技能大图#

先来看 github 上一大神制作的路线图:

前端学习路线图

https://roadmap.sh/frontend

核心技能#

好了,相信你已经开始下定决心要成为前端大神了,那咱们第一步就是把前端的核心装备拿下,它们分别是 html, cssJavaScript。前端的初衷是开发网页来让其他人看的,可以向全世界分享信息,直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具,学好核心是前端工程师必备的素养。下边就是核心技能的简介:

HTML#

HTML 是用来编写网页代码结构的,它有一系列的标签用于显示不同的页面元素,比如用 <a/> 显示一个超链接,<img/> 显示一张图片,就跟写一个 word 文档一样,只是单纯用 html 只能写内容,不能进行排版和美化样式,如果让网页变得漂亮,需要 CSS。

学习 HTML :指南与教程

书籍:Web 开发经典丛书:HTML & CSS 设计与构建网站

CSS#

CSS 是用来美化 HTML 编写的页面的,通过一些语法选择特定的 html 标签,然后用一些属性来给它们添加样式,比如文字颜色,背景,位置,边距,定位等等,还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式,比如 flex、grid 等。

CSS - 设计 web

书籍:CSS 权威指南(第四版)(上下册)

JavaScript#

在写完 html、css 之后,咱们就可以写漂亮的页面了,那么接下来就是需要学习 JavaScript,让网页能和人进行互动,比如点击按钮弹出个对话框,处理用户输入的表单信息,添加一些复杂的动画,使用 ajax 加载远程数据等等。它可以直接操作 HTML 元素,给网页开发提供了无限可能~这里咱们一定要把 JavaScript 基础语法掌握扎实,可以观看我 B 站上的 JavaScript 视频:

JavaScript 基础教程 | 2020 年最新

JavaScript — 用户端动态脚本

书籍:JavaScript 权威指南(第 6 版)

书籍:Eloquent JavaScript 3rd edition (包括 HTTP)

网络基础#

现在咱们可以做成型的网站了,那咱们该如何让全世界的人看到咱们的杰作呢?那这里网络基础就派上用场了,不需要精通,只需要掌握几个基本概念就好了。

域名#

访问网站咱们都知道需要使用 url (网址),比如 www.baidu.com,这个 baidu.com 就是域名,域名可以从域名提供商购买,比如阿里云。在购买域名之后要通过 DNS 解析服务把它对应到一台服务器的 IP 地址上。

什么是域名?

阿里云

服务器#

服务器就是一台安装了服务器程序的电脑。用户用域名访问一个网站时,会有 DNS 解析服务把域名解析成 IP,再通过 IP 找到相应的服务器,服务器程序就把网站内容传递给用户的浏览器。咱们的网站就部署在服务器上,它也是从阿里云之类的提供商购买。

阿里云

Linux#

服务器的操作系统一般是 linux,它可以没有用户界面,可以节省很多 CPU 和内存资源,这样就要求咱们掌握一些常用命令,比如创建文件,切换目录,复制和移动文件,显示文件列表等。另外访问服务器常用的工具是 SSH 和 FTP,咱们需要通过这几个工具来从自己的电脑连接到远程的服务器,然后安装服务器程序和上传网站程序。

书籍:鸟哥的 Linux 私房菜 基础学习篇(第 4 版)

服务器程序#

常用的服务器程序有 apache、nginx,它们都是基于 HTTP 协议的,有了服务器程序,网站文件比如 html 页面才能发送到用户的浏览器上。

Nginx 中文文档

apache 中文文档

HTTP 协议#

协议好比如说医生开药方,写的龙飞凤舞,但是药房药师居然都看得懂~这个可以说他们都有固定套路来理解对方~那么在计算机领域,协议就是电脑之间用来交换数据的规则。HTTP 协议是用来在网络上交换和传输数据的,比如说咱们的网站 html、css 和 js 就是通过这个 http 协议来发送到浏览器的。

HTTP 概述

进阶技能#

上边核心技能都掌握了的话,你就已经超过一半的前端工程师了,接下来就是成长为更高级一些的前端工程师,这里的目的是除了理解一些高级的概念之外,还要提高开发效率,也就是用到所谓的框架。

响应式布局#

现在手机和平板差不多要比电脑都流行了,所以一个网站要适应不同尺寸的屏幕,有这种特性的网站就叫做响应式网站。实现响应式主要就是通过 css 的 media query 针对不同的屏幕宽度,编写不同的 CSS 样式。

响应式 Web 设计

兼容性调整#

网站需要在不同的操作系统和浏览器下都要保持一致。对于 CSS,可以使用 css hack 来对不同的浏览器加载不同的样式。 对于 JavaScript,则可以使用 Babel 等转化工具,把新的 JS 语法转换成旧的,或者使用 polyfill 加上浏览器不支持的语法。

跨浏览器测试介绍

UI 框架#

UI 框架提供了页面的基本 UI 样式和布局系统,比如按钮、对话框、轮播图,省了自己去开发,常用的有 Boostrap, Semantic UI, Tailwind CSS。

Bootstrap

Semantic UI

Tailwind CSS

SEO#

SEO 全称是 Search Engine Optimization,搜索引擎优化。咱们常见的百度、谷歌这些搜索引擎会定期爬取线上的网站内容,然后进行收录,网站内容质量优秀、结构良好、访问量大的还会排名比较靠前。为了给自己的网站增加曝光量,这就需要针对搜索引擎给咱们的网站添加一些内容,比如关键字。

如何带着 SEO 的思维将 MDN 的 Web 文档写的更符合搜索引擎展现

SEO 基础知识教程

Node.js、npm / yarn#

因为 Node.js 的出现,JavaScript 的开发可以脱离浏览器了,这样就产生了好多借助 Node.js 来写前端代码的方式,然后用相应的打包工具去打包成浏览器可用的代码。这样的好处是,咱们可以充分利用 node.js 的包管理工具来方便开发,比如使用 npm 或者 yarn 管理项目的依赖。

Node.js

npm

yarn

书籍:Node.js 实战 第 2 版

CSS 预编译#

咱们在写 CSS 的时候可能一段代码要重复好多次,写一连串的选择器,重复的属性组合等等。这时 CSS 预编译工具就派上用场了,比如 SASS、LESS,它们支持 CSS 选择器嵌套、定义变量、Mixins、函数、继承等等。

SASS

LESS

自动化工具#

自动化工具有 grunt、gulp 等,可以监控文件变动,或者做一些自动化操作,比如编译 SASS 或 LESS 的代码为 CSS 等。

gulp

grunt

React, Vue, Angular#

这里就不得不提当下十分热门的前端开发框架了,React、Vue、Angular 三大件。它们都提供组件化开发的方式,这就让前端开发模式发生了巨大的变化,以往以页面为核心现在转为了以组件为核心,有了这些组件可以方便的在不页面进行复用。另外基于状态的数据管理,也让改变组件状态变得十分简单。这三个框架可以都学,但是工作中基本上只会用到一个,深入一个就可以了。至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。

React

Vue

Angular

Ant Design

Element UI

模块化 CSS#

因为 React 等组件化工程的出现,CSS 分散在不同的组件中,很容易因为命名冲突而导致样式被覆盖,模块化的 CSS 开发方式通过使用 css modules, 或者 styled-components (css-in-js 方式) 工具能很好的避免这些问题,它们也提供了其它类似 SASS/LESS 的功能。

CSS Modules

styled-components

工程化工具#

所谓工程化的工具,也就是打包工具,前端项目的各种 JS、SASS 源代码可能分散的不同的地方,利用打包工具,比如 webpack、parcel,可以把它们打包成一个单一的 js 和 css 文件,它们支持按需打包,用到的代码才会打包到最终产品上,没用到的则不会。另外图片等静态资源也可以指定规则进行打包。

webpack

parcel

测试工具#

没有人想要不健壮的代码,在改动一个地方之后引起全局崩塌~,咱们写好的组件需要进行详尽的测试才能确保不出问题,另外也方便咱们工程师节省时间,因为只要添加的新功能保证测试结果还是正常,那么就不需要再人工去测试了。常用的 UI 测试工具有 jest, enzyme 等等。

Jest

Enzyme

Puppeteer

高级技能#

在把编写网页的技能掌握熟练以后,就要从多端开始拓展自己的技能了,另外还要深入已经掌握的技能。

TypeScript#

TypeScript 是微软编写的一款带类型的 JavaScript 语言,它的代码可以编译成普通的 JavaScript,但是编写的时候支持强类型,并且支持完全面向对象的形式。它的好处在于带有了类型之后,代码更容易维护,适合大型项目的开发。

TypeScript

移动开发#

移动开发包括移动的页面 H5 开发、小程序和移动 APP 开发,好在这些有统一的开发平台,使用 React 或者 Vue 就可以进行一次开发,多平台使用。React 生态的有开发移动 APP 的 React Native,开发多端平台的 taro。 Vue 有多端开发的 uni-app。

React Native

Taro

Uni-App

桌面开发#

桌面应用到现在还是有用武之地的,比如音乐软件,聊天软件,写作软件等等,这些也可以用前端技术开发,具体的工具有 eletron、proton native 等等。

Electron

Proton Native

静态网站生成工具#

静态网站因为是纯 html、css 和 JavaScript 网站,所以拥有最快的速度、对 SEO 搜索引擎优化友好,最适合用于数据不常变动的展示、博客类的网站的搭建,常用的工具有 hexo, gatsby, docusaurus 等。

Hexo

Gatsby

Docusaurus

SSR(服务端渲染)#

如果使用 React、Vue 等前端框架开发网站,那么最终的页面源代码是没有 html 的,因为它们是用 JavaScript 去动态生成 html 代码,这样对 SEO 很不利,不过有了 serer side rendering,服务端渲染技术,就可以解决这个问题,它是把 JavaScript 生成好 HTML 之后,再把页面发送给浏览器。常用的有 react 系的 next.js,vue 系的 nuxt.js。

Next.js

Nuxt.js

GraphQL#

GraphQL 是一种查询语言,跟普通的 restful 结构不一样,它是按照类型来组织数据的,不同的类型之间也会有对应关系,就像数据一样,前端开发者根据自己的需要编写 graphql 语句来按需查询想要的数据,它的这种模式非常适合 React 这种项目结构的开发。

GraphQL

Apollo

Relay

性能优化#

性能优化的概念比较广泛,而且根据应用的用户量、用户类别而不同。总体来说就是提高页面首次加载的时间、动画执行的效率、事件响应的效率。这些可以通过优化代码结构、文件大小、DNS 缓存、lazy loading 等来实现。

Web 性能

书籍:Web 性能权威指南

安全#

安全也是一个宽泛的概念,要了解 CORS(跨域资源共享), XSS(跨站脚本攻击), CSRF(跨站请求伪造) 等常见安全问题,也要了解 HTTPS 等安全协议,要尽量以周全的形式考虑,不要相信任何用户的输入,严格检查需要接收用户输入的地方。

Web 安全

书籍:Web 安全测试

工作与团队技能#

工作与团队技能是在工作中所必备的,无论是初级还是高级前端工程师,这些只要在工作遇到了,就都需要掌握。

Git#

Git 是一个分布式的代码协作工具,几乎所有的公司都在用。Github 是 git 的一个远程仓库,咱们可以把代码发布到 github 上,既可以作为公开的向全世界展示自己的代码、进行合作,也可以作为私有的只限自己或者公司内部使用。

Git

Github

书籍:精通 Git 第 2 版

Docker#

Docker 是一种新的虚拟化技术,介于虚拟机和操作系统之间,它所用的资源少,并且能自动化管理镜像的运行环境和集群。因为前后端开发的分离的方式,大型的前端应用也会部署到 Docker 上。

Docker

CI#

CI,持续集成,是一个自动化的部署过程,开发人员只需要改动代码,提交到 git 仓库,CI 系统会抓取代码进行打包部署并发布,节省了人工运维的时间。

Jenkins

ESLint 和 Prettier#

代码合作经常会有风格和规范不统一的情况。ESLint 除了可以检查语法错误外,还可以定义开发规范,比如缩进字符的数量、命名方式等,而 prettier 则可以根据一些规范自动格式化代码。

EsLint

最新技术#

WebAssembly#

Web Assembly 是浏览器新支持的编程语言,用于辅助 JavaScript。确切的说,它不是一个编程语言,咱们可以用它的编译器编译其它语言,用来编写更强大的功能,它目前支持 c++和 rust

Web Assembly

Web Components#

Web Components 是类似 React、Vue 开发的方式,但是是 JS 原生支持的方式,不再需要依赖额外的库。它的核心概念有 Custom elements(自定义元素),Shadow DOM(影子 DOM),HTML templates(HTML 模板)。

Web Components

WebGL#

WebGL 是基于浏览器的 3D 绘图技术,能够利用 GPU 提高绘图效率。此技术的出现带动了 360 度全景参观功能,因此可以用于智慧园区、电子商务、科学技术等,需要大量模型展示的地方。

与 WebGL 相关的,最流行的框架是 Three.js

推荐相关书籍:

WebGL编程指南

HTML5与WebGL编程

Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)

最佳实践#

在前端开发过程中有一些最佳实践需要了解,比如 JavaScript 的设计模式、组件设计原则、代码结构等。

JavaScript 设计模式

持续进步#

在掌握了上边所有技能之后~咱们等级就算满级了,现在就是真正的开始了,要不断精进自己的技能。前端技术的发展相比其它技术要快的多,咱们要时常关注一些前端新闻还有业界大佬的博客或微博,自己主动去搜索一些新的前端库或者设计模式,然后应用到工作中去,这样才不至于落后。另外,因为好多技术都是外国人写的,所以要想得到第一手且最准确的消息,一定要把英语学好,一些包和工具的官方文档就算是靠着翻译也要把它们看懂,相信我,过不了几天,你会发现需要查的词越来越少,阅读速度也越来越快。

个人经历#

我在上学的时候学的是 Java 开发,那时候是前后端整体开发,前端主要就是 HTML,CSS 和 jQuery。我在找到的第一份 Java 开发的工作时就被迫见识到了前后端半分离的开发方式,那时候是 2010 年,前端库用的是 ExtJS,后端 Java web 开发框架用的是 struts2,来提供 JSON 数据,当时也是摸索了一阵子才彻底弄明白这个开发过程。后来在做自由职业的时候,又用 PHP 做过几个全栈的网站,前端那时候接触了 Bootstrap 框架,然后又摸索跨浏览器兼容性调整,知道了哪些 CSS 属性只有在哪个浏览器下才能生效。那个时候是 2012 年左右,html5 和 css3 已经开始流行了,然后我就把几个新出来的、觉得好玩的标签写了写,比如<video /><audio />。再后来就又在业余时间接触了 Node.js,当时也不懂它是个什么玩意,所以就没咋去了解。

直到 2016 年,去美国读研,室友同学学了 web 开发,然后我才体验到了前端已经发生了天翻地覆的变化,于是趁着暑假,把 Node.js 这个东西搞明白了,无非就是个运行环境。。。然后看了下网上的意见,觉得 vue.js 在国内用的多,所以就看 vue 的官方文档开始学习,看完基础之后,就做了一个实战项目,模仿了一下网易云音乐的 UI,当时 CSS flexbox 布局已经定型了,我就用它来对页面上的元素进行布局。后来发现 web 端不好选取本地的音乐进行播放,而又当时室友正在学 eletron,就正好一想可以用它练习一下,就把它做成了桌面版的,用了 howler.js 添加了音乐播放、快进、快退功能。再后来又异想天开,把配色改了改,改的也不太好看,接着开学了就作罢了。

回国之后,因为我在美国主修的还是云计算和企业软件开发,所以想找找后端开发的工作,但是后端所用到的库也都发生了变化,不过还好有学分布式系统,有丰富的理论,我觉得面试肯定没问题,,实际情况是到处碰灰,面试的看我没相关工作经验,框架也没用过,都表现出特别不懈一顾的厌恶情绪,好嘛,我也不是没志气的人,话不投机半句多,走人~后来一想在学校的时候对前端还是有兴趣的,一番搜索调查后,我又把目光描向了 React,看了几天官方文档之后就去面试。。。我这里十分感谢招我进去的两位经理大佬了,给了我机会去学习,去成长。这是 2018 年 7 月,我转型成了前端工程师。公司只有我一个前端 web 端,入职当天下午就开始给我分配任务,开发一个影响力榜单申报系统,超多表单,超多验证规则,要 4 周也就是一个月的时间内完成,压力也是蛮大的,当时头儿让我用 dva.js 来开发,当时听也没听过,就去它的官方网站看了看,基本是基于 model 形式的去管理状态,不过后来发现这种状态管理起来也还真是费劲,经过一番折腾,外加周末也加加班,这个项目算是按时搞定了,期间有无数的 bug 和需求变动,经过这些我对 React 组件化开发的方式有了彻底的认识。

后来第二个项目是做一个中台项目,因为有技术大佬实现了 GraphQL 接口,我趁机体验了一把 React 与 GraphQL 的结合,那真是相当的爽,再也不用手动管理 API 请求和请求的状态了。我在谷歌上搜索了一下 React 连接 GraphQL 的库,一个是 Relay,一个是 apollo,对比了一下两者的官网文档上的教程,觉得 Apollo 比较好用,就按着文档学起来,再结合着 GraphQL 的官方文档看看它的结构定义,然后把这些慢慢的用到了项目里。另外,当时关注 React 新闻发现 React Alpha 版出了 hooks,我想这个系统既然也是内部用,就用了这个版本,参考 React Hooks 官方文档,写了点例子,又发现不少问题谷歌 StackOverlow 等等一通查,终于把它搞明白了,之后在项目里发现真是解放了。。。再也不用定义 class 了(除了异常捕捉组件),逻辑和表现也可以分离了,效率大大的提高。

2019 年做了鹰眼投研这个老板的项目,相当大的一个项目,大概有 40-50 个页面,100 多个组件,由我主领,技术总监和一个合作同事参与共同开发的,耗时大概 3 个月,期间我搜罗、接触了形形色色的前端库,项目的样式是基于一个 css-in-js 库,styled-components 开发的,它可以把组件连同样式一起组件化,我还用 Apollo Server 写了 GraphQL 的 server 方便接口调用,又用了 ECharts 配置大量的图表,有柱状图、线图、热力图、中国地图...,还用 websocket 实现了聊天的客户端,唯一没有用到的就是 redux,这个玩意对于这种多页的大型应用来说,并不实用,一是模板代码太多,二是没有太多需要保存全局状态的地方。而对于这种大型项目,使用 React Hooks 构建可复用的组件和逻辑非常适合,在这个项目里好多页面都用到了筛选表格,我把筛选的逻辑写到了 hooks 里边,然后定义了几种通用的筛选样式,让每个有不同筛选条件的页面只需要按需组合就好,分页也是一样的道理,所有带分页的组件都是使用分页 hooks 实现的,还有其它一些 hooks,比如请求后端数据等。这个项目中用到了几乎这个路线中所有提到的技术,从中学到了不少的东西。

这些就是我个人的一些成长经历,我自己擅长的可能就是对一个网站进行组件化分析和拆解这样,争取做到一行代码实现一个页面这种效果。

总结#

这篇文章尽可能详细的列举了前端工程师该掌握的技能,但是根据工作要求的不同,一些细节的框架可能没有提到,不过相信咱们在经过这么久的学习、打怪升级之后,那些个小框架都不在话下。有了良好的基础,以后咱们在工作中都能节节高升~走向人生巅峰!