前景

近日偶然间入了一个 全栈架构师 的微信群，可明明是 全栈架构师 的群，可里面讨论、交流的却是极度 小白 的问题，可能是群主推广的问题吧，经过几天的交流我发现，大家讨论的比较多的问题都与前端如何上手有关，对前端市场的不明确，对前端技术栈的迷茫等等，让我回想起多年前我刚步入前端开发的场景与心情，于是我决定，专门写一篇，前端从 0 到 1 相关问题的博文，以一个过来人的身份，来给大家做个引路人，希望大家不会像我从业一样 山路十八弯。

Q & A （本文以问答形式来探讨前端问题，如有补充问题，可在评论区留下。）

有些部分是针对对前端完全不了解的新人来讨论的，如果已经有所了解的同学可以直接跳过，文笔不好、原创码字，老鸟勿喷，谢谢！

问题 1：什么是前端？

什么是前端？前端的定位如何？ 首先得说说这个 网站建设 / Web开发，顾名思义，就是做一个网站（最初是没有移动端、小程序的），大致流程如下：

  1. 产品（老板）设计原型图（草稿），与客户洽谈；
  2. 谈妥了之后，设计师按照原型做设计图；
  3. 设计定稿了之后，设计图交由前端开发制作网页；
  4. 后端设计数据库，接口，与前端对接数据；
  5. 测试工程师测试网页或者功能是否正常满足预期；
  6. 项目上线发布；

由此看出，前端开发工程师，是处于 网站建设 的一部分，一个项目，应该是由一个开发团队功能推进的，与之搭档的应该还有: 产品经理、设计师、后端开发工程师、测试工程师、运维工程师等，至此，你应该已经了解前端的基本定位，或许还不是很明确，我们继续说说前端与后端的区别:

  • 浏览器展示的网页，以及网页上的交互（特效）等等，由前端完成;
  • 网页上的数据，举例: 登录的账号密码、商城的产品价格或库存等等，由后端数据库提供;
  • 用大白话说就是前端负责展示，后端负责提供与维护数据，而前端从后端获取数据并展示出来则称为前后端对接；

问题 2: 为什么很多公司招 H5, 跟前端有什么区别吗？

H5 即 HTML 5 是 HTML 的一个版本，是 网页开发 的一个基础语言，具有里程碑意义，在 H5 出现之前，还没有 前端 这个词汇，当时做网页开发的被称为 网页制作，俗称 切图仔， 而 H5 出现以后移动互联网同时也火了，因为移动端没有万恶的 IE 浏览器，对 H5 的支持非常好，所以被广泛的应用在移动端开发，所以很多招聘信息招移动端开发，都称为 招 H5，实际上这时候他们所说的 H5 已经是 HTML 5、 CSS 3、javascript的集合，而不是单纯的说 HTML 5 这一门语言。H5 是前端的一部分！

问题 3 前端现状如何？

  • 最初的 网页制作 后来发展成 前端工程师、甚至因为 nodejs 的出现，可扩展到 全栈工程师, 所以前端相较后端来说，发展上限更高；
  • 技术更迭快, 技术面越来越广, 各种ES（JS）版本、各种构建工具、企业级框架，混合APP, 微信小程序, 百花缭乱, 如果不明确发展路线, 很容易走弯路；
  • 由于上一点，导致现在市面上的初级前端泛滥、中高级稀缺，大部分应届生出来干不了多久就 迷路 了, 能找回来的寥寥无几，能突破技术瓶颈上升高级工程师的更是少之又少；
  • 合久必分，前端现在已经包罗万象，涉及面太广，技术栈量太大，所以必然会分流出几条发展路线。
  • 如果能保持持续学习，并能理清楚自己的发展规划，无论哪条发展路线，前端的前景都是好的（目前薪资也是可观的），但是如果只是初级就很难找工作，因为门槛低。

问题 4：如何高效学习？

  1. 选择大于努力！

    • 理清楚技术栈，制定好学习路线，明确目的的学习

  2. 费曼学习法

    • 教学式学习，将自己学到的东西尝试教给别人，同时自身加深印象，如果没有可以教得对象，可以写文章的形式来讲述，把未来看你文章的每个人都当成你的教学对象

  3. 分类记忆

    • 举例：html标签太多，记不下来，我们分类记忆，块级元素有哪些、内联元素有哪些；

  4. 刻意学习

    • 在学习一个知识点的时候，做好笔记梳理，以后在利用碎片时间，反复加深记忆，举例: 今天学习了一个知识点，并且做好了笔记，睡觉前、或者洗澡的时候或者任何其他脑子空闲的时候，刻意回想一下，今天学习的内容，如果想不起来，回头翻一下笔记，看看是忘记了哪一块，如此反复！

  5. 项目中学习

    • 自主开发一个项目，一点一点的开发过程中，自己就会产生很多思考，有问题就上网查，解决问题的成就感会慢慢让你对编程产生兴趣，而兴趣是最好的老师。

  6. 造轮子

    • 在没有独挡一面的能力时，那就找一个模仿对象，看别人怎么写，照着写，尝试理解别人为什么这么写。

问题 5：是否应该参与培训机构？

关于这点，也就是我个人的思考，并非打击针对哪个培训机构，如果有被冒犯到，还请谅解！

前端相较其他的专业来说，比较特殊，知识面广，量也就多，技术更迭也快，培训机构通常都是4个多月一个班期，而4个多月时间这个课程大纲怎么安排都是很难学好的，时间不够，而且因为要系统化培训，有很多技能可能工作用不上也会列入课程大纲内，所以往往出来的学员都是知道的多，能熟练运用的技能却少，也没有实战项目的经验，工作自然难找，4个月一批，一批，又一批，所以导致市面现在已经是初级泛滥，所以我的结论是，培训机构适合一些没有人引导、自己又完全没有接触过这个行业的新人是可以考虑去的(可以入门)，而自己拎得清的且自律有决心自学的，完全可以利用互联网的力量，自学成才。

问题 6：学习渠道

  1. 视频教学

    • 哔哩哔哩
      内容多、杂，但免费，如果会挑的话还是能找到一些不错的教程。

    • 慕课网
      程序员的梦工厂，专业的教学，分类明确，免费视频 可入门，实战视频（收费）积累实战经验，目前还有3门与前端相关的 体系课程，分别是 前端工程师，大前端，Web前端架构师，可根据自身情况考虑选择，类似培训机构。

  2. 各大程序员聚集的社区网站, 上面有很多优质的文章，以及系列课程。(排名不分先后)

  3. 官方文档，看文档比看视频来得更快，网上很多文章，或者教程都是基于官方文档衍生出来的，所以学习时应该详细的阅读对应的官方文档，举例：学 vue 就看 vue 的文档，反复看！

  4. Github，参考别人的项目源码，分析别人的代码，这需要一定的代码阅读能力。

问题 7：前端技术栈的分流？什么重点学，什么技术了解即可?

  1. HTML、CSS，没什么好说的，这两项基础必须熟练掌握。

  2. JavaScript / ECMAScript 6， 如果现在入坑前端，推荐直接从 ES6 起步，以免被 JavaScript（实际上是一个东西，版本不一样而已）的一些麻烦点给绕坑里，打击到信心，例如: 闭包、地狱回调、原型链等等，实际上这些坑大部分在新版本里已经有新的 语法糖 或是 API 或是其他新特性给解决了，新人应该以快速上手工作为主，直接学习 ES6，工作之后再慢慢回头看这些问题，提升编程思想。关于 JavaScript 和 ECMAScript 之间的关系如果还不是很清楚的同学，可以参考 阮一峰 老师的 《ECMAScript 6 入门》 一书中的 ECMAScript 6 简介。

  3. jQuey 了解即可，现阶段还用 jQuery 的公司，应该是讲求效率要快，而且项目对性能要求并不高，因为 jQuery 插件库庞大，现成的插件多，可以拆箱即用，正常情况下，jQuery 因为没有模块化，已经逐渐被淘汰了。

  4. 框架, 三选一，推荐 Vue，轻量级、社区活跃，上手相对容易很多，其次推荐 React，学好其中一种框架以及涉及的核心插件，例如：vue-router、vuex等，既可找到对应技术栈的公司工作。搭配学习的还有主流的 UI 框架，框架的脚手架配置最好也做一些了解。

    • Vue
    • React
    • Angela

  5. 工程化构建工具，有很多种，这里只列出相对流行的几种，新手选择一种学习即可，推荐 Webpack，如果对项目工程化感兴趣，可以深入学习，向 前端架构师 方向发展。

    • Webpack
    • Gulp
    • Grunt
    • Browserify

  6. nodejs，新手入门建议了解即可，基础牢固稳定之后可以扩展学习，向 全栈 尝试。

  7. 微信小程序、公众号，建议要么专攻要么放弃，如果专攻 微信开发，上述内容都可以暂时不学，关联性不大。

  8. React Native，移动端开发的重磅框架，与其类似的框架还有很多，如果专攻 移动端开发 的同学，可以根据实际情况选择性的学习.

上述内容, 我们可以分析得出结论: 当前的 大前端时代, 至少有以下几个方向可以发展:

  1. 业务型前端工程师，比较初级，会基础、会用框架写业务代码即可，入门首选。
  2. 移动端开发，包括微信公众号、小程序，混合app等，对移动端感兴趣的可以选择。
  3. 全栈工程师，前后端通吃，需要对 nodejs 掌握比较深，难度较高。
  4. 前端架构师，主攻性能提升，底层架构，三五年以上的前端可选作进阶。