「入坑」前端开发，我有一些经验想和你分享

写在前面

最近身边有不少朋友想转行去做前端开发，然后跑过来问我，向我了解前端岗位，以及给他们一些建议等等；他们有的还没毕业，对于即将到来的社会毒打充满着迷茫和不安，有的已经工作两三年，突然觉得自己不合适当下这个份工作，想谋求一份别的职业。 选择一份职业不在于这份职业可以给你带来什么，而是你可以因此成为什么，这篇文章我会跟你聊聊关于前端的一些见解和「入坑」指南，希望可以给你的职业规划多一份参考和建议。

本篇文章中，你将会收获：

• 前端工程师岗位发展和分析
• 前端的发展前景和钱景
• 如何对自己当下的职业规划做出选择
• 前端学习路线的三个阶梯

本篇文章适合以下人群

• 即将毕业的计算机专业应届生
• 想要转行前端开发的你

关于前端开发这个岗位

不少人对于前端开发充满着各种误解，觉得就是写写网页 、切切图的，没什么了不起；前几年开始，市场上出现了一些可视化构建网页的工具和平台，可以一键发布，直接生成网页效果，有人就说，这样的话，前端开发是不是要丢饭碗了？前端技术发展是不是到达瓶颈了？前端的岗位是不是快饱和了等等... 往往提出这些问题的人，大多数都是不了解前端工程师和前端开发的人。 首先不得不说，在过去的一段时间内，前端工程师当时还叫做「网页设计师」，工作内容确实是写一些 HTML 和 CSS 样式，偶尔还打开 PS 切个图，放到现在，如果只会这些技能肯定是找不到工作的；其次，真正的前端开发工程师也绝不是程序或者人工智能可以替代的岗位，在过去的十年里，前端技术发生了翻天覆地的变化，当年的「网页设计师」们绝对想不到，前端还可以做后端的工作，还可以开发跨端 APP 和桌面应用，几乎可以胜任大部分的开发岗位，「大前端」的时代就这样来了。

前端岗位饱和了吗？

不管别人怎么说，我是完全不相信前端岗位在较长的一段时间内，会达到饱和的现象，不过可能会出现「前端」的定义上的转变，就像从传统的「网页设计师」向「web前端工程师」式的转变。 先不说别的，举个例子：微信小程序 2019 年的活跃账号数达 12.025 亿，小程序开发一度成为最热门的技术方向和前端岗位之一，而且做小程序的，可不只有微信一家；一个技术变革、一个新框架的出现、或者一个工具的发布，都有可能带动一批新的前端岗位出现。 前端岗位是刚需，自从前端岗位诞生开始，UI、后端的分工更为明确，UI 可以更专注的进行视觉设计，后端从前端中解放了出来，把经历放到业务处理和数据操作上，提高了工作效率的同时，还降低了沟通成本。随着对用户体验的不断追求，前端的复杂度也不断提高，总得来说，按照目前的市场来看，前端岗位的需求量不仅不会饱和，反而会不断的提升。

「前景」和「钱景」

在我眼中的前端开发的前景，它的发展会更可能的细分领域和专业，会出现更多前端相关的专业领域，而且会慢慢的和后端融合，成为全栈。 谈到薪资水平，目前的全国前端开发薪资水平差不多是 11k 左右，当然，这主要是一线城市带动的；在一二线城市，本科应届生的平均薪资可以达到 5-8k，1-3 年经验的可以达到 10-18k 左右，3 年以上的，平均薪资可以达到 20k 以上。 前端开发的平均薪资水平在整个软件开发专业方向来说，还是比较可观的，技术水平越高，薪资也就越高，从各大平台调查的结果，以及我身边朋友的情况来看，薪资水平跟文凭的关系不是特别的大，专科毕业也一样可以达到平均薪资水平。

如何对自己当下的职业规划做出选择

职业规划这个东西太广，我不好以任何形式的口吻教你些什么，在这我只跟你聊聊我是怎么做的，规划一件事情其实没别的，就是不断的做出选择罢了，而这最难的，就是当下的选择，很多人不能很好的规划自己的职业方向，不知道自己该干什么，其实都是纠结于自己当下要做出怎样的选择。 选择的时候，有个非常不好的东西，叫作「犹豫」，选择往往都是一开始看似有的是选择，到最后不得不做出的唯一一个选择。 向你推荐一个思维工具，叫做「终局思维」，就是通过你最终的一个目标，一步步的倒推，得到你当下的需要做出的选择。比如你希望自己可以成为某一行业的大佬，那不难可以推断出实现这个目标需要具备什么能力、知识以及各方面的资源，然后对比现在，缺什么，补什么就是了；终局思维就是找到最终的那个灯塔，然后看看现在，调整方向，往灯塔慢慢航行而已。

终局思维@2x.jpg

到这你应该不难发现，这个思维工具适合所有做选择犹豫时的场景，不管是对个人还是对企业的发展，这都是个非常好的工具：你只要想清楚了最终的一个目标，慢慢的倒推到现在，你一定可以做出当下的选择。

如何更高效的学习前端

如果你已经做好了当程序员的准备，那也一定要做好终身学习的准备，并且是高效的学习；技术和框架发展迭代的非常快，往往你旧的还没搞懂，新的就来了，持续不断的高效学习、积累经验是程序员的家常便饭。

保持代码量

好的士兵都是子弹喂出来的，程序员也同理，如果没有足够代码量的积累，你将很难胜任开发的岗位，而在工作中的代码量取决于项目，所以积累项目经验也同样重要。 对于即将毕业的学生来说，可以通过刷题的形式，保持每天都有一定的代码量；你还可以通过搭建博客、网站等实际项目积累经验，这在面试的时候可都是加分项。保持代码量不仅可以提升你的代码质量，还可以积累写代码的经验，在遇到问题的时候，可以更快的定位到问题出现的原因和找到解决方案。

少看多动

通常一个新手上路，都会买相关的开发入门的书籍，或者网上找一些视频案例，我不推荐这么做，并不是这些东西不好，而是当你在看书或者看视频的时候，很容易陷入一个误区，就是示例的代码看懂了，动手的时候全懵了，完全不知道怎么写。 如果学习编程只是看书或者看视频，从不动手调试，不亲手搭建环境，跟 Bug 争个你死我活的话，那你永远都在入门的路上，编程相关的书籍或者视频只是学习过程中的工具，看懂了不代表你学会了，你学会了不代表实际开发的时候就没有问题了。

切忌闭门造车

除非你有强于常人的自学能力，否则一定要切忌这种封闭式的学习，多逛技术社区，注重与他人的技术交流，多学习别人的代码实现，遇到实在无法解决的问题，可以向他人请教。 如果条件允许，建议多参加一些线下技术交流活动或者开发者大会，这对你了解前沿技术、提升技术水平以及认识一些行业大佬都是非常不错的途径。

与其写Demo，不如来真的

写再多的示例代码，都不如一次实际项目获益的多，很多人会说除了公司上班之外，自己没有什么实际的项目可以开发了，这显然不是一个很好的借口。 示例代码往往跟实际业务场景相差巨大，复杂程度就更不用说了，你永远不知道在用户操作的时候就发生什么，你也不可能从代码中预估到所有可能出现的 Bug。 亲手开发一个自己的产品，然后将它发布上线，服务一小批用户，然后不断的更新迭代，你总能发现这其中带给你的价值，你可以和你的用户来一次最直接的对话，你的代码可以直接影响你的用户。相比公司的项目，你的产品你说了算，按照自己的意愿去实现一个东西，还有什么比这更酷的事吗？

前端学习路线的三个阶梯

前端开发是一个入门门槛低，但进阶难度大的岗位，这里将这条学习路线分为“基础”、“进阶”、“高阶”三个阶梯，如果你是从零入门前端开发，那么这条路线或许对你有些帮助。

入门基础：HTML+CSS+JS

学习 HTML（超文本标记语言）标签，熟悉 HTML5 新特性，学会使用各种标签呈现网页内容，包括文字、图像、音视频、以及程序；在 web2.0 时代，你必须要学会使用 DIV +CSS 进行布局，当然，光学会 HTML 是不够的，它只提供网页元素，确定网页的骨架，要想网页更好看，你需要学会使用 CSS（层叠样式表）进行美化。 CSS3 是目前使用的样式版本，它诞生于 2001 年，你需要学会使用 CSS 的各种样式属性，配合 HTML 标签实现 UI 效果以及特效。 学习 JavaScript 可以让你的网页实现相关功能、交互以及业务逻辑，对于基础，你需要学会：JS 数据类型、面向对象编程、基本的关键字、指令、函数的使用、JSON、Ajax 的使用、原生 DOM 的操作、事件捕获、冒泡、代理、ES6 新特性等等。 学会了基础，并不代表你可以从事前端了，学会基础，还远远不够，好的前端工程师都是项目喂出来的，如果你仔细阅读过前端招聘的岗位要求，你会发现没有任何一家公司是需要原生 JS 开发的，甚至几年前大火的 JQuery 框架，现在也几乎见不到了。

前端进阶：前端工程化和三大框架

前端工程化的出现，彻底的改变了传统开发模式，让前端形成了一套开发体系和工作流，将开发流程、工具、技术栈等规范化和标准化，一方面是为了提高多人开发效率和降低开发成本，另一方面可以使前端独立出来，拥有自己的一套软件开发规范。 步入进阶，你需要了解或者使用各种库/框架、构建/管理工具、CSS/JS 模块化开发等，对于开发者来说，这些尤为重要。前端工程化思想提倡模块化和组件化，大概可以理解为将大型项目拆分成一个个模块，每个模块相互独立、耦合性低、开发难度小，再加上多人开发开发基于 Git 进行版本管理，大大提升了开发效率。 你可能多少了解过前端三大框架——Vue、React 和 Angular，大部分的前端项目和衍生的框架都是基于这三个去搭建和开发的，例如小程序跨端框架 Uni-app（Vue）、Taro（React 和 Vue）等等，进阶不要求三大框架都达到精通的地步，但需要了解，并且擅长使用其中的一个以上。

三大框架[email protected]

Angular 最早诞生于 2009 年，那时候还是叫 angularJS ，相对于当时盛行的 JQuery，它最大的特点是开发模式上的变革，例如借鉴了后端的开发模式——MVC、模块化、依赖注入等，这个框架被广泛用于 Google 的产品中。 对于初学者来说，Angular 是一个比较容易入门的框架，但深入后需要了解的概念很多，较难理解；其次，Angular 的文档较少，遇到问题比较难通过文档解决。 React 是 Facebook 在 2013 年发布的，虽然起步比 Angular 晚，但是在一些特性和性能上远远胜于 Angular，例如支持 ES6 语法，采用函数式编程，虽然入门门槛较高，但是其灵活的开发方式受到了更多开发者的推崇；React 渲染速度快且兼容性较好，甚至可以运行在 IE8 中。唯一的缺点是，它并不能算是一个完整的框架，需要借助 ReactRouter 和 Flux 等才能构建一个完整的应用。 阿里出品的 Ant Design 最早是支持 React，后来也陆续支持了 Vue 和 Angular，你可以从这些框架入手并学习 React。 Vue 是尤雨溪在 2014 年发布的，是目前国内最受欢迎和最容易上手的前端框架，绝大部分的衍生框架和组件库也是基于 Vue 编写，它借鉴了 React 和 Angular 的特点并做了相关优化，既有像 Angular 的模版语法，也有 React 的组件化体系，并且拥有足够完善的文档体系，对于初学者，建议优先入门 Vue，学会了其中一种，你会发现另外两个框架也不过如此。

通往高阶：寻找属于自己的发展道路

你会发现不仅仅是 Web 开发，前端还可以做很多东西，如下图：

大前端开发体系.png

寻找适合自己的开发方向是每个前端工程师都应该思考的问题，前端技术发展到现在，一个全栈前端就可以完成整个产品各个端的开发工作，你可以开发一个属于自己的产品，然后发布上线，持续的更新迭代，慢慢的让自己成为可以独当一面的工程师；你也可以针对开发中某一处的不足，提供自己的解决方案并开源出去，例如写一套属于自己的组件库等；你也可以往其它方向发展，人工智能、数据可视化等都是不错的选择。

写在最后

前端作为和用户最近的一个职业，注重美观和交互，更多的强调用户体验，我们会为了减少一丢丢的包体积而想办法优化，也会为了提高几百毫秒的加载速度而不断尝试。前端开发需要你有严谨和一丝不苟的态度，开发前做足准备，提交测试前充分自测，养成良好的编码规范，必要的地方写上注释，降低代码的维护成本。 写代码是个技术活，也是个艺术活，遇到问题优先考虑自我解决，养成独立思考的和解决问题的能力，实在不行再向别人提问。同样都是开发，这些都是你超越同行的必备能力。