【深度漫谈】前端的过去,现在和未来(上)

公众号|沐洒(ID:musama2018)     关注我,带你学点有用的

以史为镜,可以知兴替。想精准预测前端未来的走势,就必须了解前端的过去。


「前端」这个名字,从诞生之初就给自己框定了一个显而易见的职责范围,就是为了解决 UIUX 的一系列问题设定的。

UI:User Interface,围绕用户界面做的一系列视觉设计

UX:User Experience,围绕用户体验做的一系列交互设计

业界很早之前其实有一个细分的工种,叫做UI工程师,或者叫CSS工程师,当然最响当当的叫法还是「切图仔」。

切图仔的日常……啊不是,UI工程师的日常工作,就是根据设计师的UI稿(PSD,Sketch等),用HTM和CSS一比一精确还原出来,并且适配各种奇奇怪怪的浏览器,以及高中低端用户设备。

图片

所以那个阶段,前端论坛的技术文章,几乎都是围绕着「如何尽可能精准的在尽可能多的设备上还原出设计稿」这个命题来进行的。

当然了,也不是所有公司都这么细分的,至少我待过的阿里和百度的团队就不是。

那时的前端工程师也是需要写一些逻辑的,只不过逻辑也分交互逻辑,和业务逻辑,前端多半只管前者。

后来呀,随着HTML5和CSS3的兴起,前端们开始乐不思蜀的玩起各种有趣又高级的动效,并且在Ajax技术的加持下,SPA开始大行其道,前端正式进入所谓的Web2.0时代。

SPA(Single-Page Application):单页应用

image.png

(单页应用 VS 传统页面)

可以负责任的说,从进入SPA时代的那天起,前端才真正意义上有了行业地位和尊严,再也不是一个在后端面前唯唯诺诺,言听计从的小跟班了。

为什么这么说?

因为在Web1.0时代,接到一个需求后,前端“小跟班”们是没有资格和立场去左右业务形态的。

前有设计师,跟产品经理手勾手的讨论产品形态,风格样式,输出N版UI图之后定稿,就再也不允许变更设计图了。

后有后端工程师,跟产品经理背靠背的讨论产品逻辑,业务流程,反复拉扯N版需求之后定稿,就再也不允许变更需求了。

只有前端这个“小趴菜”,夹在中间,一丝不苟的还原出设计师的意图,然后把拼好的HTML和CSS代码交给后端开发,由他们去转写对应的「动态语言」(PHP,JSP等),全程没有一丁点自由发挥的空间。

image.png

当然了,这期间,也有不少大佬不甘于当个默默无闻的“复印机”,就会主动跟后端要求分担一部分工作,于是划时代的「MVC架构」横空出世!

MVC:Model-View-Controller,模型-视图-控制器,是一种早期的分层开发模式。

前端开发们由此成功分到了一块“肉”——视图层(View),屁颠屁颠的跑回工位,开始埋头写模板代码。

一开始是直接上手写后端模板语言的,比如PHP的Smarty模板引擎。但这能有什么技术和业务上的创新和价值呢?并没有啊,无非就是前端多了一点工作量罢了。

这怎么能行呢?不搞点轮子出来,怎么去跟老板证明我堂堂前端的价值?拿什么去晋升答辩呢?

于是,依然还是这群不甘心的大佬,埋头造出了前端自己的模板引擎,如juicer,ejs,artTemplate啥的,「前后端分离」模式从此刻开始就算有了雏形。

你看,这就是我为什么说,在SPA到来之前,前端仅仅是个没有行业地位的小跟班了。SPA模式真真切切的改变了互联网产品形态,当然最重要的,还是改变了前端的地位,“小跟班”们从此「当家作主」站起来了!

image.png

伴随着搭载有Webkit,Gecko等内核的现代浏览器(Chrome,Firefox等)的普及,以及iPhone为首的智能手机的热销,以SPA为载体的Web2.0 轰轰烈烈的登场了。

这一仗,前端赢了,从后端工程师手里,夺下了View的「城池」(剧透,后来的后来,继续一步步蚕食剩下的疆土)。

Web2.0给消费者市场带来的是前所未有的畅快,诸如「无刷新体验」,「动效设计」,「H5」等新名词纷纷出现在互联网人的口中。

另一方面,繁杂的浏览器内核碎片化的移动端设备,给前端技术带来了巨大的挑战,跨端适配,多浏览器兼容等技术方案纷纷亮相,催生出巨大的就业机会。

前端工程师,便顺理成章的成为了当时的“抢手货”,红极一时。

毫不夸张的说,也就是在那几年,前端界如同雨后春笋一般,遍地长出各个细分领域的「真大佬」(和现在烂大街的前端网红不是一个level),带领着前端小弟们,塑造了一个百花齐放的黄金年代。

还记得我们一开始提到的「切图仔」吗?曾经在这个细分领域上,UI工程师们练就一身本领,除了像素眼,还有各种高超的图片处理技术(切图压缩兼容),比如:

  • 如何在保证不破坏透明通道的前提下,压缩巨大的png图片?
  • IE6不支持图片Alpha通道的前提下,如何展示透明图片?
  • 如何通过制作特殊的位图「点9图」,来实现矢量图才能做的自由拉伸效果?

这只是UI工程师各种奇技淫巧的冰山一角,也是面试时候必问的老「八股」。掌握了最全兼容处理手段的UI工程师,就能以行业大佬的姿态傲视群雄。

不过好景不长。

随着3G信号迅速升级为4G,光纤通信带来了百兆千兆带宽,以及IE浏览器的全面退出江湖,UI工程师的职业生涯也就到头了(此处的判断逻辑详见《下篇》),转型迫在眉睫。

2018年,我所在的腾讯某部门前端组,正式从设计中心撤出,分派到各大业务团队中去,具有腾讯特色的UI开发岗彻底消亡。

当然,这只是行业当时的一个小小缩影,2018并不是一个严格的时间线,但我有理由相信,整个行业的洗牌,也就在那前后两三年的时间罢了。

那后来呢?这些「切图仔」的命运如何?他们都去干了啥?

且请下回分解。


欢迎追更这个《深度漫谈》系列,由于篇幅较长,我将全文划分为“上中下”三篇分开发布,分别聊了前端的过去,现在和未来。

预告一下,在《中篇》中,我深入分析和解答了「切图仔」的几条去路,让你对前端行业现状有一个充分的了解。而在《下篇》中,我将带你使用「第一性原理」,从事务本质出发,去探索前端工程师的未来

敬请期待。


技术交流群   

我建了个前端技术交流群,整体氛围非常好,每天大家都会在群里真诚的交流技术问题,从前端到全栈,从尚未毕业的小年轻,到不惑之年的老大哥,大家都在拼命的汲取知识!

有想要交流&学习前端知识的老少朋友,欢迎加入我们!

进群方式

关注公众号 “沐洒”,回复“技术群”,获取最新群聊二维码。


如果还想继续看我写的东西,就关注我吧(记得加星标?哦),顺便给个赞?或点一下 在看  ,你的支持是我继续写下去的动力。

公众号|沐洒(ID:musama2018)     关注我,带你学点有用的

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYMcDYEi' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片