前景

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

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

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

问题 1:什么是前端?

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

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

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

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

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

H5HTML 5HTML 的一个版本,是 网页开发 的一个基础语言,具有里程碑意义,在 H5 出现之前,还没有 前端 这个词汇,当时做网页开发的被称为 网页制作,俗称 切图仔, 而 H5 出现以后移动互联网同时也火了,因为移动端没有万恶的 IE 浏览器,对 H5 的支持非常好,所以被广泛的应用在移动端开发,所以很多招聘信息招移动端开发,都称为 招 H5,实际上这时候他们所说的 H5 已经是 HTML 5CSS 3javascript的集合,而不是单纯的说 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,工作之后再慢慢回头看这些问题,提升编程思想。关于 JavaScriptECMAScript 之间的关系如果还不是很清楚的同学,可以参考 阮一峰 老师的 《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. 全栈工程师,前后端通吃。
  3. 前端架构师,主攻性能提升,底层架构。
  4. 微信开发
  5. 移动端开发

发展规划选择有以下几种,数字对应上文序号:

  • 1 > 2 > 3 按顺序逐步升级
  • 5 > 4
  • 4
  • 5