前言
本文面向希望学习前端的人员，没有开发基础、或者有开发经验但不能准确把握前端工程师这个岗位具体情况的人员。
总体而言，这篇文章只是我回顾过去几年开发经历的一个总结时的副产品，因有朋友需要了解这方面的知识，特此写了一篇长文。如有不足，欢迎指正与补充。
前置知识：无，有正常的生活常识即可。
面向群体：无开发经验人员，有基础的开发人员可略过部分章节。
阅读时长：约6k字，15min，对于无开发基础的人可能要25min左右。
作者简介：前某厂工程师，团队前端owner，现就职于一家外企。掘金发布者即为本人。
前端做什么
首要问题是前端是做什么的，这个岗位来自于哪里。
用户界面
严格来说，前端是一个细分的岗位。尽管今天前端相关技术栈如火如荼，但是回到起初，它的职责是提供web服务中的用户界面部分。
我们说到前端，其实往往就在狭义地特指基于浏览器（或其他同类环境）的网页制作相关的技术。在约30年前，浏览器的功能还并不像今天这样强大，自然网页开发能实现的功能就相对有限，为了实现网页的动态效果，往往会通过服务端脚本的形式，给用户的每个请求返回不同的网页，如著名的PHP、ASP等技术。
由此，以前的网页开发是前后端耦合的，所以那时很少有专门的前端开发，往往是统称为Web开发，按照现在的概念，就是“后端兼职了前端”。
而在过去的二十几年间，用户的带宽逐渐增大、用户的设备性能不断提升以及浏览器能支持的功能不断强大——这几个方面的变化促成了浏览器本身可以实现强大的显示效果和交互效果，而网页开发逐渐由原来的概念逐渐向客户端靠拢。（我个人认为的标志性事件是Google发布Google Doc）
即开发者不再满足于提供“可交互的文档”，而是将大众平时在诸如PC桌面端软件、手机端App中使用的功能，尝试通过浏览器的方式提供。这给专业的前端工程师岗位提供了土壤。
近20年诞生了各种强大的前端框架与开发工具，构成了前端开发的基石。
岗位职责
那么今天的前端工程师的职责，是什么呢？ 这里援引百度百科上的话： 从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。
但同时，广义上说，前端工程师并不一定只涉及网页界面，其他的各类应用界面也可以是前端工作的一部分。从开发思路上说，前端工程师的工作和PC桌面端开发、手机App开发是相似的，都是客户端开发的思路。
前端学什么
前端也是软件工程师的一个分支，在成长过程中涉及的知识面肯定越来越广。但作为初学者，我们应当聚焦于主要的、最有利于工作的部分。
语言基础
软件工程师的一部分工作是编码，那么需要掌握相应的编程语言以实现自己想要的功能。前端工程师常用的语言有以下几个。 【此处援引维基百科】
Html
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
CSS
层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
JavaScritpt
JavaScript（通常缩写为JS）是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。目前，它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari和Opera）所支持。
JavaScript与Java在名字和语法上都很相似，但这两门编程语言从设计之初就有很大不同。JavaScript在语言设计上主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响，在语法结构上它和C语言很相似（如if条件语句、switch语句、while循环和do-while循环等）。
对于客户端来说，JavaScript通常被实现为一门解释语言，但如今它已经可以被即时编译（JIT）。随着HTML5和CSS3语言标准的推行，它还可以用于游戏、桌面和移动应用程序的开发，以及在服务器端网络环境运行（如Node.js）。
我对这几种语言的看法
尽管我们会说，这是三个“语言/Language”，但实际上只有Js可以称为编程语言。这里可以自行了解其他两者是什么，此处我们按下不表。
总的来说，这三者共同构成了网页，很多人会听说一些网页框架，但框架也是基于这三者，对这三者进行封装，简化开发，并提供一些优秀的实践/开发范式。
所以，对于前端工程师而言，这三个语言的重要性不言而喻。当下，初学者学习的重点应当放在JavaScript上。Html和Css应当以基本使用、学习常见场景为主。如果是ToC应用，需要关注较复杂的界面效果时，自然会去深入了解Html和Css。部分初学者会沉溺于一些好看的Css特效，但实际上这部分内容是类似于Trick的内容，不应当在初期投入过多精力。
框架与三方件
这部分是我们快速实现应用的利器。当下的软件工程师，早就已经不是过去事事都要亲力亲为的时代了。当下的开发，要善于借助社区生态，通过成熟的解决方案与实践，来完成自己的工作。正如Java程序员有Spring相关的生态一样，前端的生态也同样很丰富，只是要杂一些。
这里我不介绍每个框架或者具体的三方件，而是仅讨论什么情况下需要学习其中的某个内容。因为面对不同的工作，我们需要的技术也不同，前端到目前为止，还没有出现最佳实践，所以不能像Java开发一样简单地去选择某种生态。所以我们要做的是根据实际情况选择自己需要学习的内容。
我们这里提到的框架，都高度抽象了具体的Html、Css、JavaScript语言内容，即便你对网页的语言没有了解，也不妨碍你直接学习它们。但是我不建议这样做，学习者应当初步了解三个语言后再去学习框架。因为框架只是当下企业快速完成业务诉求的工具，并不是实现应用的刚需。
Vue
Vue是著名的MVVM框架（此处不赘述概念）。它上手很快，是很多初学者的选择，现在市面上的公司招聘也会要求掌握Vue。Vue目前有Vue 2与Vue 3两个版本，Vue 2已经基本停止更新，但仍是一个非常经典的框架，所以选择哪个版本进行学习，要考虑目标的工作岗位的要求。
我本人是通过Vue 2版本踏入了前端这个领域，这是一个我很喜欢的框架。
React
React的历史要比Vue稍长一些，从全球的范围看，它的热度要更高一些。它的官网对自己的定义是一个“构建用户界面的库”，尽管大部分人会认为这也是一个Framework。相较而言，React比Vue更加自由，其社区更活跃，有着更多的相关库，其构建界面的方式也不那么React（这里指响应式），更多的有immutable（不可变）的风格。
在国内，著名的Antd的其中一个实践就是一个基于React的界面库。可以说有很多大厂围绕React构建了丰富的社区生态。
其他
时至今日，利用JQuery构建的网页尽管仍然不少，但往往不会出现在新应用的开发中。
Vue和React很经典，但并不代表这是前端的全部。如Svelte、Next.js等其他构建前端应用的方式也非常多。对于初学者可以通过一个框架为主，先行入门，了解前端应用常见的开发思路。如果你无法通过介绍来理解框架到底有什么具体内容，那么以你的目标工作岗位需要的框架来学习即可。
同时，针对你的目标工作内容，应当补充学习各类专门的三方件。如你希望实现Graph相关功能，就需要学习类似G6的内容，如你想实现图表相关的功能，就需要学习EChart、G2这类库，等等。
工程化相关工具链
这部分是前端工程师理解应用的构建与部署的重要部分。我们写的代码并不会直接变成可使用的应用，而是要通过一系列的构建才能形成完整的网页应用。
这一部分的知识，我认为对于初学者来说可以经历一下几个阶段
- 暂时略过，聚焦实现
- 通过了解教学例程中所使用的构建方式，初步了解
- 专门学习相关工具，完整理解
常见的需要学习的工具链有以下几项：
Node与Npm
简单形容Node，这是一个可以在浏览器以外的环境执行js代码的引擎。前端的构建工具链目前大多都基于Node引擎。
而Npm则是Node自带的包管理器。说到包管理器，可能没有基础的人不太理解，简单说，即是我们高效地管理我们应用中的各种依赖项的工具。Npm之于前端开发，一如Maven之于Java，Pypy之于Python。
当然，Npm自身有一些缺陷，所以现在很多企业也使用Yarn、Pnpm这样的开源社区制作的包管理器，他们各有特点。
Webpack
Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。
Webpack就是运行在Node引擎上的。
其他
其他诸如Vite这样的构建工具暂时还不能动摇Webpack的地位。可以说前端开发目前需要关注的器件主要就是Node和Webpack。
当然，随着学习和工作的深入，我们也会面对更复杂的应用构建场景，需要用到诸如Lerna这样的构建辅助工具，本文不深入讲述。
版本管理
这一部分可以说是一个软件工程师的基本功。对于接触过软件开发的人来说，SVN、Git这样的版本管理工具应该是非常熟悉的。如果你是一名其他领域的软件开发人员或者在学校是软件开发相关专业的学生，那么你对这部分完全不了解的话，可以说是非常糟糕的。
当然，对于小白而言，首先要明确版本管理的概念。软件代码作为逻辑的集合，对代码的管理显然不能像写word文档一样，你改一句，我添一笔——尤其是软件开发早已团队作战乃至大军团作战的情况下，哪怕十几人的软件开发团队都必须要高度明确的代码管理，否则不需要我去描述，相信读者只是想象就预见，像写word一样去写代码，软件的质量有多么不可控。
（实际上即使是一个人写代码，都不可能把代码像普通文本一样去编辑，否则不出一个月你就忘记之前为什么写它了。）
所以踏入工作之前，或者说在学习过程中，学习者就一定要初步了解，学会使用相关工具的。
Git
本文的版本控制工具只提到Git，忽略其他的版本控制工具的原因就是Git实在太过流行，尤其前端工程师面对的企业大多不像嵌入式等领域的开发者们，需要维护的代码不会很古老，企业大多在使用Git作为工具。
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。
问题定位与调试能力
这部分有实际的工具使用，也有思维的培养与经验的积累。需要明确的是，当下软件开发的门槛多数时候并不在怎么实现一个新功能，因为这么多年下来，常见的各种功能、各类业务场景的实践大多都已成熟，如果你是一个层级不高的一线开发者，那么你并不需要成为一个创新大拿，成为什么“科学家”，你要成为的是一个合格的工程师。
那么门槛在哪里呢？怎么写出可维护的代码，在软件发生问题以及代码不能满足新的业务需要的时候，你能不能合理地修改代码呢？
这才是门槛。但对于初学者而言，这部分难以简单概括，本文按下不表。
计算机、网络、浏览器的原理
这一部分我称之为原理。
尽管很多人会越过这部分，直接去学习Vue、React这样的框架（甚至越过语言的学习），但不得不说，如果你是一个小白，或者说没有接受过计算机相关的专业教育，那么这部分我很建议去学习了解。并不一定要精通，但在学习、工作过程中，这些知识将对于你定位与解决问题有很大的帮助，也有助于理解“为什么会这样”。
这一部分对于初学者来说，是可以暂时放一放的。因为据我的经验，有过较完整的计算机相关基础的人入门前端是非常快速的，但恰恰是小白想转入前端领域，以找工作为目标的时候，他们根本没有那么多时间去从头学习这些。
所以尽管这部分只是很重要，但是建议在学习过程中结合实际场景与问题去补充学习。
总结
本文到这里已经接近尾声。希望这篇文章可以使读者对前端开发入门有一个总体的印象，并能起到参考的作用。如有不足，欢迎指正和补充。
