割裂的前端工程师:预测前端的2017

有一天,我们组内的一个小伙伴突然问我,你知道有一个叫重构工程师的岗位?这是干什么的?(知乎上有关于重构工程师讨论https://www.zhihu.com/question/19597859)

这个问题引发了我对前端领域发展的思考,所以我来梳理下前端领域的发展过程,顺便小小地预测下2017年的趋势。

神说,要有光,就有了光

自1991年蒂姆·伯纳斯-李公开提及HTML描述,到1999年W3C发布HTML4期间,写网页是为了更好地交流彼此的想法,是为了能够维护自己的网页。

这个时期,各路大神也是八仙过海各显神通,甚至发明了PHP(这个世界最好的语言)。这时并没有一个所谓的前端开发岗位,大家都是软件工程师

当然这个时代也是神人辈出的时代,太多现在互联网或者说整个IT行业的概念和雏形在这个时期形成。Google网站正式启用,个人PC开始慢慢普及。

神称空气为天

O'Reilly Media、Battelle和MediaLive在2004年10月引导了第一个Web 2.0大会,Web 2.0时代开启。

Blog、Wiki、RSS等各种个人网站开始进入大家的视野。同时,豆瓣、天涯这些符合2.0时代的产物开始在国内大行其道。我们有了第一波注重Web前端的软件开发师。

同一时刻,美国诞生了FaceBook具有跨时代的产物。2005年,校内网出现,前端们开始活跃起来。2006年8月,jQuery的第一个版本发布。

神称旱地为地,称水的聚处为海

之后的几年间,前端基本都是围绕着各种类库如Mootools、Underscored、Prototype、Dojo,jQuery ,YUI开发页面。各大类库也是相互吸收优点,不断完善自身,但是本质没有太多变化

与此同时,在我们看不到的背后,浏览器第二次大战打响,V8引擎开始大放异彩,Web标准也在推动ECMAScript 5.0进化着。Node发布了,意味着我们前端的领域扩大了,伸手到服务端了。

智能手机开始普及,移动端大浪潮流势不可挡,Web前端们开始为了移动端开发各种类库了Sencha Touch,Zepto.js,jQuery Mobile,HTML5概念火热了起来,各种网页小游戏层出不穷,和Flash的争斗也到了水火不容的地步,Twitter 也推出了 Bootstrap这个引领风骚的CSS工具包。

随着系统硬件的提升,V8引擎性能的提升,整个网页的性能极大提高,大家开始纷纷开发出复杂的Web页面来,这种需求开始催生了前端们对开发的工程化思考,首当其冲的就是模块化加载的问题,AMD、CMD、UMD 登上舞台,起衍生的产物SeaJS,RequireJS开始划分地盘。

这个时代还是服务端渲染为王的时代,包括很多模块或者组件上的拼接都是在服务端完成的,但同时也开启jQuery + RequireJS + Template开发复杂页面的模式。(这个时间段,出现了重构工程师和JS工程师的划分。)

管理昼夜,分别明暗

2012年之后,随着W3C规范和标准进一步推动,大家对Web页面复杂度进一步的加剧,人们不再满足于jQuery面条式的开发,出现了许多用于简化客户端开发的框架。例如Backbone、Ember、AngularJS、Vue、Alavon、Knockout、React等,各种各样的MV*框架。

这是一个群雄割据的时代,如此多的框架涌出,每个开发者根据自己的喜好、业务的需求来选择不同框架,进而完成目标。

Node.js开始崛起,Express、Koa框架开始使用到各种生产项目中。PM2的服务管理,为企业解决了监控和稳定问题。同时,阿里开始探索NodeJS中间层的开发道路,连续发声,提供前后端分离解决方案。

神说,水要多多滋生有生命的物

微信这个社交庞然大物已然崛起,微信公众号的玩法,让前端岗位开始火热了起来,也开始带来了Web和Native的争端。

15年,Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,一举将React推上了一个新的高度,learn once ,write everywhere。这一年是属于React的年份。

同时,构建工具也在不停的迭代,Grunt的辉煌已去,Gulp并未在王座上久呆,Webpack的风暴就席卷而来。

16年,Webpack已经成为了前端打包构建的主流,Vue强势崛起,Ng2完成发布。前端在主流开发上基本形成了三国时代(React、Vue、Ng)。与此同时,移动端也形成了以混合开发为主的方式,Native嵌入WebView页面。

神就照着自己形象造人——细分或者割裂

上面回忆了一下前端大概的发展历程,下面来说说自己对17年前端发展的一些预测。

随着业务的不同,每个团队在前端技术点开始有所分化:

重型SPA页面

Hybrid方式的Web页面

活动页面

游戏等其他

重型SPA页面 —— Teambition

重型的SPA页面,业务功能极其复杂,使用Vue,React,Angular这种MVVM的框架后,在开发过程中,组件必然越来越多,父子组件之间的通信,子组件之间的通信频率都会大大增加。如何管理这些组件之间的数据流动就会成为这类WebApp的最大难点。

从页面的加载来说,SPA可以依靠首次加载的Loading动画,来掩盖一些页面加载性能的问题(TB我这里加载一般在5S左右),很多懒加载和延迟加载之类的也是不需要做。因为相关的数据后面都需要用到,也就不存在是否会使用的问题。

从最近Rx.js的star数,我们也能看出来,大家也越来越关心数据管理的问题,本地的数据管理只是一个方面,还会涉及到多个用户数据同步的问题,也就是服务端和客户端数据同步问题,如和及时正确的同步数据。

及时正确同步数据这个概念指的是: 多人操作一个任务时,两个人都在修改一个任务时,容易造成数据覆盖。A刚修改完,B过几秒也修改了,因为同步不及时,B不知道A修改了,结果B新修改的数据覆盖了A的修改。所以想要减少类似的错误,就必须要能保证及时正确的同步数据。

既然数据和请求如此多,那么就肯定要利用好本地的缓存和各种存储了,LocalStorage,SessionStorage的都会使用上。

如此多的业务和组件,必然对内存上会造成压力,如何管理好内存也是一门学问。

相关的可以看徐飞的文章https://github.com/xufei/blog/issues/35。

Hybrid方式的Web页面 —— 现在大多数App的主流

Hybrid方式的开发目前还是移动端的主流,这种Web页面的特点是业务并不复杂,大多是展示信息为主,再加上一些操作按钮,需要解决的问题,在于很多时候要和Native来通信,而且Android的WebView有各种各样的国产厂商问题也是很难以解决,这方面微信做的不错,直接搞了一个自己的浏览器来统一底层的支持。

对于jsbridge的实现,各个公司有不同的实现方案,主要还是要看Native的开发怎么来定义bridge的方案,以我自己开发的经验来看,有这么几个点需要解决:

用户验证问题,怎么来确认Native的用户身份,是用原来Web网站常用的session还是使用Native比较常用的token,但是不管用哪种,都需要Native帮忙来注入标识。

AJAXAJAX请求问题,如果使用一个URL的形式来嵌入,可以独自发送AJAX请求没有任何问题,但是如果使用HTML文本,直接WebView渲染的方式,就类似PC上,文件夹打开HTML文件一样,AJAX请求发送不出去,需要Native帮忙做bridge来调用。

沟通成本问题,因为和原来PC端相比,多了参与方,所以排查问题就更加麻烦了,这个还是主要看整体App的架构怎么设计了。

性能问题,怎么说呢,不是每个App的开发人员都很厉害,那么如果Native的代码有问题,WebView出错的概率就会变高,比如Css3的动画,容易引起崩溃,内存占有率过高等等。

所以,对于这个方向的Web前端的开发人员来说,如果会Native开发的经验更加如鱼得水。

活动页面 —— 比如来自宇宙的邀请函

这类活动页面,主要就是设计和动画上效果炫酷,吸人眼球,震撼人心,基本出来一个精彩的活动页面,都能在朋友圈掀起一波浪潮。技术上以WebGL为主,一般使用Three.js,渲染canvas来展示各种动画和视觉效果。

这个方向的前端会更加关注,浏览器的兼容,性能,设计出来的效果,动画的流畅度,体验等等。主要兼容的微信的浏览器,因为要在朋友圈来营销,总体来说,会偏设计以及动画些。

游戏等其他 —— H5小游戏,数据可视化

当时风靡国内的各种H5小游戏,特别多,基本是用CreateJs(http://createjs.com/)来制作的多,接触不多,不多评论。

HTML5游戏引擎深度测评可以参阅//www.greatytc.com/p/0469cd7b1711。

随着大数据时代的来临,前端领域各种数据可视化的库也是层出不穷,D3,Highcharts,国内的Echarts都是这个领域的佼佼者。

切换领域

其实还有一个领域,就是通过Nodejs,学习服务端的各种知识,切换到服务端领域去。

未来

上面的我所提到的细分(或者说是割裂——比较有噱头),自我感觉,已经在慢慢展现出一些趋势了,不知道大家有木有感觉到,比如徐飞就会更加擅长TB这种重型业务流派,而手淘的人就会比较关注Hybrid的流派,甚至自己来搞Weex这种JS-Native开发的框架。当然大部分开发人员还是可能都会做,没有那么明显的倾向,但随着公司的业务的转变和公司重点资源的倾斜,很多开发人员还是会慢慢有所区分。

个人认为这种细分其实对我们前端更加有利的,第一,这表现出前端整个领域发展比较迅速,各方面都有参与到,没有和时代脱节。第二,有各种细分的领域,大家可以做到一专多精,不用害怕失业的烦恼。因为每一个方向都可以做的很深,动力很足。第三,利于交流,各种不同分支的人,可以拿出自己特长的技术来相互交流,取长补短,构建更加系统的知识网络。

(以上只是个人见解,如有雷同,只能说英雄所见略同)

地址:https://zhuanlan.zhihu.com/p/23858051。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容