前端工程化的个人思考

640?wx_fmt=jpeg

(题图:from  unsplash)

17年写过一篇文章《野蛮生长的前端,从杂牌军到正规军》,当时是为了解决前端代码缓存问题延伸出来的,写那篇文章时,前端我是个门外汉。近一个月又读了两本关于前端架构、实践指导的书,有必要再来总结一下,当然,我还是个门外汉,之于前端似乎没什么长劲,前端专业人士可略过。

在我的印象中,一提到软件工程,首先不会想到的是前端这一块,大概是因为以往工作偏向的缘故。这两年最大的感触就是前端发展的很快,时下的前端开发也远非从网络中抠一段jQuery代码就能搞定功能这么简单。

AJAX的出现第一次将前端的请求异步化,局部刷新使用户体验提升了一大截。NodeJS的出现则将前端的发展推向了高潮,一大批基于V8引擎、基于NodeJS之上的开发工具脱颖而出,极速的提升前端开发的效率、效果。

下面从几个方面,来梳理下近阶段关于前端的一些思考,仅供参考,欢迎在留言区讨论。

前端工程师岗位

但凡有点规模的团队,前后端分离开发是必然的。前端开发岗们之前多是由后端开发人兼职,由网页制作人员将静态效果制作完后,交由后端开发人员将动态功嵌入进去。现在这么做的团队也有,当然这样效率不是最高的。前端工程师独立岗位的出现,将前端工程化带近了一步。这一部分专职从事前端开发,而无须再关心后端数据如何组装、如何处理、如何存储,将更大的精力投入到终端展现上面。

面向浏览器编程

(之前一直准备写篇文章叫“面向工资编程”)这个词确实是最近一个月才接触到新名词,被ie6折磨过的朋友相信很能体会背后的意味。各种浏览器终端的出现,且不少以未遵守JS/CSS规范的形式出现,导致开发终端展现时不得不考虑各种浏览器、浏览器的不同版本的兼容性。时至今日,前端技术的发展亦足以解决这个问题。Babel的产生,编程时只关注语言即可,在构建时,由其产生低版本JS以满足低版本的兼容性。PostCSS的面世,也使CSS开发时无须担心多版本、多种类浏览器的兼容性,好消息时,各家浏览器也在积极的向规范、向标准靠拢,以使终端展现能够更加一致。

开发效率

一大批时下优秀的JS开发框架、脚手架,将JS开发提高到了前所未有的高度,用纯jQuery的朋友都少了吧,开始转向Vue、React、ng2的怀抱了吧。Yoeman、Vue-cli等脚手架工具,可以让你轻松搭建一个前端项目。CSS预处理、预编译框架更是将这个弱编程的语言中加入了编程能力,less、sass已经在很多项目中采用。任务处理器更是极大的解放了人力,gulp、webpack几乎成了现代化前端开发的必备。本地化开发时,通过事件监听,直接热部署将结果呈现到终端,而无须在反复刷新页面、清缓存刷新页面。Mock的出现更是将前端开发与后端开发隔离,不再相互掣肘。

模块化组件化

提到工程化总离不开模块化,提到了模块化,似乎组件化也很有必要,这是个一环套一环的依赖。但实施起来亦是相当不易,特别是有期限项目性工程,交付第一,交付结束如无后续升级,基本不会进行模块化组件化优化。产品化项目比较适用,随着功能迭代推进,模块化更有利于开发解耦,提高复用性,对后期维护也很友好。

Node的出现,使模块化更加简便,你会发现模块化项目中,require、import、export应用的如此频繁,CommonJS,AMD/CMD在ES6之前在模块化研发起着比较重要的作用。ES6中更是原生就支持模块化,(ECMAScript简称ES,JavaScript只是ES的一种实现方式)。


姑且先写到这里,续下一篇再继续展开。

粗浅的了解下来,前端的发展无容小觑,前端工程师独立岗位早已出现,特别是在目前大前端、大中后台的思潮下,前端架构师的岗位也相继出现,分工细化、研发工程化必然带来效率的提升,作为系统设计人员,了解前端实践并应用在实际研发中势在必行。

640?wx_fmt=png

扩展阅读:

640?wx_fmt=jpeg

长按2秒,识别二维码,关注我。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MavenTalk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值