刚好周末和朋友聊起“前端从受鄙视到变得重要”这个话题,感慨前端这四年来的发展,遂有本文。

1. 前情提要

毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位。切图狗,写网页的这种侮辱性绰号绑在前端开发身上。我自己体验到的一个很明显的标志是:招聘网站上,前端开发的工资是其他开发工资的90%甚至更低。

在知乎一个2011年的前端地位问题(《如何改善国内前端开发行业的尴尬地位?》)中,包括贺师俊老师都承认这种尴尬确实存在。但是,30年河东30年河西,到了2018年,前端已经成了炽手可热的岗位。现在如果开一家科技公司或者组建自己的一个团队,要是还没有自己的前端,那我只能说你这家公司还不上台面。包括最近今日头条和拼多多在疯狂招人,前端也是最需要的岗位之一。

究竟是什么原因,导致前端在短短的几年时间里,从一个受尽白眼的菜鸡坑,一跃而成为一个重要的、被广泛需求的开发岗位?这种被重视的情况能存在多久?红利下又有什么样的隐忧?前端开发应该如何发展自己才能成为TOP5?本文将根据我自己的思考回答这些问题,也非常非常欢迎大家留言探讨。

注:本文中的前端都是指H5开发,非大前端,不包含iOS和Android终端开发。

2. 前端发展线

2.1 蛮荒时期

应用设备:PC
技术栈:LAMP

这一时期也是前端最被鄙视的时期——坦白说,就没有什么前端概念——在这一时期,前端是被一群人瓜分的:设计师通过DreamWare来做页面,应用开发和后台开发通过JSP、PHP来做。路人甲乙丙丁,是个人就能来前端插一脚。业务逻辑都放在后台,页面上没什么动效,也没有高大上的交互。最惨的是,前端大量依赖后端去实现,要想混出个头必须要会PHP或者JAVA,不然命根子在别人手上,简直寸步难行。

这一阶段的技术栈是LAMP(Linux+Apache+Mysql+PHP)。看这些名词就知道,那个时期的前端,真的和前端没什么关系。被鄙视也是正常的

这段时期对应着我的大学时光,那时候,我就就是靠着JAVA+JSP+模板网站上随便下个UI模板,混日子做网站,赚得了第一桶金。

2.2 前端时期

这一阶段其实可以分成两部分来说,一部分是MVC时代,一部分是MVVM时代。

2.2.1 MVC时代

应用设备:主要是PC,少量的移动端界面
技术栈:AJAX,JQuery, CMD/AMD,Grunt/Gulp

当有了AJAX之后,前端终于能和后端做解耦了。同时,因为PC的普及和网络性能的提升,人们也希望网页能有更好的用户体验。MVC框架应运而生,不过,受限于各种自我放飞的浏览器,前端能做的事情仍然少的可怜。

这个时候的技术栈是JQuery库,那时候会JQuery就代表会前端,要是你还读过JQuery源码:“哇,兄弟你屌了,哪里高就啊?”

不过大部分的前端工作都是在做浏览器兼容,直到现在,我一想起IE还能瞬间举出几个IE6,7,8的坑。现在的新人可能还不能深刻的这些兼容性让前端工程师有多么抓狂。举个例子,直到2017年,我去参加JSConfig大会,还有个公司把只支持Chrome浏览器作为一项福利写在用人告示上。

在这个时代,设计师和后台已经开始放弃前端了,不过我猜怕麻烦的心胜过了对技术的畏惧,因为我不止听一个人说过:让我写CSS/浏览器兼容,我头就疼。

MVC时代的后期,前端逐渐开始有了一点工程化的影子: 模块化编程有CMD/AMD,构建有Grunt/Gulp,编码约定有Jslint/jshint。我们终于不是在一个JS文件里面写写写了,你以为可以翻身农奴把歌唱了?并不是。

移动端迅猛发展的前期,iOS和Android这样的终端开发才是这个社会的主流,前端开发受限于网络速度和没有统一的Html标准,还是不受重视。

2.2.1 MVVM时代

应用设备:移动端,PC端
技术栈:Angularjs,React,Vue,ES6,HTML5,CSS3,Webpack, PostCss,Flexible, Viewport,ESlint

Chrome V8引擎的出现、H5和ES6标准的实施,补齐了前端最后一块短板。前端可以肆无忌惮的彰显自己的存在感:更炫酷的人机交互,更流畅的用户体验。同时,4G网络的普及,也让前端也正式迈入了移动端的开发。

如果说在MVC时代终于体会到前端也算博大精深(主要是前端的优化和兼容,代表人物张鑫旭),那么在MVVM时代则真正体会到了前端的魅力。

不同的框架和新技术如同雨后春笋一样疯狂涌现。作为一个前端,尚不敢说自己掌握了所有的技术,更勿论其他开发了。前端和其他开发之间第一次有了鲜明的壁垒:其他开发当然也可以来做前端,不过要想做的好,学习代价大到令人发指——而这往往是不能被接受的。

在这个时期,前端也不甘心只做个页面或者移动网站,做了很多的类APP尝试,诸如PWA,微信小程序。前端开始正式侵吞终端开发的生存空间。

2.3 全栈时期

应用设备:服务器
技术栈:Express, Koa, Eggjs

单做前端,终究要受到服务器的限制。Node的出现令前端开发拥有了控制服务器的能力。正式宣布广大前端开发向接入层迈进,抢了应用开发的饭碗。

当然之前有些前端开发也会PHP,但是偏PHP的那叫应用开发。现在,使用同样的JS就能控制服务器,更不用提Node在SSR上的先发优势(PHP使用js扩展也能做,不过我想只有应用开发才会干这事)。前端控制了接入层之后,后端彻底沦为了前端的接口提供方。之前的跨域,gzip压缩这种求爷爷告奶奶的事情,自己就可以完成了。

可以说,Node拓展了前端的地盘,这时候,前端也不再被称之为前端,而是改称全栈开发

2.4 未来

应用设备:全部终端,服务器

移动手机的普及让iOS和Andriod为首的终端开发享受到了红利,而随着5G网络的推进[PWA][3]被支持,前端开发也将迎来最大的一波红利。在可预见的将来,前端受益于灵活的部署和安装,在移动端开发中比例会逐渐加重。

我甚至认为,前端会成为终端开发的最终解决方案,包括但不限于手机,电视,车载中控等等。

项目 = 前端 + 大数据/AI

3. 个人发展思路

3.1 遇到的问题

上面说到过,前端不仅现在火爆,而且还将在继续火爆的路上走很久。但是在前端开发技术的提升上,我也会遇到了很多的问题,具体如下。

3.1.1 组件太多,浮在表面

毋庸置疑,会使用某项技术当然是最重要的。但是,如果在学习技术的时候,如果只停留在学会使用的层面,是远远不够的。

只学习表面的使用,首先是很容易忘记,其次是遇到了问题不能迅速解决或者定位。整个人都会产生一种明明用过,但是实际上一问三不知的感觉。

就我自身而言,我最讨厌的一种感觉是:

A: 听说你用过XX?
B:嗯
A:那你能我讲讲它的XX逻辑吗?为什么要这么写,我没看懂哎
B:(⊙o⊙)…

而且现在框架和组件太多,浮在表面的另一个坏处是对各种框架和组件都了解不深,在技术选型时会遇到迷茫的抉择。

3.1.2 基础不牢,难以接纳新技术

当我们去接触一项新技术的时候,有时候会觉得文档晦涩难懂,怎么看也很难看懂。排除小概率文档确实不咋地的情况,大部分情况是我们缺少了这部分的知识体系基础

举个很简单的例子,去补充一个完成了一部分的拼图,一定比拼一个完全空白的拼图容易。

如果回顾一下前端这些年的技术栈,你会发现前端的技术更新是最快的(远快于其他各端开发)。如果难以接受新技术,就会大大降低自身的价值,我想这是作为一个有梦想的工程师都难以接受的。

注:前端技术更新快的原因:

  • 零历史负担:代码随时可以更新,无需像终端那样等审核,也无需像后台那样要支持多个业务不能随便变。
  • 硬件更新带来的红利:浏览器性能的提升,移动手机的普及,4G网络的应用,前端网页有大量的需求
  • 更广的技术范围:前端H5, 接入层Node。相比起来终端开发和后台开发都只有自己的一亩三分地。

3.2 采取的策略

谈问题只能发现不足,有策略才能不断提高。论坛上也经常也能看到如何有效的提高自己的问题,这时候就有人跳出来说“看源码”。我完全不否认看源码的作用——实际上我觉得看源码是质变的一种方式——但是,提升不仅仅只有看源码一条路,实际上当基础不牢的时候看源码是完全看不懂的。所以要根据自身情况,在不同的阶段选择不同的策略。

3.2.1 明确自身定位

这一块我觉得是最重要的。在我们开始学习、工作之前,或者是学习、工作了一段时间之后,审视自己,确定自己的层次,给自己制定一个合适的提升策略才是关键。明确定位应该不断的被提起,通过对业界,对自己的反思,才能理清自己进步和努力的方向。

3.2.2 培养技术品味

当理清了自身的定位时,如何前进,向哪里前进就成了另外一个问题。自己是很难形成技术品味的,要有更多的输入,包括但不限于上文的阅读源码和博客,才能形成自己的技术品味,也从而知道自己该前进的方向。

3.2.3 巩固基础,解决问题

认真对待自己遇到的每一个问题,从不轻易放过,尝试结合原理从自己的理解去解释问题。每解决一个问题,就是对原理的又一次深入理解。几次三番之后,即使遇到自己没有遇到过的问题,也可以举一反三,事半功倍。

这个部分和第二步是不分先后的,二者交替进行。

3.2.4 多写博客,多做总结

我之前经常会遇到感觉自己已经完全弄清楚了某件事情,但是过了一段时间,再去看的时候又忘记了。这有两个原因:

  • 之前理解的并不深入,如果自己深究,还是有不理解的地方
  • 记忆确实遗忘了

解决这个的方法就是多做总结。总结的过程也是一个反思的过程,这时候更能清晰的梳理自己的思路,然后把自己的闪光点记录下来。从而达到深入理解和备忘的两个功效。

如果是坚持不下来可以找个朋友采用对赌方案,每次不写就扣个几百块,我自身的亲身体验,有奇效……另外,因为隔一段时间就要写博客,也促使自己一直在留意和反思日常的工作,简直一举两得。

3.2.5 以点带面,跨界突破

这一块我也是单纯有个想法。我遇到的大牛,不仅对自己的领域非常了解,对其他的领域也有所认知。这是一种深层次的帮助——通过理解别的领域的方案,从而反哺自身。所以学习其他的语言,研究其他开发的理念,对前端的开发都是有帮助的。

以上这五点要是都能做到,不说成为大神,养家糊口、自信爆棚应该还是可以期望的。

4. 总结

前端开发正当其时,但是也要居安思危,提升自身的技术,既不作之前的切图狗,也不作现在的使用组件仔。打牢基础,扩宽视野,才是正道。

听说你懂个J?——前端发展闲聊的更多相关文章

  1. Web前端发展简史

    Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...

  2. front-end 前端发展学习路线参考图

    front-end 前端发展学习路线参考图 学习的路程还很长~!

  3. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  4. 秒懂Vuejs、Angular、React原理和前端发展历史

    「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道现在流行的框架:Vue.Js.AngularJs.ReactJs,已经逐渐应用到各个项目和实际应用中,它们都是MVVM ...

  5. 前端发展态势 && 前端工作流程个人浅析

    于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...

  6. 浅析js前端发展及mvvm的选型

    最近终于下定决心学点前端的东西,然而各种框架,让人眼花缭乱. 先总结一下js前端的发展史 1.刀耕火种,原始时代 这个时候用DOM原生API来操html元素,估计getElementBy之类的函数满天 ...

  7. web前端的发展态势

     以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以 ...

  8. web前端的发展态势 浅识

    以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以写 ...

  9. 一文读懂前端技术演进:盘点Web前端20年的技术变迁史

    本文原文由作者“司徒正美”发布于公众号“前端你别闹”,即时通讯网收录时有改动,感谢原作者的分享. 1.引言 1990 年,第一个Web浏览器的诞生:1991 年,WWW诞生,这标志着前端技术的开始. ...

随机推荐

  1. Fedora 26 安装搜狗拼音输入法 sogoupinyin

    Fcitx 官方 wiki Fcitx GitHub Arch wiki 上关于 Fcitx 的资料 故障排除可以参考这里 Fedora 中文社区 Fedora 中文社区软件源 Fcitx (Flex ...

  2. ucenter 验证码看不到的解决办法

    ucenter 验证码看不到的解决办法,很简单,很实用,本人亲试成功~http://www.jinyuanbao.cn 把images /fonts /en 的ttf 刪除可以了!

  3. java数组,遍历数组

    数组:一组具有相同数据类型的集合(容器) 1.数组声明格式: 数据类型 [] 数组名 = new 数据类型[长度]: 数组长度一旦确定无法更改. 数组里的数据必须是相同类型或自动向上转型后兼容的类型 ...

  4. JS基础(下)

    事件DOM Event 更多事件请查询h3c  htmldom参考手册  event onclick() :当点击时 onfocus() :获得焦点时 :当点击某个区域时触发,如点击输入框 onblu ...

  5. Codeforces 1197 E (dp+sort+二分) (Rust)

    原题链接 2300分 大意 俄罗斯套娃,每个有内容半径in和外围半径out in_i<out_i 如果 in_i >= out_j ,那么j可以放在i内 定义残留空间 = 一列嵌套的套娃 ...

  6. jQury+Ajax与C#后台交换数据

    -------------------------------------------jQury+Ajax调用后台方法----------------------------------------- ...

  7. Learning OSG programing---osgShape

    本例示范了osg中Shape ---- 基本几何元素的绘制过程.参照osg官方文档,Shape 类包含以下子类: 在示例程序中,函数createShapes函数用于生成需要绘制的几何形状. osg:: ...

  8. JAVA线程同步通信

    以下讲解Lock线程同步通信,也是比synchronized强大的一个功能点 先看一个常规的案例: 用户类 public class Person { public void eat(){ for(i ...

  9. python:while循环语句及练习题

    while循环语句及练习题 Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.其基本形式为: while 判断条件: 执行语句... ...

  10. Oracle 汉字占用字节数

    在oracle中一个字符特别是中文字符占几个字节是与字符集有关的.      比如GBK,汉字就会占两个字节,英文1个:如果是UTF-8,汉字一般占3个字节,英文还是1个.但是一般情况下,我们都认为是 ...